@wix/headless-bookings 0.0.11 → 0.0.13

package/dist/react/core/booking/Booking.js

@@ -28,9 +28,9 @@ export function Root(props) {
  * @example
  * ```tsx
  * <Booking.Data>
- *   {({ selectedServices }) => (
- *     selectedServices.length > 0 ? (
- *       <div>{selectedServices.map(s => s.service.name).join(', ')}</div>
+ *   {({ bookingSelections }) => (
+ *     bookingSelections.length > 0 ? (
+ *       <div>{bookingSelections.map(s => s.service.name).join(', ')}</div>
  *     ) : (
  *       <div>No services selected</div>
  *     )
@@ -41,10 +41,10 @@ export function Root(props) {
 export function Data(props) {
     const { children } = props;
     const bookingService = useService(BookingServiceDefinition);
-    const selectedServices = bookingService.services.get();
+    const bookingSelections = bookingService.bookingSelections.get();
     const selectedTimeSlot = bookingService.timeSlot.get();
     return children({
-        selectedServices,
+        bookingSelections,
         selectedTimeSlot,
     });
 }

package/dist/react/core/location/Location.d.ts

@@ -4,7 +4,7 @@
  * Converts location data to Address component format
  */
 import React from 'react';
-import { services } from '@wix/bookings';
+import { LocationType, type Service } from '@wix/auto_sdk_bookings_services';
 import type { AddressData as AddressDataType } from '@wix/headless-components/react';
 /**
  * Re-export AddressData type from Address component for convenience
@@ -14,14 +14,14 @@ export type AddressData = AddressDataType;
  * Location render props passed to children
  */
 export interface LocationRenderProps {
-    locationType: services.LocationType;
+    locationType: LocationType;
     address: AddressData | null;
 }
 /**
  * Props for the core Location component
  */
 export interface LocationProps {
-    location: NonNullable<services.Service['locations']>[number];
+    location: NonNullable<Service['locations']>[number];
     children: (props: LocationRenderProps) => React.ReactNode;
 }
 /**

package/dist/react/core/location/Location.js

@@ -3,13 +3,13 @@
  * Handles business, custom, and customer location types
  * Converts location data to Address component format
  */
-import { services } from '@wix/bookings';
+import { LocationType } from '@wix/auto_sdk_bookings_services';
 /**
  * Parses location data into Address component format
  */
 function parseLocationAddress(location, locationType) {
     // Handle customer location specially
-    if (locationType === services.LocationType.CUSTOMER) {
+    if (locationType === LocationType.CUSTOMER) {
         // For customer location, return an AddressData object with Customer's Place
         return {
             address: {

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

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { type ServiceServiceConfig } from '../../../services/service/service.js';
-import { services } from '@wix/bookings';
+import type { Service, Payment, BookingPolicy, Schedule } from '@wix/auto_sdk_bookings_services';
 import type { MoneyData } from '@wix/headless-components/react';
 /**
  * Props for Service.Root component
@@ -22,7 +22,7 @@ export declare function Root(props: RootProps): React.ReactNode;
  */
 export interface ServiceProps {
     children: (data: {
-        service: services.Service;
+        service: Service;
         isLoading: boolean;
         error: string | null;
     }) => React.ReactNode;
@@ -55,7 +55,7 @@ export interface InfoProps {
             name?: string;
             _id?: string;
         };
-        locations?: Array<NonNullable<services.Service['locations']>[number]>;
+        locations?: Array<NonNullable<Service['locations']>[number]>;
         staff?: Array<{
             name?: string;
             _id?: string;
@@ -110,8 +110,8 @@ export declare function Info(props: InfoProps): React.ReactNode;
  */
 export interface PriceProps {
     children: (data: {
-        servicePayment: services.Payment | undefined;
-        rateType: services.Payment['rateType'] | undefined;
+        servicePayment: Payment | undefined;
+        rateType: Payment['rateType'] | undefined;
         money: MoneyData | null;
         minPrice: MoneyData | null;
         maxPrice: MoneyData | null;
@@ -151,7 +151,7 @@ export interface ActionsProps {
         select: () => void;
         add: () => void;
         remove: () => void;
-        rawService: services.Service;
+        rawService: Service;
         bookable: boolean;
         selected: boolean;
         requiresAvailability: boolean;
@@ -180,7 +180,7 @@ export declare function Actions(props: ActionsProps): React.ReactNode;
  */
 export interface PolicyProps {
     children: (data: {
-        bookingPolicy: services.BookingPolicy | null;
+        bookingPolicy: BookingPolicy | null;
         cancellationPolicyEnabled: boolean;
         limitLatestCancellationEnabled: boolean;
         latestCancellationInMinutes: number | undefined;
@@ -219,7 +219,7 @@ export declare function Policy(props: PolicyProps): React.ReactNode;
  */
 export interface ScheduleProps {
     children: (data: {
-        schedule: services.Schedule | null;
+        schedule: Schedule | null;
         isClassOrCourse: boolean;
     }) => React.ReactNode;
 }

package/dist/react/core/service-list/ServiceList.d.ts

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { type ServiceListServiceConfig, type QueryOptions } from '../../../services/service-list/service-list.js';
-import type { services } from '@wix/bookings';
+import type { Service } from '@wix/auto_sdk_bookings_services';
 import type { PagingMetadata } from '../../../api/query-services/index.js';
 /**
  * Props for ServiceList.Root component
@@ -37,7 +37,7 @@ export interface ServicesProps {
  */
 export interface ServicesRenderProps {
     /** Array of services */
-    services: services.Service[];
+    services: Service[];
     /** Whether services are currently loading */
     isLoading: boolean;
     /** Error message, or null if no error */

package/dist/react/location/Location.d.ts

@@ -5,7 +5,7 @@
 import React from 'react';
 import * as CoreLocation from '../core/location/Location.js';
 import { AsChildChildren } from '@wix/headless-utils/react';
-import type { services } from '@wix/bookings';
+import { LocationType, type Service } from '@wix/auto_sdk_bookings_services';
 /**
  * Re-export AddressData type from core for convenience
  */
@@ -14,10 +14,10 @@ export type { AddressData } from '../core/location/Location.js';
  * Props for Location.Root component
  */
 export interface LocationRootProps {
-    location: NonNullable<services.Service['locations']>[number];
+    location: NonNullable<Service['locations']>[number];
     asChild?: boolean;
     children?: React.ReactNode | AsChildChildren<{
-        locationType: services.LocationType;
+        locationType: LocationType;
         address: CoreLocation.AddressData | null;
     }>;
     className?: string;

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

@@ -5,7 +5,7 @@
 import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import { MoneyData } from '@wix/headless-components/react';
-import { services } from '@wix/bookings';
+import { type Service, type Payment } from '@wix/auto_sdk_bookings_services';
 /**
  * Props for Service.Root component
  */
@@ -14,7 +14,7 @@ export interface ServiceRootProps {
         selected: boolean;
         bookable: boolean;
     }>;
-    service: services.Service;
+    service: Service;
     appId?: string;
     asChild?: boolean;
     className?: string;
@@ -106,8 +106,8 @@ export declare const Description: React.ForwardRefExoticComponent<DescriptionPro
 export interface PriceProps {
     asChild?: boolean;
     children?: AsChildChildren<{
-        servicePayment: services.Payment | undefined;
-        rateType: services.Payment['rateType'] | undefined;
+        servicePayment: Payment | undefined;
+        rateType: Payment['rateType'] | undefined;
         money: MoneyData | null;
         minPrice: MoneyData | null;
         maxPrice: MoneyData | null;
@@ -327,7 +327,7 @@ export declare const Category: React.ForwardRefExoticComponent<CategoryProps & R
 /**
  * Type for location
  */
-type LocationType = NonNullable<services.Service['locations']>[number] & {
+type LocationType = NonNullable<Service['locations']>[number] & {
     id: string;
 };
 /**
@@ -717,7 +717,7 @@ export declare const MediaItems: React.ForwardRefExoticComponent<MediaItemsProps
 export interface RawProps {
     asChild?: boolean;
     children?: AsChildChildren<{
-        service: services.Service;
+        service: Service;
         isLoading: boolean;
         error: string | null;
     }>;
@@ -755,7 +755,7 @@ export declare namespace Actions {
             selected: boolean;
             requiresAvailability: boolean;
             onClick: () => void;
-            service: services.Service;
+            service: Service;
         }) => React.ReactNode);
         className?: string;
         label?: string;
@@ -795,7 +795,7 @@ export declare namespace Actions {
             selected: boolean;
             requiresAvailability: boolean;
             onClick: () => void;
-            service: services.Service;
+            service: Service;
         }) => React.ReactNode);
         className?: string;
         label?: string;
@@ -835,7 +835,7 @@ export declare namespace Actions {
             selected: boolean;
             requiresAvailability: boolean;
             onClick: () => void;
-            service: services.Service;
+            service: Service;
         }) => React.ReactNode);
         className?: string;
         label?: string;

package/dist/react/service/Service.js

@@ -9,7 +9,7 @@ import { AsChildSlot } from '@wix/headless-utils/react';
 import { Money, GenericList } from '@wix/headless-components/react';
 import { WixMediaImage } from '@wix/headless-media/react';
 import { MediaGallery } from '@wix/headless-media/react';
-import { services } from '@wix/bookings';
+import { RateType, } from '@wix/auto_sdk_bookings_services';
 import * as Location from '../location/Location.js';
 var TestIds;
 (function (TestIds) {
@@ -160,17 +160,17 @@ export const Price = React.forwardRef((props, ref) => {
             // Default rendering based on rate type
             const renderDefaultPrice = () => {
                 switch (rateType) {
-                    case services.RateType.FIXED:
+                    case RateType.FIXED:
                         return money ? (_jsx(Money, { money: money, className: className })) : null;
-                    case services.RateType.VARIED:
+                    case RateType.VARIED:
                         if (minPrice && maxPrice) {
                             return (_jsxs("span", { className: className, "data-testid": TestIds.servicePrice, children: [_jsx(Money, { money: minPrice }), " - ", _jsx(Money, { money: maxPrice })] }));
                         }
                         // Fallback to defaultPrice if min/max not available
                         return money ? (_jsx(Money, { money: money, className: className })) : null;
-                    case services.RateType.CUSTOM:
+                    case RateType.CUSTOM:
                         return priceDescription ? (_jsx("span", { className: className, "data-testid": TestIds.servicePrice, children: priceDescription })) : null;
-                    case services.RateType.NO_FEE:
+                    case RateType.NO_FEE:
                         return money ? (_jsx(Money, { money: money, className: className })) : null;
                     default:
                         // UNKNOWN_RATE_TYPE or undefined

package/dist/react/service-list/ServiceList.d.ts

@@ -6,7 +6,7 @@ import React from 'react';
 import { ListVariant, GenericListLoadMoreRenderProps } from '@wix/headless-components/react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import type { ServiceListServiceConfig } from '../../services/service-list/service-list.js';
-import type { services } from '@wix/bookings';
+import type { Service as ServiceType } from '@wix/auto_sdk_bookings_services';
 /**
  * Props for the ServiceList root component
  */
@@ -79,7 +79,7 @@ export type ServiceRootChildren = AsChildChildren<{
  * Supports both ReactNode and function children that receive { selected, bookable }
  */
 export interface ServiceItemWrapperProps {
-    item: services.Service;
+    item: ServiceType;
     index?: number;
     /** Children can be ReactNode or a function that receives { selected, bookable } from Service.Root */
     children: React.ReactNode | ServiceRootChildren;
@@ -89,7 +89,7 @@ export interface ServiceItemWrapperProps {
  * Provides items array and itemWrapper function for custom rendering
  */
 export interface ServiceRepeaterRenderProps {
-    items: services.Service[];
+    items: ServiceType[];
     variant?: ListVariant;
     /** Wraps each item in Service.Root - children can be ReactNode or function receiving { selected, bookable } */
     itemWrapper: (props: ServiceItemWrapperProps) => React.ReactNode;

package/dist/services/booking/booking.d.ts

@@ -4,15 +4,20 @@
  * Persists across page navigation in SPA until page refresh
  */
 import { type Signal } from '@wix/services-definitions/core-services/signals';
-import type { services, availabilityTimeSlots } from '@wix/bookings';
+import type { Service } from '@wix/auto_sdk_bookings_services';
+import type { TimeSlot, Resource, NestedTimeSlot } from '@wix/auto_sdk_bookings_availability-time-slots';
 import type { FormValues } from '@wix/form-public';
 /**
- * ServiceSelection contains the service AND its related selections
+ * BookingSelection contains the service AND its related selections
  */
-export interface ServiceSelection {
-    service: services.Service;
+export interface BookingSelection {
+    /** Unique identifier for this booking instance (allows same service multiple times) */
+    instanceId: string;
+    service: Service;
     /** Selected resources (staff members, rooms, etc.) */
-    resources?: availabilityTimeSlots.Resource[];
+    staff?: Resource;
+    /** Per-service slot data from nested slots (for multi-service bookings) */
+    nestedSlotData?: NestedTimeSlot;
 }
 export interface Location {
     id: string;
@@ -22,12 +27,16 @@ export interface Location {
  * BookingService actions - setters only, no API calls
  */
 export interface BookingServiceActions {
-    setServices(services: ServiceSelection[]): void;
-    addService(service: ServiceSelection): void;
-    updateService(serviceId: string, updates: Partial<ServiceSelection>): void;
-    removeService(serviceId: string): void;
+    /** Clears all booking selections and sets a single service (instanceId is auto-generated) */
+    setService(service: Omit<BookingSelection, 'instanceId'>): string;
+    /** Adds a service and returns the generated instanceId */
+    addService(service: Omit<BookingSelection, 'instanceId'>): string;
+    /** Updates a booking selection. If no instanceId provided, updates the first selection. */
+    updateBookingSelection(updates: Partial<Omit<BookingSelection, 'instanceId'>>, instanceId?: string): void;
+    /** Removes a booking selection. If no instanceId provided, removes the first selection. */
+    removeBookingSelection(instanceId?: string): void;
     clearServices(): void;
-    setTimeSlot(slot: availabilityTimeSlots.TimeSlot | null): void;
+    setTimeSlot(slot: TimeSlot | null): void;
     clearTimeSlot(): void;
     setLocation(location: Location | null): void;
     clearLocation(): void;
@@ -40,10 +49,10 @@ export interface BookingServiceActions {
  * Pure state management - no API calls
  */
 export interface BookingService {
-    /** Signal containing the currently selected services with their selections */
-    services: Signal<ServiceSelection[]>;
+    /** Signal containing the booking selections (services with their related data) */
+    bookingSelections: Signal<BookingSelection[]>;
     /** Signal containing the currently selected time slot */
-    timeSlot: Signal<availabilityTimeSlots.TimeSlot | null>;
+    timeSlot: Signal<TimeSlot | null>;
     /** Signal containing the selected location (derived from timeSlot) */
     location: Signal<Location | null>;
     /** Signal containing the form values */
@@ -64,10 +73,10 @@ export declare const BookingServiceDefinition: string & {
  * Note: location is NOT in config - it's derived internally from timeSlot
  */
 export interface BookingServiceConfig {
-    /** Optional initial services to pre-populate */
-    initialServices?: ServiceSelection[];
+    /** Optional initial booking selections to pre-populate */
+    initialBookingSelections?: BookingSelection[];
     /** Optional initial time slot to pre-populate */
-    initialTimeSlot?: availabilityTimeSlots.TimeSlot | null;
+    initialTimeSlot?: TimeSlot | null;
     /** Optional initial form values */
     initialFormValues?: FormValues | null;
 }

package/dist/services/booking/booking.js

@@ -5,6 +5,15 @@
  */
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
+// ============================================================================
+// Types
+// ============================================================================
+/**
+ * Generates a unique instance ID for service selections
+ */
+function generateInstanceId() {
+    return crypto.randomUUID();
+}
 /**
  * Service definition for Booking
  */
@@ -39,7 +48,12 @@ export const BookingServiceDefinition = defineService('booking');
 export const BookingService = implementService.withConfig()(BookingServiceDefinition, ({ getService, config }) => {
     const signalsService = getService(SignalsServiceDefinition);
     // Initialize signals with config values
-    const servicesSignal = signalsService.signal(config.initialServices || []);
+    // Ensure all initial booking selections have instanceIds
+    const initialSelectionsWithIds = (config.initialBookingSelections || []).map((s) => ({
+        ...s,
+        instanceId: s.instanceId || generateInstanceId(),
+    }));
+    const bookingSelectionsSignal = signalsService.signal(initialSelectionsWithIds);
     const timeSlotSignal = signalsService.signal(config.initialTimeSlot || null);
     // Location is derived internally - initialize as null
     const locationSignal = signalsService.signal(null);
@@ -49,25 +63,45 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
     // ========================================================================
     const actions = {
         // Services actions
-        setServices(newServices) {
-            servicesSignal.set(newServices);
+        setService(service) {
+            const instanceId = generateInstanceId();
+            const newSelection = {
+                ...service,
+                instanceId,
+            };
+            bookingSelectionsSignal.set([newSelection]);
+            return instanceId;
         },
         addService(service) {
-            const current = servicesSignal.get();
-            servicesSignal.set([...current, service]);
+            const instanceId = generateInstanceId();
+            const current = bookingSelectionsSignal.get();
+            const newSelection = {
+                ...service,
+                instanceId,
+            };
+            bookingSelectionsSignal.set([...current, newSelection]);
+            return instanceId;
         },
-        updateService(serviceId, updates) {
-            const current = servicesSignal.get();
-            const updated = current.map((s) => s.service._id === serviceId ? { ...s, ...updates } : s);
-            servicesSignal.set(updated);
+        updateBookingSelection(updates, instanceId) {
+            const current = bookingSelectionsSignal.get();
+            // If no instanceId provided, update the first selection (index 0)
+            const targetId = instanceId ?? current[0]?.instanceId;
+            const updated = current.map((s) => s.instanceId === targetId ? { ...s, ...updates } : s);
+            bookingSelectionsSignal.set(updated);
         },
-        removeService(serviceId) {
-            const current = servicesSignal.get();
-            const filtered = current.filter((s) => s.service._id !== serviceId);
-            servicesSignal.set(filtered);
+        removeBookingSelection(instanceId) {
+            const current = bookingSelectionsSignal.get();
+            if (!instanceId) {
+                // Remove first selection if no instanceId provided
+                bookingSelectionsSignal.set(current.slice(1));
+            }
+            else {
+                const filtered = current.filter((s) => s.instanceId !== instanceId);
+                bookingSelectionsSignal.set(filtered);
+            }
         },
         clearServices() {
-            servicesSignal.set([]);
+            bookingSelectionsSignal.set([]);
         },
         // Time Slot actions
         setTimeSlot(slot) {
@@ -92,14 +126,14 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
         },
         // Clear all
         clearAll() {
-            servicesSignal.set([]);
+            bookingSelectionsSignal.set([]);
             timeSlotSignal.set(null);
             locationSignal.set(null);
             formValuesSignal.set(null);
         },
     };
     return {
-        services: servicesSignal,
+        bookingSelections: bookingSelectionsSignal,
         timeSlot: timeSlotSignal,
         location: locationSignal,
         formValues: formValuesSignal,

package/dist/services/index.d.ts

@@ -3,5 +3,6 @@
  * Main export file for all service definitions and implementations
  */
 export { ServiceService, ServiceServiceDefinition, type ServiceServiceAPI, type ServiceServiceConfig, type ServiceActions, type ServicePaymentData, loadServiceServiceInitialData, type SuccessServiceServiceConfigResult, type NotFoundServiceServiceConfigResult, } from './service/service.js';
-export { BookingService, BookingServiceDefinition, type BookingServiceConfig, type ServiceSelection, type Location, type BookingServiceActions, } from './booking/booking.js';
+export { BookingService, BookingServiceDefinition, type BookingServiceConfig, type BookingSelection, type Location, type BookingServiceActions, } from './booking/booking.js';
+export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeSlotListConfig, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type SlotSelection, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list/index.js';
 export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';

package/dist/services/index.js

@@ -4,4 +4,5 @@
  */
 export { ServiceService, ServiceServiceDefinition, loadServiceServiceInitialData, } from './service/service.js';
 export { BookingService, BookingServiceDefinition, } from './booking/booking.js';
+export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeSlotListConfig, } from './time-slot-list/index.js';
 export { ServiceListService, ServiceListServiceDefinition, loadServiceListServiceInitialData, } from './service-list/service-list.js';

package/dist/services/service/service.d.ts

@@ -3,7 +3,7 @@
  * Handles loading and managing a single service's data, loading state, and errors.
  */
 import { type Signal, type ReadOnlySignal } from '@wix/services-definitions/core-services/signals';
-import { services } from '@wix/bookings';
+import { type Service, type Payment } from '@wix/auto_sdk_bookings_services';
 import type { MoneyData } from '@wix/headless-components/react';
 /**
  * Actions object for service selection
@@ -23,9 +23,9 @@ export interface ServiceActions {
  */
 export interface ServicePaymentData {
     /** The service payment information from the service */
-    servicePayment: services.Payment | undefined;
+    servicePayment: Payment | undefined;
     /** The rate type of the service (FIXED, VARIED, CUSTOM, NO_FEE, etc.) */
-    rateType: services.Payment['rateType'] | undefined;
+    rateType: Payment['rateType'] | undefined;
     /** Primary price (used for FIXED or VARIED default) */
     money: MoneyData | null;
     /** Minimum price (used for VARIED) */
@@ -46,7 +46,7 @@ export interface ServicePaymentData {
  */
 export interface ServiceServiceAPI {
     /** Reactive signal containing the current service data */
-    serviceSignal: Signal<services.Service>;
+    serviceSignal: Signal<Service>;
     /** Reactive signal indicating if a service is currently being loaded */
     isLoadingSignal: Signal<boolean>;
     /** Reactive signal containing any error message, or null if no error */
@@ -83,7 +83,7 @@ export declare const ServiceServiceDefinition: string & {
  */
 export interface ServiceServiceConfig {
     /** The initial service data to configure the service with */
-    service?: services.Service;
+    service?: Service;
     /** The service ID to load if no initial service is provided */
     serviceId?: string;
     /** The service slug to load if no initial service is provided */

package/dist/services/service/service.js

@@ -4,9 +4,9 @@
  */
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
-import { services } from '@wix/bookings';
+import { ServiceType, RateType, } from '@wix/auto_sdk_bookings_services';
 import { getServiceById, getServiceBySlug, } from '../../api/query-services/index.js';
-import { BookingServiceDefinition, } from '../booking/booking.js';
+import { BookingServiceDefinition } from '../booking/booking.js';
 import { convertToMoneyData } from '../../utils/money.js';
 /**
  * Booking app ID constant
@@ -81,15 +81,15 @@ export const ServiceService = implementService.withConfig()(ServiceServiceDefini
         const currentService = serviceSignal.get();
         if (!currentService._id)
             return false;
-        const services = bookingService.services.get();
-        return services.some((selection) => selection.service._id === currentService._id);
+        const selections = bookingService.bookingSelections.get();
+        return selections.some((selection) => selection.service._id === currentService._id);
     });
     // requiresAvailability signal - true for APPOINTMENT and CLASS types
     const requiresAvailabilitySignal = signalsService.computed(() => {
         const currentService = serviceSignal.get();
         const serviceType = currentService.type;
-        return (serviceType === services.ServiceType.APPOINTMENT ||
-            serviceType === services.ServiceType.CLASS);
+        return (serviceType === ServiceType.APPOINTMENT ||
+            serviceType === ServiceType.CLASS);
     });
     // paymentData signal - computed payment data from service
     const paymentDataSignal = signalsService.computed(() => {
@@ -104,21 +104,21 @@ export const ServiceService = implementService.withConfig()(ServiceServiceDefini
         // Extract pricing based on rate type
         if (payment) {
             switch (rateType) {
-                case services.RateType.FIXED:
+                case RateType.FIXED:
                     // FIXED: Use payment.fixed.price
                     money = convertToMoneyData(payment.fixed?.price);
                     break;
-                case services.RateType.VARIED:
+                case RateType.VARIED:
                     // VARIED: Use defaultPrice as money, plus min/max for range
                     money = convertToMoneyData(payment.varied?.defaultPrice);
                     minPrice = convertToMoneyData(payment.varied?.minPrice);
                     maxPrice = convertToMoneyData(payment.varied?.maxPrice);
                     break;
-                case services.RateType.CUSTOM:
+                case RateType.CUSTOM:
                     // CUSTOM: Use description text (no numeric price)
                     priceDescription = payment.custom?.description || null;
                     break;
-                case services.RateType.NO_FEE:
+                case RateType.NO_FEE:
                     // NO_FEE: Free service (amount = 0)
                     money = { amount: 0, currency: 'USD' };
                     break;
@@ -185,27 +185,26 @@ export const ServiceService = implementService.withConfig()(ServiceServiceDefini
             if (!bookableSignal.get() || !bookingService)
                 return;
             const currentService = serviceSignal.get();
-            const selection = {
-                service: currentService,
-            };
-            bookingService.actions.setServices([selection]);
+            bookingService.actions.setService({ service: currentService });
         },
         add: () => {
             if (!bookableSignal.get() || !bookingService)
                 return;
             const currentService = serviceSignal.get();
-            const selection = {
-                service: currentService,
-            };
-            bookingService.actions.addService(selection);
+            bookingService.actions.addService({ service: currentService });
         },
         remove: () => {
             if (!bookableSignal.get() || !bookingService)
                 return;
             const currentService = serviceSignal.get();
-            if (currentService._id) {
-                bookingService.actions.removeService(currentService._id);
-            }
+            // Remove all instances of this service (by serviceId)
+            const selections = bookingService.bookingSelections.get();
+            const instancesToRemove = selections
+                .filter((s) => s.service._id === currentService._id)
+                .map((s) => s.instanceId);
+            instancesToRemove.forEach((instanceId) => {
+                bookingService.actions.removeBookingSelection(instanceId);
+            });
         },
     };
     return {