@wix/headless-restaurants-olo 0.0.45 → 0.0.47

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

@@ -381,6 +381,8 @@ interface AddressPickerProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
     predictionSecondaryTextClassName?: string;
     /** Optional class name for the prediction description */
     predictionDescriptionClassName?: string;
+    /** Optional class name for the error message */
+    errorClassName?: string;
     /** Minimum input length before showing predictions (default: 2) */
     minInputLength?: number;
     /** Children render prop that receives the address picker props */
@@ -392,6 +394,7 @@ interface AddressPickerProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
         onPredictionSelect: (prediction: AddressPrediction) => Promise<void>;
         isDelivery: boolean;
         dispatchType: DispatchType | null;
+        error: string | null;
     }> | React.ReactNode;
 }
 export declare const AddressPicker: React.ForwardRefExoticComponent<AddressPickerProps & React.RefAttributes<HTMLDivElement>>;
@@ -441,4 +444,74 @@ interface SaveButtonProps extends Omit<React.ComponentPropsWithoutRef<'button'>,
  * ```
  */
 export declare const SaveButton: React.ForwardRefExoticComponent<SaveButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface DispatchTypeSelectorProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Child components that will have access to dispatch type context */
+    children: React.ReactNode;
+}
+/**
+ * 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
+ * <FulfillmentDetails.DispatchTypeSelector>
+ *   <FulfillmentDetails.DispatchTypeOptions emptyState={<div>No options</div>}>
+ *     <FulfillmentDetails.DispatchTypeOptionRepeater>
+ *       {({ type, isSelected, selectDispatchType }) => (
+ *         <button onClick={() => selectDispatchType(type)}>
+ *           {type} {isSelected && '✓'}
+ *         </button>
+ *       )}
+ *     </FulfillmentDetails.DispatchTypeOptionRepeater>
+ *   </FulfillmentDetails.DispatchTypeOptions>
+ * </FulfillmentDetails.DispatchTypeSelector>
+ * ```
+ */
+export declare const DispatchTypeSelector: React.ForwardRefExoticComponent<DispatchTypeSelectorProps & React.RefAttributes<HTMLDivElement>>;
+interface DispatchTypeOptionsProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Child components to render when dispatch types are available */
+    children: React.ReactNode;
+    /** Optional content to display when no dispatch types are available */
+    emptyState?: React.ReactNode;
+}
+/**
+ * Container for dispatch type options list with empty state support
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.DispatchTypeOptions emptyState={<div>No options available</div>}>
+ *   <FulfillmentDetails.DispatchTypeOptionRepeater>
+ *     {({ type }) => <div>{type}</div>}
+ *   </FulfillmentDetails.DispatchTypeOptionRepeater>
+ * </FulfillmentDetails.DispatchTypeOptions>
+ * ```
+ */
+export declare const DispatchTypeOptions: React.ForwardRefExoticComponent<DispatchTypeOptionsProps & React.RefAttributes<HTMLDivElement>>;
+interface DispatchTypeOptionRepeaterProps {
+    /** Render prop that receives each dispatch type option data */
+    children: (props: {
+        type: DispatchType;
+        isSelected: boolean;
+        selectDispatchType: (type: DispatchType) => void;
+    }) => React.ReactNode;
+}
+/**
+ * Repeater component that renders children for each available dispatch type
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.DispatchTypeOptionRepeater>
+ *   {({ type, isSelected, selectDispatchType }) => (
+ *     <button
+ *       onClick={() => selectDispatchType(type)}
+ *       data-selected={isSelected}
+ *     >
+ *       {type}
+ *     </button>
+ *   )}
+ * </FulfillmentDetails.DispatchTypeOptionRepeater>
+ * ```
+ */
+export declare const DispatchTypeOptionRepeater: React.FC<DispatchTypeOptionRepeaterProps>;
 export {};

package/cjs/dist/react/FulfillmentDetails.js

@@ -13,6 +13,14 @@ function useTimeSlotContext() {
     }
     return context;
 }
+const DispatchTypeContext = React.createContext(null);
+function useDispatchTypeContext() {
+    const context = React.useContext(DispatchTypeContext);
+    if (!context) {
+        throw new Error('useDispatchTypeContext must be used within a FulfillmentDetails.DispatchTypeSelector component');
+    }
+    return context;
+}
 // ========================================
 // FULFILLMENT DETAILS HEADLESS COMPONENTS
 // ========================================
@@ -32,6 +40,9 @@ var TestIds;
     TestIds["addressPickerPredictions"] = "fulfillment-address-picker-predictions";
     TestIds["addressPickerPrediction"] = "fulfillment-address-picker-prediction";
     TestIds["saveButton"] = "fulfillment-save-button";
+    TestIds["dispatchTypeSelector"] = "fulfillment-dispatch-type-selector";
+    TestIds["dispatchTypeOptions"] = "fulfillment-dispatch-type-options";
+    TestIds["dispatchTypeOption"] = "fulfillment-dispatch-type-option";
 })(TestIds || (TestIds = {}));
 /**
  * Root headless component for Fulfillment Details
@@ -482,17 +493,14 @@ const AddressPickerInput = React.memo(({ inputValue, onInputChange, predictions,
         prevProps.onPredictionSelect === nextProps.onPredictionSelect &&
         !predictionsChanged);
 });
-export const AddressPicker = React.forwardRef(({ children, asChild, className, placeholder = 'Enter delivery address', inputClassName, predictionsClassName, predictionClassName, predictionMainTextClassName, predictionSecondaryTextClassName, predictionDescriptionClassName, minInputLength = 2, ...rest }, ref) => {
-    return (_jsx(CoreFulfillmentDetails.AddressPicker, { children: ({ inputValue, onInputChange, predictions, isLoading, onPredictionSelect, isDelivery, dispatchType, }) => {
-            // Don't render anything if not delivery
-            if (!isDelivery) {
-                return null;
-            }
+export const AddressPicker = React.forwardRef(({ children, asChild, className, placeholder = 'Enter delivery address', inputClassName, predictionsClassName, predictionClassName, predictionMainTextClassName, predictionSecondaryTextClassName, predictionDescriptionClassName, errorClassName, minInputLength = 2, ...rest }, ref) => {
+    return (_jsx(CoreFulfillmentDetails.AddressPicker, { children: ({ inputValue, onInputChange, predictions, isLoading, onPredictionSelect, isDelivery, dispatchType, error, }) => {
             // Memoize defaultContent to prevent recreation when only predictions change
             // This ensures the input element maintains focus
             // Note: predictions is passed to AddressPickerInput which handles it internally,
             // so we don't need to recreate defaultContent when only predictions change
-            const defaultContent = useMemo(() => (_jsx("div", { ref: ref, className: className, "data-testid": TestIds.addressPicker, ...rest, children: _jsx(AddressPickerInput, { inputValue: inputValue, onInputChange: onInputChange, predictions: predictions, isLoading: isLoading, placeholder: placeholder, inputClassName: inputClassName, predictionsClassName: predictionsClassName, predictionClassName: predictionClassName, predictionMainTextClassName: predictionMainTextClassName, predictionSecondaryTextClassName: predictionSecondaryTextClassName, predictionDescriptionClassName: predictionDescriptionClassName, onPredictionSelect: onPredictionSelect }) })), 
+            // IMPORTANT: useMemo must be called before any conditional returns to follow Rules of Hooks
+            const defaultContent = useMemo(() => (_jsxs("div", { ref: ref, className: className, "data-testid": TestIds.addressPicker, ...rest, children: [_jsx(AddressPickerInput, { inputValue: inputValue, onInputChange: onInputChange, predictions: predictions, isLoading: isLoading, placeholder: placeholder, inputClassName: inputClassName, predictionsClassName: predictionsClassName, predictionClassName: predictionClassName, predictionMainTextClassName: predictionMainTextClassName, predictionSecondaryTextClassName: predictionSecondaryTextClassName, predictionDescriptionClassName: predictionDescriptionClassName, onPredictionSelect: onPredictionSelect }), error && (_jsx("div", { className: errorClassName, "data-testid": `${TestIds.addressPicker}-error`, children: error }))] })), 
             // Include predictions in deps so AddressPickerInput receives updates
             // AddressPickerInput is memoized and will only re-render when necessary
             [
@@ -508,9 +516,15 @@ export const AddressPicker = React.forwardRef(({ children, asChild, className, p
                 predictionMainTextClassName,
                 predictionSecondaryTextClassName,
                 predictionDescriptionClassName,
+                errorClassName,
+                error,
                 className,
                 // Note: rest and ref are intentionally excluded as they should be stable
             ]);
+            // Don't render anything if not delivery
+            if (!isDelivery) {
+                return null;
+            }
             return (_jsx(AsChildSlot, { asChild: asChild, customElement: children, customElementProps: {
                     inputValue,
                     onInputChange,
@@ -519,6 +533,7 @@ export const AddressPicker = React.forwardRef(({ children, asChild, className, p
                     onPredictionSelect,
                     isDelivery,
                     dispatchType,
+                    error,
                 }, content: defaultContent, children: defaultContent }));
         } }));
 });
@@ -562,3 +577,89 @@ export const SaveButton = React.forwardRef(({ children, asChild, className, savi
         } }));
 });
 SaveButton.displayName = 'FulfillmentDetails.SaveButton';
+/**
+ * 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
+ * <FulfillmentDetails.DispatchTypeSelector>
+ *   <FulfillmentDetails.DispatchTypeOptions emptyState={<div>No options</div>}>
+ *     <FulfillmentDetails.DispatchTypeOptionRepeater>
+ *       {({ type, isSelected, selectDispatchType }) => (
+ *         <button onClick={() => selectDispatchType(type)}>
+ *           {type} {isSelected && '✓'}
+ *         </button>
+ *       )}
+ *     </FulfillmentDetails.DispatchTypeOptionRepeater>
+ *   </FulfillmentDetails.DispatchTypeOptions>
+ * </FulfillmentDetails.DispatchTypeSelector>
+ * ```
+ */
+export const DispatchTypeSelector = React.forwardRef(({ children, className, ...rest }, ref) => {
+    return (_jsx(CoreFulfillmentDetails.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 = 'FulfillmentDetails.DispatchTypeSelector';
+/**
+ * Container for dispatch type options list with empty state support
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.DispatchTypeOptions emptyState={<div>No options available</div>}>
+ *   <FulfillmentDetails.DispatchTypeOptionRepeater>
+ *     {({ type }) => <div>{type}</div>}
+ *   </FulfillmentDetails.DispatchTypeOptionRepeater>
+ * </FulfillmentDetails.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 = 'FulfillmentDetails.DispatchTypeOptions';
+/**
+ * Repeater component that renders children for each available dispatch type
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.DispatchTypeOptionRepeater>
+ *   {({ type, isSelected, selectDispatchType }) => (
+ *     <button
+ *       onClick={() => selectDispatchType(type)}
+ *       data-selected={isSelected}
+ *     >
+ *       {type}
+ *     </button>
+ *   )}
+ * </FulfillmentDetails.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 =
+    'FulfillmentDetails.DispatchTypeOptionRepeater';

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type FulfillmentDetailsServiceConfig } from '../../services/fulfillment-details-service.js';
 import { DispatchType, FulfillmentTypeEnum, TimeSlot } from '../../types/fulfillments-types.js';
+import { StreetAddress } from '../../types/operation.js';
 export interface RootProps {
     children: React.ReactNode;
     fulfillmentDetailsServiceConfig?: FulfillmentDetailsServiceConfig;
@@ -97,6 +98,8 @@ export interface DeliveryAddressFields {
     country?: string;
     /** Formatted full address string */
     formattedAddress?: string;
+    /** Street address */
+    streetAddress?: StreetAddress;
 }
 export interface DeliveryAddressProps {
     children: (props: {
@@ -168,6 +171,8 @@ export interface AddressPickerProps {
         isDelivery: boolean;
         /** Current dispatch type */
         dispatchType: DispatchType | null;
+        /** Error message from the service */
+        error: string | null;
     }) => React.ReactNode;
 }
 /**
@@ -237,3 +242,38 @@ export interface SaveButtonProps {
  * ```
  */
 export declare const SaveButton: React.FC<SaveButtonProps>;
+export interface DispatchTypeSelectorProps {
+    children: (props: {
+        availableTypes: Array<{
+            type: DispatchType;
+            isSelected: boolean;
+        }>;
+        selectedType: DispatchType | null;
+        selectDispatchType: (type: DispatchType) => void;
+        hasTypes: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * Component that provides dispatch type selection (pickup or delivery)
+ * Uses FulfillmentDetailsService to manage dispatch type state
+ *
+ * @example
+ * ```tsx
+ * <CoreFulfillmentDetails.DispatchTypeSelector>
+ *   {({ availableTypes, selectedType, selectDispatchType }) => (
+ *     <div>
+ *       {availableTypes.map(({ type, isSelected }) => (
+ *         <button
+ *           key={type}
+ *           onClick={() => selectDispatchType(type)}
+ *           disabled={isSelected}
+ *         >
+ *           {type} {isSelected && '(selected)'}
+ *         </button>
+ *       ))}
+ *     </div>
+ *   )}
+ * </CoreFulfillmentDetails.DispatchTypeSelector>
+ * ```
+ */
+export declare const DispatchTypeSelector: React.FC<DispatchTypeSelectorProps>;

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

@@ -22,12 +22,19 @@ export const Root = ({ children, fulfillmentDetailsServiceConfig, }) => {
         if (!fulfillmentDetailsServiceConfig &&
             oloSettingsService.operation?.get()) {
             const operation = oloSettingsService.operation.get();
+            const availableDispatchTypes = fulfillmentsService.availableTypes?.get();
             if (operation) {
-                const loadedConfig = loadFulfillmentDetailsServiceConfig(operation);
+                const loadedConfig = loadFulfillmentDetailsServiceConfig(operation, {
+                    availableDispatchTypes,
+                });
                 setConfig(loadedConfig);
             }
         }
-    }, [fulfillmentDetailsServiceConfig, oloSettingsService.operation]);
+    }, [
+        fulfillmentDetailsServiceConfig,
+        oloSettingsService.operation,
+        fulfillmentsService.availableTypes,
+    ]);
     if (!config || isFulfillmentsLoading) {
         return null;
     }
@@ -41,7 +48,7 @@ export const Root = ({ children, fulfillmentDetailsServiceConfig, }) => {
 export const AddressName = ({ children }) => {
     const fulfillmentDetailsService = useService(FulfillmentDetailsServiceDefinition);
     const selectedAddress = fulfillmentDetailsService?.address?.get();
-    console.log('selectedAddress', selectedAddress);
+    const error = fulfillmentDetailsService.error?.get() ?? null;
     const dispatchType = fulfillmentDetailsService.dispatchType?.get();
     const addressName = selectedAddress?.formatted;
     const fullAddress = selectedAddress
@@ -58,7 +65,9 @@ export const AddressName = ({ children }) => {
             .filter(Boolean)
             .join(', ')
         : null;
-    const hasAddress = Boolean(selectedAddress);
+    console.log('error', error);
+    console.log('selectedAddress', selectedAddress);
+    const hasAddress = Boolean(selectedAddress && !error);
     return children({
         addressName,
         fullAddress,
@@ -209,6 +218,7 @@ export const DeliveryAddress = ({ children, }) => {
         : null;
     const hasAddress = Boolean(currentAddress);
     const onAddressChange = (newAddress) => {
+        console.log('onAddressChange', newAddress);
         fulfillmentDetailsService.setAddress(newAddress);
     };
     const onAddressClear = () => {
@@ -379,7 +389,9 @@ export const AddressPicker = ({ children }) => {
                     subdivision: address.subdivision || '',
                     postalCode: address.postalCode || '',
                     country: address.country || '',
-                    formattedAddress,
+                    // @ts-expect-error
+                    formattedAddress: address.formattedAddress || '',
+                    streetAddress: address.streetAddress,
                 };
                 // TODO - check first available time slot & available dates
                 fulfillmentDetailsService.setAddress(addressFields);
@@ -402,6 +414,7 @@ export const AddressPicker = ({ children }) => {
             setIsLoading(false);
         }
     };
+    const error = fulfillmentDetailsService.error?.get() ?? null;
     return children({
         inputValue,
         onInputChange,
@@ -410,6 +423,7 @@ export const AddressPicker = ({ children }) => {
         onPredictionSelect,
         isDelivery,
         dispatchType,
+        error,
     });
 };
 /**
@@ -461,3 +475,48 @@ export const SaveButton = ({ children }) => {
         dispatchType,
     });
 };
+/**
+ * Component that provides dispatch type selection (pickup or delivery)
+ * Uses FulfillmentDetailsService to manage dispatch type state
+ *
+ * @example
+ * ```tsx
+ * <CoreFulfillmentDetails.DispatchTypeSelector>
+ *   {({ availableTypes, selectedType, selectDispatchType }) => (
+ *     <div>
+ *       {availableTypes.map(({ type, isSelected }) => (
+ *         <button
+ *           key={type}
+ *           onClick={() => selectDispatchType(type)}
+ *           disabled={isSelected}
+ *         >
+ *           {type} {isSelected && '(selected)'}
+ *         </button>
+ *       ))}
+ *     </div>
+ *   )}
+ * </CoreFulfillmentDetails.DispatchTypeSelector>
+ * ```
+ */
+export const DispatchTypeSelector = ({ children, }) => {
+    const fulfillmentDetailsService = useService(FulfillmentDetailsServiceDefinition);
+    const selectedType = fulfillmentDetailsService.dispatchType?.get() ?? null;
+    const availableDispatchTypes = fulfillmentDetailsService.availableDispatchTypes?.get() ?? [];
+    // Map available dispatch types to the format needed
+    const availableTypes = availableDispatchTypes.map((type) => ({
+        type,
+        isSelected: type === selectedType,
+    }));
+    console.log('availableTypes', availableTypes);
+    const selectDispatchType = (type) => {
+        console.log('selectDispatchType', type);
+        fulfillmentDetailsService.setDispatchType(type);
+    };
+    const hasTypes = availableTypes.length > 0;
+    return children({
+        availableTypes,
+        selectedType,
+        selectDispatchType,
+        hasTypes,
+    });
+};

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

@@ -36,6 +36,8 @@ export interface FulfillmentDetailsServiceAPI {
     availableTimeSlotsForDate: Signal<TimeSlot[]>;
     /** Available time slots filtered by current dispatch type */
     availableTimeSlots: ReadOnlySignal<TimeSlot[]>;
+    /** Available dispatch types (PICKUP and/or DELIVERY) based on available time slots */
+    availableDispatchTypes: ReadOnlySignal<DispatchType[]>;
     /** Selected scheduling type (ASAP or PREORDER) */
     schedulingType: Signal<FulfillmentTypeEnum | undefined>;
     /**
@@ -101,6 +103,8 @@ export interface FulfillmentDetailsServiceConfig {
     initialAddress?: Address;
     /** Number of days ahead to calculate available dates (default: 30) */
     daysAhead?: number;
+    /** Available dispatch types from fulfillments service */
+    availableDispatchTypes?: DispatchType[];
 }
 export declare const FulfillmentDetailsServiceDefinition: string & {
     __api: FulfillmentDetailsServiceAPI;
@@ -124,4 +128,5 @@ export declare function loadFulfillmentDetailsServiceConfig(operation: Operation
     initialDispatchType?: DispatchType;
     initialAddress?: Address;
     daysAhead?: number;
+    availableDispatchTypes?: DispatchType[];
 }): FulfillmentDetailsServiceConfig;

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

@@ -44,6 +44,24 @@ export const FulfillmentDetailsService = implementService.withConfig()(Fulfillme
     const availableTimeSlotsForDate = signalsService.signal([]);
     const schedulingType = signalsService.signal(fulfillmentsService.schedulingType?.get());
     // ========================================
+    // Sync selectedFulfillment from FulfillmentsService to dispatchType
+    // ========================================
+    // Sync dispatchType when selectedFulfillment changes in FulfillmentsService
+    // Use peek() to read dispatchType without creating a dependency, so the effect
+    // only runs when selectedFulfillment changes, not when dispatchType changes
+    signalsService.effect(() => {
+        const selectedFulfillment = fulfillmentsService.selectedFulfillment?.get();
+        const newDispatchType = selectedFulfillment?.type
+            ? selectedFulfillment.type
+            : null;
+        // Use peek() to read current value without subscribing to changes
+        const currentDispatchType = dispatchType.peek();
+        // Only update if different to avoid unnecessary updates and circular updates
+        if (currentDispatchType !== newDispatchType) {
+            dispatchType.set(newDispatchType);
+        }
+    });
+    // ========================================
     // Helper Functions
     // ========================================
     /**
@@ -115,8 +133,78 @@ export const FulfillmentDetailsService = implementService.withConfig()(Fulfillme
             asapTimeSlot.set(slot);
         }
     };
+    const convertAddressInputToAddress = (address) => {
+        if (!address)
+            return null;
+        const { 
+        // @ts-expect-error
+        addressLine, 
+        // @ts-expect-error
+        streetAddress, 
+        // @ts-expect-error
+        formattedAddress, 
+        // @ts-expect-error
+        location, ...rest } = address;
+        return {
+            streetAddress: streetAddress,
+            addressLine1: formattedAddress,
+            ...rest,
+        };
+    };
+    const initAddress = async (addr) => {
+        isLoading.set(true);
+        error.set(null);
+        try {
+            const commonAddress = convertAddressInputToAddress(addr);
+            // 1. Get first available time slot per operation with the selected address
+            const firstTimeSlotsResponse = await operationsSDK.calculateFirstAvailableTimeSlotPerFulfillmentType(operation.id, {
+                deliveryAddress: commonAddress,
+            });
+            // Find the time slots for this operation
+            const deliveryTimeSlot = firstTimeSlotsResponse.timeslotsPerFulfillmentType?.find((ts) => ts.fulfilmentType === DispatchType.DELIVERY);
+            if (!deliveryTimeSlot?.timeSlot) {
+                isLoading.set(false);
+                // TODO - localize this message
+                error.set('No available time slots found for the selected address');
+                return;
+            }
+            const firstTimeSlot = processTimeSlots([deliveryTimeSlot], DispatchType.DELIVERY)[0];
+            // 2. Fetch time slots for the selected address and date (using firstTimeSlot.startTime)
+            const targetDate = firstTimeSlot.startTime;
+            if (!targetDate) {
+                isLoading.set(false);
+                return;
+            }
+            await calculateAvailableTimeSlotsForDateFn(targetDate);
+            // Set the date and time slot
+            date.set(targetDate);
+            setTimeslot(firstTimeSlot);
+            // 3. Fetch available dates for the selected address
+            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);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to initialize address';
+            error.set(errorMessage);
+            console.error('Error initializing address:', err);
+        }
+        finally {
+            isLoading.set(false);
+        }
+    };
     const setAddress = (addr) => {
         address.set(addr);
+        // Initialize address: fetch first time slot, time slots for date, and available dates
+        if (addr) {
+            initAddress(addr).catch((err) => {
+                console.error('Error initializing address:', err);
+                error.set('Failed to initialize address');
+            });
+        }
     };
     const setDate = async (selectedDate) => {
         date.set(selectedDate);
@@ -129,7 +217,6 @@ export const FulfillmentDetailsService = implementService.withConfig()(Fulfillme
         }
     };
     const setDispatchType = (type) => {
-        console.log('setDispatchType', type);
         dispatchType.set(type);
         // Re-filter available time slots based on new dispatch type
         const currentDate = date.get();
@@ -244,6 +331,7 @@ export const FulfillmentDetailsService = implementService.withConfig()(Fulfillme
             });
             const { timeslotsPerFulfillmentType } = response;
             const currentDispatchType = dispatchType.get();
+            // Process slots filtered by current dispatch type
             const slots = processTimeSlots(timeslotsPerFulfillmentType, currentDispatchType).reverse();
             availableTimeSlotsForDate.set(slots);
             // Auto-select first available slot if none selected
@@ -308,6 +396,12 @@ export const FulfillmentDetailsService = implementService.withConfig()(Fulfillme
         }
         return allTimeSlots.filter((slot) => slot.dispatchType === currentDispatchType);
     });
+    /**
+     * Available dispatch types from config
+     */
+    const availableDispatchTypes = signalsService.computed(() => {
+        return config.availableDispatchTypes ?? [];
+    });
     // ========================================
     // Return Service API
     // ========================================
@@ -323,6 +417,7 @@ export const FulfillmentDetailsService = implementService.withConfig()(Fulfillme
         availableDates,
         availableTimeSlotsForDate,
         availableTimeSlots,
+        availableDispatchTypes,
         schedulingType,
         // Actions
         getTimeslot,
@@ -355,5 +450,6 @@ export function loadFulfillmentDetailsServiceConfig(operation, options) {
         initialDispatchType: options?.initialDispatchType,
         initialAddress: options?.initialAddress,
         daysAhead: options?.daysAhead ?? 30,
+        availableDispatchTypes: options?.availableDispatchTypes,
     };
 }

package/dist/react/FulfillmentDetails.d.ts

@@ -381,6 +381,8 @@ interface AddressPickerProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
     predictionSecondaryTextClassName?: string;
     /** Optional class name for the prediction description */
     predictionDescriptionClassName?: string;
+    /** Optional class name for the error message */
+    errorClassName?: string;
     /** Minimum input length before showing predictions (default: 2) */
     minInputLength?: number;
     /** Children render prop that receives the address picker props */
@@ -392,6 +394,7 @@ interface AddressPickerProps extends Omit<React.ComponentPropsWithoutRef<'div'>,
         onPredictionSelect: (prediction: AddressPrediction) => Promise<void>;
         isDelivery: boolean;
         dispatchType: DispatchType | null;
+        error: string | null;
     }> | React.ReactNode;
 }
 export declare const AddressPicker: React.ForwardRefExoticComponent<AddressPickerProps & React.RefAttributes<HTMLDivElement>>;
@@ -441,4 +444,74 @@ interface SaveButtonProps extends Omit<React.ComponentPropsWithoutRef<'button'>,
  * ```
  */
 export declare const SaveButton: React.ForwardRefExoticComponent<SaveButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface DispatchTypeSelectorProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Child components that will have access to dispatch type context */
+    children: React.ReactNode;
+}
+/**
+ * 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
+ * <FulfillmentDetails.DispatchTypeSelector>
+ *   <FulfillmentDetails.DispatchTypeOptions emptyState={<div>No options</div>}>
+ *     <FulfillmentDetails.DispatchTypeOptionRepeater>
+ *       {({ type, isSelected, selectDispatchType }) => (
+ *         <button onClick={() => selectDispatchType(type)}>
+ *           {type} {isSelected && '✓'}
+ *         </button>
+ *       )}
+ *     </FulfillmentDetails.DispatchTypeOptionRepeater>
+ *   </FulfillmentDetails.DispatchTypeOptions>
+ * </FulfillmentDetails.DispatchTypeSelector>
+ * ```
+ */
+export declare const DispatchTypeSelector: React.ForwardRefExoticComponent<DispatchTypeSelectorProps & React.RefAttributes<HTMLDivElement>>;
+interface DispatchTypeOptionsProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Child components to render when dispatch types are available */
+    children: React.ReactNode;
+    /** Optional content to display when no dispatch types are available */
+    emptyState?: React.ReactNode;
+}
+/**
+ * Container for dispatch type options list with empty state support
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.DispatchTypeOptions emptyState={<div>No options available</div>}>
+ *   <FulfillmentDetails.DispatchTypeOptionRepeater>
+ *     {({ type }) => <div>{type}</div>}
+ *   </FulfillmentDetails.DispatchTypeOptionRepeater>
+ * </FulfillmentDetails.DispatchTypeOptions>
+ * ```
+ */
+export declare const DispatchTypeOptions: React.ForwardRefExoticComponent<DispatchTypeOptionsProps & React.RefAttributes<HTMLDivElement>>;
+interface DispatchTypeOptionRepeaterProps {
+    /** Render prop that receives each dispatch type option data */
+    children: (props: {
+        type: DispatchType;
+        isSelected: boolean;
+        selectDispatchType: (type: DispatchType) => void;
+    }) => React.ReactNode;
+}
+/**
+ * Repeater component that renders children for each available dispatch type
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.DispatchTypeOptionRepeater>
+ *   {({ type, isSelected, selectDispatchType }) => (
+ *     <button
+ *       onClick={() => selectDispatchType(type)}
+ *       data-selected={isSelected}
+ *     >
+ *       {type}
+ *     </button>
+ *   )}
+ * </FulfillmentDetails.DispatchTypeOptionRepeater>
+ * ```
+ */
+export declare const DispatchTypeOptionRepeater: React.FC<DispatchTypeOptionRepeaterProps>;
 export {};

package/dist/react/FulfillmentDetails.js

@@ -13,6 +13,14 @@ function useTimeSlotContext() {
     }
     return context;
 }
+const DispatchTypeContext = React.createContext(null);
+function useDispatchTypeContext() {
+    const context = React.useContext(DispatchTypeContext);
+    if (!context) {
+        throw new Error('useDispatchTypeContext must be used within a FulfillmentDetails.DispatchTypeSelector component');
+    }
+    return context;
+}
 // ========================================
 // FULFILLMENT DETAILS HEADLESS COMPONENTS
 // ========================================
@@ -32,6 +40,9 @@ var TestIds;
     TestIds["addressPickerPredictions"] = "fulfillment-address-picker-predictions";
     TestIds["addressPickerPrediction"] = "fulfillment-address-picker-prediction";
     TestIds["saveButton"] = "fulfillment-save-button";
+    TestIds["dispatchTypeSelector"] = "fulfillment-dispatch-type-selector";
+    TestIds["dispatchTypeOptions"] = "fulfillment-dispatch-type-options";
+    TestIds["dispatchTypeOption"] = "fulfillment-dispatch-type-option";
 })(TestIds || (TestIds = {}));
 /**
  * Root headless component for Fulfillment Details
@@ -482,17 +493,14 @@ const AddressPickerInput = React.memo(({ inputValue, onInputChange, predictions,
         prevProps.onPredictionSelect === nextProps.onPredictionSelect &&
         !predictionsChanged);
 });
-export const AddressPicker = React.forwardRef(({ children, asChild, className, placeholder = 'Enter delivery address', inputClassName, predictionsClassName, predictionClassName, predictionMainTextClassName, predictionSecondaryTextClassName, predictionDescriptionClassName, minInputLength = 2, ...rest }, ref) => {
-    return (_jsx(CoreFulfillmentDetails.AddressPicker, { children: ({ inputValue, onInputChange, predictions, isLoading, onPredictionSelect, isDelivery, dispatchType, }) => {
-            // Don't render anything if not delivery
-            if (!isDelivery) {
-                return null;
-            }
+export const AddressPicker = React.forwardRef(({ children, asChild, className, placeholder = 'Enter delivery address', inputClassName, predictionsClassName, predictionClassName, predictionMainTextClassName, predictionSecondaryTextClassName, predictionDescriptionClassName, errorClassName, minInputLength = 2, ...rest }, ref) => {
+    return (_jsx(CoreFulfillmentDetails.AddressPicker, { children: ({ inputValue, onInputChange, predictions, isLoading, onPredictionSelect, isDelivery, dispatchType, error, }) => {
             // Memoize defaultContent to prevent recreation when only predictions change
             // This ensures the input element maintains focus
             // Note: predictions is passed to AddressPickerInput which handles it internally,
             // so we don't need to recreate defaultContent when only predictions change
-            const defaultContent = useMemo(() => (_jsx("div", { ref: ref, className: className, "data-testid": TestIds.addressPicker, ...rest, children: _jsx(AddressPickerInput, { inputValue: inputValue, onInputChange: onInputChange, predictions: predictions, isLoading: isLoading, placeholder: placeholder, inputClassName: inputClassName, predictionsClassName: predictionsClassName, predictionClassName: predictionClassName, predictionMainTextClassName: predictionMainTextClassName, predictionSecondaryTextClassName: predictionSecondaryTextClassName, predictionDescriptionClassName: predictionDescriptionClassName, onPredictionSelect: onPredictionSelect }) })), 
+            // IMPORTANT: useMemo must be called before any conditional returns to follow Rules of Hooks
+            const defaultContent = useMemo(() => (_jsxs("div", { ref: ref, className: className, "data-testid": TestIds.addressPicker, ...rest, children: [_jsx(AddressPickerInput, { inputValue: inputValue, onInputChange: onInputChange, predictions: predictions, isLoading: isLoading, placeholder: placeholder, inputClassName: inputClassName, predictionsClassName: predictionsClassName, predictionClassName: predictionClassName, predictionMainTextClassName: predictionMainTextClassName, predictionSecondaryTextClassName: predictionSecondaryTextClassName, predictionDescriptionClassName: predictionDescriptionClassName, onPredictionSelect: onPredictionSelect }), error && (_jsx("div", { className: errorClassName, "data-testid": `${TestIds.addressPicker}-error`, children: error }))] })), 
             // Include predictions in deps so AddressPickerInput receives updates
             // AddressPickerInput is memoized and will only re-render when necessary
             [
@@ -508,9 +516,15 @@ export const AddressPicker = React.forwardRef(({ children, asChild, className, p
                 predictionMainTextClassName,
                 predictionSecondaryTextClassName,
                 predictionDescriptionClassName,
+                errorClassName,
+                error,
                 className,
                 // Note: rest and ref are intentionally excluded as they should be stable
             ]);
+            // Don't render anything if not delivery
+            if (!isDelivery) {
+                return null;
+            }
             return (_jsx(AsChildSlot, { asChild: asChild, customElement: children, customElementProps: {
                     inputValue,
                     onInputChange,
@@ -519,6 +533,7 @@ export const AddressPicker = React.forwardRef(({ children, asChild, className, p
                     onPredictionSelect,
                     isDelivery,
                     dispatchType,
+                    error,
                 }, content: defaultContent, children: defaultContent }));
         } }));
 });
@@ -562,3 +577,89 @@ export const SaveButton = React.forwardRef(({ children, asChild, className, savi
         } }));
 });
 SaveButton.displayName = 'FulfillmentDetails.SaveButton';
+/**
+ * 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
+ * <FulfillmentDetails.DispatchTypeSelector>
+ *   <FulfillmentDetails.DispatchTypeOptions emptyState={<div>No options</div>}>
+ *     <FulfillmentDetails.DispatchTypeOptionRepeater>
+ *       {({ type, isSelected, selectDispatchType }) => (
+ *         <button onClick={() => selectDispatchType(type)}>
+ *           {type} {isSelected && '✓'}
+ *         </button>
+ *       )}
+ *     </FulfillmentDetails.DispatchTypeOptionRepeater>
+ *   </FulfillmentDetails.DispatchTypeOptions>
+ * </FulfillmentDetails.DispatchTypeSelector>
+ * ```
+ */
+export const DispatchTypeSelector = React.forwardRef(({ children, className, ...rest }, ref) => {
+    return (_jsx(CoreFulfillmentDetails.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 = 'FulfillmentDetails.DispatchTypeSelector';
+/**
+ * Container for dispatch type options list with empty state support
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.DispatchTypeOptions emptyState={<div>No options available</div>}>
+ *   <FulfillmentDetails.DispatchTypeOptionRepeater>
+ *     {({ type }) => <div>{type}</div>}
+ *   </FulfillmentDetails.DispatchTypeOptionRepeater>
+ * </FulfillmentDetails.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 = 'FulfillmentDetails.DispatchTypeOptions';
+/**
+ * Repeater component that renders children for each available dispatch type
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.DispatchTypeOptionRepeater>
+ *   {({ type, isSelected, selectDispatchType }) => (
+ *     <button
+ *       onClick={() => selectDispatchType(type)}
+ *       data-selected={isSelected}
+ *     >
+ *       {type}
+ *     </button>
+ *   )}
+ * </FulfillmentDetails.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 =
+    'FulfillmentDetails.DispatchTypeOptionRepeater';

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type FulfillmentDetailsServiceConfig } from '../../services/fulfillment-details-service.js';
 import { DispatchType, FulfillmentTypeEnum, TimeSlot } from '../../types/fulfillments-types.js';
+import { StreetAddress } from '../../types/operation.js';
 export interface RootProps {
     children: React.ReactNode;
     fulfillmentDetailsServiceConfig?: FulfillmentDetailsServiceConfig;
@@ -97,6 +98,8 @@ export interface DeliveryAddressFields {
     country?: string;
     /** Formatted full address string */
     formattedAddress?: string;
+    /** Street address */
+    streetAddress?: StreetAddress;
 }
 export interface DeliveryAddressProps {
     children: (props: {
@@ -168,6 +171,8 @@ export interface AddressPickerProps {
         isDelivery: boolean;
         /** Current dispatch type */
         dispatchType: DispatchType | null;
+        /** Error message from the service */
+        error: string | null;
     }) => React.ReactNode;
 }
 /**
@@ -237,3 +242,38 @@ export interface SaveButtonProps {
  * ```
  */
 export declare const SaveButton: React.FC<SaveButtonProps>;
+export interface DispatchTypeSelectorProps {
+    children: (props: {
+        availableTypes: Array<{
+            type: DispatchType;
+            isSelected: boolean;
+        }>;
+        selectedType: DispatchType | null;
+        selectDispatchType: (type: DispatchType) => void;
+        hasTypes: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * Component that provides dispatch type selection (pickup or delivery)
+ * Uses FulfillmentDetailsService to manage dispatch type state
+ *
+ * @example
+ * ```tsx
+ * <CoreFulfillmentDetails.DispatchTypeSelector>
+ *   {({ availableTypes, selectedType, selectDispatchType }) => (
+ *     <div>
+ *       {availableTypes.map(({ type, isSelected }) => (
+ *         <button
+ *           key={type}
+ *           onClick={() => selectDispatchType(type)}
+ *           disabled={isSelected}
+ *         >
+ *           {type} {isSelected && '(selected)'}
+ *         </button>
+ *       ))}
+ *     </div>
+ *   )}
+ * </CoreFulfillmentDetails.DispatchTypeSelector>
+ * ```
+ */
+export declare const DispatchTypeSelector: React.FC<DispatchTypeSelectorProps>;

package/dist/react/core/FulfillmentDetails.js

@@ -22,12 +22,19 @@ export const Root = ({ children, fulfillmentDetailsServiceConfig, }) => {
         if (!fulfillmentDetailsServiceConfig &&
             oloSettingsService.operation?.get()) {
             const operation = oloSettingsService.operation.get();
+            const availableDispatchTypes = fulfillmentsService.availableTypes?.get();
             if (operation) {
-                const loadedConfig = loadFulfillmentDetailsServiceConfig(operation);
+                const loadedConfig = loadFulfillmentDetailsServiceConfig(operation, {
+                    availableDispatchTypes,
+                });
                 setConfig(loadedConfig);
             }
         }
-    }, [fulfillmentDetailsServiceConfig, oloSettingsService.operation]);
+    }, [
+        fulfillmentDetailsServiceConfig,
+        oloSettingsService.operation,
+        fulfillmentsService.availableTypes,
+    ]);
     if (!config || isFulfillmentsLoading) {
         return null;
     }
@@ -41,7 +48,7 @@ export const Root = ({ children, fulfillmentDetailsServiceConfig, }) => {
 export const AddressName = ({ children }) => {
     const fulfillmentDetailsService = useService(FulfillmentDetailsServiceDefinition);
     const selectedAddress = fulfillmentDetailsService?.address?.get();
-    console.log('selectedAddress', selectedAddress);
+    const error = fulfillmentDetailsService.error?.get() ?? null;
     const dispatchType = fulfillmentDetailsService.dispatchType?.get();
     const addressName = selectedAddress?.formatted;
     const fullAddress = selectedAddress
@@ -58,7 +65,9 @@ export const AddressName = ({ children }) => {
             .filter(Boolean)
             .join(', ')
         : null;
-    const hasAddress = Boolean(selectedAddress);
+    console.log('error', error);
+    console.log('selectedAddress', selectedAddress);
+    const hasAddress = Boolean(selectedAddress && !error);
     return children({
         addressName,
         fullAddress,
@@ -209,6 +218,7 @@ export const DeliveryAddress = ({ children, }) => {
         : null;
     const hasAddress = Boolean(currentAddress);
     const onAddressChange = (newAddress) => {
+        console.log('onAddressChange', newAddress);
         fulfillmentDetailsService.setAddress(newAddress);
     };
     const onAddressClear = () => {
@@ -379,7 +389,9 @@ export const AddressPicker = ({ children }) => {
                     subdivision: address.subdivision || '',
                     postalCode: address.postalCode || '',
                     country: address.country || '',
-                    formattedAddress,
+                    // @ts-expect-error
+                    formattedAddress: address.formattedAddress || '',
+                    streetAddress: address.streetAddress,
                 };
                 // TODO - check first available time slot & available dates
                 fulfillmentDetailsService.setAddress(addressFields);
@@ -402,6 +414,7 @@ export const AddressPicker = ({ children }) => {
             setIsLoading(false);
         }
     };
+    const error = fulfillmentDetailsService.error?.get() ?? null;
     return children({
         inputValue,
         onInputChange,
@@ -410,6 +423,7 @@ export const AddressPicker = ({ children }) => {
         onPredictionSelect,
         isDelivery,
         dispatchType,
+        error,
     });
 };
 /**
@@ -461,3 +475,48 @@ export const SaveButton = ({ children }) => {
         dispatchType,
     });
 };
+/**
+ * Component that provides dispatch type selection (pickup or delivery)
+ * Uses FulfillmentDetailsService to manage dispatch type state
+ *
+ * @example
+ * ```tsx
+ * <CoreFulfillmentDetails.DispatchTypeSelector>
+ *   {({ availableTypes, selectedType, selectDispatchType }) => (
+ *     <div>
+ *       {availableTypes.map(({ type, isSelected }) => (
+ *         <button
+ *           key={type}
+ *           onClick={() => selectDispatchType(type)}
+ *           disabled={isSelected}
+ *         >
+ *           {type} {isSelected && '(selected)'}
+ *         </button>
+ *       ))}
+ *     </div>
+ *   )}
+ * </CoreFulfillmentDetails.DispatchTypeSelector>
+ * ```
+ */
+export const DispatchTypeSelector = ({ children, }) => {
+    const fulfillmentDetailsService = useService(FulfillmentDetailsServiceDefinition);
+    const selectedType = fulfillmentDetailsService.dispatchType?.get() ?? null;
+    const availableDispatchTypes = fulfillmentDetailsService.availableDispatchTypes?.get() ?? [];
+    // Map available dispatch types to the format needed
+    const availableTypes = availableDispatchTypes.map((type) => ({
+        type,
+        isSelected: type === selectedType,
+    }));
+    console.log('availableTypes', availableTypes);
+    const selectDispatchType = (type) => {
+        console.log('selectDispatchType', type);
+        fulfillmentDetailsService.setDispatchType(type);
+    };
+    const hasTypes = availableTypes.length > 0;
+    return children({
+        availableTypes,
+        selectedType,
+        selectDispatchType,
+        hasTypes,
+    });
+};

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

@@ -36,6 +36,8 @@ export interface FulfillmentDetailsServiceAPI {
     availableTimeSlotsForDate: Signal<TimeSlot[]>;
     /** Available time slots filtered by current dispatch type */
     availableTimeSlots: ReadOnlySignal<TimeSlot[]>;
+    /** Available dispatch types (PICKUP and/or DELIVERY) based on available time slots */
+    availableDispatchTypes: ReadOnlySignal<DispatchType[]>;
     /** Selected scheduling type (ASAP or PREORDER) */
     schedulingType: Signal<FulfillmentTypeEnum | undefined>;
     /**
@@ -101,6 +103,8 @@ export interface FulfillmentDetailsServiceConfig {
     initialAddress?: Address;
     /** Number of days ahead to calculate available dates (default: 30) */
     daysAhead?: number;
+    /** Available dispatch types from fulfillments service */
+    availableDispatchTypes?: DispatchType[];
 }
 export declare const FulfillmentDetailsServiceDefinition: string & {
     __api: FulfillmentDetailsServiceAPI;
@@ -124,4 +128,5 @@ export declare function loadFulfillmentDetailsServiceConfig(operation: Operation
     initialDispatchType?: DispatchType;
     initialAddress?: Address;
     daysAhead?: number;
+    availableDispatchTypes?: DispatchType[];
 }): FulfillmentDetailsServiceConfig;

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

@@ -44,6 +44,24 @@ export const FulfillmentDetailsService = implementService.withConfig()(Fulfillme
     const availableTimeSlotsForDate = signalsService.signal([]);
     const schedulingType = signalsService.signal(fulfillmentsService.schedulingType?.get());
     // ========================================
+    // Sync selectedFulfillment from FulfillmentsService to dispatchType
+    // ========================================
+    // Sync dispatchType when selectedFulfillment changes in FulfillmentsService
+    // Use peek() to read dispatchType without creating a dependency, so the effect
+    // only runs when selectedFulfillment changes, not when dispatchType changes
+    signalsService.effect(() => {
+        const selectedFulfillment = fulfillmentsService.selectedFulfillment?.get();
+        const newDispatchType = selectedFulfillment?.type
+            ? selectedFulfillment.type
+            : null;
+        // Use peek() to read current value without subscribing to changes
+        const currentDispatchType = dispatchType.peek();
+        // Only update if different to avoid unnecessary updates and circular updates
+        if (currentDispatchType !== newDispatchType) {
+            dispatchType.set(newDispatchType);
+        }
+    });
+    // ========================================
     // Helper Functions
     // ========================================
     /**
@@ -115,8 +133,78 @@ export const FulfillmentDetailsService = implementService.withConfig()(Fulfillme
             asapTimeSlot.set(slot);
         }
     };
+    const convertAddressInputToAddress = (address) => {
+        if (!address)
+            return null;
+        const { 
+        // @ts-expect-error
+        addressLine, 
+        // @ts-expect-error
+        streetAddress, 
+        // @ts-expect-error
+        formattedAddress, 
+        // @ts-expect-error
+        location, ...rest } = address;
+        return {
+            streetAddress: streetAddress,
+            addressLine1: formattedAddress,
+            ...rest,
+        };
+    };
+    const initAddress = async (addr) => {
+        isLoading.set(true);
+        error.set(null);
+        try {
+            const commonAddress = convertAddressInputToAddress(addr);
+            // 1. Get first available time slot per operation with the selected address
+            const firstTimeSlotsResponse = await operationsSDK.calculateFirstAvailableTimeSlotPerFulfillmentType(operation.id, {
+                deliveryAddress: commonAddress,
+            });
+            // Find the time slots for this operation
+            const deliveryTimeSlot = firstTimeSlotsResponse.timeslotsPerFulfillmentType?.find((ts) => ts.fulfilmentType === DispatchType.DELIVERY);
+            if (!deliveryTimeSlot?.timeSlot) {
+                isLoading.set(false);
+                // TODO - localize this message
+                error.set('No available time slots found for the selected address');
+                return;
+            }
+            const firstTimeSlot = processTimeSlots([deliveryTimeSlot], DispatchType.DELIVERY)[0];
+            // 2. Fetch time slots for the selected address and date (using firstTimeSlot.startTime)
+            const targetDate = firstTimeSlot.startTime;
+            if (!targetDate) {
+                isLoading.set(false);
+                return;
+            }
+            await calculateAvailableTimeSlotsForDateFn(targetDate);
+            // Set the date and time slot
+            date.set(targetDate);
+            setTimeslot(firstTimeSlot);
+            // 3. Fetch available dates for the selected address
+            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);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to initialize address';
+            error.set(errorMessage);
+            console.error('Error initializing address:', err);
+        }
+        finally {
+            isLoading.set(false);
+        }
+    };
     const setAddress = (addr) => {
         address.set(addr);
+        // Initialize address: fetch first time slot, time slots for date, and available dates
+        if (addr) {
+            initAddress(addr).catch((err) => {
+                console.error('Error initializing address:', err);
+                error.set('Failed to initialize address');
+            });
+        }
     };
     const setDate = async (selectedDate) => {
         date.set(selectedDate);
@@ -129,7 +217,6 @@ export const FulfillmentDetailsService = implementService.withConfig()(Fulfillme
         }
     };
     const setDispatchType = (type) => {
-        console.log('setDispatchType', type);
         dispatchType.set(type);
         // Re-filter available time slots based on new dispatch type
         const currentDate = date.get();
@@ -244,6 +331,7 @@ export const FulfillmentDetailsService = implementService.withConfig()(Fulfillme
             });
             const { timeslotsPerFulfillmentType } = response;
             const currentDispatchType = dispatchType.get();
+            // Process slots filtered by current dispatch type
             const slots = processTimeSlots(timeslotsPerFulfillmentType, currentDispatchType).reverse();
             availableTimeSlotsForDate.set(slots);
             // Auto-select first available slot if none selected
@@ -308,6 +396,12 @@ export const FulfillmentDetailsService = implementService.withConfig()(Fulfillme
         }
         return allTimeSlots.filter((slot) => slot.dispatchType === currentDispatchType);
     });
+    /**
+     * Available dispatch types from config
+     */
+    const availableDispatchTypes = signalsService.computed(() => {
+        return config.availableDispatchTypes ?? [];
+    });
     // ========================================
     // Return Service API
     // ========================================
@@ -323,6 +417,7 @@ export const FulfillmentDetailsService = implementService.withConfig()(Fulfillme
         availableDates,
         availableTimeSlotsForDate,
         availableTimeSlots,
+        availableDispatchTypes,
         schedulingType,
         // Actions
         getTimeslot,
@@ -355,5 +450,6 @@ export function loadFulfillmentDetailsServiceConfig(operation, options) {
         initialDispatchType: options?.initialDispatchType,
         initialAddress: options?.initialAddress,
         daysAhead: options?.daysAhead ?? 30,
+        availableDispatchTypes: options?.availableDispatchTypes,
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-restaurants-olo",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -59,14 +59,14 @@
     "@wix/ecom": "^1.0.1560",
     "@wix/essentials": "^1.0.0",
     "@wix/headless-components": "0.0.35",
-    "@wix/headless-media": "0.0.18",
-    "@wix/headless-restaurants-menus": "0.0.22",
+    "@wix/headless-media": "0.0.19",
+    "@wix/headless-restaurants-menus": "0.0.23",
     "@wix/headless-utils": "0.0.8",
     "@wix/redirects": "^1.0.0",
     "@wix/restaurants": "^1.0.396",
     "@wix/sdk": "^1.15.24",
-    "@wix/services-definitions": "^0.1.4",
-    "@wix/services-manager-react": "^0.1.26"
+    "@wix/services-definitions": "^1.0.1",
+    "@wix/services-manager-react": "^1.0.2"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -78,5 +78,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "fc2b5a7894052822fdee845ca019b9b8bb662c3414177a0262d70454"
+  "falconPackageHash": "1353a228f4ad617d9b95f1e571f68b1e8c9791b4420c948df62df81f"
 }