@wix/headless-restaurants-olo 0.0.33 → 0.0.35

package/cjs/dist/react/core/FulfillmentDetails.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
-import { DispatchType } from '../../types/fulfillments-types.js';
+import { type FulfillmentDetailsServiceConfig } from '../../services/fulfillment-details-service.js';
+import { DispatchType, FulfillmentTypeEnum } from '../../types/fulfillments-types.js';
 export interface RootProps {
     children: React.ReactNode;
+    fulfillmentDetailsServiceConfig?: FulfillmentDetailsServiceConfig;
 }
 /**
  * Root component for FulfillmentDetails
  * Provides context for all fulfillment detail sub-components
+ * Adds FulfillmentDetailsService to the services map after FulfillmentsService is loaded
  */
 export declare const Root: React.FC<RootProps>;
 export interface AddressNameProps {
@@ -56,18 +59,18 @@ export interface AvailableTimeSlotsProps {
  * Shows time ranges when the order can be fulfilled
  */
 export declare const AvailableTimeSlots: React.FC<AvailableTimeSlotsProps>;
-export declare enum FulfillmentTypeEnum {
-    ASAP = "ASAP",
-    PREORDER = "PREORDER",
-    ASAP_AND_FUTURE = "ASAP_AND_FUTURE"
-}
 export interface FulfillmentTypeProps {
     children: (props: {
-        selectedType: FulfillmentTypeEnum;
+        selectedType: FulfillmentTypeEnum | undefined;
         onTypeChange: (type: FulfillmentTypeEnum) => void;
         hasAsapOption: boolean;
         hasPreorderOption: boolean;
         hasAsapAndFutureOption: boolean;
+        asapTime: number | undefined;
+        asapTimeRange: {
+            minDuration?: number;
+            maxDuration?: number;
+        } | undefined;
     }) => React.ReactNode;
 }
 /**
@@ -76,3 +79,66 @@ export interface FulfillmentTypeProps {
  * Pre-order: Order will be fulfilled at a scheduled time
  */
 export declare const FulfillmentType: React.FC<FulfillmentTypeProps>;
+/**
+ * Address fields that can be updated
+ */
+export interface DeliveryAddressFields {
+    /** Street address line 1 */
+    addressLine?: string;
+    /** Street address line 2 (apartment, suite, etc.) */
+    addressLine2?: string;
+    /** City */
+    city?: string;
+    /** State/Province/Subdivision */
+    subdivision?: string;
+    /** Postal/ZIP code */
+    postalCode?: string;
+    /** Country */
+    country?: string;
+    /** Formatted full address string */
+    formattedAddress?: string;
+}
+export interface DeliveryAddressProps {
+    children: (props: {
+        /** Current address fields */
+        address: DeliveryAddressFields | null;
+        /** Whether there is a current address */
+        hasAddress: boolean;
+        /** Current dispatch type */
+        dispatchType: DispatchType | null;
+        /** Whether delivery is selected */
+        isDelivery: boolean;
+        /** Update the delivery address */
+        onAddressChange: (address: DeliveryAddressFields) => void;
+        /** Clear the delivery address */
+        onAddressClear: () => void;
+    }) => React.ReactNode;
+}
+/**
+ * Component that provides delivery address editing functionality
+ * Only renders content when dispatch type is DELIVERY
+ *
+ * @example
+ * ```tsx
+ * <CoreFulfillmentDetails.DeliveryAddress>
+ *   {({ address, hasAddress, isDelivery, onAddressChange, onAddressClear }) => (
+ *     isDelivery && (
+ *       <div>
+ *         <input
+ *           value={address?.addressLine || ''}
+ *           onChange={(e) => onAddressChange({ ...address, addressLine: e.target.value })}
+ *           placeholder="Street Address"
+ *         />
+ *         <input
+ *           value={address?.city || ''}
+ *           onChange={(e) => onAddressChange({ ...address, city: e.target.value })}
+ *           placeholder="City"
+ *         />
+ *         <button onClick={onAddressClear}>Clear</button>
+ *       </div>
+ *     )
+ *   )}
+ * </CoreFulfillmentDetails.DeliveryAddress>
+ * ```
+ */
+export declare const DeliveryAddress: React.FC<DeliveryAddressProps>;

package/cjs/dist/react/core/FulfillmentDetails.js

@@ -1,13 +1,36 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { useService } from '@wix/services-manager-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { WixServices, useService } from '@wix/services-manager-react';
 import { FulfillmentsServiceDefinition } from '../../services/fulfillments-service.js';
+import { FulfillmentDetailsService, FulfillmentDetailsServiceDefinition, loadFulfillmentDetailsServiceConfig, } from '../../services/fulfillment-details-service.js';
+import { OLOSettingsServiceDefinition } from '../../services/olo-settings-service.js';
+import { DispatchType, FulfillmentTypeEnum, } from '../../types/fulfillments-types.js';
+import { createServicesMap } from '@wix/services-manager';
+import { formatTimeRange, getToday, getFutureDate, } from '../../utils/date-utils.js';
 /**
  * Root component for FulfillmentDetails
  * Provides context for all fulfillment detail sub-components
+ * Adds FulfillmentDetailsService to the services map after FulfillmentsService is loaded
  */
-export const Root = ({ children }) => {
-    return _jsx(_Fragment, { children: children });
+export const Root = ({ children, fulfillmentDetailsServiceConfig, }) => {
+    const oloSettingsService = useService(OLOSettingsServiceDefinition);
+    const fulfillmentsService = useService(FulfillmentsServiceDefinition);
+    const [config, setConfig] = useState(fulfillmentDetailsServiceConfig);
+    const isFulfillmentsLoading = fulfillmentsService.isLoading?.get() ?? true;
+    useEffect(() => {
+        if (!fulfillmentDetailsServiceConfig &&
+            oloSettingsService.operation?.get()) {
+            const operation = oloSettingsService.operation.get();
+            if (operation) {
+                const loadedConfig = loadFulfillmentDetailsServiceConfig(operation);
+                setConfig(loadedConfig);
+            }
+        }
+    }, [fulfillmentDetailsServiceConfig, oloSettingsService.operation]);
+    if (!config || isFulfillmentsLoading) {
+        return null;
+    }
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(FulfillmentDetailsServiceDefinition, FulfillmentDetailsService, config), children: children }));
 };
 /**
  * Component that provides the address name for the selected fulfillment
@@ -15,12 +38,11 @@ export const Root = ({ children }) => {
  * For delivery: shows the delivery address
  */
 export const AddressName = ({ children }) => {
-    const fulfillmentsService = useService(FulfillmentsServiceDefinition);
-    const selectedDispatchInfo = fulfillmentsService.selectedDispatchInfoSignal?.get();
-    const selectedAddress = selectedDispatchInfo?.address ?? null;
-    const selectedTimeSlot = fulfillmentsService.selectedTimeSlot?.get();
-    const dispatchType = selectedTimeSlot?.dispatchType ?? null;
-    const addressName = selectedAddress?.formatted ?? null;
+    const fulfillmentDetailsService = useService(FulfillmentDetailsServiceDefinition);
+    const selectedAddress = fulfillmentDetailsService?.address?.get();
+    console.log('selectedAddress', selectedAddress);
+    const dispatchType = fulfillmentDetailsService.dispatchType?.get();
+    const addressName = selectedAddress?.formatted;
     const fullAddress = selectedAddress
         ? [
             // @ts-expect-error - selectedAddress is not typed
@@ -49,30 +71,23 @@ export const AddressName = ({ children }) => {
  */
 export const FulfillmentDate = ({ children, }) => {
     const fulfillmentsService = useService(FulfillmentsServiceDefinition);
-    const selectedTimeSlot = fulfillmentsService.selectedTimeSlot?.get();
-    const [selectedDate, setSelectedDate] = useState(selectedTimeSlot?.startTime ?? null);
-    const onDateChange = (date) => {
-        setSelectedDate(date);
-        // Find time slots for the selected date and update if needed
-        const timeSlots = fulfillmentsService.firstAvailableTimeSlots?.get() ?? [];
-        const slotsForDate = timeSlots.filter((slot) => {
-            const slotDate = new Date(slot.startTime);
-            return (slotDate.getFullYear() === date.getFullYear() &&
-                slotDate.getMonth() === date.getMonth() &&
-                slotDate.getDate() === date.getDate());
-        });
-        // If there are slots for this date, select the first one
-        if (slotsForDate.length > 0) {
-            fulfillmentsService.setSelectedTimeSlot(slotsForDate[0]);
-        }
+    const hasAsapOption = fulfillmentsService.hasAsapOption?.get();
+    const hasAsapAndFutureOption = fulfillmentsService.hasAsapAndFutureOption?.get();
+    if (hasAsapOption && !hasAsapAndFutureOption) {
+        return null;
+    }
+    const fulfillmentDetailsService = useService(FulfillmentDetailsServiceDefinition);
+    if (fulfillmentDetailsService?.schedulingType.get() === FulfillmentTypeEnum.ASAP) {
+        return null;
+    }
+    const selectedDate = fulfillmentDetailsService.date?.get();
+    const availableDates = fulfillmentDetailsService.availableDates?.get() ?? [];
+    const onDateChange = async (date) => {
+        await fulfillmentDetailsService.setDate(date);
     };
-    // Set min date to today
-    const minDate = new Date();
-    minDate.setHours(0, 0, 0, 0);
-    // Set max date to 30 days from now (reasonable booking window)
-    const maxDate = new Date();
-    maxDate.setDate(maxDate.getDate() + 30);
-    maxDate.setHours(23, 59, 59, 999);
+    // Calculate min/max dates from available dates if available, otherwise use defaults
+    const minDate = availableDates[0]?.date ?? getToday();
+    const maxDate = availableDates[availableDates.length - 1]?.date ?? getFutureDate(30);
     return children({
         selectedDate,
         onDateChange,
@@ -86,24 +101,20 @@ export const FulfillmentDate = ({ children, }) => {
  */
 export const AvailableTimeSlots = ({ children, }) => {
     const fulfillmentsService = useService(FulfillmentsServiceDefinition);
-    const timeSlots = fulfillmentsService.firstAvailableTimeSlots?.get() ?? [];
-    console.log('timeSlots', timeSlots);
-    const selectedTimeSlot = fulfillmentsService.selectedTimeSlot?.get();
-    const formatTimeRange = (startTime, endTime) => {
-        const options = {
-            hour: 'numeric',
-            minute: 'numeric',
-            hour12: true,
-        };
-        const start = startTime.toLocaleString('en-US', options);
-        const end = endTime.toLocaleString('en-US', options);
-        return `${start} - ${end}`;
-    };
+    const hasAsapOption = fulfillmentsService.hasAsapOption?.get();
+    const hasAsapAndFutureOption = fulfillmentsService.hasAsapAndFutureOption?.get();
+    if (hasAsapOption && !hasAsapAndFutureOption) {
+        return null;
+    }
+    const fulfillmentDetailsService = useService(FulfillmentDetailsServiceDefinition);
+    if (fulfillmentDetailsService?.schedulingType.get() === FulfillmentTypeEnum.ASAP) {
+        return null;
+    }
+    const timeSlots = fulfillmentDetailsService.availableTimeSlots?.get() ?? [];
+    const selectedTimeSlot = fulfillmentDetailsService.timeslot?.get();
     const timeSlotOptions = timeSlots.map((slot) => ({
         id: slot.id,
-        label: slot.startsNow
-            ? 'ASAP'
-            : formatTimeRange(slot.startTime, slot.endTime),
+        label: formatTimeRange(slot.startTime, slot.endTime),
         startTime: slot.startTime,
         endTime: slot.endTime,
         dispatchType: slot.dispatchType,
@@ -112,7 +123,7 @@ export const AvailableTimeSlots = ({ children, }) => {
     const onTimeSlotChange = (timeSlotId) => {
         const timeSlot = timeSlots.find((slot) => slot.id === timeSlotId);
         if (timeSlot) {
-            fulfillmentsService.setSelectedTimeSlot(timeSlot);
+            fulfillmentDetailsService.setTimeslot(timeSlot);
         }
     };
     const hasTimeSlots = timeSlotOptions.length > 0;
@@ -124,15 +135,6 @@ export const AvailableTimeSlots = ({ children, }) => {
         hasTimeSlots,
     });
 };
-// ========================================
-// FULFILLMENT TYPE COMPONENT
-// ========================================
-export var FulfillmentTypeEnum;
-(function (FulfillmentTypeEnum) {
-    FulfillmentTypeEnum["ASAP"] = "ASAP";
-    FulfillmentTypeEnum["PREORDER"] = "PREORDER";
-    FulfillmentTypeEnum["ASAP_AND_FUTURE"] = "ASAP_AND_FUTURE";
-})(FulfillmentTypeEnum || (FulfillmentTypeEnum = {}));
 /**
  * Component that provides fulfillment type selection (ASAP or Pre-order)
  * ASAP: Order will be fulfilled as soon as possible
@@ -140,38 +142,83 @@ export var FulfillmentTypeEnum;
  */
 export const FulfillmentType = ({ children, }) => {
     const fulfillmentsService = useService(FulfillmentsServiceDefinition);
-    const timeSlots = fulfillmentsService.firstAvailableTimeSlots?.get() ?? [];
-    const selectedTimeSlot = fulfillmentsService.selectedTimeSlot?.get();
-    const hasAsapOption = timeSlots.some((slot) => slot.startsNow);
-    const hasPreorderOption = timeSlots.some((slot) => !slot.startsNow);
-    const currentType = selectedTimeSlot?.startsNow
-        ? FulfillmentTypeEnum.ASAP
-        : FulfillmentTypeEnum.PREORDER;
-    const [selectedType, setSelectedType] = useState(currentType);
+    const fulfillmentDetailsService = useService(FulfillmentDetailsServiceDefinition);
+    // Get fulfillment type options from service
+    const hasAsapOption = fulfillmentsService.hasAsapOption?.get();
+    const hasPreorderOption = fulfillmentsService.hasPreorderOption?.get();
+    const hasAsapAndFutureOption = fulfillmentsService.hasAsapAndFutureOption?.get();
+    const asapTime = fulfillmentsService.asapTimeSignal?.get();
+    const asapTimeRange = fulfillmentsService.asapTimeRangeSignal?.get();
+    const selectedType = fulfillmentDetailsService.schedulingType?.get();
     const onTypeChange = (type) => {
-        console.log('onTypeChange', type);
-        setSelectedType(type);
-        // Find appropriate time slot based on type
-        const targetSlot = timeSlots.find((slot) => {
-            if (type === FulfillmentTypeEnum.ASAP) {
-                return slot.startsNow;
-            }
-            else {
-                return !slot.startsNow;
-            }
-        });
-        if (targetSlot) {
-            fulfillmentsService.setSelectedTimeSlot(targetSlot);
-        }
+        fulfillmentDetailsService.setSchedulingType(type);
     };
-    console.log('selectedType', selectedType);
-    console.log('hasAsapOption', hasAsapOption);
-    console.log('hasPreorderOption', hasPreorderOption);
     return children({
         selectedType,
         onTypeChange,
         hasAsapOption,
         hasPreorderOption,
-        hasAsapAndFutureOption: false,
+        hasAsapAndFutureOption,
+        asapTime,
+        asapTimeRange,
+    });
+};
+/**
+ * Component that provides delivery address editing functionality
+ * Only renders content when dispatch type is DELIVERY
+ *
+ * @example
+ * ```tsx
+ * <CoreFulfillmentDetails.DeliveryAddress>
+ *   {({ address, hasAddress, isDelivery, onAddressChange, onAddressClear }) => (
+ *     isDelivery && (
+ *       <div>
+ *         <input
+ *           value={address?.addressLine || ''}
+ *           onChange={(e) => onAddressChange({ ...address, addressLine: e.target.value })}
+ *           placeholder="Street Address"
+ *         />
+ *         <input
+ *           value={address?.city || ''}
+ *           onChange={(e) => onAddressChange({ ...address, city: e.target.value })}
+ *           placeholder="City"
+ *         />
+ *         <button onClick={onAddressClear}>Clear</button>
+ *       </div>
+ *     )
+ *   )}
+ * </CoreFulfillmentDetails.DeliveryAddress>
+ * ```
+ */
+export const DeliveryAddress = ({ children, }) => {
+    const fulfillmentDetailsService = useService(FulfillmentDetailsServiceDefinition);
+    const currentAddress = fulfillmentDetailsService?.address?.get();
+    const dispatchType = fulfillmentDetailsService.dispatchType?.get();
+    const isDelivery = dispatchType === DispatchType.DELIVERY;
+    const address = currentAddress
+        ? {
+            addressLine: currentAddress.addressLine,
+            addressLine2: currentAddress.addressLine2,
+            city: currentAddress.city,
+            subdivision: currentAddress.subdivision,
+            postalCode: currentAddress.postalCode,
+            country: currentAddress.country,
+            formattedAddress: currentAddress.formattedAddress,
+        }
+        : null;
+    const hasAddress = Boolean(currentAddress);
+    const onAddressChange = (newAddress) => {
+        fulfillmentDetailsService.setAddress(newAddress);
+    };
+    const onAddressClear = () => {
+        fulfillmentDetailsService.setAddress(null);
+    };
+    return children({
+        address,
+        hasAddress,
+        dispatchType,
+        isDelivery,
+        onAddressChange,
+        onAddressClear,
     });
 };

package/cjs/dist/react/core/ItemDetails.d.ts

@@ -21,12 +21,12 @@ interface ItemDetailsLineItemProps {
     addToCartLabelMap: Record<AddToCartButtonState, string>;
     children: (props: {
         loadingState: string | React.ReactNode;
+        onHandleAddToCart: (onClick: (lineItem: LineItem) => void) => void;
         lineItem: LineItem;
         buttonState: AddToCartButtonState;
         addToCartButtonDisabled: boolean;
         labelText: string;
         formattedPrice: string;
-        modifierGroupHasError: boolean;
     }) => React.ReactNode;
 }
 export declare const LineItemComponent: React.FC<ItemDetailsLineItemProps>;

package/cjs/dist/react/core/ItemDetails.js

@@ -2,24 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useService, WixServices } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
-import { ItemService, ItemServiceDefinition, loadItemServiceConfig, } from '../../services/item-details-service.js';
+import { ItemService, ItemServiceDefinition, } from '../../services/item-details-service.js';
 import { OLOSettingsServiceDefinition } from '../../services/olo-settings-service.js';
 import { useItemContext } from '@wix/headless-restaurants-menus/react';
 import { AvailabilityStatus, AddToCartButtonState, } from '../../services/common-types.js';
 import { getAvailabilityText } from '../../services/utils.js';
 export const Root = ({ children, itemDetailsServiceConfig, }) => {
-    const service = useService(OLOSettingsServiceDefinition);
-    const selectedItem = service.selectedItem?.get();
-    const config = itemDetailsServiceConfig ??
-        loadItemServiceConfig({
-            item: selectedItem,
-            // @ts-expect-error - operation is not typed
-            operationId: service.operation?.get()?.id ?? '',
-        });
-    if (config.item) {
-        service.selectedItem?.set(config.item);
-    }
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ItemServiceDefinition, ItemService, config), children: children({ item: itemDetailsServiceConfig?.item ?? selectedItem }) }));
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ItemServiceDefinition, ItemService, itemDetailsServiceConfig), children: children({ item: itemDetailsServiceConfig?.item }) }));
 };
 export const SpecialRequest = ({ children, }) => {
     const service = useService(ItemServiceDefinition);
@@ -42,6 +31,7 @@ export const LineItemComponent = ({ addToCartLabelMap, children, }) => {
     const service = useService(ItemServiceDefinition);
     const oloSettingsService = useService(OLOSettingsServiceDefinition);
     const lineItem = service.lineItem?.get?.() ?? {};
+    const onHandleAddToCart = service.onHandleAddToCart;
     const loadingState = service.isLoading?.get?.() ?? false;
     const buttonState = service.buttonState?.get?.() ?? AddToCartButtonState.VALID_TO_CONTINUE;
     const addToCartButtonDisabled = service.addToCartButtonDisabled?.get?.() ?? false;
@@ -49,15 +39,14 @@ export const LineItemComponent = ({ addToCartLabelMap, children, }) => {
     const formatCurrency = oloSettingsService.formatCurrency;
     const formattedPrice = formatCurrency(price);
     const labelText = addToCartLabelMap[buttonState];
-    const modifierGroupHasError = service.doesModifierGroupHaveError?.get?.() ?? false;
     return children({
         loadingState,
-        lineItem,
+        onHandleAddToCart,
         buttonState,
         addToCartButtonDisabled,
         labelText,
         formattedPrice,
-        modifierGroupHasError,
+        lineItem,
     });
 };
 export const QuantityComponent = ({ children, }) => {

package/cjs/dist/react/core/Settings.d.ts

@@ -12,15 +12,30 @@ export interface RootProps {
  * 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 declare const Root: React.FC<RootProps>;

package/cjs/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();