@wix/headless-restaurants-olo 0.0.44 → 0.0.46

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

@@ -63,17 +63,17 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
         : '');
     const priceVariants = config.item?.priceVariants || [];
     let initialVariant;
-    if (!config.editItemMode) {
-        initialVariant = priceVariants.length > 0 ? priceVariants[0] : undefined;
+    if (config.editItemMode && config.editingItemValues?.selectedVariantId) {
+        initialVariant = priceVariants.find((variant) => variant._id === config.editingItemValues?.selectedVariantId);
     }
     else {
-        if (config.editingItemValues?.selectedVariantId) {
-            initialVariant = priceVariants.find((variant) => variant._id === config.editingItemValues?.selectedVariantId);
-        }
-        else {
-            initialVariant =
-                priceVariants.length > 0 ? priceVariants[0] : undefined;
-        }
+        initialVariant =
+            priceVariants.length > 0
+                ? priceVariants.reduce((cheapest, current) => Number(current.priceInfo?.price) <
+                    Number(cheapest.priceInfo?.price)
+                    ? current
+                    : cheapest)
+                : undefined;
     }
     const selectedVariant = signalsService.signal(initialVariant);
     const modifierGroups = config.item?.modifierGroups || [];

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/ItemDetails.d.ts

@@ -152,6 +152,7 @@ export interface AddToCartButtonProps {
         /** Text label for the button */
         label: React.ReactNode;
         formattedPrice: string;
+        price: number;
     }>;
 }
 /**

package/dist/react/ItemDetails.js

@@ -132,7 +132,7 @@ Variants.displayName = 'ItemDetails.Variants';
  * ```
  */
 export const AddToCartButton = React.forwardRef(({ asChild, children, className, addToCartLabelMap, ...props }, ref) => {
-    return (_jsx(CoreItemDetails.LineItemComponent, { addToCartLabelMap: addToCartLabelMap, children: ({ onHandleAddToCart, buttonState, addToCartButtonDisabled, loadingState, labelText, formattedPrice, lineItem, }) => {
+    return (_jsx(CoreItemDetails.LineItemComponent, { addToCartLabelMap: addToCartLabelMap, children: ({ onHandleAddToCart, buttonState, addToCartButtonDisabled, loadingState, labelText, price, formattedPrice, lineItem, }) => {
             const label = (_jsxs(_Fragment, { children: [_jsx("span", { children: labelText }), " ", _jsx("span", { children: " | " }), _jsx("span", { children: formattedPrice })] }));
             return (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: {
                     buttonState,
@@ -141,6 +141,7 @@ export const AddToCartButton = React.forwardRef(({ asChild, children, className,
                     onHandleAddToCart,
                     label,
                     formattedPrice,
+                    price,
                 }, ref: ref, ...props, children: _jsx(Commerce.Actions.AddToCart, { asChild: false, label: label, className: className, lineItems: [lineItem], ...props }) }));
         } }));
 });

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/react/core/ItemDetails.d.ts

@@ -28,6 +28,7 @@ interface ItemDetailsLineItemProps {
         addToCartButtonDisabled: boolean;
         labelText: string;
         formattedPrice: string;
+        price: number;
     }) => React.ReactNode;
 }
 export declare const LineItemComponent: React.FC<ItemDetailsLineItemProps>;

package/dist/react/core/ItemDetails.js

@@ -48,6 +48,7 @@ export const LineItemComponent = ({ addToCartLabelMap, children, }) => {
         labelText,
         formattedPrice,
         lineItem,
+        price,
     });
 };
 export const QuantityComponent = ({ children, }) => {

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;