@wix/headless-bookings 0.0.11 → 0.0.13

package/cjs/dist/services/time-slot-list/time-slot-list.js

@@ -0,0 +1,349 @@
+/**
+ * TimeSlotList Service Implementation
+ * Manages time slot fetching, selection, and state
+ */
+import { implementService } from '@wix/services-definitions';
+import { SignalsServiceDefinition } from '@wix/services-definitions/core-services/signals';
+import { TimeSlotListServiceDefinition, ViewMode, } from './time-slot-list.def.js';
+import { fetchAvailability } from '../../api/time-slot-list/index.js';
+import { BookingServiceDefinition } from '../booking/booking.js';
+// ============================================================================
+// Helpers
+// ============================================================================
+function getDefaultEndDate() {
+    return new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
+}
+function getClientTimezone() {
+    return typeof Intl !== 'undefined'
+        ? Intl.DateTimeFormat().resolvedOptions().timeZone
+        : undefined;
+}
+/**
+ * Formats a Date to local ISO string (YYYY-MM-DDThh:mm:ss)
+ */
+function toLocalDateString(date) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
+}
+/**
+ * Merges new grouped slots with existing ones
+ * Slots with the same start time are merged
+ */
+function mergeGroupedSlots(existing, newSlots) {
+    const mergedMap = new Map();
+    for (const slot of existing) {
+        mergedMap.set(slot.localStartDate, slot);
+    }
+    for (const newSlot of newSlots) {
+        const key = newSlot.localStartDate;
+        const existingSlot = mergedMap.get(key);
+        if (existingSlot) {
+            // Merge staffByLocation and originalSlots
+            existingSlot.staffByLocation.push(...newSlot.staffByLocation);
+            existingSlot.originalSlots.push(...newSlot.originalSlots);
+        }
+        else {
+            mergedMap.set(key, newSlot);
+        }
+    }
+    return Array.from(mergedMap.values());
+}
+// ============================================================================
+// Service Implementation
+// ============================================================================
+export const TimeSlotListService = implementService.withConfig()(TimeSlotListServiceDefinition, ({ getService, config }) => {
+    // Get dependent services
+    const signalsService = getService(SignalsServiceDefinition);
+    const bookingService = getService(BookingServiceDefinition);
+    // Initialize default values
+    const currentDate = new Date();
+    // Initialize Signals
+    const timeSlotsSignal = signalsService.signal(config.timeSlots || []);
+    const selectionSignal = signalsService.signal(null);
+    const isLoadingSignal = signalsService.signal(false);
+    const errorSignal = signalsService.signal(null);
+    const hasMoreSignal = signalsService.signal(false);
+    const viewModeSignal = signalsService.signal(config.viewMode || ViewMode.CLASSIC);
+    const startDateSignal = signalsService.signal(config.startDate || currentDate);
+    const endDateSignal = signalsService.signal(config.endDate || getDefaultEndDate());
+    const timezoneSignal = signalsService.signal(config.timezone ?? getClientTimezone());
+    const cursorSignal = signalsService.signal(undefined);
+    /**
+     * Helper: Get services from config or BookingService
+     */
+    const getServices = () => {
+        if (config.services?.length)
+            return config.services;
+        return bookingService.bookingSelections.get().map((s) => s.service);
+    };
+    /**
+     * Fetch time slots from API
+     * Called on initialization or when filters change
+     */
+    const fetchTimeSlots = async () => {
+        const selectedServices = getServices();
+        isLoadingSignal.set(true);
+        errorSignal.set(null);
+        cursorSignal.set(undefined);
+        try {
+            const response = await fetchAvailability({
+                services: selectedServices,
+                fromLocalDate: toLocalDateString(startDateSignal.get()),
+                toLocalDate: toLocalDateString(endDateSignal.get()),
+                timeZone: timezoneSignal.get(),
+                viewMode: viewModeSignal.get(),
+            });
+            timeSlotsSignal.set(response.timeSlots);
+            const nextCursor = response.cursorPagingMetadata?.cursors?.next ?? undefined;
+            cursorSignal.set(nextCursor);
+            hasMoreSignal.set(!!nextCursor);
+        }
+        catch (error) {
+            const message = error instanceof Error
+                ? error.message
+                : 'Failed to load time slots';
+            errorSignal.set(message);
+        }
+        finally {
+            isLoadingSignal.set(false);
+        }
+    };
+    /**
+     * Action: Select a time slot
+     * Only updates booking service if there's exactly one location and one resource
+     * Otherwise, user must select location/resource before booking
+     */
+    const selectSlot = (slot) => {
+        const currentSelection = selectionSignal.get();
+        if (currentSelection?.slot?.id === slot.id)
+            return;
+        const hasOneLocation = slot.staffByLocation.length === 1;
+        const hasOneResource = hasOneLocation && slot.staffByLocation[0].staffMembers.length === 1;
+        if (hasOneLocation && hasOneResource) {
+            const originalSlot = slot.originalSlots[0];
+            const { location, staffMembers } = slot.staffByLocation[0];
+            const staffMemberId = staffMembers[0].id;
+            selectionSignal.set({
+                slot,
+                locationId: location.id,
+                staffMemberId,
+            });
+            bookingService.actions.setTimeSlot(originalSlot);
+            bookingService.actions.setLocation({
+                id: location.id,
+                name: location.name,
+            });
+            bookingService.actions.updateBookingSelection({
+                staff: {
+                    _id: staffMemberId,
+                    name: staffMembers[0].name,
+                },
+            });
+        }
+        else {
+            selectionSignal.set({
+                slot,
+                locationId: null,
+                staffMemberId: null,
+            });
+        }
+    };
+    /**
+     * Action: Select a location for the current slot
+     * Updates the booking service with the correct original slot for this location
+     */
+    const selectLocation = (locationId) => {
+        const currentSelections = selectionSignal.get();
+        if (!currentSelections?.slot)
+            return;
+        selectionSignal.set({ ...currentSelections, locationId });
+        const location = currentSelections.slot.originalSlots.find((s) => s.location?._id === locationId)?.location;
+        if (location) {
+            bookingService.actions.setLocation({
+                id: location._id,
+                name: location.name,
+            });
+        }
+    };
+    /**
+     * Action: Select a staff member for the current slot
+     * Updates the booking service with the selected resource for the slot's service
+     */
+    const selectStaffMember = (staffMemberId) => {
+        const currentSelections = selectionSignal.get();
+        if (!currentSelections?.slot)
+            return;
+        selectionSignal.set({ ...currentSelections, staffMemberId });
+        const slot = currentSelections.slot;
+        // Find the resource info from original slots
+        for (const originalSlot of slot.originalSlots) {
+            for (const resourceGroup of originalSlot.availableResources || []) {
+                const staff = resourceGroup.resources?.find((r) => r._id === staffMemberId);
+                if (staff) {
+                    bookingService.actions.updateBookingSelection({
+                        staff,
+                    });
+                    return;
+                }
+            }
+        }
+    };
+    /**
+     * Action: Clear preferences (location and staff) while keeping the slot selected
+     */
+    const clearPreferences = () => {
+        const currentSelection = selectionSignal.get();
+        if (!currentSelection?.slot)
+            return;
+        // Keep the slot, but clear location and staff selections
+        selectionSignal.set({
+            slot: currentSelection.slot,
+            locationId: null,
+            staffMemberId: null,
+        });
+        // Clear location in booking service
+        bookingService.actions.clearLocation();
+        // Clear resources (staff) in booking service
+        const serviceId = currentSelection.slot.serviceId;
+        if (serviceId) {
+            bookingService.actions.updateBookingSelection({
+                staff: undefined,
+            });
+        }
+    };
+    /**
+     * Action: Load more slots (pagination)
+     */
+    const loadMore = async () => {
+        const cursor = cursorSignal.get();
+        if (!cursor || isLoadingSignal.get())
+            return;
+        const selectedServices = getServices();
+        if (selectedServices.length === 0)
+            return;
+        isLoadingSignal.set(true);
+        try {
+            const response = await fetchAvailability({
+                services: selectedServices,
+                fromLocalDate: toLocalDateString(startDateSignal.get()),
+                toLocalDate: toLocalDateString(endDateSignal.get()),
+                timeZone: timezoneSignal.get(),
+                cursorPaging: { cursor },
+                viewMode: viewModeSignal.get(),
+            });
+            // API returns grouped slots, merge with existing
+            const existing = timeSlotsSignal.get();
+            timeSlotsSignal.set(mergeGroupedSlots(existing, response.timeSlots));
+            const nextCursor = response.cursorPagingMetadata?.cursors?.next ?? undefined;
+            cursorSignal.set(nextCursor);
+            hasMoreSignal.set(!!nextCursor);
+        }
+        catch (error) {
+            const message = error instanceof Error
+                ? error.message
+                : 'Failed to load more time slots';
+            errorSignal.set(message);
+        }
+        finally {
+            isLoadingSignal.set(false);
+        }
+    };
+    /**
+     * Action: Update date range and refetch slots
+     */
+    const setDateRange = (newStartDate, newEndDate) => {
+        startDateSignal.set(newStartDate);
+        endDateSignal.set(newEndDate);
+        fetchTimeSlots();
+    };
+    /**
+     * Action: Update timezone and refetch slots
+     */
+    const setTimezone = (newTimezone) => {
+        timezoneSignal.set(newTimezone);
+        fetchTimeSlots();
+    };
+    // Auto-fetch on initialization if no pre-loaded data provided
+    if (!config.timeSlots && config.services && config.services.length > 0) {
+        fetchTimeSlots();
+    }
+    // Return service API
+    return {
+        // State Signals
+        timeSlots: timeSlotsSignal,
+        selection: selectionSignal,
+        isLoading: isLoadingSignal,
+        error: errorSignal,
+        hasMore: hasMoreSignal,
+        // Configuration Signals
+        viewMode: viewModeSignal,
+        startDate: startDateSignal,
+        endDate: endDateSignal,
+        timezone: timezoneSignal,
+        // Actions
+        actions: {
+            selectSlot,
+            selectLocation,
+            selectStaffMember,
+            clearPreferences,
+            loadMore,
+            setDateRange,
+            setTimezone,
+        },
+    };
+});
+/**
+ * SSR Loader: Pre-fetches time slots for server-side rendering
+ * Use this in Astro/Next.js getServerSideProps or page loaders
+ *
+ * @example
+ * ```typescript
+ * // In Astro page
+ * const loadResult = await loadTimeSlotListConfig({
+ *   services: bookingServices,
+ *   startDate: new Date(),
+ *   endDate: addDays(new Date(), 7),
+ *   timezone: 'America/New_York',
+ * });
+ *
+ * if (loadResult.type === 'error') {
+ *   // Handle error
+ * }
+ *
+ * const timeSlotListConfig = loadResult.config;
+ * ```
+ */
+export async function loadTimeSlotListConfig(options) {
+    const now = new Date();
+    const startDate = options.startDate || now;
+    const endDate = options.endDate || getDefaultEndDate();
+    const viewMode = options.viewMode || ViewMode.CLASSIC;
+    // check for location and staff in config
+    try {
+        const response = await fetchAvailability({
+            services: options.services || [],
+            fromLocalDate: toLocalDateString(startDate),
+            toLocalDate: toLocalDateString(endDate),
+            timeZone: options.timezone ?? getClientTimezone(),
+            viewMode,
+        });
+        const config = {
+            services: options.services,
+            timeSlots: response.timeSlots || [],
+            startDate,
+            endDate,
+            timezone: options.timezone,
+            viewMode,
+        };
+        return { type: 'success', config };
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : 'Failed to load time slots';
+        return { type: 'error', error: message };
+    }
+}

package/dist/api/index.d.ts

@@ -5,6 +5,7 @@
  * @module API
  */
 export { getServiceById, getServiceBySlug, queryServices, type PagingMetadata, type ServiceListFilters, type QueryServicesRequest, } from './query-services/index.js';
+export { fetchAvailability } from './time-slot-list/index.js';
 /**
  * PagingMetadata includes:
  * - limit: Number of items per page

package/dist/api/index.js

@@ -5,6 +5,7 @@
  * @module API
  */
 export { getServiceById, getServiceBySlug, queryServices, } from './query-services/index.js';
+export { fetchAvailability } from './time-slot-list/index.js';
 /**
  * PagingMetadata includes:
  * - limit: Number of items per page

package/dist/api/query-services/index.d.ts

@@ -2,13 +2,12 @@
  * Query Services API
  * Fetches single or multiple services with pagination and sorting
  */
-import { services } from '@wix/bookings';
-import type { services as servicesTypes } from '@wix/bookings';
+import { type Service, type Paging, type Sorting } from '@wix/auto_sdk_bookings_services';
 /**
  * Paging metadata from query services response.
  * Extends the SDK's Paging type with hasNext flag to indicate if more services are available.
  */
-export type PagingMetadata = services.Paging & {
+export type PagingMetadata = Paging & {
     /** Number of items returned in the current page */
     count?: number;
     /** Whether there are more services available to load */
@@ -31,7 +30,7 @@ export interface QueryServicesRequest {
     appId: string;
     filters?: ServiceListFilters;
     pagingMetadata?: PagingMetadata;
-    sort?: services.Sorting[];
+    sort?: Sorting[];
 }
 /**
  * Fetches a service by its ID
@@ -40,7 +39,7 @@ export interface QueryServicesRequest {
  * @returns Object containing the service or null if not found
  */
 export declare const getServiceById: (id: string, appId?: string) => Promise<{
-    service: servicesTypes.Service | null;
+    service: Service | null;
 }>;
 /**
  * Fetches a service by its slug
@@ -49,7 +48,7 @@ export declare const getServiceById: (id: string, appId?: string) => Promise<{
  * @returns Object containing the service or null if not found
  */
 export declare const getServiceBySlug: (slug: string, appId?: string) => Promise<{
-    service: servicesTypes.Service | null;
+    service: Service | null;
 }>;
 /**
  * Query services with pagination and sorting.
@@ -73,6 +72,6 @@ export declare const getServiceBySlug: (slug: string, appId?: string) => Promise
  * ```
  */
 export declare function queryServices({ appId, filters, pagingMetadata, sort, }: QueryServicesRequest): Promise<{
-    services: servicesTypes.Service[];
+    services: Service[];
     pagingMetadata: PagingMetadata;
 }>;

package/dist/api/query-services/index.js

@@ -2,7 +2,7 @@
  * Query Services API
  * Fetches single or multiple services with pagination and sorting
  */
-import { services } from '@wix/bookings';
+import { queryServices as queryServicesApi, } from '@wix/auto_sdk_bookings_services';
 /**
  * Booking app ID constant
  */
@@ -17,7 +17,7 @@ export const getServiceById = async (id, appId) => {
     try {
         const finalAppId = appId ?? BOOKING_APP_ID;
         // Query services where _id equals the provided id and appId matches
-        const query = services.queryServices({
+        const query = queryServicesApi({
             conditionalFields: ['STAFF_MEMBER_DETAILS'],
         });
         const result = await query
@@ -44,7 +44,7 @@ export const getServiceBySlug = async (slug, appId) => {
     try {
         const finalAppId = appId ?? BOOKING_APP_ID;
         // Query services where mainSlug.name equals the provided slug and appId matches
-        const query = services.queryServices({
+        const query = queryServicesApi({
             conditionalFields: ['STAFF_MEMBER_DETAILS'],
         });
         const result = await query
@@ -115,7 +115,7 @@ export async function queryServices({ appId, filters, pagingMetadata, sort, }) {
             sort,
         });
         // Call queryServices with QueryServicesRequest and execute the query
-        const result = await services.queryServices(queryRequest).find();
+        const result = await queryServicesApi(queryRequest).find();
         // Construct PagingMetadata from result properties
         // Includes count (number of items returned) and hasNext (whether more items are available)
         const resultPagingMetadata = {

package/dist/api/time-slot-list/index.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Time Slot List API
+ * Fetches available time slots for booking services from Wix Bookings
+ */
+import { type Location, type CursorPaging, type CursorPagingMetadata } from '@wix/auto_sdk_bookings_availability-time-slots';
+import { type Service } from '@wix/auto_sdk_bookings_services';
+import { ViewMode, type TimeSlot } from '../../services/time-slot-list/time-slot-list.def.js';
+export interface FetchAvailabilityOptions {
+    services: Service[];
+    fromLocalDate?: string | null;
+    toLocalDate?: string | null;
+    timeZone?: string | null;
+    locations?: Location[];
+    cursorPaging?: CursorPaging;
+    viewMode?: ViewMode;
+}
+/**
+ * Response from fetchAvailability with grouped time slots
+ */
+export interface FetchAvailabilityResponse {
+    /** Grouped time slots (one per unique time) */
+    timeSlots: TimeSlot[];
+    /** Cursor pagination metadata for loading more results */
+    cursorPagingMetadata?: CursorPagingMetadata;
+}
+/**
+ * Main entry point for fetching availability
+ * Detects flow type, calls appropriate API, and groups slots by time
+ *
+ * @param options - Fetch options including services, date range, timezone, and view mode
+ * @returns Promise with grouped time slots
+ *
+ * @example
+ * ```typescript
+ * const response = await fetchAvailability({
+ *   services: [service],
+ *   fromLocalDate: '2024-01-15T00:00:00',
+ *   toLocalDate: '2024-01-22T00:00:00',
+ *   timeZone: 'America/New_York',
+ *   viewMode: ViewMode.CLASSIC,
+ * });
+ * // response.timeSlots are grouped by time
+ * ```
+ */
+export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, locations, cursorPaging, }: {
+    services: Service[];
+    fromLocalDate: string;
+    toLocalDate: string;
+    timeZone?: string;
+    locations?: Location[];
+    cursorPaging?: CursorPaging;
+    viewMode?: ViewMode;
+}): Promise<FetchAvailabilityResponse>;

package/dist/api/time-slot-list/index.js

@@ -0,0 +1,133 @@
+/**
+ * Time Slot List API
+ * Fetches available time slots for booking services from Wix Bookings
+ */
+import { listAvailabilityTimeSlots, } from '@wix/auto_sdk_bookings_availability-time-slots';
+import { ServiceType } from '@wix/auto_sdk_bookings_services';
+import { ViewMode, } from '../../services/time-slot-list/time-slot-list.def.js';
+// ============================================================================
+// Internal Types
+// ============================================================================
+var FlowType;
+(function (FlowType) {
+    FlowType["SINGLE_SERVICE"] = "single_service";
+    FlowType["MULTI_SERVICE"] = "multi_service";
+    FlowType["CLASS"] = "class";
+})(FlowType || (FlowType = {}));
+// ============================================================================
+// Grouping Functions
+// ============================================================================
+/**
+ * Groups API time slots by their start time
+ * Multiple slots for the same time (different locations) are merged into one
+ */
+function groupTimeSlotsByTime(apiSlots) {
+    const groupedMap = new Map();
+    for (const apiSlot of apiSlots) {
+        const key = apiSlot.localStartDate;
+        if (!groupedMap.has(key)) {
+            // Create new grouped slot - omit location and availableResources
+            const { location: _location, availableResources: _availableResources, ...rest } = apiSlot;
+            groupedMap.set(key, {
+                ...rest,
+                staffByLocation: [],
+                originalSlots: [],
+                id: apiSlot.localStartDate,
+            });
+        }
+        const groupedSlot = groupedMap.get(key);
+        // Extract staff members with IDs and names from availableResources
+        const staffMembers = (apiSlot.availableResources || [])
+            .flatMap((resourceGroup) => resourceGroup.resources || [])
+            .filter((resource) => resource._id && resource.name)
+            .map((resource) => ({
+            id: resource._id,
+            name: resource.name,
+        }));
+        // Add this slot's location/staff info
+        const staffByLocation = {
+            location: {
+                id: apiSlot.location?._id,
+                name: apiSlot.location?.name,
+            },
+            staffMembers,
+        };
+        groupedSlot.staffByLocation.push(staffByLocation);
+        // Store original slot for booking service
+        groupedSlot.originalSlots.push(apiSlot);
+    }
+    return Array.from(groupedMap.values());
+}
+// ============================================================================
+// Internal Flow Detection
+// ============================================================================
+/**
+ * Detects the booking flow type based on services and view mode
+ */
+function detectFlow(bookingServices, viewMode) {
+    if (bookingServices.length === 0) {
+        if (viewMode === ViewMode.AGENDA) {
+            return FlowType.CLASS; // AGENDA can fetch all classes without specifying services
+        }
+        throw new Error('Services required for classic view mode');
+    }
+    const allAppointments = bookingServices.every((s) => s.type === ServiceType.APPOINTMENT);
+    const allClasses = bookingServices.every((s) => s.type === ServiceType.CLASS);
+    if (!allAppointments && !allClasses) {
+        throw new Error('All services must be either appointments or classes');
+    }
+    if (allClasses)
+        return FlowType.CLASS;
+    if (bookingServices.length === 1)
+        return FlowType.SINGLE_SERVICE;
+    return FlowType.MULTI_SERVICE;
+}
+/**
+ * Main entry point for fetching availability
+ * Detects flow type, calls appropriate API, and groups slots by time
+ *
+ * @param options - Fetch options including services, date range, timezone, and view mode
+ * @returns Promise with grouped time slots
+ *
+ * @example
+ * ```typescript
+ * const response = await fetchAvailability({
+ *   services: [service],
+ *   fromLocalDate: '2024-01-15T00:00:00',
+ *   toLocalDate: '2024-01-22T00:00:00',
+ *   timeZone: 'America/New_York',
+ *   viewMode: ViewMode.CLASSIC,
+ * });
+ * // response.timeSlots are grouped by time
+ * ```
+ */
+export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, locations, cursorPaging, }) {
+    const flow = detectFlow(selectedServices, viewMode);
+    if (flow === FlowType.SINGLE_SERVICE) {
+        const serviceId = selectedServices[0]?._id;
+        if (!serviceId) {
+            throw new Error('Service ID is required');
+        }
+        const response = await listAvailabilityTimeSlots({
+            serviceId,
+            fromLocalDate,
+            toLocalDate,
+            timeZone,
+            locations,
+            cursorPaging,
+        });
+        return {
+            timeSlots: groupTimeSlotsByTime(response.timeSlots || []),
+            cursorPagingMetadata: response.cursorPagingMetadata,
+        };
+    }
+    if (flow === FlowType.MULTI_SERVICE) {
+        // Phase 2: Multi-service support
+        throw new Error('Multi-service appointments not yet supported');
+    }
+    if (flow === FlowType.CLASS) {
+        // Phase 2: Class support
+        throw new Error('Class bookings not yet supported');
+    }
+    throw new Error(`Unknown flow type: ${flow}`);
+}

package/dist/react/core/booking/Booking.d.ts

@@ -3,8 +3,8 @@
  * Provides low-level access to BookingService via render props and service setup
  */
 import React from 'react';
-import { type BookingServiceConfig, type ServiceSelection } from '../../../services/booking/booking.js';
-import type { availabilityTimeSlots } from '@wix/bookings';
+import { type BookingServiceConfig, type BookingSelection } from '../../../services/booking/booking.js';
+import type { TimeSlot } from '@wix/auto_sdk_bookings_availability-time-slots';
 /**
  * Props for Booking.Root component
  */
@@ -33,8 +33,8 @@ export declare function Root(props: RootProps): React.ReactNode;
  */
 export interface DataProps {
     children: (data: {
-        selectedServices: ServiceSelection[];
-        selectedTimeSlot: availabilityTimeSlots.TimeSlot | null;
+        bookingSelections: BookingSelection[];
+        selectedTimeSlot: TimeSlot | null;
     }) => React.ReactNode;
 }
 /**
@@ -45,9 +45,9 @@ export interface DataProps {
  * @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>
  *     )