@wix/headless-bookings 0.0.21 → 0.0.22

package/cjs/dist/api/fetch-availability/index.d.ts

@@ -52,10 +52,10 @@ export interface FetchAvailabilityResponse {
  * // response.timeSlots are grouped by time
  * ```
  */
-export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, }: {
+export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, timeSlotsPerDay, }: {
     services: Service[];
-    fromLocalDate: string;
-    toLocalDate: string;
+    fromLocalDate: Date;
+    toLocalDate: Date;
     timeZone?: string;
     locations?: Location[];
     staffMemberIds?: string[];
@@ -68,4 +68,5 @@ export declare function fetchAvailability({ services: selectedServices, viewMode
         bookOnlineDisabled?: boolean;
     };
     slotsPerPage?: number;
+    timeSlotsPerDay?: number;
 }): Promise<FetchAvailabilityResponse>;

package/cjs/dist/api/fetch-availability/index.js

@@ -5,6 +5,7 @@
 import { listAvailabilityTimeSlots, } from '@wix/auto_sdk_bookings_availability-time-slots';
 import { listEventTimeSlots } from '@wix/auto_sdk_bookings_event-time-slots';
 import { ServiceType } from '@wix/auto_sdk_bookings_services';
+import { format } from 'date-fns';
 import { ANY_STAFF_MEMBER_ID } from '../../services/booking/booking.js';
 import { ViewMode, } from '../../services/time-slot-list/time-slot-list.def.js';
 // ============================================================================
@@ -18,6 +19,16 @@ var FlowType;
 })(FlowType || (FlowType = {}));
 const STAFF_RESOURCE_TYPE_ID = '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155';
 // ============================================================================
+// Helpers
+// ============================================================================
+/**
+ * Formats a Date to local ISO string (YYYY-MM-DDThh:mm:ss)
+ */
+function toLocalDateString(date) {
+    const pattern = "yyyy-MM-dd'T'HH:mm:ss";
+    return format(date, pattern);
+}
+// ============================================================================
 // Grouping Functions
 // ============================================================================
 /**
@@ -104,9 +115,19 @@ function detectFlow(bookingServices, viewMode) {
  * // response.timeSlots are grouped by time
  * ```
  */
-export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, }) {
+export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, timeSlotsPerDay, }) {
     const flow = detectFlow(selectedServices, viewMode);
     const serviceIds = selectedServices.map((s) => s._id);
+    // Convert Date objects to local ISO strings
+    const fromLocalDateStr = toLocalDateString(fromLocalDate);
+    const toLocalDateStr = toLocalDateString(toLocalDate);
+    const isFetchAvailabileDays = timeSlotsPerDay === 1;
+    const cursorPaging = isFetchAvailabileDays
+        ? undefined
+        : {
+            cursor,
+            limit: slotsPerPage,
+        };
     if (flow === FlowType.SINGLE_SERVICE) {
         const isAnyStaffMemberSelected = staffMemberIds?.length === 1 && staffMemberIds[0] === ANY_STAFF_MEMBER_ID;
         const resourceTypes = staffMemberIds?.length && !isAnyStaffMemberSelected
@@ -119,20 +140,18 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
             : undefined;
         const response = await listAvailabilityTimeSlots({
             serviceId: serviceIds[0],
-            fromLocalDate,
-            toLocalDate,
+            fromLocalDate: fromLocalDateStr,
+            toLocalDate: toLocalDateStr,
             timeZone,
             locations,
-            cursorPaging: {
-                cursor,
-                limit: slotsPerPage,
-            },
+            cursorPaging,
             resourceTypes,
             bookable,
             bookingPolicyViolations,
-            includeResourceTypeIds: isAnyStaffMemberSelected
+            includeResourceTypeIds: isAnyStaffMemberSelected || isFetchAvailabileDays
                 ? undefined
                 : [STAFF_RESOURCE_TYPE_ID],
+            timeSlotsPerDay,
         });
         return {
             timeSlots: groupTimeSlotsByTime(response.timeSlots || []),
@@ -154,17 +173,15 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
             eventFilter['resources.id'] = { $hasSome: staffMemberIds };
         }
         const response = await listEventTimeSlots({
-            fromLocalDate,
-            toLocalDate,
+            fromLocalDate: fromLocalDateStr,
+            toLocalDate: toLocalDateStr,
             timeZone,
             serviceIds: serviceIds.length ? serviceIds : undefined,
-            cursorPaging: {
-                cursor,
-                limit: slotsPerPage,
-            },
+            cursorPaging,
             eventFilter: Object.keys(eventFilter).length ? eventFilter : undefined,
             includeNonBookable: bookable ? !bookable : undefined,
             bookingPolicyViolations,
+            maxSlotsPerDay: timeSlotsPerDay,
         });
         return {
             timeSlots: groupTimeSlotsByTime(response.timeSlots || []),

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

@@ -4,12 +4,13 @@
  */
 import React from 'react';
 import type { BookingServiceConfig } from '../../services/booking/booking.js';
+export type { BookingData, DataProps } from '../core/booking/Booking.js';
 /**
  * Props for Booking.Root component
  */
 export interface BookingRootProps {
     children: React.ReactNode;
-    bookingServiceConfig: BookingServiceConfig;
+    bookingServiceConfig?: BookingServiceConfig;
 }
 /**
  * Root component that provides booking context to the entire app.

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

@@ -19,7 +19,7 @@ import * as CoreBooking from '../core/booking/Booking.js';
  * ```
  */
 export const Root = (props) => {
-    const { children, bookingServiceConfig } = props;
+    const { children, bookingServiceConfig = {} } = props;
     return (_jsx(CoreBooking.Root, { bookingServiceConfig: bookingServiceConfig, children: children }));
 };
 Root.displayName = 'Booking.Root';

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

@@ -10,7 +10,7 @@ import type { FormValues } from '@wix/form-public';
  */
 export interface RootProps {
     children: React.ReactNode;
-    bookingServiceConfig: BookingServiceConfig;
+    bookingServiceConfig?: BookingServiceConfig;
 }
 /**
  * Root component that provides booking context to the entire app.
@@ -35,6 +35,7 @@ export declare function Root(props: RootProps): React.ReactNode;
 export interface BookingData {
     serviceSelections: ServiceSelection[];
     location: Location | null;
+    timezone: string | undefined;
     formSubmission: FormValues | null;
     actions: BookingServiceActions;
 }
@@ -52,7 +53,7 @@ export interface DataProps {
  * @example
  * ```tsx
  * <Booking.Data>
- *   {({ serviceSelections, location, formSubmission, actions }) => (
+ *   {({ serviceSelections, location, timezone, formSubmission, actions }) => (
  *     serviceSelections.length > 0 ? (
  *       <div>{serviceSelections.map(item => item.service.name).join(', ')}</div>
  *     ) : (

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

@@ -18,7 +18,8 @@ import { BookingServiceDefinition, BookingService, } from '../../../services/boo
  * ```
  */
 export function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(BookingServiceDefinition, BookingService, props.bookingServiceConfig), children: props.children }));
+    const { bookingServiceConfig = {}, children } = props;
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(BookingServiceDefinition, BookingService, bookingServiceConfig), children: children }));
 }
 /**
  * Core component that provides access to booking data via render props.
@@ -28,7 +29,7 @@ export function Root(props) {
  * @example
  * ```tsx
  * <Booking.Data>
- *   {({ serviceSelections, location, formSubmission, actions }) => (
+ *   {({ serviceSelections, location, timezone, formSubmission, actions }) => (
  *     serviceSelections.length > 0 ? (
  *       <div>{serviceSelections.map(item => item.service.name).join(', ')}</div>
  *     ) : (
@@ -43,11 +44,13 @@ export function Data(props) {
     const bookingService = useService(BookingServiceDefinition);
     const serviceSelections = bookingService.serviceSelections.get();
     const location = bookingService.location.get();
+    const timezone = bookingService.timezone.get();
     const formSubmission = bookingService.formSubmission.get();
     const { actions } = bookingService;
     return children({
         serviceSelections,
         location,
+        timezone,
         formSubmission,
         actions,
     });

package/cjs/dist/react/core/time-slot-list/TimeSlot.d.ts

@@ -88,10 +88,10 @@ export declare function StaffMemberProvider(props: StaffMemberProviderProps): Re
  */
 export interface InfoProps {
     children: (data: {
-        /** Raw localStartDate string from timeSlot */
-        startDate: string | undefined;
-        /** Raw localEndDate string from timeSlot */
-        endDate: string | undefined;
+        /** Parsed localStartDate as Date (constructed from the raw localStartDate string) */
+        startDate: Date | undefined;
+        /** Parsed localEndDate as Date (constructed from the raw localEndDate string) */
+        endDate: Date | undefined;
         /** Calculated duration in minutes (null if dates unavailable) */
         durationInMinutes: number | null;
         /** Whether the timeSlot is bookable */

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

@@ -116,15 +116,17 @@ export function StaffMemberProvider(props) {
  */
 export function Info(props) {
     const { timeSlot, isSelected } = useTimeSlotContext();
-    const startDate = timeSlot.localStartDate ?? undefined;
-    const endDate = timeSlot.localEndDate ?? undefined;
+    const startDate = timeSlot.localStartDate
+        ? new Date(timeSlot.localStartDate)
+        : undefined;
+    const endDate = timeSlot.localEndDate
+        ? new Date(timeSlot.localEndDate)
+        : undefined;
     const bookable = timeSlot.bookable ?? false;
     // Calculate duration from start and end dates
     let durationInMinutes = null;
     if (startDate && endDate) {
-        const startTime = new Date(startDate).getTime();
-        const endTime = new Date(endDate).getTime();
-        durationInMinutes = Math.round((endTime - startTime) / (1000 * 60));
+        durationInMinutes = Math.round((endDate.getTime() - startDate.getTime()) / (1000 * 60));
     }
     return props.children({
         startDate,

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

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useService, WixServices } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
 import { TimeSlotListServiceDefinition, TimeSlotListService, } from '../../../services/time-slot-list/index.js';
+import { BookingServiceDefinition } from '../../../services/booking/booking.js';
 /**
  * Root component that provides TimeSlotListService context to its children.
  *
@@ -54,8 +55,8 @@ function getTimezoneDisplayName(timezone) {
  * ```
  */
 export function Timezone(props) {
-    const service = useService(TimeSlotListServiceDefinition);
-    const timezone = service.timezone.get();
+    const bookingService = useService(BookingServiceDefinition);
+    const timezone = bookingService.timezone.get();
     const displayName = getTimezoneDisplayName(timezone);
     return props.children({ timezone, displayName });
 }

package/cjs/dist/react/time-slot-list/TimeSlot.d.ts

@@ -16,18 +16,18 @@ export type { LocationData, StaffMemberData, } from '../core/time-slot-list/Time
 export interface StartDateProps {
     asChild?: boolean;
     children?: AsChildChildren<{
-        startDate: string | undefined;
+        startDate: Date | undefined;
     }>;
     className?: string;
 }
 /**
- * Displays the time slot start date/time as a raw string.
+ * Displays the time slot start date/time as a Date.
  * Consumer is responsible for formatting.
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays raw localStartDate string
+ * // Default usage - displays Date.toString()
  * <TimeSlot.StartDate className="text-foreground" />
  *
  * // With custom formatting
@@ -45,18 +45,18 @@ export declare const StartDate: React.ForwardRefExoticComponent<StartDateProps &
 export interface EndDateProps {
     asChild?: boolean;
     children?: AsChildChildren<{
-        endDate: string | undefined;
+        endDate: Date | undefined;
     }>;
     className?: string;
 }
 /**
- * Displays the time slot end date/time as a raw string.
+ * Displays the time slot end date/time as a Date.
  * Consumer is responsible for formatting.
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays raw localEndDate string
+ * // Default usage - displays Date.toString()
  * <TimeSlot.EndDate className="text-foreground" />
  *
  * // With custom formatting

package/cjs/dist/react/time-slot-list/TimeSlot.js

@@ -34,13 +34,13 @@ var TestIds;
     TestIds["timeSlotStaffMemberActionSelect"] = "time-slot-staff-member-action-select";
 })(TestIds || (TestIds = {}));
 /**
- * Displays the time slot start date/time as a raw string.
+ * Displays the time slot start date/time as a Date.
  * Consumer is responsible for formatting.
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays raw localStartDate string
+ * // Default usage - displays Date.toString()
  * <TimeSlot.StartDate className="text-foreground" />
  *
  * // With custom formatting
@@ -53,17 +53,17 @@ var TestIds;
  */
 export const StartDate = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CoreTimeSlot.Info, { children: ({ startDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStartDate, customElement: children, customElementProps: { startDate }, children: _jsx("span", { children: startDate }) })) }));
+    return (_jsx(CoreTimeSlot.Info, { children: ({ startDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStartDate, customElement: children, customElementProps: { startDate }, children: _jsx("span", { children: startDate?.toString() }) })) }));
 });
 StartDate.displayName = 'TimeSlot.StartDate';
 /**
- * Displays the time slot end date/time as a raw string.
+ * Displays the time slot end date/time as a Date.
  * Consumer is responsible for formatting.
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays raw localEndDate string
+ * // Default usage - displays Date.toString()
  * <TimeSlot.EndDate className="text-foreground" />
  *
  * // With custom formatting
@@ -76,7 +76,7 @@ StartDate.displayName = 'TimeSlot.StartDate';
  */
 export const EndDate = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CoreTimeSlot.Info, { children: ({ endDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotEndDate, customElement: children, customElementProps: { endDate }, children: _jsx("span", { children: endDate }) })) }));
+    return (_jsx(CoreTimeSlot.Info, { children: ({ endDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotEndDate, customElement: children, customElementProps: { endDate }, children: _jsx("span", { children: endDate?.toString() }) })) }));
 });
 EndDate.displayName = 'TimeSlot.EndDate';
 /**

package/cjs/dist/react/time-slot-list/TimeSlotList.d.ts

@@ -113,10 +113,10 @@ export interface TimeSlotRepeaterChildProps {
     isSelected: boolean;
     /** Whether the slot can be booked */
     bookable: boolean;
-    /** Start date/time as ISO string */
-    startDate: string | undefined;
-    /** End date/time as ISO string */
-    endDate: string | undefined;
+    /** Start date/time as Date (constructed from the raw localStartDate string) */
+    startDate: Date | undefined;
+    /** End date/time as Date (constructed from the raw localEndDate string) */
+    endDate: Date | undefined;
     /** Duration in minutes */
     durationInMinutes: number | null;
     /** The raw time slot data */

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

@@ -58,6 +58,7 @@ export interface BookingServiceActions {
     getResourceById(resourceId: string, instanceId?: string): Resource | undefined;
     setLocation(location: Location | null): void;
     clearLocation(): void;
+    setTimezone(timezone: string): void;
     setFormSubmission(values: FormValues | null): void;
     clearFormSubmission(): void;
     clearAll(): void;
@@ -71,6 +72,8 @@ export interface BookingService {
     serviceSelections: Signal<ServiceSelection[]>;
     /** Signal containing the selected location */
     location: Signal<Location | null>;
+    /** Signal containing the selected timezone */
+    timezone: Signal<string | undefined>;
     /** Signal containing the form submission */
     formSubmission: Signal<FormValues | null>;
     /** Actions for modifying booking state */
@@ -93,6 +96,8 @@ export interface BookingServiceConfig {
     serviceSelections?: ServiceSelection[];
     /** Optional initial location */
     location?: Location | null;
+    /** Optional initial timezone */
+    timezone?: string;
     /** Optional initial form submission */
     formSubmission?: FormValues | null;
 }

package/cjs/dist/services/booking/booking.js

@@ -10,7 +10,7 @@ import { SignalsServiceDefinition, } from '@wix/services-definitions/core-servic
 // ============================================================================
 export const ANY_STAFF_MEMBER_ID = '__any_staff_member__';
 // ============================================================================
-// Types
+// Helpers
 // ============================================================================
 /**
  * Generates a unique instance ID for service selections
@@ -18,6 +18,14 @@ export const ANY_STAFF_MEMBER_ID = '__any_staff_member__';
 function generateInstanceId() {
     return crypto.randomUUID();
 }
+/**
+ * Gets the client's timezone from Intl API
+ */
+function getClientTimezone() {
+    return typeof Intl !== 'undefined'
+        ? Intl.DateTimeFormat().resolvedOptions().timeZone
+        : undefined;
+}
 /**
  * Service definition for Booking
  */
@@ -59,6 +67,7 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
     }));
     const serviceSelectionsSignal = signalsService.signal(initialItemsWithIds);
     const locationSignal = signalsService.signal(config.location || null);
+    const timezoneSignal = signalsService.signal(config.timezone ?? getClientTimezone());
     const formSubmissionSignal = signalsService.signal(config.formSubmission || null);
     // ========================================================================
     // Actions Implementation
@@ -146,6 +155,12 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
         clearLocation() {
             locationSignal.set(null);
         },
+        // Timezone actions
+        setTimezone(timezone) {
+            if (timezoneSignal.get() !== timezone) {
+                timezoneSignal.set(timezone);
+            }
+        },
         // Form Submission actions
         setFormSubmission(values) {
             formSubmissionSignal.set(values);
@@ -163,6 +178,7 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
     return {
         serviceSelections: serviceSelectionsSignal,
         location: locationSignal,
+        timezone: timezoneSignal,
         formSubmission: formSubmissionSignal,
         actions,
     };

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

@@ -65,11 +65,21 @@ export interface TimeSlotsFilters {
      * Default: 1000. Max: 1000.
      * @example
      * ```ts
-     * // Load 6 slots at a time
-     * filters: { slotsPerPage: 6 }
+     * // Load 10 slots at a time
+     * filters: { slotsPerPage: 10 }
      * ```
      */
     slotsPerPage?: number;
+    /**
+     * Maximum number of time slots to return per day.
+     * Useful for fetching availability indicators (set to 1 to get one slot per day).
+     * @example
+     * ```ts
+     * // Get one slot per day for calendar indicators
+     * filters: { timeSlotsPerDay: 1 }
+     * ```
+     */
+    timeSlotsPerDay?: number;
 }
 export interface TimeSlotListServiceConfig {
     /** Services to fetch time slots for */
@@ -92,7 +102,6 @@ export interface TimeSlotListServiceActions {
     clearPreferences: () => void;
     loadMore: () => Promise<void>;
     setDateRange: (start: Date, end: Date) => void;
-    setTimezone: (tz: string) => void;
 }
 export interface TimeSlotListServiceAPI {
     timeSlots: Signal<TimeSlot[]>;
@@ -102,7 +111,6 @@ export interface TimeSlotListServiceAPI {
     hasMore: Signal<boolean>;
     startDate: Signal<Date>;
     endDate: Signal<Date>;
-    timezone: Signal<string | undefined>;
     actions: TimeSlotListServiceActions;
 }
 export declare const TimeSlotListServiceDefinition: string & {

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

@@ -4,7 +4,6 @@
  */
 import { implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition } from '@wix/services-definitions/core-services/signals';
-import { format } from 'date-fns';
 import { TimeSlotListServiceDefinition, ViewMode, } from './time-slot-list.def.js';
 import { fetchAvailability } from '../../api/fetch-availability/index.js';
 import { BookingServiceDefinition, ANY_STAFF_MEMBER_ID, } from '../booking/booking.js';
@@ -19,13 +18,6 @@ function getClientTimezone() {
         ? Intl.DateTimeFormat().resolvedOptions().timeZone
         : undefined;
 }
-/**
- * Formats a Date to local ISO string (YYYY-MM-DDThh:mm:ss)
- */
-function toLocalDateString(date) {
-    const pattern = "yyyy-MM-dd'T'HH:mm:ss";
-    return format(date, pattern);
-}
 /**
  * Merges new grouped slots with existing ones
  * Slots with the same start time are merged
@@ -68,7 +60,6 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
     const viewModeSignal = signalsService.signal(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
@@ -86,7 +77,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         const location = bookingService.location.get();
         const serviceSelections = bookingService.serviceSelections.get();
         const selectedStaffMemberIds = serviceSelections
-            .map(({ resources }) => resources.map((r) => r._id))
+            .map((serviceSelection) => serviceSelection.resources.map((r) => r._id))
             .flat();
         const selectedLocation = location ? { _id: location.id } : null;
         // Merge config filters with BookingService selections (selections win)
@@ -114,9 +105,9 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         try {
             const response = await fetchAvailability({
                 services: selectedServices,
-                fromLocalDate: toLocalDateString(startDateSignal.get()),
-                toLocalDate: toLocalDateString(endDateSignal.get()),
-                timeZone: timezoneSignal.get(),
+                fromLocalDate: startDateSignal.get(),
+                toLocalDate: endDateSignal.get(),
+                timeZone: bookingService.timezone.get(),
                 viewMode: viewModeSignal.get(),
                 cursor: cursorSignal.get(),
                 ...filters,
@@ -312,16 +303,14 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         if (!cursor || isLoadingSignal.get())
             return;
         const selectedServices = getServices();
-        if (selectedServices.length === 0)
-            return;
         const filters = getFilters();
         isLoadingSignal.set(true);
         try {
             const response = await fetchAvailability({
                 services: selectedServices,
-                fromLocalDate: toLocalDateString(startDateSignal.get()),
-                toLocalDate: toLocalDateString(endDateSignal.get()),
-                timeZone: timezoneSignal.get(),
+                fromLocalDate: startDateSignal.get(),
+                toLocalDate: endDateSignal.get(),
+                timeZone: bookingService.timezone.get(),
                 cursor,
                 viewMode: viewModeSignal.get(),
                 ...filters,
@@ -357,17 +346,21 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         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) {
+    if (!config.timeSlots) {
         fetchTimeSlots();
     }
+    // Subscribe to timezone changes from BookingService to auto-refetch
+    // NOTE: This should depend ONLY on bookingService.timezone.
+    let firstTimezoneEffectRun = true;
+    signalsService.effect(() => {
+        bookingService.timezone.get();
+        if (firstTimezoneEffectRun) {
+            firstTimezoneEffectRun = false;
+            return;
+        }
+        fetchTimeSlots();
+    });
     // Return service API
     return {
         // State Signals
@@ -379,7 +372,6 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         // Configuration Signals (viewMode is internal only)
         startDate: startDateSignal,
         endDate: endDateSignal,
-        timezone: timezoneSignal,
         // Actions
         actions: {
             selectSlot,
@@ -388,7 +380,6 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
             clearPreferences,
             loadMore,
             setDateRange,
-            setTimezone,
         },
     };
 });
@@ -420,8 +411,8 @@ export async function loadTimeSlotListConfig(options) {
     try {
         const response = await fetchAvailability({
             services: options.services || [],
-            fromLocalDate: toLocalDateString(startDate),
-            toLocalDate: toLocalDateString(endDate),
+            fromLocalDate: startDate,
+            toLocalDate: endDate,
             timeZone: options.timezone ?? getClientTimezone(),
             ...options.filters,
         });

package/dist/api/fetch-availability/index.d.ts

@@ -52,10 +52,10 @@ export interface FetchAvailabilityResponse {
  * // response.timeSlots are grouped by time
  * ```
  */
-export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, }: {
+export declare function fetchAvailability({ services: selectedServices, viewMode, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, timeSlotsPerDay, }: {
     services: Service[];
-    fromLocalDate: string;
-    toLocalDate: string;
+    fromLocalDate: Date;
+    toLocalDate: Date;
     timeZone?: string;
     locations?: Location[];
     staffMemberIds?: string[];
@@ -68,4 +68,5 @@ export declare function fetchAvailability({ services: selectedServices, viewMode
         bookOnlineDisabled?: boolean;
     };
     slotsPerPage?: number;
+    timeSlotsPerDay?: number;
 }): Promise<FetchAvailabilityResponse>;

package/dist/api/fetch-availability/index.js

@@ -5,6 +5,7 @@
 import { listAvailabilityTimeSlots, } from '@wix/auto_sdk_bookings_availability-time-slots';
 import { listEventTimeSlots } from '@wix/auto_sdk_bookings_event-time-slots';
 import { ServiceType } from '@wix/auto_sdk_bookings_services';
+import { format } from 'date-fns';
 import { ANY_STAFF_MEMBER_ID } from '../../services/booking/booking.js';
 import { ViewMode, } from '../../services/time-slot-list/time-slot-list.def.js';
 // ============================================================================
@@ -18,6 +19,16 @@ var FlowType;
 })(FlowType || (FlowType = {}));
 const STAFF_RESOURCE_TYPE_ID = '1cd44cf8-756f-41c3-bd90-3e2ffcaf1155';
 // ============================================================================
+// Helpers
+// ============================================================================
+/**
+ * Formats a Date to local ISO string (YYYY-MM-DDThh:mm:ss)
+ */
+function toLocalDateString(date) {
+    const pattern = "yyyy-MM-dd'T'HH:mm:ss";
+    return format(date, pattern);
+}
+// ============================================================================
 // Grouping Functions
 // ============================================================================
 /**
@@ -104,9 +115,19 @@ function detectFlow(bookingServices, viewMode) {
  * // response.timeSlots are grouped by time
  * ```
  */
-export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, }) {
+export async function fetchAvailability({ services: selectedServices, viewMode = ViewMode.CLASSIC, fromLocalDate, toLocalDate, timeZone, locations, staffMemberIds, cursor, slotsPerPage, bookable, bookingPolicyViolations, timeSlotsPerDay, }) {
     const flow = detectFlow(selectedServices, viewMode);
     const serviceIds = selectedServices.map((s) => s._id);
+    // Convert Date objects to local ISO strings
+    const fromLocalDateStr = toLocalDateString(fromLocalDate);
+    const toLocalDateStr = toLocalDateString(toLocalDate);
+    const isFetchAvailabileDays = timeSlotsPerDay === 1;
+    const cursorPaging = isFetchAvailabileDays
+        ? undefined
+        : {
+            cursor,
+            limit: slotsPerPage,
+        };
     if (flow === FlowType.SINGLE_SERVICE) {
         const isAnyStaffMemberSelected = staffMemberIds?.length === 1 && staffMemberIds[0] === ANY_STAFF_MEMBER_ID;
         const resourceTypes = staffMemberIds?.length && !isAnyStaffMemberSelected
@@ -119,20 +140,18 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
             : undefined;
         const response = await listAvailabilityTimeSlots({
             serviceId: serviceIds[0],
-            fromLocalDate,
-            toLocalDate,
+            fromLocalDate: fromLocalDateStr,
+            toLocalDate: toLocalDateStr,
             timeZone,
             locations,
-            cursorPaging: {
-                cursor,
-                limit: slotsPerPage,
-            },
+            cursorPaging,
             resourceTypes,
             bookable,
             bookingPolicyViolations,
-            includeResourceTypeIds: isAnyStaffMemberSelected
+            includeResourceTypeIds: isAnyStaffMemberSelected || isFetchAvailabileDays
                 ? undefined
                 : [STAFF_RESOURCE_TYPE_ID],
+            timeSlotsPerDay,
         });
         return {
             timeSlots: groupTimeSlotsByTime(response.timeSlots || []),
@@ -154,17 +173,15 @@ export async function fetchAvailability({ services: selectedServices, viewMode =
             eventFilter['resources.id'] = { $hasSome: staffMemberIds };
         }
         const response = await listEventTimeSlots({
-            fromLocalDate,
-            toLocalDate,
+            fromLocalDate: fromLocalDateStr,
+            toLocalDate: toLocalDateStr,
             timeZone,
             serviceIds: serviceIds.length ? serviceIds : undefined,
-            cursorPaging: {
-                cursor,
-                limit: slotsPerPage,
-            },
+            cursorPaging,
             eventFilter: Object.keys(eventFilter).length ? eventFilter : undefined,
             includeNonBookable: bookable ? !bookable : undefined,
             bookingPolicyViolations,
+            maxSlotsPerDay: timeSlotsPerDay,
         });
         return {
             timeSlots: groupTimeSlotsByTime(response.timeSlots || []),

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

@@ -4,12 +4,13 @@
  */
 import React from 'react';
 import type { BookingServiceConfig } from '../../services/booking/booking.js';
+export type { BookingData, DataProps } from '../core/booking/Booking.js';
 /**
  * Props for Booking.Root component
  */
 export interface BookingRootProps {
     children: React.ReactNode;
-    bookingServiceConfig: BookingServiceConfig;
+    bookingServiceConfig?: BookingServiceConfig;
 }
 /**
  * Root component that provides booking context to the entire app.

package/dist/react/booking/Booking.js

@@ -19,7 +19,7 @@ import * as CoreBooking from '../core/booking/Booking.js';
  * ```
  */
 export const Root = (props) => {
-    const { children, bookingServiceConfig } = props;
+    const { children, bookingServiceConfig = {} } = props;
     return (_jsx(CoreBooking.Root, { bookingServiceConfig: bookingServiceConfig, children: children }));
 };
 Root.displayName = 'Booking.Root';

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

@@ -10,7 +10,7 @@ import type { FormValues } from '@wix/form-public';
  */
 export interface RootProps {
     children: React.ReactNode;
-    bookingServiceConfig: BookingServiceConfig;
+    bookingServiceConfig?: BookingServiceConfig;
 }
 /**
  * Root component that provides booking context to the entire app.
@@ -35,6 +35,7 @@ export declare function Root(props: RootProps): React.ReactNode;
 export interface BookingData {
     serviceSelections: ServiceSelection[];
     location: Location | null;
+    timezone: string | undefined;
     formSubmission: FormValues | null;
     actions: BookingServiceActions;
 }
@@ -52,7 +53,7 @@ export interface DataProps {
  * @example
  * ```tsx
  * <Booking.Data>
- *   {({ serviceSelections, location, formSubmission, actions }) => (
+ *   {({ serviceSelections, location, timezone, formSubmission, actions }) => (
  *     serviceSelections.length > 0 ? (
  *       <div>{serviceSelections.map(item => item.service.name).join(', ')}</div>
  *     ) : (

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

@@ -18,7 +18,8 @@ import { BookingServiceDefinition, BookingService, } from '../../../services/boo
  * ```
  */
 export function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(BookingServiceDefinition, BookingService, props.bookingServiceConfig), children: props.children }));
+    const { bookingServiceConfig = {}, children } = props;
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(BookingServiceDefinition, BookingService, bookingServiceConfig), children: children }));
 }
 /**
  * Core component that provides access to booking data via render props.
@@ -28,7 +29,7 @@ export function Root(props) {
  * @example
  * ```tsx
  * <Booking.Data>
- *   {({ serviceSelections, location, formSubmission, actions }) => (
+ *   {({ serviceSelections, location, timezone, formSubmission, actions }) => (
  *     serviceSelections.length > 0 ? (
  *       <div>{serviceSelections.map(item => item.service.name).join(', ')}</div>
  *     ) : (
@@ -43,11 +44,13 @@ export function Data(props) {
     const bookingService = useService(BookingServiceDefinition);
     const serviceSelections = bookingService.serviceSelections.get();
     const location = bookingService.location.get();
+    const timezone = bookingService.timezone.get();
     const formSubmission = bookingService.formSubmission.get();
     const { actions } = bookingService;
     return children({
         serviceSelections,
         location,
+        timezone,
         formSubmission,
         actions,
     });

package/dist/react/core/time-slot-list/TimeSlot.d.ts

@@ -88,10 +88,10 @@ export declare function StaffMemberProvider(props: StaffMemberProviderProps): Re
  */
 export interface InfoProps {
     children: (data: {
-        /** Raw localStartDate string from timeSlot */
-        startDate: string | undefined;
-        /** Raw localEndDate string from timeSlot */
-        endDate: string | undefined;
+        /** Parsed localStartDate as Date (constructed from the raw localStartDate string) */
+        startDate: Date | undefined;
+        /** Parsed localEndDate as Date (constructed from the raw localEndDate string) */
+        endDate: Date | undefined;
         /** Calculated duration in minutes (null if dates unavailable) */
         durationInMinutes: number | null;
         /** Whether the timeSlot is bookable */

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

@@ -116,15 +116,17 @@ export function StaffMemberProvider(props) {
  */
 export function Info(props) {
     const { timeSlot, isSelected } = useTimeSlotContext();
-    const startDate = timeSlot.localStartDate ?? undefined;
-    const endDate = timeSlot.localEndDate ?? undefined;
+    const startDate = timeSlot.localStartDate
+        ? new Date(timeSlot.localStartDate)
+        : undefined;
+    const endDate = timeSlot.localEndDate
+        ? new Date(timeSlot.localEndDate)
+        : undefined;
     const bookable = timeSlot.bookable ?? false;
     // Calculate duration from start and end dates
     let durationInMinutes = null;
     if (startDate && endDate) {
-        const startTime = new Date(startDate).getTime();
-        const endTime = new Date(endDate).getTime();
-        durationInMinutes = Math.round((endTime - startTime) / (1000 * 60));
+        durationInMinutes = Math.round((endDate.getTime() - startDate.getTime()) / (1000 * 60));
     }
     return props.children({
         startDate,

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

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useService, WixServices } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
 import { TimeSlotListServiceDefinition, TimeSlotListService, } from '../../../services/time-slot-list/index.js';
+import { BookingServiceDefinition } from '../../../services/booking/booking.js';
 /**
  * Root component that provides TimeSlotListService context to its children.
  *
@@ -54,8 +55,8 @@ function getTimezoneDisplayName(timezone) {
  * ```
  */
 export function Timezone(props) {
-    const service = useService(TimeSlotListServiceDefinition);
-    const timezone = service.timezone.get();
+    const bookingService = useService(BookingServiceDefinition);
+    const timezone = bookingService.timezone.get();
     const displayName = getTimezoneDisplayName(timezone);
     return props.children({ timezone, displayName });
 }

package/dist/react/time-slot-list/TimeSlot.d.ts

@@ -16,18 +16,18 @@ export type { LocationData, StaffMemberData, } from '../core/time-slot-list/Time
 export interface StartDateProps {
     asChild?: boolean;
     children?: AsChildChildren<{
-        startDate: string | undefined;
+        startDate: Date | undefined;
     }>;
     className?: string;
 }
 /**
- * Displays the time slot start date/time as a raw string.
+ * Displays the time slot start date/time as a Date.
  * Consumer is responsible for formatting.
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays raw localStartDate string
+ * // Default usage - displays Date.toString()
  * <TimeSlot.StartDate className="text-foreground" />
  *
  * // With custom formatting
@@ -45,18 +45,18 @@ export declare const StartDate: React.ForwardRefExoticComponent<StartDateProps &
 export interface EndDateProps {
     asChild?: boolean;
     children?: AsChildChildren<{
-        endDate: string | undefined;
+        endDate: Date | undefined;
     }>;
     className?: string;
 }
 /**
- * Displays the time slot end date/time as a raw string.
+ * Displays the time slot end date/time as a Date.
  * Consumer is responsible for formatting.
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays raw localEndDate string
+ * // Default usage - displays Date.toString()
  * <TimeSlot.EndDate className="text-foreground" />
  *
  * // With custom formatting

package/dist/react/time-slot-list/TimeSlot.js

@@ -34,13 +34,13 @@ var TestIds;
     TestIds["timeSlotStaffMemberActionSelect"] = "time-slot-staff-member-action-select";
 })(TestIds || (TestIds = {}));
 /**
- * Displays the time slot start date/time as a raw string.
+ * Displays the time slot start date/time as a Date.
  * Consumer is responsible for formatting.
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays raw localStartDate string
+ * // Default usage - displays Date.toString()
  * <TimeSlot.StartDate className="text-foreground" />
  *
  * // With custom formatting
@@ -53,17 +53,17 @@ var TestIds;
  */
 export const StartDate = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CoreTimeSlot.Info, { children: ({ startDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStartDate, customElement: children, customElementProps: { startDate }, children: _jsx("span", { children: startDate }) })) }));
+    return (_jsx(CoreTimeSlot.Info, { children: ({ startDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStartDate, customElement: children, customElementProps: { startDate }, children: _jsx("span", { children: startDate?.toString() }) })) }));
 });
 StartDate.displayName = 'TimeSlot.StartDate';
 /**
- * Displays the time slot end date/time as a raw string.
+ * Displays the time slot end date/time as a Date.
  * Consumer is responsible for formatting.
  *
  * @component
  * @example
  * ```tsx
- * // Default usage - displays raw localEndDate string
+ * // Default usage - displays Date.toString()
  * <TimeSlot.EndDate className="text-foreground" />
  *
  * // With custom formatting
@@ -76,7 +76,7 @@ StartDate.displayName = 'TimeSlot.StartDate';
  */
 export const EndDate = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
-    return (_jsx(CoreTimeSlot.Info, { children: ({ endDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotEndDate, customElement: children, customElementProps: { endDate }, children: _jsx("span", { children: endDate }) })) }));
+    return (_jsx(CoreTimeSlot.Info, { children: ({ endDate }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotEndDate, customElement: children, customElementProps: { endDate }, children: _jsx("span", { children: endDate?.toString() }) })) }));
 });
 EndDate.displayName = 'TimeSlot.EndDate';
 /**

package/dist/react/time-slot-list/TimeSlotList.d.ts

@@ -113,10 +113,10 @@ export interface TimeSlotRepeaterChildProps {
     isSelected: boolean;
     /** Whether the slot can be booked */
     bookable: boolean;
-    /** Start date/time as ISO string */
-    startDate: string | undefined;
-    /** End date/time as ISO string */
-    endDate: string | undefined;
+    /** Start date/time as Date (constructed from the raw localStartDate string) */
+    startDate: Date | undefined;
+    /** End date/time as Date (constructed from the raw localEndDate string) */
+    endDate: Date | undefined;
     /** Duration in minutes */
     durationInMinutes: number | null;
     /** The raw time slot data */

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

@@ -58,6 +58,7 @@ export interface BookingServiceActions {
     getResourceById(resourceId: string, instanceId?: string): Resource | undefined;
     setLocation(location: Location | null): void;
     clearLocation(): void;
+    setTimezone(timezone: string): void;
     setFormSubmission(values: FormValues | null): void;
     clearFormSubmission(): void;
     clearAll(): void;
@@ -71,6 +72,8 @@ export interface BookingService {
     serviceSelections: Signal<ServiceSelection[]>;
     /** Signal containing the selected location */
     location: Signal<Location | null>;
+    /** Signal containing the selected timezone */
+    timezone: Signal<string | undefined>;
     /** Signal containing the form submission */
     formSubmission: Signal<FormValues | null>;
     /** Actions for modifying booking state */
@@ -93,6 +96,8 @@ export interface BookingServiceConfig {
     serviceSelections?: ServiceSelection[];
     /** Optional initial location */
     location?: Location | null;
+    /** Optional initial timezone */
+    timezone?: string;
     /** Optional initial form submission */
     formSubmission?: FormValues | null;
 }

package/dist/services/booking/booking.js

@@ -10,7 +10,7 @@ import { SignalsServiceDefinition, } from '@wix/services-definitions/core-servic
 // ============================================================================
 export const ANY_STAFF_MEMBER_ID = '__any_staff_member__';
 // ============================================================================
-// Types
+// Helpers
 // ============================================================================
 /**
  * Generates a unique instance ID for service selections
@@ -18,6 +18,14 @@ export const ANY_STAFF_MEMBER_ID = '__any_staff_member__';
 function generateInstanceId() {
     return crypto.randomUUID();
 }
+/**
+ * Gets the client's timezone from Intl API
+ */
+function getClientTimezone() {
+    return typeof Intl !== 'undefined'
+        ? Intl.DateTimeFormat().resolvedOptions().timeZone
+        : undefined;
+}
 /**
  * Service definition for Booking
  */
@@ -59,6 +67,7 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
     }));
     const serviceSelectionsSignal = signalsService.signal(initialItemsWithIds);
     const locationSignal = signalsService.signal(config.location || null);
+    const timezoneSignal = signalsService.signal(config.timezone ?? getClientTimezone());
     const formSubmissionSignal = signalsService.signal(config.formSubmission || null);
     // ========================================================================
     // Actions Implementation
@@ -146,6 +155,12 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
         clearLocation() {
             locationSignal.set(null);
         },
+        // Timezone actions
+        setTimezone(timezone) {
+            if (timezoneSignal.get() !== timezone) {
+                timezoneSignal.set(timezone);
+            }
+        },
         // Form Submission actions
         setFormSubmission(values) {
             formSubmissionSignal.set(values);
@@ -163,6 +178,7 @@ export const BookingService = implementService.withConfig()(BookingServiceDefini
     return {
         serviceSelections: serviceSelectionsSignal,
         location: locationSignal,
+        timezone: timezoneSignal,
         formSubmission: formSubmissionSignal,
         actions,
     };

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

@@ -65,11 +65,21 @@ export interface TimeSlotsFilters {
      * Default: 1000. Max: 1000.
      * @example
      * ```ts
-     * // Load 6 slots at a time
-     * filters: { slotsPerPage: 6 }
+     * // Load 10 slots at a time
+     * filters: { slotsPerPage: 10 }
      * ```
      */
     slotsPerPage?: number;
+    /**
+     * Maximum number of time slots to return per day.
+     * Useful for fetching availability indicators (set to 1 to get one slot per day).
+     * @example
+     * ```ts
+     * // Get one slot per day for calendar indicators
+     * filters: { timeSlotsPerDay: 1 }
+     * ```
+     */
+    timeSlotsPerDay?: number;
 }
 export interface TimeSlotListServiceConfig {
     /** Services to fetch time slots for */
@@ -92,7 +102,6 @@ export interface TimeSlotListServiceActions {
     clearPreferences: () => void;
     loadMore: () => Promise<void>;
     setDateRange: (start: Date, end: Date) => void;
-    setTimezone: (tz: string) => void;
 }
 export interface TimeSlotListServiceAPI {
     timeSlots: Signal<TimeSlot[]>;
@@ -102,7 +111,6 @@ export interface TimeSlotListServiceAPI {
     hasMore: Signal<boolean>;
     startDate: Signal<Date>;
     endDate: Signal<Date>;
-    timezone: Signal<string | undefined>;
     actions: TimeSlotListServiceActions;
 }
 export declare const TimeSlotListServiceDefinition: string & {

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

@@ -4,7 +4,6 @@
  */
 import { implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition } from '@wix/services-definitions/core-services/signals';
-import { format } from 'date-fns';
 import { TimeSlotListServiceDefinition, ViewMode, } from './time-slot-list.def.js';
 import { fetchAvailability } from '../../api/fetch-availability/index.js';
 import { BookingServiceDefinition, ANY_STAFF_MEMBER_ID, } from '../booking/booking.js';
@@ -19,13 +18,6 @@ function getClientTimezone() {
         ? Intl.DateTimeFormat().resolvedOptions().timeZone
         : undefined;
 }
-/**
- * Formats a Date to local ISO string (YYYY-MM-DDThh:mm:ss)
- */
-function toLocalDateString(date) {
-    const pattern = "yyyy-MM-dd'T'HH:mm:ss";
-    return format(date, pattern);
-}
 /**
  * Merges new grouped slots with existing ones
  * Slots with the same start time are merged
@@ -68,7 +60,6 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
     const viewModeSignal = signalsService.signal(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
@@ -86,7 +77,7 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         const location = bookingService.location.get();
         const serviceSelections = bookingService.serviceSelections.get();
         const selectedStaffMemberIds = serviceSelections
-            .map(({ resources }) => resources.map((r) => r._id))
+            .map((serviceSelection) => serviceSelection.resources.map((r) => r._id))
             .flat();
         const selectedLocation = location ? { _id: location.id } : null;
         // Merge config filters with BookingService selections (selections win)
@@ -114,9 +105,9 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         try {
             const response = await fetchAvailability({
                 services: selectedServices,
-                fromLocalDate: toLocalDateString(startDateSignal.get()),
-                toLocalDate: toLocalDateString(endDateSignal.get()),
-                timeZone: timezoneSignal.get(),
+                fromLocalDate: startDateSignal.get(),
+                toLocalDate: endDateSignal.get(),
+                timeZone: bookingService.timezone.get(),
                 viewMode: viewModeSignal.get(),
                 cursor: cursorSignal.get(),
                 ...filters,
@@ -312,16 +303,14 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         if (!cursor || isLoadingSignal.get())
             return;
         const selectedServices = getServices();
-        if (selectedServices.length === 0)
-            return;
         const filters = getFilters();
         isLoadingSignal.set(true);
         try {
             const response = await fetchAvailability({
                 services: selectedServices,
-                fromLocalDate: toLocalDateString(startDateSignal.get()),
-                toLocalDate: toLocalDateString(endDateSignal.get()),
-                timeZone: timezoneSignal.get(),
+                fromLocalDate: startDateSignal.get(),
+                toLocalDate: endDateSignal.get(),
+                timeZone: bookingService.timezone.get(),
                 cursor,
                 viewMode: viewModeSignal.get(),
                 ...filters,
@@ -357,17 +346,21 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         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) {
+    if (!config.timeSlots) {
         fetchTimeSlots();
     }
+    // Subscribe to timezone changes from BookingService to auto-refetch
+    // NOTE: This should depend ONLY on bookingService.timezone.
+    let firstTimezoneEffectRun = true;
+    signalsService.effect(() => {
+        bookingService.timezone.get();
+        if (firstTimezoneEffectRun) {
+            firstTimezoneEffectRun = false;
+            return;
+        }
+        fetchTimeSlots();
+    });
     // Return service API
     return {
         // State Signals
@@ -379,7 +372,6 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         // Configuration Signals (viewMode is internal only)
         startDate: startDateSignal,
         endDate: endDateSignal,
-        timezone: timezoneSignal,
         // Actions
         actions: {
             selectSlot,
@@ -388,7 +380,6 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
             clearPreferences,
             loadMore,
             setDateRange,
-            setTimezone,
         },
     };
 });
@@ -420,8 +411,8 @@ export async function loadTimeSlotListConfig(options) {
     try {
         const response = await fetchAvailability({
             services: options.services || [],
-            fromLocalDate: toLocalDateString(startDate),
-            toLocalDate: toLocalDateString(endDate),
+            fromLocalDate: startDate,
+            toLocalDate: endDate,
             timeZone: options.timezone ?? getClientTimezone(),
             ...options.filters,
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -70,5 +70,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "d2842c53f889bbbdfd049c74e533eef301d158412ec519b08c80c87c"
+  "falconPackageHash": "0404aa644e83255c1641503e68142fb002318cef90f00e879d419ac9"
 }