@wix/headless-restaurants-olo 0.0.33 → 0.0.35

package/dist/react/core/Settings.js

@@ -1,39 +1,43 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
 import { WixServices, useService } from '@wix/services-manager-react';
 import { OLOSettingsServiceDefinition } from '../../services/olo-settings-service.js';
-import { FulfillmentsService, FulfillmentsServiceDefinition, loadFulfillmentsServiceConfig, } from '../../services/fulfillments-service.js';
+import { FulfillmentsService, FulfillmentsServiceDefinition, } from '../../services/fulfillments-service.js';
 import { createServicesMap } from '@wix/services-manager';
 /**
  * Core Settings Root component that provides service context
  * Wraps children with both OLOSettingsService and FulfillmentsService providers
  *
+ * Note: Use loadFulfillmentsServiceConfig from '@wix/headless-restaurants-olo/services'
+ * to load the config before rendering this component.
+ *
  * @example
  * ```tsx
- * <CoreSettings.Root fulfillmentsServiceConfig={config}>
- *   <CoreSettings.CurrentTimeSlot>
+ * import { loadFulfillmentsServiceConfig, OLOSettingsServiceDefinition } from '@wix/headless-restaurants-olo/services';
+ *
+ * // In your component:
+ * const service = useService(OLOSettingsServiceDefinition);
+ * const [config, setConfig] = useState(null);
+ *
+ * useEffect(() => {
+ *   loadFulfillmentsServiceConfig(service.operation?.get()).then(setConfig);
+ * }, []);
+ *
+ * if (!config) return <div>Loading...</div>;
+ *
+ * <Settings.Root fulfillmentsServiceConfig={config}>
+ *   <Settings.CurrentTimeSlot>
  *     {({ timeSlot, hasDetails }) => (
  *       <div>{timeSlot?.dispatchType}</div>
  *     )}
- *   </CoreSettings.CurrentTimeSlot>
- * </CoreSettings.Root>
+ *   </Settings.CurrentTimeSlot>
+ * </Settings.Root>
  * ```
  */
 export const Root = ({ children, fulfillmentsServiceConfig, }) => {
-    const service = useService(OLOSettingsServiceDefinition);
-    const [config, setConfig] = useState(fulfillmentsServiceConfig);
-    useEffect(() => {
-        if (!fulfillmentsServiceConfig) {
-            loadFulfillmentsServiceConfig(service.operation?.get()).then((loadedConfig) => {
-                setConfig(loadedConfig);
-            });
-        }
-    }, [fulfillmentsServiceConfig]);
-    service.isLoading.set(!config);
-    if (!config) {
-        return children({ isLoading: !config });
+    if (!fulfillmentsServiceConfig) {
+        return children({ isLoading: true });
     }
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(FulfillmentsServiceDefinition, FulfillmentsService, config), children: children({ isLoading: !config }) }));
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(FulfillmentsServiceDefinition, FulfillmentsService, fulfillmentsServiceConfig), children: children({ isLoading: false }) }));
 };
 /**
  * Component that provides access to current time slot
@@ -160,6 +164,10 @@ export const MinOrderAmount = ({ children }) => {
 export const AcceptingOrders = ({ children, }) => {
     const service = useService(OLOSettingsServiceDefinition);
     const fulfillmentsService = useService(FulfillmentsServiceDefinition);
+    // Check if FulfillmentsService is available (it won't be during loading)
+    if (!fulfillmentsService?.selectedFulfillment) {
+        return null;
+    }
     const operation = service.operation?.get();
     const selectedFulfillment = fulfillmentsService.selectedFulfillment?.get();
     const acceptingOrders = Boolean(operation?.enabled) && Boolean(selectedFulfillment);
@@ -184,7 +192,6 @@ export const AcceptingOrders = ({ children, }) => {
 export const DeliveryFee = ({ children }) => {
     const fulfillmentsService = useService(FulfillmentsServiceDefinition);
     const selectedDispatchInfo = fulfillmentsService.selectedDispatchInfoSignal?.get();
-    console.log('selectedDispatchInfo', selectedDispatchInfo);
     const deliveryFee = selectedDispatchInfo?.deliveryFee ?? undefined;
     const hasDeliveryFee = Boolean(deliveryFee);
     return children({ deliveryFee, hasDeliveryFee });
@@ -231,6 +238,8 @@ export const FreeDeliveryThreshold = ({ children, }) => {
 export const SelectedAddress = ({ children, }) => {
     const fulfillmentsService = useService(FulfillmentsServiceDefinition);
     const selectedDispatchInfo = fulfillmentsService.selectedDispatchInfoSignal?.get();
+    const fulfillments = fulfillmentsService.fulfillments?.get() ?? null;
+    console.log('fulfillments', fulfillments);
     const selectedAddress = selectedDispatchInfo?.address ?? null;
     const hasAddress = Boolean(selectedAddress);
     const selectedTimeSlot = fulfillmentsService.selectedTimeSlot?.get();

package/dist/services/fulfillment-details-service.d.ts

@@ -0,0 +1,127 @@
+import { type Signal, type ReadOnlySignal } from '@wix/services-definitions/core-services/signals';
+import { DispatchType, TimeSlot, FulfillmentTypeEnum } from '../types/fulfillments-types.js';
+import { Operation } from '../types/operation.js';
+import { Address } from '@wix/auto_sdk_restaurants_operations';
+/**
+ * Date availability information
+ */
+export interface AvailableDate {
+    /** The date that is available */
+    date: Date;
+    /** Whether this date has available slots */
+    hasAvailableSlots: boolean;
+}
+/**
+ * API interface for the Fulfillment Details service
+ * Provides reactive state management for fulfillment scheduling
+ */
+export interface FulfillmentDetailsServiceAPI {
+    /** Currently selected time slot */
+    timeslot: Signal<TimeSlot | null>;
+    /** Delivery/pickup address */
+    address: Signal<Address | null>;
+    /** Selected date for fulfillment */
+    date: Signal<Date | null>;
+    /** Dispatch type (PICKUP or DELIVERY) */
+    dispatchType: Signal<DispatchType | null>;
+    /** ASAP time slot (when user wants the order as soon as possible) */
+    asapTimeSlot: Signal<TimeSlot | null>;
+    /** Loading state for async operations */
+    isLoading: Signal<boolean>;
+    /** Error state */
+    error: Signal<string | null>;
+    /** Available dates within the configured range */
+    availableDates: Signal<AvailableDate[]>;
+    /** Available time slots for the selected date */
+    availableTimeSlotsForDate: Signal<TimeSlot[]>;
+    /** Available time slots filtered by current dispatch type */
+    availableTimeSlots: ReadOnlySignal<TimeSlot[]>;
+    /** Selected scheduling type (ASAP or PREORDER) */
+    schedulingType: Signal<FulfillmentTypeEnum | undefined>;
+    /**
+     * Get the currently selected time slot
+     * @returns The selected time slot or null
+     */
+    getTimeslot: () => TimeSlot | null;
+    /**
+     * Set the selected time slot
+     * @param timeslot - The time slot to select
+     */
+    setTimeslot: (timeslot: TimeSlot | null) => void;
+    /**
+     * Set the delivery/pickup address
+     * @param address - The address to set
+     */
+    setAddress: (address: Address | null) => void;
+    /**
+     * Set the selected date for fulfillment
+     * Also triggers fetching available time slots for the date
+     * @param date - The date to select
+     */
+    setDate: (date: Date | null) => Promise<void>;
+    /**
+     * Set the dispatch type (PICKUP or DELIVERY)
+     * @param type - The dispatch type to set
+     */
+    setDispatchType: (type: DispatchType | null) => void;
+    /**
+     * Set the ASAP time slot
+     * @param timeslot - The ASAP time slot to set
+     */
+    setAsapTimeSlot: (timeslot: TimeSlot | null) => void;
+    /**
+     * Set the scheduling type (ASAP or PREORDER)
+     * Also selects an appropriate time slot based on the type
+     * @param type - The scheduling type to set
+     */
+    setSchedulingType: (type: FulfillmentTypeEnum | undefined) => void;
+    /**
+     * Calculate available dates within a date range
+     * @param startDate - Start of the date range
+     * @param endDate - End of the date range
+     * @returns Promise that resolves to available dates
+     */
+    calculateAvailableDatesInRange: (startDate: Date, endDate: Date) => Promise<AvailableDate[]>;
+    /**
+     * Calculate available time slots for a specific date
+     * @param date - The date to get time slots for
+     * @returns Promise that resolves to available time slots
+     */
+    calculateAvailableTimeSlotsForDate: (date: Date) => Promise<TimeSlot[]>;
+}
+/**
+ * Configuration for the Fulfillment Details service
+ */
+export interface FulfillmentDetailsServiceConfig {
+    /** The operation to get fulfillment details for */
+    operation?: Operation;
+    /** Initial dispatch type */
+    initialDispatchType?: DispatchType;
+    /** Initial address */
+    initialAddress?: Address;
+    /** Number of days ahead to calculate available dates (default: 30) */
+    daysAhead?: number;
+}
+export declare const FulfillmentDetailsServiceDefinition: string & {
+    __api: FulfillmentDetailsServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & FulfillmentDetailsServiceAPI;
+export declare const FulfillmentDetailsService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: FulfillmentDetailsServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & FulfillmentDetailsServiceAPI, FulfillmentDetailsServiceConfig>;
+/**
+ * Load configuration for the FulfillmentDetailsService
+ * Used for SSR initialization
+ *
+ * @param operation - The operation to configure the service with
+ * @param options - Additional configuration options
+ * @returns The service configuration
+ */
+export declare function loadFulfillmentDetailsServiceConfig(operation: Operation, options?: {
+    initialDispatchType?: DispatchType;
+    initialAddress?: Address;
+    daysAhead?: number;
+}): FulfillmentDetailsServiceConfig;

package/dist/services/fulfillment-details-service.js

@@ -0,0 +1,351 @@
+import { defineService, implementService } from '@wix/services-definitions';
+import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
+import * as operationsSDK from '@wix/auto_sdk_restaurants_operations';
+import { DispatchType, FulfillmentTypeEnum, } from '../types/fulfillments-types.js';
+import { convertDateToTimezone, createTimeSlotId, getLocale, getTimezone, resolveFulfillmentInfo, } from '../utils/fulfillments-utils.js';
+import { createDateFromYMD } from '../utils/date-utils.js';
+import { FulfillmentsServiceDefinition } from './fulfillments-service.js';
+// ========================================
+// Service Definition
+// ========================================
+export const FulfillmentDetailsServiceDefinition = defineService('fulfillment-details');
+// ========================================
+// Service Implementation
+// ========================================
+export const FulfillmentDetailsService = implementService.withConfig()(FulfillmentDetailsServiceDefinition, ({ getService, config }) => {
+    if (!config.operation) {
+        throw new Error('Operation is required for FulfillmentDetailsService');
+    }
+    const fulfillmentsService = getService(FulfillmentsServiceDefinition);
+    const signalsService = getService(SignalsServiceDefinition);
+    const operation = config.operation;
+    const daysAhead = config.daysAhead ?? 30;
+    // ========================================
+    // Initialize Signals
+    // ========================================
+    const timeslot = signalsService.signal(null);
+    const address = signalsService.signal(config?.initialAddress ??
+        fulfillmentsService.selectedDispatchInfoSignal?.get()?.address ??
+        null);
+    const date = signalsService.signal(null);
+    const dispatchType = signalsService.signal(config.initialDispatchType ??
+        fulfillmentsService.selectedFulfillment.get()
+            ?.type ??
+        null);
+    const asapTimeSlot = signalsService.signal(null);
+    const isLoading = signalsService.signal(false);
+    const error = signalsService.signal(null);
+    const availableDates = signalsService.signal([]);
+    const availableTimeSlotsForDate = signalsService.signal([]);
+    const schedulingType = signalsService.signal(fulfillmentsService.schedulingType?.get());
+    // ========================================
+    // Helper Functions
+    // ========================================
+    /**
+     * Process time slots from SDK response to our TimeSlot format
+     */
+    const processTimeSlots = (timeSlotsResponse, targetDispatchType) => {
+        if (!timeSlotsResponse)
+            return [];
+        const slots = [];
+        for (const fulfillmentSlot of timeSlotsResponse) {
+            const { timeSlot, fulfilmentType, fulfillmentInfo } = fulfillmentSlot;
+            // Filter by dispatch type if specified
+            const slotDispatchType = fulfilmentType === 'DELIVERY'
+                ? DispatchType.DELIVERY
+                : DispatchType.PICKUP;
+            if (targetDispatchType && slotDispatchType !== targetDispatchType) {
+                continue;
+            }
+            const { startTime, endTime, orderSchedulingType } = timeSlot ?? {};
+            if (!startTime || !endTime)
+                continue;
+            const selectedFulfillmentInfo = resolveFulfillmentInfo(fulfillmentInfo ?? []);
+            const fulfillmentDetails = {
+                maxTimeOptions: selectedFulfillmentInfo?.maxTime,
+                durationRangeOptions: selectedFulfillmentInfo?.durationRange,
+                ...selectedFulfillmentInfo,
+            };
+            const timezone = getTimezone();
+            const locale = getLocale();
+            slots.push({
+                id: createTimeSlotId(startTime, endTime),
+                startTime: convertDateToTimezone(startTime, timezone, locale),
+                endTime: convertDateToTimezone(endTime, timezone, locale),
+                dispatchType: slotDispatchType,
+                startsNow: orderSchedulingType === operationsSDK.OrderSchedulingType.ASAP,
+                fulfillmentDetails,
+            });
+        }
+        return slots;
+    };
+    /**
+     * Check if two dates are on the same day
+     */
+    const isSameDay = (date1, date2) => {
+        return (date1.getFullYear() === date2.getFullYear() &&
+            date1.getMonth() === date2.getMonth() &&
+            date1.getDate() === date2.getDate());
+    };
+    // ========================================
+    // Action Implementations
+    // ========================================
+    const getTimeslot = () => {
+        return timeslot.get();
+    };
+    const setTimeslot = (slot) => {
+        timeslot.set(slot);
+        // Update date if timeslot has a start time
+        if (slot?.startTime) {
+            date.set(slot.startTime);
+        }
+        // Update dispatch type based on timeslot
+        if (slot?.dispatchType) {
+            dispatchType.set(slot.dispatchType);
+        }
+        // Update asap timeslot if this is an ASAP slot
+        if (slot?.startsNow) {
+            asapTimeSlot.set(slot);
+        }
+    };
+    const setAddress = (addr) => {
+        address.set(addr);
+    };
+    const setDate = async (selectedDate) => {
+        date.set(selectedDate);
+        // Fetch time slots for the selected date
+        if (selectedDate) {
+            await calculateAvailableTimeSlotsForDateFn(selectedDate);
+        }
+        else {
+            availableTimeSlotsForDate.set([]);
+        }
+    };
+    const setDispatchType = (type) => {
+        console.log('setDispatchType', type);
+        dispatchType.set(type);
+        // Re-filter available time slots based on new dispatch type
+        const currentDate = date.get();
+        if (currentDate) {
+            calculateAvailableTimeSlotsForDateFn(currentDate);
+        }
+    };
+    const setAsapTimeSlot = (slot) => {
+        asapTimeSlot.set(slot);
+        if (slot) {
+            timeslot.set(slot);
+            if (slot.startTime) {
+                date.set(slot.startTime);
+            }
+        }
+    };
+    const setSchedulingType = (type) => {
+        schedulingType.set(type);
+        // Find appropriate time slot based on type
+        const slots = availableTimeSlotsForDate.get();
+        const targetSlot = slots.find((slot) => {
+            if (type === FulfillmentTypeEnum.ASAP) {
+                return slot.startsNow;
+            }
+            else {
+                return !slot.startsNow;
+            }
+        });
+        if (targetSlot) {
+            setTimeslot(targetSlot);
+        }
+    };
+    // ========================================
+    // Fetch Method Implementations
+    // ========================================
+    const calculateAvailableDatesInRangeFn = async (startDate, endDate) => {
+        isLoading.set(true);
+        error.set(null);
+        try {
+            // Call the SDK to get available dates in the range
+            const response = await operationsSDK.calculateAvailableDatesInRange(operation.id, {
+                from: {
+                    year: startDate.getFullYear(),
+                    month: startDate.getMonth() + 1, // SDK uses 1-based months
+                    day: startDate.getDate(),
+                },
+                until: {
+                    year: endDate.getFullYear(),
+                    month: endDate.getMonth() + 1,
+                    day: endDate.getDate(),
+                },
+                deliveryAddress: address.get() ?? undefined,
+            });
+            const { availableDatesPerFulfillmentType } = response;
+            // Process the response to extract available dates
+            const datesMap = new Map();
+            const currentDispatchType = dispatchType.get();
+            for (const fulfillmentDates of availableDatesPerFulfillmentType ??
+                []) {
+                const { fulfilmentType, dates } = fulfillmentDates;
+                // Filter by dispatch type if set
+                if (currentDispatchType) {
+                    const slotType = fulfilmentType === 'DELIVERY'
+                        ? DispatchType.DELIVERY
+                        : DispatchType.PICKUP;
+                    if (slotType !== currentDispatchType)
+                        continue;
+                }
+                if (dates) {
+                    for (const sdkDate of dates) {
+                        if (!sdkDate.year || !sdkDate.month || !sdkDate.day)
+                            continue;
+                        const dateObj = createDateFromYMD(sdkDate.year, sdkDate.month, sdkDate.day);
+                        const dateKey = dateObj.toISOString().split('T')[0];
+                        if (!datesMap.has(dateKey)) {
+                            datesMap.set(dateKey, {
+                                date: dateObj,
+                                hasAvailableSlots: true,
+                            });
+                        }
+                    }
+                }
+            }
+            const dates = Array.from(datesMap.values()).sort((a, b) => a.date.getTime() - b.date.getTime());
+            availableDates.set(dates);
+            return dates;
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error
+                ? err.message
+                : 'Failed to calculate available dates';
+            error.set(errorMessage);
+            console.error('Error calculating available dates:', err);
+            return [];
+        }
+        finally {
+            isLoading.set(false);
+        }
+    };
+    const calculateAvailableTimeSlotsForDateFn = async (targetDate) => {
+        isLoading.set(true);
+        error.set(null);
+        try {
+            // Call the SDK to get time slots for the specific date
+            const response = await operationsSDK.calculateAvailableTimeSlotsForDate(operation.id, {
+                date: {
+                    year: targetDate.getFullYear(),
+                    month: targetDate.getMonth() + 1,
+                    day: targetDate.getDate(),
+                },
+                deliveryAddress: address.get() ?? undefined,
+            });
+            const { timeslotsPerFulfillmentType } = response;
+            const currentDispatchType = dispatchType.get();
+            const slots = processTimeSlots(timeslotsPerFulfillmentType, currentDispatchType).reverse();
+            availableTimeSlotsForDate.set(slots);
+            // Auto-select first available slot if none selected
+            if (slots.length > 0 && !timeslot.get()) {
+                const firstAsapSlot = slots.find((s) => s.startsNow);
+                setTimeslot(firstAsapSlot ?? slots[0]);
+            }
+            return slots;
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error
+                ? err.message
+                : 'Failed to calculate time slots for date';
+            error.set(errorMessage);
+            console.error('Error calculating time slots for date:', err);
+            return [];
+        }
+        finally {
+            isLoading.set(false);
+        }
+    };
+    // ========================================
+    // Initialize with default date range
+    // ========================================
+    // Auto-load available dates on service initialization
+    const initializeDates = async () => {
+        const startDate = new Date();
+        startDate.setHours(0, 0, 0, 0);
+        const endDate = new Date();
+        endDate.setDate(endDate.getDate() + daysAhead);
+        endDate.setHours(23, 59, 59, 999);
+        await calculateAvailableDatesInRangeFn(startDate, endDate);
+        // If we have available dates, auto-select today or first available
+        const dates = availableDates.get();
+        if (dates.length > 0) {
+            const today = new Date();
+            const todayAvailable = dates.find((d) => isSameDay(d.date, today) && d.hasAvailableSlots);
+            const firstAvailable = todayAvailable ?? dates.find((d) => d.hasAvailableSlots);
+            if (firstAvailable) {
+                await setDate(firstAvailable.date);
+            }
+        }
+    };
+    // Initialize asynchronously (don't block service creation)
+    initializeDates().catch((err) => {
+        console.error('Error initializing fulfillment details:', err);
+        error.set('Failed to initialize fulfillment details');
+    });
+    // ========================================
+    // Computed Signals
+    // ========================================
+    /**
+     * Available time slots filtered by current dispatch type
+     */
+    const availableTimeSlots = signalsService.computed(() => {
+        const currentDispatchType = dispatchType.get();
+        console.log('currentDispatchType', currentDispatchType);
+        const allTimeSlots = availableTimeSlotsForDate.get();
+        if (!currentDispatchType) {
+            return allTimeSlots;
+        }
+        return allTimeSlots.filter((slot) => slot.dispatchType === currentDispatchType);
+    });
+    // ========================================
+    // Return Service API
+    // ========================================
+    return {
+        // Signals
+        timeslot,
+        address,
+        date,
+        dispatchType,
+        asapTimeSlot,
+        isLoading,
+        error,
+        availableDates,
+        availableTimeSlotsForDate,
+        availableTimeSlots,
+        schedulingType,
+        // Actions
+        getTimeslot,
+        setTimeslot,
+        setAddress,
+        setDate,
+        setDispatchType,
+        setAsapTimeSlot,
+        setSchedulingType,
+        // Fetch methods
+        calculateAvailableDatesInRange: calculateAvailableDatesInRangeFn,
+        calculateAvailableTimeSlotsForDate: calculateAvailableTimeSlotsForDateFn,
+    };
+});
+// ========================================
+// Config Loader
+// ========================================
+/**
+ * Load configuration for the FulfillmentDetailsService
+ * Used for SSR initialization
+ *
+ * @param operation - The operation to configure the service with
+ * @param options - Additional configuration options
+ * @returns The service configuration
+ */
+export function loadFulfillmentDetailsServiceConfig(operation, options) {
+    console.log('options', options);
+    return {
+        operation,
+        initialDispatchType: options?.initialDispatchType,
+        initialAddress: options?.initialAddress,
+        daysAhead: options?.daysAhead ?? 30,
+    };
+}