@wix/headless-restaurants-olo 0.0.31 → 0.0.32

package/cjs/dist/react/Settings.js

@@ -1,7 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 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';
+const DispatchTypeContext = React.createContext(null);
+function useDispatchTypeContext() {
+    const context = React.useContext(DispatchTypeContext);
+    if (!context) {
+        throw new Error('useDispatchTypeContext must be used within a Settings.DispatchTypeSelector component');
+    }
+    return context;
+}
 // ========================================
 // OLO SETTINGS HEADLESS COMPONENTS
 // ========================================
@@ -13,6 +23,9 @@ import { AsChildSlot } from '@wix/headless-utils/react';
 var TestIds;
 (function (TestIds) {
     TestIds["settingsRoot"] = "settings-root";
+    TestIds["dispatchTypeSelector"] = "dispatch-type-selector";
+    TestIds["dispatchTypeOptions"] = "dispatch-type-options";
+    TestIds["dispatchTypeOption"] = "dispatch-type-option";
 })(TestIds || (TestIds = {}));
 /**
  * Root headless component for OLO Settings
@@ -58,14 +71,177 @@ Root.displayName = 'Settings.Root';
 // export const CurrentTimeSlot2: React.FC<CurrentTimeSlotProps> = ({ children }) => {
 //   return <CoreSettings.CurrentTimeSlot>{children}</CoreSettings.CurrentTimeSlot>;
 // };
-export const CurrentTimeSlot = React.forwardRef(({ asChild, children, className, ...rest }, ref) => {
-    return (_jsx(CoreSettings.CurrentTimeSlot, { children: ({ timeSlot, hasDetails }) => (_jsxs(AsChildSlot, { ref: ref, asChild: asChild, 
-            // testId={TestIds.currentTimeSlot}
-            className: className, customElement: children, customElementProps: { timeSlot, hasDetails }, content: timeSlot, ...rest, children: [timeSlot?.dispatchType, timeSlot?.startTime.toLocaleString() +
-                    ' - ' +
-                    timeSlot?.endTime.toLocaleString()] })) }));
+// Time slot display type enum
+var TimeSlotDisplayType;
+(function (TimeSlotDisplayType) {
+    TimeSlotDisplayType["ASAP_TIME"] = "ASAP_TIME";
+    TimeSlotDisplayType["ASAP_TIME_RANGE"] = "ASAP_TIME_RANGE";
+    TimeSlotDisplayType["PREORDER_TODAY"] = "PREORDER_TODAY";
+    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)
+        return TimeSlotDisplayType.ASAP_TIME;
+    if (asapTimeRange)
+        return TimeSlotDisplayType.ASAP_TIME_RANGE;
+    if (isToday)
+        return TimeSlotDisplayType.PREORDER_TODAY;
+    if (isTomorrow)
+        return TimeSlotDisplayType.PREORDER_TOMORROW;
+    return TimeSlotDisplayType.SCHEDULED;
+};
+const formatTimeSlotText = (params, templates) => {
+    const displayType = getTimeSlotDisplayType(params);
+    const { asapTime, asapTimeRange, timeSlot } = params;
+    const { asapTimeText, asapTimeRangeText, preorderTodayText, preorderTomorrowText, fullDateOptions, } = templates;
+    // Pre-format start and end times
+    const startTimeStr = formatTime(timeSlot?.startTime);
+    const endTimeStr = formatTime(timeSlot?.endTime);
+    switch (displayType) {
+        case TimeSlotDisplayType.ASAP_TIME:
+            return stringFormat(asapTimeText, asapTime);
+        case TimeSlotDisplayType.ASAP_TIME_RANGE:
+            return stringFormat(asapTimeRangeText, asapTimeRange?.minDuration ?? 0, asapTimeRange?.maxDuration ?? 0);
+        case TimeSlotDisplayType.PREORDER_TODAY:
+            return stringFormat(preorderTodayText, startTimeStr, endTimeStr);
+        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)}`;
+    }
+};
+export const CurrentTimeSlot = React.forwardRef(({ asChild, children, className, deliveryTypeText, pickupTypeText, asapTimeText = '', asapTimeRangeText = '', preorderTodayText = '', preorderTomorrowText = '', ...rest }, ref) => {
+    const fullDateOptions = {
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+    };
+    return (_jsx(CoreSettings.CurrentTimeSlot, { children: ({ timeSlot, hasDetails, asapTime, asapTimeRange }) => {
+            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 timeSlotText = formatTimeSlotText({ asapTime, asapTimeRange, timeSlot, isToday, isTomorrow }, {
+                asapTimeText,
+                asapTimeRangeText,
+                preorderTodayText,
+                preorderTomorrowText,
+                fullDateOptions,
+            });
+            return hasDetails ? (_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;
+        } }));
 });
 CurrentTimeSlot.displayName = 'Settings.CurrentTimeSlot';
+/**
+ * Container component for dispatch type selection (pickup or delivery)
+ * Provides context for child components to access dispatch type data
+ * Does not render if no dispatch types are available
+ *
+ * @example
+ * ```tsx
+ * <Settings.DispatchTypeSelector>
+ *   <Settings.DispatchTypeOptions emptyState={<div>No options</div>}>
+ *     <Settings.DispatchTypeOptionRepeater>
+ *       {({ type, isSelected, selectDispatchType }) => (
+ *         <button onClick={() => selectDispatchType(type)}>
+ *           {type} {isSelected && '✓'}
+ *         </button>
+ *       )}
+ *     </Settings.DispatchTypeOptionRepeater>
+ *   </Settings.DispatchTypeOptions>
+ * </Settings.DispatchTypeSelector>
+ * ```
+ */
+export const DispatchTypeSelector = React.forwardRef(({ children, className, ...rest }, ref) => {
+    return (_jsx(CoreSettings.DispatchTypeSelector, { children: ({ availableTypes, selectedType, selectDispatchType, hasTypes }) => {
+            if (!hasTypes)
+                return null;
+            const contextValue = {
+                availableTypes: availableTypes.map(({ type, isSelected }) => ({
+                    type,
+                    isSelected,
+                })),
+                selectedType,
+                selectDispatchType,
+                hasTypes,
+            };
+            return (_jsx(DispatchTypeContext.Provider, { value: contextValue, children: _jsx("div", { ref: ref, className: className, "data-testid": TestIds.dispatchTypeSelector, ...rest, children: children }) }));
+        } }));
+});
+DispatchTypeSelector.displayName = 'Settings.DispatchTypeSelector';
+/**
+ * Container for dispatch type options list with empty state support
+ *
+ * @example
+ * ```tsx
+ * <Settings.DispatchTypeOptions emptyState={<div>No options available</div>}>
+ *   <Settings.DispatchTypeOptionRepeater>
+ *     {({ type }) => <div>{type}</div>}
+ *   </Settings.DispatchTypeOptionRepeater>
+ * </Settings.DispatchTypeOptions>
+ * ```
+ */
+export const DispatchTypeOptions = React.forwardRef(({ children, emptyState, className, ...rest }, ref) => {
+    const { hasTypes } = useDispatchTypeContext();
+    if (!hasTypes) {
+        return emptyState || null;
+    }
+    return (_jsx("div", { ref: ref, className: className, "data-testid": TestIds.dispatchTypeOptions, ...rest, children: children }));
+});
+DispatchTypeOptions.displayName = 'Settings.DispatchTypeOptions';
+/**
+ * Repeater component that renders children for each available dispatch type
+ *
+ * @example
+ * ```tsx
+ * <Settings.DispatchTypeOptionRepeater>
+ *   {({ type, isSelected, selectDispatchType }) => (
+ *     <button
+ *       onClick={() => selectDispatchType(type)}
+ *       data-selected={isSelected}
+ *     >
+ *       {type}
+ *     </button>
+ *   )}
+ * </Settings.DispatchTypeOptionRepeater>
+ * ```
+ */
+export const DispatchTypeOptionRepeater = ({ children }) => {
+    const { availableTypes, selectDispatchType, hasTypes } = useDispatchTypeContext();
+    if (!hasTypes)
+        return null;
+    return (_jsx(_Fragment, { children: availableTypes.map(({ type, isSelected }) => (_jsx(React.Fragment, { children: children({
+                type,
+                isSelected,
+                selectDispatchType,
+            }) }, type))) }));
+};
+DispatchTypeOptionRepeater.displayName = 'Settings.DispatchTypeOptionRepeater';
 /**
  * Headless component for current location data
  * Provides access to store location and coordinates
@@ -94,31 +270,105 @@ export const CurrentLocation = ({ children, className, asChild, }) => {
             className: className, customElement: children, customElementProps: { location, hasLocation }, content: location.name, children: location.name })) }));
 };
 /**
- * Headless component for extra settings data
- * Provides access to ordering status, fees, and thresholds
+ * Headless component for minimum order amount information
  *
  * @example
  * ```tsx
- * <Settings.ExtraData>
- *   {({ extraData, hasExtraData }) => (
- *     hasExtraData ? (
- *       <div>
- *         <p>Status: {extraData.acceptingOrders ? 'Open' : 'Closed'}</p>
- *         {extraData.orderingDisabledReason && (
- *           <p>Reason: {extraData.orderingDisabledReason}</p>
- *         )}
- *         <p>Delivery Fee: ${extraData.deliveryFee}</p>
- *         <p>Min Order: ${extraData.minOrderAmount}</p>
- *         <p>Free Delivery: ${extraData.freeDeliveryThreshold}</p>
- *         <p>Tax Rate: {extraData.taxRate}%</p>
- *       </div>
+ * <Settings.MinOrderAmount>
+ *   {({ minOrderAmount, hasMinOrderAmount }) => (
+ *     hasMinOrderAmount ? (
+ *       <div>Minimum order: ${minOrderAmount}</div>
+ *     ) : null
+ *   )}
+ * </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] }) })) }));
+};
+/**
+ * Headless component for accepting orders status
+ *
+ * @example
+ * ```tsx
+ * <Settings.AcceptingOrders>
+ *   {({ acceptingOrders }) => (
+ *     <div>
+ *       Status: {acceptingOrders ? 'Accepting Orders' : 'Not Accepting Orders'}
+ *     </div>
+ *   )}
+ * </Settings.AcceptingOrders>
+ * ```
+ */
+export const AcceptingOrders = ({ children, asChild, className, ...rest }) => {
+    return (_jsx(CoreSettings.AcceptingOrders, { children: ({ acceptingOrders }) => (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: { acceptingOrders }, content: acceptingOrders.toString(), ...rest, children: _jsx("div", { children: acceptingOrders ? 'Open' : 'Closed' }) })) }));
+};
+/**
+ * Headless component for selected address information
+ *
+ * @example
+ * ```tsx
+ * <Settings.SelectedAddress>
+ *   {({ formattedAddress, selectedType, hasAddress }) => (
+ *     <div>
+ *       <p>{formattedAddress}</p>
+ *       <p>{selectedType}</p>
+ *     </div>
+ *   )}
+ * </Settings.SelectedAddress>
+ * ```
+ */
+export const SelectedAddress = ({ children, asChild, className, ...rest }) => {
+    return (_jsx(CoreSettings.SelectedAddress, { children: ({ selectedAddress, hasAddress, selectedType }) => {
+            const formattedAddress = selectedAddress?.formatted ||
+                [
+                    selectedAddress?.addressLine,
+                    selectedAddress?.city,
+                    selectedAddress?.subdivision,
+                    selectedAddress?.postalCode,
+                    selectedAddress?.country,
+                ]
+                    .filter(Boolean)
+                    .join(', ');
+            return (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: { formattedAddress, selectedType, hasAddress }, content: formattedAddress, ...rest, children: hasAddress && _jsx("div", { children: formattedAddress }) }));
+        } }));
+};
+/**
+ * Headless component for delivery fee information
+ *
+ * @example
+ * ```tsx
+ * <Settings.DeliveryFee>
+ *   {({ deliveryFee, hasDeliveryFee }) => (
+ *     hasDeliveryFee ? (
+ *       <div>Delivery Fee: ${deliveryFee}</div>
  *     ) : (
- *       <div>No additional settings available</div>
+ *       <div>Free Delivery</div>
  *     )
  *   )}
- * </Settings.ExtraData>
+ * </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 }) })) }));
+};
+/**
+ * Headless component for free delivery threshold information
+ *
+ * @example
+ * ```tsx
+ * <Settings.FreeDeliveryThreshold>
+ *   {({ freeDeliveryThreshold, hasFreeDeliveryThreshold }) => (
+ *     hasFreeDeliveryThreshold ? (
+ *       <div>Free delivery on orders over ${freeDeliveryThreshold}</div>
+ *     ) : null
+ *   )}
+ * </Settings.FreeDeliveryThreshold>
  * ```
  */
-export const ExtraData = ({ children, asChild, className, ...rest }) => {
-    return (_jsx(CoreSettings.ExtraData, { children: ({ extraData, hasExtraData }) => (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: { extraData, hasExtraData }, content: (!!extraData?.acceptingOrders).toString(), ...rest, children: _jsx("div", { children: (!!extraData?.acceptingOrders).toString() }) })) }));
+export const FreeDeliveryThreshold = ({ children, asChild, className, ...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 }) })) }));
 };

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

@@ -1,13 +1,20 @@
 import React from 'react';
+import type { EnhancedItem } from '@wix/headless-restaurants-menus/services';
 /**
- * CoreMenuItem
+ * CoreClickableItem
  *
- * A core menu item component that displays the item image, name, description, and price
- * using the project's design system for colors and fonts.
+ * A core component that provides item data with context (menu and section IDs)
+ * without managing global state. Follows the direct props pattern.
  */
+export interface SelectedItemData extends EnhancedItem {
+    sectionId: string;
+    menuId: string;
+}
 export declare function CoreClickableItem({ children, }: {
     children: (props: {
-        item: any;
-        itemSelected: () => void;
+        item: EnhancedItem;
+        sectionId: string;
+        menuId: string;
+        itemData: SelectedItemData;
     }) => React.ReactNode;
 }): React.ReactNode;

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

@@ -1,21 +1,20 @@
 import { useItemContext, useMenuContext, useSectionContext, } from '@wix/headless-restaurants-menus/react';
-import { useService } from '@wix/services-manager-react';
-import { OLOSettingsServiceDefinition } from '@wix/headless-restaurants-olo/services';
-// import { OLOSettingsServiceDefinition } from "../../services/OLOSettingsService";
-/**
- * CoreMenuItem
- *
- * A core menu item component that displays the item image, name, description, and price
- * using the project's design system for colors and fonts.
- */
 export function CoreClickableItem({ children, }) {
     const { item } = useItemContext();
     const { section } = useSectionContext();
     const { menu } = useMenuContext();
-    const service = useService(OLOSettingsServiceDefinition);
-    const itemSelected = () => {
-        const selectedItem = { ...item, sectionId: section._id, menuId: menu._id };
-        service.selectedItem?.set(selectedItem);
+    // Ensure IDs are defined (fallback to empty string if undefined)
+    const sectionId = section._id ?? '';
+    const menuId = menu._id ?? '';
+    const itemData = {
+        ...item,
+        sectionId,
+        menuId,
     };
-    return children({ item, itemSelected });
+    return children({
+        item,
+        sectionId,
+        menuId,
+        itemData,
+    });
 }

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { DispatchType } from '../../types/fulfillments-types.js';
+export interface RootProps {
+    children: React.ReactNode;
+}
+/**
+ * Root component for FulfillmentDetails
+ * Provides context for all fulfillment detail sub-components
+ */
+export declare const Root: React.FC<RootProps>;
+export interface AddressNameProps {
+    children: (props: {
+        addressName: string | null;
+        fullAddress: string | null;
+        hasAddress: boolean;
+        dispatchType: DispatchType | null;
+    }) => React.ReactNode;
+}
+/**
+ * Component that provides the address name for the selected fulfillment
+ * For pickup: shows the restaurant/pickup location name
+ * For delivery: shows the delivery address
+ */
+export declare const AddressName: React.FC<AddressNameProps>;
+export interface FulfillmentDateProps {
+    children: (props: {
+        selectedDate: Date | null;
+        onDateChange: (date: Date) => void;
+        minDate: Date;
+        maxDate: Date;
+    }) => React.ReactNode;
+}
+/**
+ * Component that provides date picker functionality for fulfillment scheduling
+ * Allows users to select when they want to receive their order
+ */
+export declare const FulfillmentDate: React.FC<FulfillmentDateProps>;
+export interface TimeSlotOption {
+    id: string;
+    label: string;
+    startTime: Date;
+    endTime: Date;
+    dispatchType: DispatchType;
+    isAsap: boolean;
+}
+export interface AvailableTimeSlotsProps {
+    children: (props: {
+        timeSlots: TimeSlotOption[];
+        selectedTimeSlotId: string | null;
+        onTimeSlotChange: (timeSlotId: string) => void;
+        hasTimeSlots: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * Component that provides available time slots for the selected date
+ * 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;
+        onTypeChange: (type: FulfillmentTypeEnum) => void;
+        hasAsapOption: boolean;
+        hasPreorderOption: boolean;
+        hasAsapAndFutureOption: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * Component that provides fulfillment type selection (ASAP or Pre-order)
+ * ASAP: Order will be fulfilled as soon as possible
+ * Pre-order: Order will be fulfilled at a scheduled time
+ */
+export declare const FulfillmentType: React.FC<FulfillmentTypeProps>;

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

@@ -0,0 +1,177 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useService } from '@wix/services-manager-react';
+import { FulfillmentsServiceDefinition } from '../../services/fulfillments-service.js';
+/**
+ * Root component for FulfillmentDetails
+ * Provides context for all fulfillment detail sub-components
+ */
+export const Root = ({ children }) => {
+    return _jsx(_Fragment, { children: children });
+};
+/**
+ * Component that provides the address name for the selected fulfillment
+ * For pickup: shows the restaurant/pickup location name
+ * 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 fullAddress = selectedAddress
+        ? [
+            // @ts-expect-error - selectedAddress is not typed
+            selectedAddress.addressLine,
+            selectedAddress.city,
+            // @ts-expect-error - selectedAddress is not typed
+            selectedAddress.subdivision,
+            // @ts-expect-error - selectedAddress is not typed
+            selectedAddress.postalCode,
+            selectedAddress.country,
+        ]
+            .filter(Boolean)
+            .join(', ')
+        : null;
+    const hasAddress = Boolean(selectedAddress);
+    return children({
+        addressName,
+        fullAddress,
+        hasAddress,
+        dispatchType,
+    });
+};
+/**
+ * Component that provides date picker functionality for fulfillment scheduling
+ * Allows users to select when they want to receive their order
+ */
+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]);
+        }
+    };
+    // 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);
+    return children({
+        selectedDate,
+        onDateChange,
+        minDate,
+        maxDate,
+    });
+};
+/**
+ * Component that provides available time slots for the selected date
+ * Shows time ranges when the order can be fulfilled
+ */
+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 timeSlotOptions = timeSlots.map((slot) => ({
+        id: slot.id,
+        label: slot.startsNow
+            ? 'ASAP'
+            : formatTimeRange(slot.startTime, slot.endTime),
+        startTime: slot.startTime,
+        endTime: slot.endTime,
+        dispatchType: slot.dispatchType,
+        isAsap: slot.startsNow ?? false,
+    }));
+    const onTimeSlotChange = (timeSlotId) => {
+        const timeSlot = timeSlots.find((slot) => slot.id === timeSlotId);
+        if (timeSlot) {
+            fulfillmentsService.setSelectedTimeSlot(timeSlot);
+        }
+    };
+    const hasTimeSlots = timeSlotOptions.length > 0;
+    const selectedTimeSlotId = selectedTimeSlot?.id ?? null;
+    return children({
+        timeSlots: timeSlotOptions,
+        selectedTimeSlotId,
+        onTimeSlotChange,
+        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
+ * Pre-order: Order will be fulfilled at a scheduled time
+ */
+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 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);
+        }
+    };
+    console.log('selectedType', selectedType);
+    console.log('hasAsapOption', hasAsapOption);
+    console.log('hasPreorderOption', hasPreorderOption);
+    return children({
+        selectedType,
+        onTypeChange,
+        hasAsapOption,
+        hasPreorderOption,
+        hasAsapAndFutureOption: false,
+    });
+};

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

@@ -10,14 +10,12 @@ import { getAvailabilityText } from '../../services/utils.js';
 export const Root = ({ children, itemDetailsServiceConfig, }) => {
     const service = useService(OLOSettingsServiceDefinition);
     const selectedItem = service.selectedItem?.get();
-    let config = itemDetailsServiceConfig;
-    if (!config) {
-        config = loadItemServiceConfig({
+    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);
     }