@wix/headless-restaurants-olo 0.0.39 → 0.0.40

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

@@ -2,7 +2,12 @@ import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
 import * as operationsSDK from '@wix/auto_sdk_restaurants_operations';
 import { DispatchType, FulfillmentTypeEnum, } from '../types/fulfillments-types.js';
-import { convertDateToTimezone, createTimeSlotId, getLocale, getTimezone, resolveFulfillmentInfo, } from '../utils/fulfillments-utils.js';
+import { 
+// convertDateToTimezone,
+createTimeSlotId, 
+// getLocale,
+// getTimezone,
+resolveFulfillmentInfo, } from '../utils/fulfillments-utils.js';
 import { createDateFromYMD } from '../utils/date-utils.js';
 import { FulfillmentsServiceDefinition } from './fulfillments-service.js';
 // ========================================
@@ -66,12 +71,14 @@ export const FulfillmentDetailsService = implementService.withConfig()(Fulfillme
                 durationRangeOptions: selectedFulfillmentInfo?.durationRange,
                 ...selectedFulfillmentInfo,
             };
-            const timezone = getTimezone();
-            const locale = getLocale();
+            // const timezone = getTimezone();
+            // const locale = getLocale();
             slots.push({
                 id: createTimeSlotId(startTime, endTime),
-                startTime: convertDateToTimezone(startTime, timezone, locale),
-                endTime: convertDateToTimezone(endTime, timezone, locale),
+                // startTime: convertDateToTimezone(startTime, timezone, locale),
+                // endTime: convertDateToTimezone(endTime, timezone, locale),
+                startTime,
+                endTime,
                 dispatchType: slotDispatchType,
                 startsNow: orderSchedulingType === operationsSDK.OrderSchedulingType.ASAP,
                 fulfillmentDetails,
@@ -240,7 +247,8 @@ export const FulfillmentDetailsService = implementService.withConfig()(Fulfillme
             const slots = processTimeSlots(timeslotsPerFulfillmentType, currentDispatchType).reverse();
             availableTimeSlotsForDate.set(slots);
             // Auto-select first available slot if none selected
-            if (slots.length > 0 && !timeslot.get()) {
+            // if (slots.length > 0 && !timeslot.get()) {
+            if (slots.length > 0) {
                 const firstAsapSlot = slots.find((s) => s.startsNow);
                 setTimeslot(firstAsapSlot ?? slots[0]);
             }

package/cjs/dist/services/fulfillments-service.js

@@ -82,10 +82,18 @@ export const FulfillmentsService = implementService.withConfig()(FulfillmentsSer
         const timeSlot = firstAvailableTimeSlots.get()?.find((t) => t.dispatchType === type) ??
             null;
         if (timeSlot) {
-            const timezone = getTimezone();
-            const locale = getLocale();
-            timeSlot.startTime = convertDateToTimezone(timeSlot.startTime, timezone, locale);
-            timeSlot.endTime = convertDateToTimezone(timeSlot.endTime, timezone, locale);
+            // const timezone = getTimezone();
+            // const locale = getLocale();
+            // timeSlot.startTime = convertDateToTimezone(
+            //   timeSlot.startTime,
+            //   timezone,
+            //   locale,
+            // );
+            // timeSlot.endTime = convertDateToTimezone(
+            //   timeSlot.endTime,
+            //   timezone,
+            //   locale,
+            // );
             setSelectedTimeSlot(timeSlot);
         }
     };

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