@wix/headless-restaurants-olo 0.0.39 → 0.0.41

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

@@ -354,4 +354,91 @@ interface DeliveryAddressProps extends Omit<React.ComponentPropsWithoutRef<'div'
  * ```
  */
 export declare const DeliveryAddress: React.ForwardRefExoticComponent<DeliveryAddressProps & React.RefAttributes<HTMLDivElement>>;
+export interface AddressPrediction {
+    /** The human-readable name of the prediction */
+    description?: string;
+    /** The id of the prediction that can be used in place API */
+    searchId?: string;
+    /** Contains the main text of a prediction, usually the name of the place */
+    mainText?: string;
+    /** Contains the secondary text of a prediction, usually the location of the place */
+    secondaryText?: string;
+}
+interface AddressPickerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Placeholder text for the address input */
+    placeholder?: string;
+    /** Optional class name for the input element */
+    inputClassName?: string;
+    /** Optional class name for the predictions container */
+    predictionsClassName?: string;
+    /** Optional class name for individual prediction items */
+    predictionClassName?: string;
+    /** Optional class name for the prediction main text */
+    predictionMainTextClassName?: string;
+    /** Optional class name for the prediction secondary text */
+    predictionSecondaryTextClassName?: string;
+    /** Optional class name for the prediction description */
+    predictionDescriptionClassName?: string;
+    /** Minimum input length before showing predictions (default: 2) */
+    minInputLength?: number;
+    /** Children render prop that receives the address picker props */
+    children?: AsChildChildren<{
+        inputValue: string;
+        onInputChange: (value: string) => void;
+        predictions: AddressPrediction[];
+        isLoading: boolean;
+        onPredictionSelect: (prediction: AddressPrediction) => Promise<void>;
+        isDelivery: boolean;
+        dispatchType: DispatchType | null;
+    }> | React.ReactNode;
+}
+export declare const AddressPicker: React.ForwardRefExoticComponent<AddressPickerProps & React.RefAttributes<HTMLDivElement>>;
+interface SaveButtonProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'children'> {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Text to display while saving */
+    savingText?: string;
+    /** Text to display when save is available */
+    saveText?: string;
+    /** Children render prop that receives the save state */
+    children?: AsChildChildren<{
+        onSave: () => void;
+        isSaving: boolean;
+        canSave: boolean;
+        hasChanges: boolean;
+        selectedTimeSlot: {
+            id: string;
+            startTime: Date;
+            endTime: Date;
+            dispatchType: DispatchType;
+        } | null;
+        dispatchType: DispatchType | null;
+    }> | React.ReactNode;
+}
+/**
+ * Headless component for saving fulfillment details
+ * Saves the selected time slot to the FulfillmentsService
+ *
+ * @example
+ * ```tsx
+ * // Default usage - renders a save button
+ * <FulfillmentDetails.SaveButton saveText="Confirm" savingText="Saving..." />
+ *
+ * // Using asChild pattern for custom rendering
+ * <FulfillmentDetails.SaveButton asChild>
+ *   {({ onSave, isSaving, canSave, hasChanges }) => (
+ *     <button
+ *       onClick={onSave}
+ *       disabled={!canSave || isSaving}
+ *       className={hasChanges ? 'bg-primary' : 'bg-secondary'}
+ *     >
+ *       {isSaving ? 'Saving...' : hasChanges ? 'Save Changes' : 'Confirm'}
+ *     </button>
+ *   )}
+ * </FulfillmentDetails.SaveButton>
+ * ```
+ */
+export declare const SaveButton: React.ForwardRefExoticComponent<SaveButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/cjs/dist/react/FulfillmentDetails.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
+import React, { useMemo, useRef, useEffect } from 'react';
 import { CoreFulfillmentDetails } from './core/index.js';
 import { FulfillmentTypeEnum, } from '../types/fulfillments-types.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
@@ -27,6 +27,11 @@ var TestIds;
     TestIds["fulfillmentType"] = "fulfillment-type";
     TestIds["deliveryAddress"] = "fulfillment-delivery-address";
     TestIds["deliveryAddressInput"] = "fulfillment-delivery-address-input";
+    TestIds["addressPicker"] = "fulfillment-address-picker";
+    TestIds["addressPickerInput"] = "fulfillment-address-picker-input";
+    TestIds["addressPickerPredictions"] = "fulfillment-address-picker-predictions";
+    TestIds["addressPickerPrediction"] = "fulfillment-address-picker-prediction";
+    TestIds["saveButton"] = "fulfillment-save-button";
 })(TestIds || (TestIds = {}));
 /**
  * Root headless component for Fulfillment Details
@@ -357,3 +362,203 @@ export const DeliveryAddress = React.forwardRef(({ children, asChild, className,
         } }));
 });
 DeliveryAddress.displayName = 'FulfillmentDetails.DeliveryAddress';
+const AddressPickerInput = React.memo(({ inputValue, onInputChange, predictions, isLoading, placeholder, inputClassName, predictionsClassName, predictionClassName, predictionMainTextClassName, predictionSecondaryTextClassName, predictionDescriptionClassName, onPredictionSelect, }) => {
+    // Track focused prediction index for keyboard navigation
+    const [focusedIndex, setFocusedIndex] = React.useState(-1);
+    const listRef = useRef(null);
+    const itemRefs = useRef([]);
+    // Reset focused index when predictions change
+    useEffect(() => {
+        setFocusedIndex(-1);
+        itemRefs.current = [];
+    }, [predictions.length]);
+    // Use ref to store latest onInputChange to keep handleChange stable
+    const onInputChangeRef = useRef(onInputChange);
+    useEffect(() => {
+        onInputChangeRef.current = onInputChange;
+    }, [onInputChange]);
+    // Use ref to store latest onPredictionSelect
+    const onPredictionSelectRef = useRef(onPredictionSelect);
+    useEffect(() => {
+        onPredictionSelectRef.current = onPredictionSelect;
+    }, [onPredictionSelect]);
+    // Stable onChange handler that always calls the latest onInputChange
+    const handleChange = useMemo(() => (e) => {
+        onInputChangeRef.current(e.target.value);
+        // Reset focus when user types
+        setFocusedIndex(-1);
+    }, []);
+    // Handle keyboard navigation
+    const handleKeyDown = useMemo(() => (e) => {
+        if (predictions.length === 0)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                setFocusedIndex((prev) => {
+                    const nextIndex = prev < predictions.length - 1 ? prev + 1 : 0;
+                    // Scroll into view
+                    setTimeout(() => {
+                        itemRefs.current[nextIndex]?.scrollIntoView({
+                            block: 'nearest',
+                            behavior: 'smooth',
+                        });
+                    }, 0);
+                    return nextIndex;
+                });
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setFocusedIndex((prev) => {
+                    const nextIndex = prev > 0 ? prev - 1 : predictions.length - 1;
+                    // Scroll into view
+                    setTimeout(() => {
+                        itemRefs.current[nextIndex]?.scrollIntoView({
+                            block: 'nearest',
+                            behavior: 'smooth',
+                        });
+                    }, 0);
+                    return nextIndex;
+                });
+                break;
+            case 'Enter':
+                if (focusedIndex >= 0 && focusedIndex < predictions.length) {
+                    const selectedPrediction = predictions[focusedIndex];
+                    if (selectedPrediction) {
+                        e.preventDefault();
+                        onPredictionSelectRef.current(selectedPrediction);
+                        setFocusedIndex(-1);
+                    }
+                }
+                break;
+            case 'Escape':
+                setFocusedIndex(-1);
+                break;
+        }
+    }, [predictions, focusedIndex]);
+    const inputElement = useMemo(() => (_jsx("input", { type: "text", className: inputClassName, value: inputValue, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, "data-testid": TestIds.addressPickerInput, "aria-busy": isLoading, "aria-expanded": predictions.length > 0, "aria-controls": predictions.length > 0 ? 'address-picker-predictions' : undefined, role: "combobox" })), [
+        inputValue,
+        inputClassName,
+        placeholder,
+        handleChange,
+        handleKeyDown,
+        isLoading,
+        predictions.length,
+    ]);
+    const predictionsList = predictions.length > 0 ? (_jsx("ul", { ref: listRef, id: "address-picker-predictions", className: predictionsClassName, "data-testid": TestIds.addressPickerPredictions, role: "listbox", children: predictions.map((prediction, index) => {
+            const isFocused = focusedIndex === index;
+            return (_jsxs("li", { ref: (el) => {
+                    itemRefs.current[index] = el;
+                }, className: predictionClassName, onClick: () => {
+                    onPredictionSelect(prediction);
+                    setFocusedIndex(-1);
+                }, onMouseEnter: () => setFocusedIndex(index), onMouseLeave: () => {
+                    // Only clear focus if it was set by mouse (not keyboard)
+                    // Keep keyboard focus until user types or selects
+                }, "data-testid": TestIds.addressPickerPrediction, role: "option", "aria-selected": isFocused, "data-focused": isFocused ? 'true' : undefined, children: [prediction.mainText && (_jsx("div", { className: predictionMainTextClassName, children: prediction.mainText })), prediction.secondaryText && (_jsx("div", { className: predictionSecondaryTextClassName, children: prediction.secondaryText })), !prediction.mainText && !prediction.secondaryText && (_jsx("div", { className: predictionDescriptionClassName, children: prediction.description }))] }, prediction.searchId || index));
+        }) })) : null;
+    return (_jsxs(_Fragment, { children: [inputElement, predictionsList] }));
+}, 
+// Custom comparison function to prevent re-renders when only predictions array reference changes
+// but the actual predictions content is the same
+(prevProps, nextProps) => {
+    // Check if predictions array has actually changed (by comparing lengths and content)
+    const predictionsChanged = prevProps.predictions.length !== nextProps.predictions.length ||
+        prevProps.predictions.some((pred, index) => pred.searchId !== nextProps.predictions[index]?.searchId ||
+            pred.description !== nextProps.predictions[index]?.description);
+    return (prevProps.inputValue === nextProps.inputValue &&
+        prevProps.isLoading === nextProps.isLoading &&
+        prevProps.placeholder === nextProps.placeholder &&
+        prevProps.inputClassName === nextProps.inputClassName &&
+        prevProps.predictionsClassName === nextProps.predictionsClassName &&
+        prevProps.predictionClassName === nextProps.predictionClassName &&
+        prevProps.predictionMainTextClassName ===
+            nextProps.predictionMainTextClassName &&
+        prevProps.predictionSecondaryTextClassName ===
+            nextProps.predictionSecondaryTextClassName &&
+        prevProps.predictionDescriptionClassName ===
+            nextProps.predictionDescriptionClassName &&
+        prevProps.onInputChange === nextProps.onInputChange &&
+        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;
+            }
+            // 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 }) })), 
+            // Include predictions in deps so AddressPickerInput receives updates
+            // AddressPickerInput is memoized and will only re-render when necessary
+            [
+                inputValue,
+                onInputChange,
+                predictions,
+                isLoading,
+                onPredictionSelect,
+                placeholder,
+                inputClassName,
+                predictionsClassName,
+                predictionClassName,
+                predictionMainTextClassName,
+                predictionSecondaryTextClassName,
+                predictionDescriptionClassName,
+                className,
+                // Note: rest and ref are intentionally excluded as they should be stable
+            ]);
+            return (_jsx(AsChildSlot, { asChild: asChild, customElement: children, customElementProps: {
+                    inputValue,
+                    onInputChange,
+                    predictions,
+                    isLoading,
+                    onPredictionSelect,
+                    isDelivery,
+                    dispatchType,
+                }, content: defaultContent, children: defaultContent }));
+        } }));
+});
+AddressPicker.displayName = 'FulfillmentDetails.AddressPicker';
+/**
+ * Headless component for saving fulfillment details
+ * Saves the selected time slot to the FulfillmentsService
+ *
+ * @example
+ * ```tsx
+ * // Default usage - renders a save button
+ * <FulfillmentDetails.SaveButton saveText="Confirm" savingText="Saving..." />
+ *
+ * // Using asChild pattern for custom rendering
+ * <FulfillmentDetails.SaveButton asChild>
+ *   {({ onSave, isSaving, canSave, hasChanges }) => (
+ *     <button
+ *       onClick={onSave}
+ *       disabled={!canSave || isSaving}
+ *       className={hasChanges ? 'bg-primary' : 'bg-secondary'}
+ *     >
+ *       {isSaving ? 'Saving...' : hasChanges ? 'Save Changes' : 'Confirm'}
+ *     </button>
+ *   )}
+ * </FulfillmentDetails.SaveButton>
+ * ```
+ */
+export const SaveButton = React.forwardRef(({ children, asChild, className, savingText = 'Saving...', saveText = 'Save', disabled, ...rest }, ref) => {
+    return (_jsx(CoreFulfillmentDetails.SaveButton, { children: ({ onSave, isSaving, canSave, hasChanges, selectedTimeSlot, dispatchType, }) => {
+            const isDisabled = disabled || !canSave || isSaving;
+            const buttonText = isSaving ? savingText : saveText;
+            const defaultContent = (_jsx("button", { ref: ref, type: "button", className: className, onClick: onSave, disabled: isDisabled, "data-testid": TestIds.saveButton, "data-saving": isSaving, "data-can-save": canSave, "data-has-changes": hasChanges, ...rest, children: buttonText }));
+            return (_jsx(AsChildSlot, { asChild: asChild, customElement: children, customElementProps: {
+                    onSave,
+                    isSaving,
+                    canSave,
+                    hasChanges,
+                    selectedTimeSlot,
+                    dispatchType,
+                }, content: defaultContent, children: defaultContent }));
+        } }));
+});
+SaveButton.displayName = 'FulfillmentDetails.SaveButton';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type FulfillmentDetailsServiceConfig } from '../../services/fulfillment-details-service.js';
-import { DispatchType, FulfillmentTypeEnum } from '../../types/fulfillments-types.js';
+import { DispatchType, FulfillmentTypeEnum, TimeSlot } from '../../types/fulfillments-types.js';
 export interface RootProps {
     children: React.ReactNode;
     fulfillmentDetailsServiceConfig?: FulfillmentDetailsServiceConfig;
@@ -142,3 +142,98 @@ export interface DeliveryAddressProps {
  * ```
  */
 export declare const DeliveryAddress: React.FC<DeliveryAddressProps>;
+export interface AddressPrediction {
+    /** The human-readable name of the prediction */
+    description?: string;
+    /** The id of the prediction that can be used in place API */
+    searchId?: string;
+    /** Contains the main text of a prediction, usually the name of the place */
+    mainText?: string;
+    /** Contains the secondary text of a prediction, usually the location of the place */
+    secondaryText?: string;
+}
+export interface AddressPickerProps {
+    children: (props: {
+        /** Current input value */
+        inputValue: string;
+        /** Update the input value */
+        onInputChange: (value: string) => void;
+        /** List of address predictions */
+        predictions: AddressPrediction[];
+        /** Whether predictions are being loaded */
+        isLoading: boolean;
+        /** Select a prediction and fetch place details */
+        onPredictionSelect: (prediction: AddressPrediction) => Promise<void>;
+        /** Whether delivery is selected */
+        isDelivery: boolean;
+        /** Current dispatch type */
+        dispatchType: DispatchType | null;
+    }) => React.ReactNode;
+}
+/**
+ * Component that provides address autocomplete functionality
+ * Uses Atlas Autocomplete to predict addresses and Atlas Places to get place details
+ * Only provides functionality when dispatch type is DELIVERY
+ *
+ * @example
+ * ```tsx
+ * <CoreFulfillmentDetails.AddressPicker>
+ *   {({ inputValue, onInputChange, predictions, onPredictionSelect, isDelivery }) => (
+ *     isDelivery && (
+ *       <div>
+ *         <input
+ *           value={inputValue}
+ *           onChange={(e) => onInputChange(e.target.value)}
+ *           placeholder="Enter address"
+ *         />
+ *         {predictions.length > 0 && (
+ *           <ul>
+ *             {predictions.map((prediction, index) => (
+ *               <li
+ *                 key={prediction.searchId || index}
+ *                 onClick={() => onPredictionSelect(prediction)}
+ *               >
+ *                 {prediction.description}
+ *               </li>
+ *             ))}
+ *           </ul>
+ *         )}
+ *       </div>
+ *     )
+ *   )}
+ * </CoreFulfillmentDetails.AddressPicker>
+ * ```
+ */
+export declare const AddressPicker: React.FC<AddressPickerProps>;
+export interface SaveButtonProps {
+    children: (props: {
+        /** Save the current fulfillment details to the fulfillments service */
+        onSave: () => void;
+        /** Whether save operation is in progress */
+        isSaving: boolean;
+        /** Whether there are valid details to save */
+        canSave: boolean;
+        /** Whether the details have been modified */
+        hasChanges: boolean;
+        /** The currently selected time slot */
+        selectedTimeSlot: TimeSlot | null;
+        /** The currently selected dispatch type */
+        dispatchType: DispatchType | null;
+    }) => React.ReactNode;
+}
+/**
+ * Component that provides save functionality for fulfillment details
+ * Saves the selected time slot from FulfillmentDetailsService to FulfillmentsService
+ *
+ * @example
+ * ```tsx
+ * <CoreFulfillmentDetails.SaveButton>
+ *   {({ onSave, isSaving, canSave }) => (
+ *     <button onClick={onSave} disabled={!canSave || isSaving}>
+ *       {isSaving ? 'Saving...' : 'Save'}
+ *     </button>
+ *   )}
+ * </CoreFulfillmentDetails.SaveButton>
+ * ```
+ */
+export declare const SaveButton: React.FC<SaveButtonProps>;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { WixServices, useService } from '@wix/services-manager-react';
 import { FulfillmentsServiceDefinition } from '../../services/fulfillments-service.js';
 import { FulfillmentDetailsService, FulfillmentDetailsServiceDefinition, loadFulfillmentDetailsServiceConfig, } from '../../services/fulfillment-details-service.js';
@@ -7,6 +7,7 @@ import { OLOSettingsServiceDefinition } from '../../services/olo-settings-servic
 import { DispatchType, FulfillmentTypeEnum, } from '../../types/fulfillments-types.js';
 import { createServicesMap } from '@wix/services-manager';
 import { formatTimeRange, getToday, getFutureDate, } from '../../utils/date-utils.js';
+import { autocomplete, places } from '@wix/atlas';
 /**
  * Root component for FulfillmentDetails
  * Provides context for all fulfillment detail sub-components
@@ -222,3 +223,241 @@ export const DeliveryAddress = ({ children, }) => {
         onAddressClear,
     });
 };
+/**
+ * Component that provides address autocomplete functionality
+ * Uses Atlas Autocomplete to predict addresses and Atlas Places to get place details
+ * Only provides functionality when dispatch type is DELIVERY
+ *
+ * @example
+ * ```tsx
+ * <CoreFulfillmentDetails.AddressPicker>
+ *   {({ inputValue, onInputChange, predictions, onPredictionSelect, isDelivery }) => (
+ *     isDelivery && (
+ *       <div>
+ *         <input
+ *           value={inputValue}
+ *           onChange={(e) => onInputChange(e.target.value)}
+ *           placeholder="Enter address"
+ *         />
+ *         {predictions.length > 0 && (
+ *           <ul>
+ *             {predictions.map((prediction, index) => (
+ *               <li
+ *                 key={prediction.searchId || index}
+ *                 onClick={() => onPredictionSelect(prediction)}
+ *               >
+ *                 {prediction.description}
+ *               </li>
+ *             ))}
+ *           </ul>
+ *         )}
+ *       </div>
+ *     )
+ *   )}
+ * </CoreFulfillmentDetails.AddressPicker>
+ * ```
+ */
+export const AddressPicker = ({ children }) => {
+    const fulfillmentDetailsService = useService(FulfillmentDetailsServiceDefinition);
+    const dispatchType = fulfillmentDetailsService.dispatchType?.get();
+    const isDelivery = dispatchType === DispatchType.DELIVERY;
+    const currentAddress = fulfillmentDetailsService?.address?.get();
+    const [inputValue, setInputValue] = useState(currentAddress?.formattedAddress ||
+        currentAddress?.addressLine ||
+        '');
+    const [predictions, setPredictions] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [sessionToken, setSessionToken] = useState(null);
+    const isUserTypingRef = useRef(false);
+    const typingTimeoutRef = useRef(null);
+    // Generate a new session token when input changes
+    useEffect(() => {
+        if (inputValue.length > 0) {
+            const newToken = crypto.randomUUID();
+            setSessionToken(newToken);
+        }
+    }, [inputValue]);
+    // Update input value when address changes externally
+    // Only update if user is not actively typing to prevent focus loss
+    useEffect(() => {
+        // Skip update if user is currently typing
+        if (isUserTypingRef.current) {
+            return;
+        }
+        const address = fulfillmentDetailsService?.address?.get();
+        if (address) {
+            const formatted = address.formattedAddress || address.addressLine || '';
+            if (formatted !== inputValue) {
+                setInputValue(formatted);
+            }
+        }
+        else if (!address && inputValue) {
+            setInputValue('');
+        }
+    }, [currentAddress, inputValue]);
+    const onInputChange = async (value) => {
+        // Clear any existing timeout
+        if (typingTimeoutRef.current) {
+            clearTimeout(typingTimeoutRef.current);
+        }
+        // Mark that user is typing to prevent external updates from overwriting
+        isUserTypingRef.current = true;
+        setInputValue(value);
+        // Reset typing flag after user stops typing for 1 second
+        typingTimeoutRef.current = setTimeout(() => {
+            isUserTypingRef.current = false;
+            typingTimeoutRef.current = null;
+        }, 1000);
+        if (value.length < 2) {
+            setPredictions([]);
+            return;
+        }
+        setIsLoading(true);
+        try {
+            // Check if autocomplete module is available
+            if (!autocomplete || typeof autocomplete.predict !== 'function') {
+                throw new Error('Autocomplete predict function is not available');
+            }
+            const response = await autocomplete.predict(value, {
+                sessionToken: sessionToken || undefined,
+            });
+            const addressPredictions = response.predictions?.map((prediction) => ({
+                description: prediction.description,
+                searchId: prediction.searchId,
+                mainText: prediction.textStructure?.mainText,
+                secondaryText: prediction.textStructure?.secondaryText,
+            })) || [];
+            setPredictions(addressPredictions);
+        }
+        catch (error) {
+            console.error('Error fetching address predictions:', error);
+            // Log more details about the error
+            if (error?.response?.status === 404) {
+                console.error('API endpoint not found. Make sure you are in a Wix environment with proper permissions.');
+            }
+            setPredictions([]);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const onPredictionSelect = async (prediction) => {
+        if (!prediction.searchId) {
+            console.error('Prediction missing searchId');
+            return;
+        }
+        setIsLoading(true);
+        try {
+            // Check if places module is available
+            if (!places || typeof places.getPlace !== 'function') {
+                throw new Error('Places getPlace function is not available');
+            }
+            const response = await places.getPlace(prediction.searchId, {
+                sessionToken: sessionToken || undefined,
+            });
+            if (response.place?.address) {
+                const address = response.place.address;
+                const addressLine = address.addressLine ||
+                    address.addressLine1 ||
+                    (address.streetAddress
+                        ? `${address.streetAddress.number || ''} ${address.streetAddress.name || ''}`.trim()
+                        : '') ||
+                    '';
+                // Construct formatted address from components
+                const addressParts = [
+                    addressLine,
+                    address.city,
+                    address.subdivision,
+                    address.postalCode,
+                    address.country,
+                ].filter(Boolean);
+                const formattedAddress = addressParts.join(', ') || prediction.description || '';
+                const addressFields = {
+                    addressLine,
+                    addressLine2: address.addressLine2 || '',
+                    city: address.city || '',
+                    subdivision: address.subdivision || '',
+                    postalCode: address.postalCode || '',
+                    country: address.country || '',
+                    formattedAddress,
+                };
+                // TODO - check first available time slot & available dates
+                fulfillmentDetailsService.setAddress(addressFields);
+                // Clear any pending timeout and mark that this is a programmatic update, not user typing
+                if (typingTimeoutRef.current) {
+                    clearTimeout(typingTimeoutRef.current);
+                    typingTimeoutRef.current = null;
+                }
+                isUserTypingRef.current = false;
+                setInputValue(formattedAddress);
+                setPredictions([]);
+                // Invalidate session token after place selection
+                setSessionToken(null);
+            }
+        }
+        catch (error) {
+            console.error('Error fetching place details:', error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return children({
+        inputValue,
+        onInputChange,
+        predictions,
+        isLoading,
+        onPredictionSelect,
+        isDelivery,
+        dispatchType,
+    });
+};
+/**
+ * Component that provides save functionality for fulfillment details
+ * Saves the selected time slot from FulfillmentDetailsService to FulfillmentsService
+ *
+ * @example
+ * ```tsx
+ * <CoreFulfillmentDetails.SaveButton>
+ *   {({ onSave, isSaving, canSave }) => (
+ *     <button onClick={onSave} disabled={!canSave || isSaving}>
+ *       {isSaving ? 'Saving...' : 'Save'}
+ *     </button>
+ *   )}
+ * </CoreFulfillmentDetails.SaveButton>
+ * ```
+ */
+export const SaveButton = ({ children }) => {
+    const [isSaving, setIsSaving] = useState(false);
+    const fulfillmentsService = useService(FulfillmentsServiceDefinition);
+    const fulfillmentDetailsService = useService(FulfillmentDetailsServiceDefinition);
+    const selectedTimeSlot = fulfillmentDetailsService?.timeslot?.get() ?? null;
+    const dispatchType = fulfillmentDetailsService?.dispatchType?.get() ?? null;
+    // Compare with the current fulfillments service state to determine if there are changes
+    const currentFulfillmentsTimeSlot = fulfillmentsService?.selectedTimeSlot?.get() ?? null;
+    const hasChanges = selectedTimeSlot?.id !== currentFulfillmentsTimeSlot?.id ||
+        selectedTimeSlot?.startTime?.getTime() !==
+            currentFulfillmentsTimeSlot?.startTime?.getTime();
+    const canSave = selectedTimeSlot !== null;
+    const onSave = () => {
+        if (!selectedTimeSlot || isSaving || !hasChanges)
+            return;
+        setIsSaving(true);
+        try {
+            console.log('onSave', selectedTimeSlot);
+            // Save the selected time slot to the fulfillments service
+            fulfillmentsService.setSelectedTimeSlot(selectedTimeSlot);
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    return children({
+        onSave,
+        isSaving,
+        canSave,
+        hasChanges,
+        selectedTimeSlot,
+        dispatchType,
+    });
+};