@wix/headless-restaurants-olo 0.0.39 → 0.0.41

package/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,
+    });
+};

package/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/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/services/item-details-service.d.ts

@@ -1,5 +1,5 @@
 import { type Signal, type ReadOnlySignal } from '@wix/services-definitions/core-services/signals';
-import { type LineItem } from '@wix/ecom/services';
+import { type LineItem } from '@wix/headless-ecom/services';
 import { itemVariants } from '@wix/restaurants';
 import type { EnhancedItem } from '@wix/headless-restaurants-menus/services';
 import { AddToCartButtonState, AvailabilityStatus, FutureAvailability, WeeklyAvailability } from './common-types.js';

package/dist/services/olo-settings-service.d.ts

@@ -1,6 +1,6 @@
 import { operations as operationsSDK, operationGroups as operationGroupsSDK } from '@wix/restaurants';
 import { type Signal } from '@wix/services-definitions/core-services/signals';
-import { MenusServiceConfig } from '@wix/restaurants/services';
+import { MenusServiceConfig } from '@wix/headless-restaurants-menus/services';
 export interface OLOSettingsServiceAPI {
     operationGroup: Signal<operationGroupsSDK.OperationGroup | undefined>;
     operation: Signal<operationsSDK.Operation | undefined>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-restaurants-olo",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -54,6 +54,7 @@
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-slot": "^1.1.0",
+    "@wix/atlas": "^1.0.33",
     "@wix/auto_sdk_restaurants_items": "^1.0.48",
     "@wix/ecom": "^1.0.1461",
     "@wix/essentials": "^1.0.0",
@@ -77,5 +78,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "59191113c0b951b4d42c283d168ed5d9476f9d4e37975c43a2ee8cd5"
+  "falconPackageHash": "6f66175564e00a76ca5069b76e7d754e5c75d03c6dc4be5408c6ca4e"
 }