@wix/headless-restaurants-olo 0.0.33 → 0.0.35

package/dist/react/Settings.js

@@ -4,6 +4,7 @@ import { CoreSettings } from './core/index.js';
 import { DispatchType, } from '../types/fulfillments-types.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { stringFormat } from '../utils/fulfillments-utils.js';
+import { formatTime, getFutureDate, getLocale, getToday, isSameDay, } from '../utils/date-utils.js';
 const DispatchTypeContext = React.createContext(null);
 function useDispatchTypeContext() {
     const context = React.useContext(DispatchTypeContext);
@@ -80,13 +81,6 @@ var TimeSlotDisplayType;
     TimeSlotDisplayType["PREORDER_TOMORROW"] = "PREORDER_TOMORROW";
     TimeSlotDisplayType["SCHEDULED"] = "SCHEDULED";
 })(TimeSlotDisplayType || (TimeSlotDisplayType = {}));
-// Time format options
-const TIME_ONLY_FORMAT = {
-    hour: 'numeric',
-    minute: 'numeric',
-};
-// Helper to format a date as time only (e.g., "10:30 AM")
-const formatTime = (date) => date?.toLocaleString('en-US', TIME_ONLY_FORMAT) ?? '';
 const getTimeSlotDisplayType = (params) => {
     const { asapTime, asapTimeRange, isToday, isTomorrow } = params;
     if (asapTime)
@@ -112,15 +106,15 @@ const formatTimeSlotText = (params, templates) => {
         case TimeSlotDisplayType.ASAP_TIME_RANGE:
             return stringFormat(asapTimeRangeText, asapTimeRange?.minDuration ?? 0, asapTimeRange?.maxDuration ?? 0);
         case TimeSlotDisplayType.PREORDER_TODAY:
-            return stringFormat(preorderTodayText, startTimeStr, endTimeStr);
+            return stringFormat(preorderTodayText, startTimeStr);
         case TimeSlotDisplayType.PREORDER_TOMORROW:
             return stringFormat(preorderTomorrowText, startTimeStr, endTimeStr);
         case TimeSlotDisplayType.SCHEDULED:
         default:
-            return `${timeSlot?.startTime.toLocaleString('en-US', fullDateOptions)} - ${timeSlot?.endTime.toLocaleString('en-US', fullDateOptions)}`;
+            return `${timeSlot?.startTime.toLocaleString(getLocale(), fullDateOptions)} - ${timeSlot?.endTime.toLocaleString(getLocale(), fullDateOptions)}`;
     }
 };
-export const CurrentTimeSlot = React.forwardRef(({ asChild, children, className, deliveryTypeText, pickupTypeText, asapTimeText = '', asapTimeRangeText = '', preorderTodayText = '', preorderTomorrowText = '', ...rest }, ref) => {
+export const CurrentTimeSlot = React.forwardRef(({ asChild, children, className, prefixElement, deliveryTypeText, pickupTypeText, asapTimeText = '', asapTimeRangeText = '', preorderTodayText = '', preorderTomorrowText = '', ...rest }, ref) => {
     const fullDateOptions = {
         month: 'short',
         day: 'numeric',
@@ -128,17 +122,16 @@ export const CurrentTimeSlot = React.forwardRef(({ asChild, children, className,
         minute: 'numeric',
     };
     return (_jsx(CoreSettings.CurrentTimeSlot, { children: ({ timeSlot, hasDetails, asapTime, asapTimeRange }) => {
+            if (!hasDetails)
+                return null;
             const dispatchTypeText = timeSlot?.dispatchType === DispatchType.DELIVERY
                 ? deliveryTypeText
                 : pickupTypeText;
             // Determine if the time slot is today or tomorrow
-            const now = new Date();
-            const isToday = timeSlot?.startTime &&
-                timeSlot.startTime.toDateString() === now.toDateString();
-            const tomorrow = new Date(now);
-            tomorrow.setDate(tomorrow.getDate() + 1);
-            const isTomorrow = timeSlot?.startTime &&
-                timeSlot.startTime.toDateString() === tomorrow.toDateString();
+            const now = getToday();
+            const isToday = timeSlot?.startTime && isSameDay(timeSlot.startTime, now);
+            const tomorrow = getFutureDate(1);
+            const isTomorrow = timeSlot?.startTime && isSameDay(timeSlot.startTime, tomorrow);
             const timeSlotText = formatTimeSlotText({ asapTime, asapTimeRange, timeSlot, isToday, isTomorrow }, {
                 asapTimeText,
                 asapTimeRangeText,
@@ -146,14 +139,14 @@ export const CurrentTimeSlot = React.forwardRef(({ asChild, children, className,
                 preorderTomorrowText,
                 fullDateOptions,
             });
-            return hasDetails ? (_jsxs(AsChildSlot, { ref: ref, asChild: asChild, 
+            return (_jsxs(AsChildSlot, { ref: ref, asChild: asChild, 
                 // testId={TestIds.currentTimeSlot}
                 className: className, customElement: children, customElementProps: {
                     timeSlot,
                     hasDetails,
                     asapTime,
                     asapTimeRange,
-                }, content: timeSlot, ...rest, children: [dispatchTypeText, " ", timeSlotText] })) : undefined;
+                }, content: timeSlot, ...rest, children: [prefixElement, dispatchTypeText, " ", timeSlotText] }));
         } }));
 });
 CurrentTimeSlot.displayName = 'Settings.CurrentTimeSlot';
@@ -283,8 +276,8 @@ export const CurrentLocation = ({ children, className, asChild, }) => {
  * </Settings.MinOrderAmount>
  * ```
  */
-export const MinOrderAmount = ({ children, asChild, className, ...rest }) => {
-    return (_jsx(CoreSettings.MinOrderAmount, { children: ({ minOrderAmount, hasMinOrderAmount }) => (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: { minOrderAmount, hasMinOrderAmount }, content: minOrderAmount?.toString() ?? '', ...rest, children: minOrderAmount && _jsxs("div", { children: ["$", minOrderAmount] }) })) }));
+export const MinOrderAmount = ({ children, asChild, className, label, ...rest }) => {
+    return (_jsx(CoreSettings.MinOrderAmount, { children: ({ minOrderAmount, hasMinOrderAmount }) => (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: { minOrderAmount, hasMinOrderAmount }, content: minOrderAmount?.toString() ?? '', ...rest, children: minOrderAmount && (_jsxs("div", { children: [label && _jsxs("span", { children: [label, " "] }), "$", minOrderAmount] })) })) }));
 };
 /**
  * Headless component for accepting orders status
@@ -349,8 +342,8 @@ export const SelectedAddress = ({ children, asChild, className, ...rest }) => {
  * </Settings.DeliveryFee>
  * ```
  */
-export const DeliveryFee = ({ children, asChild, className, ...rest }) => {
-    return (_jsx(CoreSettings.DeliveryFee, { children: ({ deliveryFee, hasDeliveryFee }) => (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: { deliveryFee, hasDeliveryFee }, content: deliveryFee ?? '', ...rest, children: deliveryFee && _jsx("div", { children: deliveryFee }) })) }));
+export const DeliveryFee = ({ children, asChild, className, label, ...rest }) => {
+    return (_jsx(CoreSettings.DeliveryFee, { children: ({ deliveryFee, hasDeliveryFee }) => (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: { deliveryFee, hasDeliveryFee }, content: deliveryFee ?? '', ...rest, children: deliveryFee && (_jsxs("div", { children: [label && _jsxs("span", { children: [label, " "] }), deliveryFee] })) })) }));
 };
 /**
  * Headless component for free delivery threshold information
@@ -366,9 +359,9 @@ export const DeliveryFee = ({ children, asChild, className, ...rest }) => {
  * </Settings.FreeDeliveryThreshold>
  * ```
  */
-export const FreeDeliveryThreshold = ({ children, asChild, className, ...rest }) => {
+export const FreeDeliveryThreshold = ({ children, asChild, className, label, ...rest }) => {
     return (_jsx(CoreSettings.FreeDeliveryThreshold, { children: ({ freeDeliveryThreshold, hasFreeDeliveryThreshold }) => (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: {
                 freeDeliveryThreshold,
                 hasFreeDeliveryThreshold,
-            }, content: freeDeliveryThreshold ?? '', ...rest, children: freeDeliveryThreshold && _jsx("div", { children: freeDeliveryThreshold }) })) }));
+            }, content: freeDeliveryThreshold ?? '', ...rest, children: freeDeliveryThreshold && (_jsxs("div", { children: [label && _jsxs("span", { children: [label, " "] }), "$", freeDeliveryThreshold] })) })) }));
 };

package/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/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/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/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/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>;