@wix/headless-bookings 0.0.35 → 0.0.36

package/cjs/dist/react/core/time-slot-list/TimeSlotList.js

@@ -106,9 +106,10 @@ export function ListData(props) {
  */
 export function DateRange(props) {
     const service = useService(TimeSlotListServiceDefinition);
+    const dateRange = service.dateRange.get();
     return props.children({
-        startDate: service.startDate.get(),
-        endDate: service.endDate.get(),
+        startDate: dateRange.start,
+        endDate: dateRange.end,
         setDateRange: service.actions.setDateRange,
     });
 }

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

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

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

@@ -77,13 +77,16 @@ export interface TimeSlotListServiceActions {
     loadMore: () => Promise<void>;
     setDateRange: (start: Date, end: Date) => void;
 }
+export interface DateRange {
+    start: Date;
+    end: Date;
+}
 export interface TimeSlotListServiceAPI {
     timeSlots: Signal<TimeSlot[]>;
     isLoading: Signal<boolean>;
     error: Signal<string | null>;
     hasMore: Signal<boolean>;
-    startDate: Signal<Date>;
-    endDate: Signal<Date>;
+    dateRange: Signal<DateRange>;
     actions: TimeSlotListServiceActions;
 }
 export declare const TimeSlotListServiceDefinition: string & {

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

@@ -15,6 +15,31 @@ function getClientTimezone() {
         ? Intl.DateTimeFormat().resolvedOptions().timeZone
         : undefined;
 }
+/** Compare two string arrays for equality (order-independent) */
+function arraysEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    const sortedA = [...a].sort();
+    const sortedB = [...b].sort();
+    return sortedA.every((val, i) => val === sortedB[i]);
+}
+/** Create a memoized value that only updates when IDs change */
+function createMemoizedByIds({ fallback, getValue, extractId, }) {
+    let cachedIds = [];
+    let cachedValue = fallback;
+    return () => {
+        const value = getValue();
+        const items = value ?? [];
+        const newIds = items.length && typeof items[0] === 'string'
+            ? items
+            : items.map(extractId);
+        if (!arraysEqual(newIds, cachedIds)) {
+            cachedIds = newIds;
+            cachedValue = items.length ? value : fallback;
+        }
+        return cachedValue;
+    };
+}
 // ============================================================================
 // Service Implementation
 // ============================================================================
@@ -29,33 +54,22 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
     const hasMoreSignal = signalsService.signal(false);
     // Internal only - viewMode is auto-detected based on service types
     const viewModeSignal = signalsService.signal(ViewMode.CLASSIC);
-    const startDateSignal = signalsService.signal(config.startDate);
-    const endDateSignal = signalsService.signal(config.endDate);
+    const dateRangeSignal = signalsService.signal({
+        start: config.startDate,
+        end: config.endDate,
+    });
     const cursorSignal = signalsService.signal(undefined);
-    /**
-     * Helper: Get services from config or BookingService
-     */
-    const getServices = () => {
-        const selectedServices = bookingService.serviceSelections
-            .get()
-            .map((s) => s.service);
-        if (selectedServices.length) {
-            return selectedServices;
-        }
-        return config.services ?? [];
-    };
-    /**
-     * Helper: Get filters combining config with booking overrides
-     * Uses location and resources from booking if they exist (not from the slot)
-     */
-    const getFilters = () => {
+    const servicesSignal = signalsService.computed(createMemoizedByIds({
+        fallback: config.services ?? [],
+        getValue: () => bookingService.serviceSelections.get().map((s) => s.service),
+        extractId: (service) => service._id,
+    }));
+    const preSelectedStaffSignal = signalsService.computed(createMemoizedByIds({
+        fallback: config.filters?.staffMemberIds,
+        getValue: () => (bookingService.serviceSelections.get()[0]?.resources ?? []).map((resource) => resource._id),
+    }));
+    const filtersSignal = signalsService.computed(() => {
         const baseFilters = config.filters ?? {};
-        const selectedStaffMembersIds = bookingService.serviceSelections
-            .get()[0]
-            ?.resources?.map((resource) => resource._id);
-        const staffMemberIds = selectedStaffMembersIds?.length
-            ? selectedStaffMembersIds
-            : baseFilters.staffMemberIds;
         const selectedLocation = bookingService.location.get();
         const location = selectedLocation
             ? {
@@ -66,36 +80,24 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         return {
             ...baseFilters,
             location,
-            staffMemberIds,
+            staffMemberIds: preSelectedStaffSignal.get(),
         };
-    };
-    /**
-     * Fetch time slots from API
-     * If cursor is provided, appends to existing slots (pagination)
-     * If no cursor, resets state and fetches fresh slots
-     */
-    const fetchTimeSlots = async ({ isLoadMore } = { isLoadMore: false }) => {
-        if (isLoadingSignal.get() || (isLoadMore && !cursorSignal.get())) {
-            return;
-        }
-        const cursor = isLoadMore ? cursorSignal.get() : undefined;
+    });
+    const fetchTimeSlots = async () => {
         isLoadingSignal.set(true);
         errorSignal.set(null);
-        if (!isLoadMore) {
-            timeSlotsSignal.set([]);
-        }
+        cursorSignal.set(undefined);
+        timeSlotsSignal.set([]);
         try {
             const response = await fetchAvailability({
-                services: getServices(),
-                fromLocalDate: startDateSignal.get(),
-                toLocalDate: endDateSignal.get(),
+                services: servicesSignal.get(),
                 timeZone: bookingService.timezone.get(),
                 viewMode: viewModeSignal.get(),
-                cursor,
-                ...getFilters(),
+                fromLocalDate: dateRangeSignal.get().start,
+                toLocalDate: dateRangeSignal.get().end,
+                ...filtersSignal.get(),
             });
-            const newSlots = response.timeSlots;
-            timeSlotsSignal.set(isLoadMore ? [...timeSlotsSignal.get(), ...newSlots] : newSlots);
+            timeSlotsSignal.set(response.timeSlots);
             const nextCursor = response.cursorPagingMetadata?.cursors?.next ?? undefined;
             cursorSignal.set(nextCursor);
             hasMoreSignal.set(!!nextCursor);
@@ -103,9 +105,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         catch (error) {
             const message = error instanceof Error
                 ? error.message
-                : isLoadMore
-                    ? 'Failed to load more time slots'
-                    : 'Failed to load time slots';
+                : 'Failed to load time slots';
             errorSignal.set(message);
         }
         finally {
@@ -182,33 +182,61 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
      * Action: Load more slots (pagination)
      */
     const loadMore = async () => {
-        return fetchTimeSlots({ isLoadMore: true });
+        const cursor = cursorSignal.get();
+        if (!cursor) {
+            return;
+        }
+        isLoadingSignal.set(true);
+        errorSignal.set(null);
+        try {
+            const response = await fetchAvailability({
+                services: servicesSignal.get(),
+                fromLocalDate: dateRangeSignal.get().start,
+                toLocalDate: dateRangeSignal.get().end,
+                timeZone: bookingService.timezone.get(),
+                viewMode: viewModeSignal.get(),
+                cursor,
+                ...filtersSignal.get(),
+            });
+            const newSlots = response.timeSlots;
+            timeSlotsSignal.set([...timeSlotsSignal.get(), ...newSlots]);
+            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
+     * Action: Update date range (effect will handle refetch)
      */
     const setDateRange = (newStartDate, newEndDate) => {
-        const currentStartDate = startDateSignal.get();
-        const currentEndDate = endDateSignal.get();
+        const { start: currentStartDate, end: currentEndDate } = dateRangeSignal.get();
         if (currentStartDate.getTime() === newStartDate.getTime() &&
             currentEndDate.getTime() === newEndDate.getTime()) {
             return;
         }
-        startDateSignal.set(newStartDate);
-        endDateSignal.set(newEndDate);
+        dateRangeSignal.set({ start: newStartDate, end: newEndDate });
     };
-    const resourcesSignal = signalsService.computed(() => {
-        return bookingService.serviceSelections.get()[0]?.resources;
-    });
     let isFirstRun = true;
     signalsService.effect(() => {
+        filtersSignal.get();
+        dateRangeSignal.get();
         bookingService.timezone.get();
-        bookingService.location.get();
-        resourcesSignal.get();
-        if (!isFirstRun || !config.timeSlots) {
-            fetchTimeSlots();
+        if (isFirstRun) {
+            isFirstRun = false;
+            if (config.timeSlots) {
+                return;
+            }
         }
-        isFirstRun = false;
+        fetchTimeSlots();
     });
     // Return service API
     return {
@@ -218,8 +246,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         error: errorSignal,
         hasMore: hasMoreSignal,
         // Configuration Signals (viewMode is internal only)
-        startDate: startDateSignal,
-        endDate: endDateSignal,
+        dateRange: dateRangeSignal,
         // Actions
         actions: {
             selectSlot,

package/dist/react/core/time-slot-list/TimeSlotList.js

@@ -106,9 +106,10 @@ export function ListData(props) {
  */
 export function DateRange(props) {
     const service = useService(TimeSlotListServiceDefinition);
+    const dateRange = service.dateRange.get();
     return props.children({
-        startDate: service.startDate.get(),
-        endDate: service.endDate.get(),
+        startDate: dateRange.start,
+        endDate: dateRange.end,
         setDateRange: service.actions.setDateRange,
     });
 }

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

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

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

@@ -77,13 +77,16 @@ export interface TimeSlotListServiceActions {
     loadMore: () => Promise<void>;
     setDateRange: (start: Date, end: Date) => void;
 }
+export interface DateRange {
+    start: Date;
+    end: Date;
+}
 export interface TimeSlotListServiceAPI {
     timeSlots: Signal<TimeSlot[]>;
     isLoading: Signal<boolean>;
     error: Signal<string | null>;
     hasMore: Signal<boolean>;
-    startDate: Signal<Date>;
-    endDate: Signal<Date>;
+    dateRange: Signal<DateRange>;
     actions: TimeSlotListServiceActions;
 }
 export declare const TimeSlotListServiceDefinition: string & {

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

@@ -15,6 +15,31 @@ function getClientTimezone() {
         ? Intl.DateTimeFormat().resolvedOptions().timeZone
         : undefined;
 }
+/** Compare two string arrays for equality (order-independent) */
+function arraysEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    const sortedA = [...a].sort();
+    const sortedB = [...b].sort();
+    return sortedA.every((val, i) => val === sortedB[i]);
+}
+/** Create a memoized value that only updates when IDs change */
+function createMemoizedByIds({ fallback, getValue, extractId, }) {
+    let cachedIds = [];
+    let cachedValue = fallback;
+    return () => {
+        const value = getValue();
+        const items = value ?? [];
+        const newIds = items.length && typeof items[0] === 'string'
+            ? items
+            : items.map(extractId);
+        if (!arraysEqual(newIds, cachedIds)) {
+            cachedIds = newIds;
+            cachedValue = items.length ? value : fallback;
+        }
+        return cachedValue;
+    };
+}
 // ============================================================================
 // Service Implementation
 // ============================================================================
@@ -29,33 +54,22 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
     const hasMoreSignal = signalsService.signal(false);
     // Internal only - viewMode is auto-detected based on service types
     const viewModeSignal = signalsService.signal(ViewMode.CLASSIC);
-    const startDateSignal = signalsService.signal(config.startDate);
-    const endDateSignal = signalsService.signal(config.endDate);
+    const dateRangeSignal = signalsService.signal({
+        start: config.startDate,
+        end: config.endDate,
+    });
     const cursorSignal = signalsService.signal(undefined);
-    /**
-     * Helper: Get services from config or BookingService
-     */
-    const getServices = () => {
-        const selectedServices = bookingService.serviceSelections
-            .get()
-            .map((s) => s.service);
-        if (selectedServices.length) {
-            return selectedServices;
-        }
-        return config.services ?? [];
-    };
-    /**
-     * Helper: Get filters combining config with booking overrides
-     * Uses location and resources from booking if they exist (not from the slot)
-     */
-    const getFilters = () => {
+    const servicesSignal = signalsService.computed(createMemoizedByIds({
+        fallback: config.services ?? [],
+        getValue: () => bookingService.serviceSelections.get().map((s) => s.service),
+        extractId: (service) => service._id,
+    }));
+    const preSelectedStaffSignal = signalsService.computed(createMemoizedByIds({
+        fallback: config.filters?.staffMemberIds,
+        getValue: () => (bookingService.serviceSelections.get()[0]?.resources ?? []).map((resource) => resource._id),
+    }));
+    const filtersSignal = signalsService.computed(() => {
         const baseFilters = config.filters ?? {};
-        const selectedStaffMembersIds = bookingService.serviceSelections
-            .get()[0]
-            ?.resources?.map((resource) => resource._id);
-        const staffMemberIds = selectedStaffMembersIds?.length
-            ? selectedStaffMembersIds
-            : baseFilters.staffMemberIds;
         const selectedLocation = bookingService.location.get();
         const location = selectedLocation
             ? {
@@ -66,36 +80,24 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         return {
             ...baseFilters,
             location,
-            staffMemberIds,
+            staffMemberIds: preSelectedStaffSignal.get(),
         };
-    };
-    /**
-     * Fetch time slots from API
-     * If cursor is provided, appends to existing slots (pagination)
-     * If no cursor, resets state and fetches fresh slots
-     */
-    const fetchTimeSlots = async ({ isLoadMore } = { isLoadMore: false }) => {
-        if (isLoadingSignal.get() || (isLoadMore && !cursorSignal.get())) {
-            return;
-        }
-        const cursor = isLoadMore ? cursorSignal.get() : undefined;
+    });
+    const fetchTimeSlots = async () => {
         isLoadingSignal.set(true);
         errorSignal.set(null);
-        if (!isLoadMore) {
-            timeSlotsSignal.set([]);
-        }
+        cursorSignal.set(undefined);
+        timeSlotsSignal.set([]);
         try {
             const response = await fetchAvailability({
-                services: getServices(),
-                fromLocalDate: startDateSignal.get(),
-                toLocalDate: endDateSignal.get(),
+                services: servicesSignal.get(),
                 timeZone: bookingService.timezone.get(),
                 viewMode: viewModeSignal.get(),
-                cursor,
-                ...getFilters(),
+                fromLocalDate: dateRangeSignal.get().start,
+                toLocalDate: dateRangeSignal.get().end,
+                ...filtersSignal.get(),
             });
-            const newSlots = response.timeSlots;
-            timeSlotsSignal.set(isLoadMore ? [...timeSlotsSignal.get(), ...newSlots] : newSlots);
+            timeSlotsSignal.set(response.timeSlots);
             const nextCursor = response.cursorPagingMetadata?.cursors?.next ?? undefined;
             cursorSignal.set(nextCursor);
             hasMoreSignal.set(!!nextCursor);
@@ -103,9 +105,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         catch (error) {
             const message = error instanceof Error
                 ? error.message
-                : isLoadMore
-                    ? 'Failed to load more time slots'
-                    : 'Failed to load time slots';
+                : 'Failed to load time slots';
             errorSignal.set(message);
         }
         finally {
@@ -182,33 +182,61 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
      * Action: Load more slots (pagination)
      */
     const loadMore = async () => {
-        return fetchTimeSlots({ isLoadMore: true });
+        const cursor = cursorSignal.get();
+        if (!cursor) {
+            return;
+        }
+        isLoadingSignal.set(true);
+        errorSignal.set(null);
+        try {
+            const response = await fetchAvailability({
+                services: servicesSignal.get(),
+                fromLocalDate: dateRangeSignal.get().start,
+                toLocalDate: dateRangeSignal.get().end,
+                timeZone: bookingService.timezone.get(),
+                viewMode: viewModeSignal.get(),
+                cursor,
+                ...filtersSignal.get(),
+            });
+            const newSlots = response.timeSlots;
+            timeSlotsSignal.set([...timeSlotsSignal.get(), ...newSlots]);
+            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
+     * Action: Update date range (effect will handle refetch)
      */
     const setDateRange = (newStartDate, newEndDate) => {
-        const currentStartDate = startDateSignal.get();
-        const currentEndDate = endDateSignal.get();
+        const { start: currentStartDate, end: currentEndDate } = dateRangeSignal.get();
         if (currentStartDate.getTime() === newStartDate.getTime() &&
             currentEndDate.getTime() === newEndDate.getTime()) {
             return;
         }
-        startDateSignal.set(newStartDate);
-        endDateSignal.set(newEndDate);
+        dateRangeSignal.set({ start: newStartDate, end: newEndDate });
     };
-    const resourcesSignal = signalsService.computed(() => {
-        return bookingService.serviceSelections.get()[0]?.resources;
-    });
     let isFirstRun = true;
     signalsService.effect(() => {
+        filtersSignal.get();
+        dateRangeSignal.get();
         bookingService.timezone.get();
-        bookingService.location.get();
-        resourcesSignal.get();
-        if (!isFirstRun || !config.timeSlots) {
-            fetchTimeSlots();
+        if (isFirstRun) {
+            isFirstRun = false;
+            if (config.timeSlots) {
+                return;
+            }
         }
-        isFirstRun = false;
+        fetchTimeSlots();
     });
     // Return service API
     return {
@@ -218,8 +246,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         error: errorSignal,
         hasMore: hasMoreSignal,
         // Configuration Signals (viewMode is internal only)
-        startDate: startDateSignal,
-        endDate: endDateSignal,
+        dateRange: dateRangeSignal,
         // Actions
         actions: {
             selectSlot,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "ad087858a42d4f0c4cf86b870ec3b6b93fac74806bacb2f95cf753a2"
+  "falconPackageHash": "ecae9bfd11fe7e50bf6e5eeb5ad0b3e9763b64d5cfa1aa1477176483"
 }