@wix/headless-bookings 0.0.12 → 0.0.14

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.12",
+  "version": "0.0.14",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -68,5 +68,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "1ac24364dad5e7cd40939f468503e6a086b769e8398d3070b79d7ae2"
+  "falconPackageHash": "e3681a6dd045861d1cb7cefbdc04f1ad9e3eb62094bb6a8970b90cd2"
 }