@wix/headless-bookings 0.0.11 → 0.0.13

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

@@ -3,7 +3,7 @@
  * Handles querying and pagination of services list (NO selection management)
  */
 import { type Signal, type ReadOnlySignal } from '@wix/services-definitions/core-services/signals';
-import { services } from '@wix/bookings';
+import type { Service } from '@wix/auto_sdk_bookings_services';
 import type { QueryServicesRequest, PagingMetadata } from '../../api/query-services/index.js';
 export type { ServiceListFilters } from '../../api/query-services/index.js';
 /**
@@ -15,7 +15,7 @@ export type QueryOptions = Omit<QueryServicesRequest, 'pagingMetadata'>;
  * Configuration for the ServiceList service
  */
 export interface ServiceListServiceConfig {
-    services?: services.Service[];
+    services?: Service[];
     options?: QueryServicesRequest;
 }
 /**
@@ -30,7 +30,7 @@ export interface ServiceListActions {
  */
 export interface ServiceListServiceAPI {
     /** Reactive signal containing the list of services */
-    servicesSignal: Signal<services.Service[]>;
+    servicesSignal: Signal<Service[]>;
     /** Reactive signal containing current query options (appId, filters, sort) - changes trigger re-fetch */
     queryOptionsSignal: Signal<QueryOptions>;
     /** Reactive signal containing pagination metadata (limit, offset, count, hasNext) - updated after fetches */

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

@@ -0,0 +1,6 @@
+/**
+ * TimeSlotList Service
+ * Main export file for time slot list service
+ */
+export { TimeSlotListServiceDefinition, ViewMode, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type SlotSelection, } from './time-slot-list.def.js';
+export { TimeSlotListService, loadTimeSlotListConfig, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list.js';

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

@@ -0,0 +1,6 @@
+/**
+ * TimeSlotList Service
+ * Main export file for time slot list service
+ */
+export { TimeSlotListServiceDefinition, ViewMode, } from './time-slot-list.def.js';
+export { TimeSlotListService, loadTimeSlotListConfig, } from './time-slot-list.js';

package/dist/services/time-slot-list/time-slot-list.d.ts

@@ -0,0 +1,58 @@
+/**
+ * TimeSlotList Service Implementation
+ * Manages time slot fetching, selection, and state
+ */
+import type { Service } from '@wix/auto_sdk_bookings_services';
+import { type TimeSlotListServiceConfig, ViewMode } from './time-slot-list.def.js';
+export declare const TimeSlotListService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: import("./time-slot-list.def.js").TimeSlotListServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & import("./time-slot-list.def.js").TimeSlotListServiceAPI, TimeSlotListServiceConfig>;
+/**
+ * Options for loading time slots configuration on the server
+ */
+export interface LoadTimeSlotListConfigOptions {
+    /** Services to fetch time slots for */
+    services?: Service[];
+    /** Start date for the time range (defaults to current date) */
+    startDate?: Date;
+    /** End date for the time range (defaults to 7 days from start) */
+    endDate?: Date;
+    /** Timezone for formatting (defaults to UTC) */
+    timezone?: string;
+    /** View mode (defaults to CLASSIC) */
+    viewMode?: ViewMode;
+}
+/**
+ * Result type for SSR loader - either success with config or error
+ */
+export type LoadTimeSlotListConfigResult = {
+    type: 'success';
+    config: TimeSlotListServiceConfig;
+} | {
+    type: 'error';
+    error: string;
+};
+/**
+ * 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 declare function loadTimeSlotListConfig(options: LoadTimeSlotListConfigOptions): Promise<LoadTimeSlotListConfigResult>;

package/dist/services/time-slot-list/time-slot-list.def.d.ts

@@ -0,0 +1,84 @@
+/**
+ * TimeSlotList Service Definition
+ * Defines interfaces and service contract for time slot management
+ */
+import type { Signal } from '@wix/services-definitions/core-services/signals';
+import type { TimeSlot as ApiTimeSlot } from '@wix/auto_sdk_bookings_availability-time-slots';
+import type { Service } from '@wix/auto_sdk_bookings_services';
+export declare enum ViewMode {
+    CLASSIC = "classic",
+    AGENDA = "agenda"
+}
+/**
+ * Maps a location to its available staff members
+ */
+export interface StaffByLocation {
+    location: {
+        id: string;
+        name: string;
+    };
+    staffMembers: {
+        id: string;
+        name: string;
+    }[];
+}
+/**
+ * Grouped time slot that represents a unique time with all available locations/staff
+ * Extends the API TimeSlot type but replaces location-specific fields with aggregated data
+ */
+export interface TimeSlot extends Omit<ApiTimeSlot, 'location' | 'availableResources'> {
+    /** Maps each location to its available staff members */
+    staffByLocation: StaffByLocation[];
+    /** Original API slots for this time (needed for booking service) */
+    originalSlots: ApiTimeSlot[];
+    /** Unique identifier for the time slot */
+    id: string;
+}
+/**
+ * User's selection state
+ */
+export interface SlotSelection {
+    slot: TimeSlot;
+    locationId: string | null;
+    staffMemberId: string | null;
+}
+export interface TimeSlotListServiceConfig {
+    /** Services to fetch time slots for */
+    services?: Service[];
+    /** Pre-loaded time slots (from SSR) - already grouped by time */
+    timeSlots?: TimeSlot[];
+    /** Start date for the time range */
+    startDate?: Date;
+    /** End date for the time range */
+    endDate?: Date;
+    /** Timezone for formatting */
+    timezone?: string;
+    /** View mode */
+    viewMode?: ViewMode;
+}
+export interface TimeSlotListServiceActions {
+    selectSlot: (slot: TimeSlot) => void;
+    selectLocation: (locationId: string) => void;
+    selectStaffMember: (staffMemberId: string) => void;
+    clearPreferences: () => void;
+    loadMore: () => Promise<void>;
+    setDateRange: (start: Date, end: Date) => void;
+    setTimezone: (tz: string) => void;
+}
+export interface TimeSlotListServiceAPI {
+    timeSlots: Signal<TimeSlot[]>;
+    selection: Signal<SlotSelection | null>;
+    isLoading: Signal<boolean>;
+    error: Signal<string | null>;
+    hasMore: Signal<boolean>;
+    viewMode: Signal<ViewMode>;
+    startDate: Signal<Date>;
+    endDate: Signal<Date>;
+    timezone: Signal<string | undefined>;
+    actions: TimeSlotListServiceActions;
+}
+export declare const TimeSlotListServiceDefinition: string & {
+    __api: TimeSlotListServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & TimeSlotListServiceAPI;

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

@@ -0,0 +1,17 @@
+/**
+ * TimeSlotList Service Definition
+ * Defines interfaces and service contract for time slot management
+ */
+import { defineService } from '@wix/services-definitions';
+// ============================================================================
+// Enums
+// ============================================================================
+export var ViewMode;
+(function (ViewMode) {
+    ViewMode["CLASSIC"] = "classic";
+    ViewMode["AGENDA"] = "agenda";
+})(ViewMode || (ViewMode = {}));
+// ============================================================================
+// Service Definition
+// ============================================================================
+export const TimeSlotListServiceDefinition = defineService('time-slot-list');

package/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -68,5 +68,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "2996fdf77f39e0cde0bf4bb18bd8bd0dd2630b3aa839f47d67059ca2"
+  "falconPackageHash": "fb9d6c4ddf1f28c1393d4c042861417e97c5e95f9ab301c1f5faaabe"
 }