@wix/headless-restaurants-olo 0.0.14 → 0.0.15

package/dist/react/Settings.js

@@ -0,0 +1,94 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { CoreSettings } from './core/index.js';
+// import { OLOSettingsServiceConfig } from '../services/olo-settings-service.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
+/**
+ * Headless component for current store details
+ * Provides access to store name, address, contact info, and hours
+ *
+ * @example
+ * ```tsx
+ * <Settings.CurrentTimeSlot>
+ *   {({ details, hasDetails }) => (
+ *     hasDetails ? (
+ *       <div>
+ *         <h3>{details.name}</h3>
+ *         <p>{details.address}</p>
+ *         <p>{details.phone}</p>
+ *         <p>{details.email}</p>
+ *       </div>
+ *     ) : (
+ *       <div>No store details available</div>
+ *     )
+ *   )}
+ * </Settings.CurrentTimeSlot>
+ * ```
+ */
+// export const CurrentTimeSlot2: React.FC<CurrentTimeSlotProps> = ({ children }) => {
+//   return <CoreSettings.CurrentTimeSlot>{children}</CoreSettings.CurrentTimeSlot>;
+// };
+export const CurrentTimeSlot = React.forwardRef(({ asChild, children, className, ...rest }, ref) => {
+    return (_jsx(CoreSettings.CurrentTimeSlot, { children: ({ timeSlot, hasDetails }) => (_jsxs(AsChildSlot, { ref: ref, asChild: asChild, 
+            // testId={TestIds.currentTimeSlot}
+            className: className, customElement: children, customElementProps: { timeSlot, hasDetails }, content: timeSlot, ...rest, children: [timeSlot?.dispatchType, timeSlot?.startTime.toLocaleString() +
+                    ' - ' +
+                    timeSlot?.endTime.toLocaleString()] })) }));
+});
+CurrentTimeSlot.displayName = 'Settings.CurrentTimeSlot';
+/**
+ * Headless component for current location data
+ * Provides access to store location and coordinates
+ *
+ * @example
+ * ```tsx
+ * <Settings.CurrentLocation>
+ *   {({ location, hasLocation }) => (
+ *     <div>
+ *       <p>{currentLocation.name}</p>
+ *       {hasLocation && (
+ *         <p>Coordinates: {location.latitude}, {location.longitude}</p>
+ *       )}
+ *     </div>
+ *   )}
+ * </Settings.CurrentLocation>
+ * ```
+ */
+export const CurrentLocation = ({ children, className, asChild, }) => {
+    return (_jsx(CoreSettings.CurrentLocation, { children: ({ location, hasLocation }) => (_jsx(AsChildSlot
+        // ref={ref}
+        , { 
+            // ref={ref}
+            asChild: asChild, 
+            // testId={TestIds.currentLocation}
+            className: className, customElement: children, customElementProps: { location, hasLocation }, content: location.name, children: location.name })) }));
+};
+/**
+ * Headless component for extra settings data
+ * Provides access to ordering status, fees, and thresholds
+ *
+ * @example
+ * ```tsx
+ * <Settings.ExtraData>
+ *   {({ extraData, hasExtraData }) => (
+ *     hasExtraData ? (
+ *       <div>
+ *         <p>Status: {extraData.acceptingOrders ? 'Open' : 'Closed'}</p>
+ *         {extraData.orderingDisabledReason && (
+ *           <p>Reason: {extraData.orderingDisabledReason}</p>
+ *         )}
+ *         <p>Delivery Fee: ${extraData.deliveryFee}</p>
+ *         <p>Min Order: ${extraData.minOrderAmount}</p>
+ *         <p>Free Delivery: ${extraData.freeDeliveryThreshold}</p>
+ *         <p>Tax Rate: {extraData.taxRate}%</p>
+ *       </div>
+ *     ) : (
+ *       <div>No additional settings available</div>
+ *     )
+ *   )}
+ * </Settings.ExtraData>
+ * ```
+ */
+export const ExtraData = ({ children }) => {
+    return _jsx(CoreSettings.ExtraData, { children: children });
+};

package/dist/react/core/ItemDetails.js

@@ -10,11 +10,13 @@ import { convertModifierToFormModifier } from '../../services/utils.js';
 export const Root = ({ children, itemDetailsServiceConfig, }) => {
     const service = useService(OLOSettingsServiceDefinition);
     const selectedItem = service.selectedItem?.get();
+    console.log('selectedItem', selectedItem, itemDetailsServiceConfig);
     let config = itemDetailsServiceConfig;
     if (!config) {
         config = loadItemServiceConfig({
             item: selectedItem,
-            operationId: service.operation?.get()?._id ?? '',
+            // @ts-expect-error - operation is not typed
+            operationId: service.operation?.get()?.id ?? '',
         });
     }
     if (config.item) {

package/dist/react/core/OLO.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { createServicesMap } from '@wix/services-manager';
 import { WixServices } from '@wix/services-manager-react';
 // import { ItemService, ItemServiceDefinition, loadItemServiceConfig } from '@/components/restaurants-olo/services/itemDetailsService';
 import { OLOSettingsService, OLOSettingsServiceDefinition, } from '@wix/headless-restaurants-olo/services';
+import { FulfillmentsService, FulfillmentsServiceDefinition, loadFulfillmentsServiceConfig, } from '../../services/fulfillments-service.js';
 /**
  * Core OLO Root component that sets up service management
  * Provides ItemService and CurrentCartService to child components
@@ -24,6 +25,9 @@ import { OLOSettingsService, OLOSettingsServiceDefinition, } from '@wix/headless
  * ```
  */
 export const Root = ({ itemId, itemServiceConfig, cartServiceConfig, oloSettingsServiceConfig, children, }) => {
+    const [fulfillmentsServiceConfig, setFulfillmentsServiceConfig] = useState({
+        operation: oloSettingsServiceConfig?.operation ?? undefined,
+    });
     // const [servicesManager, setServicesManager] = useState<ServicesManager | null>(null);
     // const [isLoading, setIsLoading] = useState(true);
     // const [error, setError] = useState<string | undefined>();
@@ -86,7 +90,17 @@ export const Root = ({ itemId, itemServiceConfig, cartServiceConfig, oloSettings
     //     hasServices
     //   });
     console.log('oloSettingsServiceConfig', oloSettingsServiceConfig);
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(OLOSettingsServiceDefinition, OLOSettingsService, oloSettingsServiceConfig), children: children }));
+    useEffect(() => {
+        if (oloSettingsServiceConfig?.operation?._id) {
+            loadFulfillmentsServiceConfig(oloSettingsServiceConfig.operation).then((config) => {
+                console.log('config', config);
+                setFulfillmentsServiceConfig(config);
+            });
+        }
+    }, [oloSettingsServiceConfig?.operation?._id]);
+    return (_jsx(WixServices, { servicesMap: createServicesMap()
+            .addService(OLOSettingsServiceDefinition, OLOSettingsService, oloSettingsServiceConfig)
+            .addService(FulfillmentsServiceDefinition, FulfillmentsService, fulfillmentsServiceConfig), children: children }));
 };
 /**
  * Convenience wrapper that combines Root with ServicesManagerProvider

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { MenusServiceConfig } from '@wix/headless-restaurants-menus/services';
+export interface OLOMenusRootProps {
+    config: MenusServiceConfig;
+    children: (updatedConfig: MenusServiceConfig) => React.ReactNode;
+}
+export declare const Root: React.ForwardRefExoticComponent<OLOMenusRootProps & React.RefAttributes<HTMLElement>>;

package/dist/react/core/OLOMenus.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { OLOSettingsServiceDefinition } from '../../services/olo-settings-service.js';
+import { useService } from '@wix/services-manager-react';
+export const Root = React.forwardRef(function OLOMenusRoot({ config, children }) {
+    const service = useService(OLOSettingsServiceDefinition);
+    const filteredMenus = service.filterMenus(config.menus);
+    const hasMenus = Array.isArray(filteredMenus) && filteredMenus.length > 0;
+    if (!hasMenus)
+        return null;
+    config.menus = filteredMenus;
+    return children(config);
+});

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

@@ -0,0 +1,157 @@
+import React from 'react';
+import * as operationsSDK from '@wix/auto_sdk_restaurants_operations';
+import { TimeSlot } from '../../types/fulfillments-types.js';
+interface CurrentTime {
+    timeSlot: string;
+}
+interface CurrentFulfillment {
+    current?: operationsSDK.TimeSlot;
+}
+interface CurrentLocation {
+    name: string;
+}
+interface ExtraData {
+    acceptingOrders: boolean;
+    deliveryFee?: number;
+    minOrderAmount?: number;
+    freeDeliveryThreshold?: number;
+    taxRate?: number;
+    serviceCharge?: number;
+    isOnline?: boolean;
+    orderingDisabledReason?: string;
+}
+interface SettingsData {
+    currentTime: CurrentTime;
+    currentFulfillment: CurrentFulfillment;
+    currentLocation: CurrentLocation;
+    selectedFulfillment: any;
+    extraData: ExtraData;
+    isLoading: boolean;
+    error?: string | null;
+}
+interface SettingsRootProps {
+    children: (props: SettingsData) => React.ReactNode;
+}
+/**
+ * Core Settings component that provides access to OLO settings data
+ * Integrates with OLOSettingsService to expose operation and operation group data
+ *
+ * @example
+ * ```tsx
+ * <CoreSettings.Root>
+ *   {({ currentDetails, currentFulfillment, currentLocation, extraData, isLoading, error }) => (
+ *     isLoading ? (
+ *       <div>Loading settings...</div>
+ *     ) : error ? (
+ *       <div>Error: {error}</div>
+ *     ) : (
+ *       <div>
+ *         <h2>{currentDetails.name}</h2>
+ *         <p>Accepting Orders: {extraData.acceptingOrders ? 'Yes' : 'No'}</p>
+ *         <p>Delivery Fee: ${extraData.deliveryFee}</p>
+ *       </div>
+ *     )
+ *   )}
+ * </CoreSettings.Root>
+ * ```
+ */
+export declare const Root: React.FC<SettingsRootProps>;
+interface CurrentTimeSlotProps {
+    children: (props: {
+        timeSlot: TimeSlot;
+        hasDetails: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * Component that provides access to current store details
+ *
+ * @example
+ * ```tsx
+ * <CoreSettings.CurrentTimeSlot>
+ *   {({ details, hasDetails }) => (
+ *     hasDetails ? (
+ *       <div>
+ *         <h3>{details.timeSlot}</h3>
+ *       </div>
+ *     ) : (
+ *       <div>No store details available</div>
+ *     )
+ *   )}
+ * </CoreSettings.CurrentTimeSlot>
+ * ```
+ */
+export declare const CurrentTimeSlot: React.FC<CurrentTimeSlotProps>;
+interface CurrentFulfillmentProps {
+    children: (props: {
+        fulfillment: CurrentFulfillment;
+        hasFulfillment: boolean;
+        availableOptions: string[];
+    }) => React.ReactNode;
+}
+/**
+ * Component that provides access to current fulfillment options
+ *
+ * @example
+ * ```tsx
+ * <CoreSettings.CurrentFulfillment>
+ *   {({ fulfillment, availableOptions }) => (
+ *     <div>
+ *       <h3>Available Options:</h3>
+ *       {availableOptions.map(option => (
+ *         <div key={option}>{option}: Available</div>
+ *       ))}
+ *     </div>
+ *   )}
+ * </CoreSettings.CurrentFulfillment>
+ * ```
+ */
+export declare const CurrentFulfillment: React.FC<CurrentFulfillmentProps>;
+interface CurrentLocationProps {
+    children: (props: {
+        location: CurrentLocation;
+        hasLocation: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * Component that provides access to current location data
+ *
+ * @example
+ * ```tsx
+ * <CoreSettings.CurrentLocation>
+ *   {({ location, hasCoordinates }) => (
+ *     <div>
+ *       <p>{location.address}</p>
+ *       {hasCoordinates && (
+ *         <p>Coordinates: {location.latitude}, {location.longitude}</p>
+ *       )}
+ *     </div>
+ *   )}
+ * </CoreSettings.CurrentLocation>
+ * ```
+ */
+export declare const CurrentLocation: React.FC<CurrentLocationProps>;
+interface ExtraDataProps {
+    children: (props: {
+        extraData: ExtraData;
+        hasExtraData: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * Component that provides access to extra settings data
+ *
+ * @example
+ * ```tsx
+ * <CoreSettings.ExtraData>
+ *   {({ extraData }) => (
+ *     <div>
+ *       <p>Accepting Orders: {extraData.acceptingOrders ? 'Yes' : 'No'}</p>
+ *       <p>Delivery Fee: ${extraData.deliveryFee}</p>
+ *       <p>Min Order: ${extraData.minOrderAmount}</p>
+ *       <p>Free Delivery: ${extraData.freeDeliveryThreshold}</p>
+ *     </div>
+ *   )}
+ * </CoreSettings.ExtraData>
+ * ```
+ */
+export declare const ExtraData: React.FC<ExtraDataProps>;
+export {};

package/dist/react/core/Settings.js

@@ -0,0 +1,192 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService } from '@wix/services-manager-react';
+import { OLOSettingsServiceDefinition } from '../../services/olo-settings-service.js';
+import { FulfillmentsServiceDefinition } from '../../services/fulfillments-service.js';
+/**
+ * Core Settings component that provides access to OLO settings data
+ * Integrates with OLOSettingsService to expose operation and operation group data
+ *
+ * @example
+ * ```tsx
+ * <CoreSettings.Root>
+ *   {({ currentDetails, currentFulfillment, currentLocation, extraData, isLoading, error }) => (
+ *     isLoading ? (
+ *       <div>Loading settings...</div>
+ *     ) : error ? (
+ *       <div>Error: {error}</div>
+ *     ) : (
+ *       <div>
+ *         <h2>{currentDetails.name}</h2>
+ *         <p>Accepting Orders: {extraData.acceptingOrders ? 'Yes' : 'No'}</p>
+ *         <p>Delivery Fee: ${extraData.deliveryFee}</p>
+ *       </div>
+ *     )
+ *   )}
+ * </CoreSettings.Root>
+ * ```
+ */
+export const Root = ({ children }) => {
+    const service = useService(OLOSettingsServiceDefinition);
+    const fulfillmentsService = useService(FulfillmentsServiceDefinition);
+    const operation = service.operation?.get();
+    const selectedFulfillment = fulfillmentsService.selectedFulfillment?.get();
+    console.log('selectedFulfillment', selectedFulfillment);
+    const isLoading = service.isLoading?.get() ?? false;
+    const error = service.error?.get();
+    // Extract current details from operation group
+    // Note: Using safe property access since the exact API structure may vary
+    const currentTime = {
+        timeSlot: 'TODO', // service.currentTimeSlot?.get(),
+    };
+    // Extract fulfillment options from operation
+    // Note: Using safe property access since the exact API structure may vary
+    const currentFulfillment = {
+        current: fulfillmentsService.selectedFulfillment?.get() ?? undefined,
+    };
+    // Extract location data from operation group
+    // Note: Using safe property access since the exact API structure may vary
+    const currentLocation = {
+        name: operation.locationDetails?.name,
+    };
+    // Extract extra data from operation
+    // Note: Using safe property access since the exact API structure may vary
+    const extraData = {
+        acceptingOrders: operation?.status === 'ACTIVE' && !operation?.paused,
+        deliveryFee: operation?.fulfillment?.delivery?.fee?.amount ||
+            operation?.deliveryFee,
+        minOrderAmount: operation?.orderingRules?.minimumOrderValue?.amount ||
+            operation?.minOrderAmount,
+        freeDeliveryThreshold: operation?.fulfillment?.delivery?.freeDeliveryThreshold
+            ?.amount || operation?.freeDeliveryThreshold,
+        taxRate: operation?.pricing?.taxRate || operation?.taxRate,
+        serviceCharge: operation?.pricing?.serviceCharge?.amount ||
+            operation?.serviceCharge,
+        isOnline: operation?.status === 'ACTIVE',
+        orderingDisabledReason: operation?.paused
+            ? operation?.pauseReason
+            : undefined,
+    };
+    return children({
+        currentTime,
+        currentFulfillment,
+        selectedFulfillment,
+        currentLocation,
+        extraData,
+        isLoading,
+        error,
+    });
+};
+/**
+ * Component that provides access to current store details
+ *
+ * @example
+ * ```tsx
+ * <CoreSettings.CurrentTimeSlot>
+ *   {({ details, hasDetails }) => (
+ *     hasDetails ? (
+ *       <div>
+ *         <h3>{details.timeSlot}</h3>
+ *       </div>
+ *     ) : (
+ *       <div>No store details available</div>
+ *     )
+ *   )}
+ * </CoreSettings.CurrentTimeSlot>
+ * ```
+ */
+export const CurrentTimeSlot = ({ children, }) => {
+    return (_jsx(Root, { children: ({ selectedFulfillment }) => {
+            const hasDetails = Boolean(selectedFulfillment);
+            console.log('selectedFulfillment', selectedFulfillment);
+            console.log('timeSlot', selectedFulfillment?.startTime.toLocaleString());
+            return children({
+                timeSlot: selectedFulfillment,
+                hasDetails,
+            });
+        } }));
+};
+/**
+ * Component that provides access to current fulfillment options
+ *
+ * @example
+ * ```tsx
+ * <CoreSettings.CurrentFulfillment>
+ *   {({ fulfillment, availableOptions }) => (
+ *     <div>
+ *       <h3>Available Options:</h3>
+ *       {availableOptions.map(option => (
+ *         <div key={option}>{option}: Available</div>
+ *       ))}
+ *     </div>
+ *   )}
+ * </CoreSettings.CurrentFulfillment>
+ * ```
+ */
+export const CurrentFulfillment = ({ children, }) => {
+    return (_jsx(Root, { children: ({ currentFulfillment }) => {
+            const availableOptions = [];
+            // if (currentFulfillment.pickup?.enabled) availableOptions.push('pickup');
+            // if (currentFulfillment.delivery?.enabled) availableOptions.push('delivery');
+            const hasFulfillment = availableOptions.length > 0;
+            return children({
+                fulfillment: currentFulfillment,
+                hasFulfillment,
+                availableOptions,
+            });
+        } }));
+};
+/**
+ * Component that provides access to current location data
+ *
+ * @example
+ * ```tsx
+ * <CoreSettings.CurrentLocation>
+ *   {({ location, hasCoordinates }) => (
+ *     <div>
+ *       <p>{location.address}</p>
+ *       {hasCoordinates && (
+ *         <p>Coordinates: {location.latitude}, {location.longitude}</p>
+ *       )}
+ *     </div>
+ *   )}
+ * </CoreSettings.CurrentLocation>
+ * ```
+ */
+export const CurrentLocation = ({ children, }) => {
+    return (_jsx(Root, { children: ({ currentLocation }) => {
+            console.log('currentLocation', currentLocation);
+            const hasLocation = Boolean(currentLocation.name);
+            return children({
+                location: currentLocation,
+                hasLocation,
+            });
+        } }));
+};
+/**
+ * Component that provides access to extra settings data
+ *
+ * @example
+ * ```tsx
+ * <CoreSettings.ExtraData>
+ *   {({ extraData }) => (
+ *     <div>
+ *       <p>Accepting Orders: {extraData.acceptingOrders ? 'Yes' : 'No'}</p>
+ *       <p>Delivery Fee: ${extraData.deliveryFee}</p>
+ *       <p>Min Order: ${extraData.minOrderAmount}</p>
+ *       <p>Free Delivery: ${extraData.freeDeliveryThreshold}</p>
+ *     </div>
+ *   )}
+ * </CoreSettings.ExtraData>
+ * ```
+ */
+export const ExtraData = ({ children }) => {
+    return (_jsx(Root, { children: ({ extraData }) => {
+            const hasExtraData = Boolean(extraData.deliveryFee !== undefined ||
+                extraData.minOrderAmount !== undefined ||
+                extraData.freeDeliveryThreshold !== undefined);
+            return children({
+                extraData,
+                hasExtraData,
+            });
+        } }));
+};

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

@@ -1,3 +1,4 @@
 export * as CoreItemDetails from './ItemDetails.js';
 export { CoreClickableItem } from './ClickableItem.js';
 export * as CoreOLO from './OLO.js';
+export * as CoreSettings from './Settings.js';

package/dist/react/core/index.js

@@ -1,3 +1,4 @@
 export * as CoreItemDetails from './ItemDetails.js';
 export { CoreClickableItem } from './ClickableItem.js';
 export * as CoreOLO from './OLO.js';
+export * as CoreSettings from './Settings.js';

package/dist/react/index.d.ts

@@ -1,3 +1,5 @@
 export * as ItemDetails from './ItemDetails.js';
 export * as ClickableItem from './ClickableItem.js';
 export * as OLO from './OLO.js';
+export * as Settings from './Settings.js';
+export * as OLOMenus from './OLOMenus.js';

package/dist/react/index.js

@@ -1,3 +1,5 @@
 export * as ItemDetails from './ItemDetails.js';
 export * as ClickableItem from './ClickableItem.js';
 export * as OLO from './OLO.js';
+export * as Settings from './Settings.js';
+export * as OLOMenus from './OLOMenus.js';

package/dist/services/fulfillments-service.d.ts

@@ -0,0 +1,13 @@
+import * as operationsSDK from '@wix/auto_sdk_restaurants_operations';
+import { FulfillmentsServiceAPI, FulfillmentsServiceConfig } from '../types/fulfillments-types.js';
+export declare const FulfillmentsServiceDefinition: string & {
+    __api: FulfillmentsServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & FulfillmentsServiceAPI;
+export declare const FulfillmentsService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: FulfillmentsServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & FulfillmentsServiceAPI, FulfillmentsServiceConfig>;
+export declare const loadFulfillmentsServiceConfig: (operation?: operationsSDK.Operation) => Promise<FulfillmentsServiceConfig>;

package/dist/services/fulfillments-service.js

@@ -0,0 +1,64 @@
+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 * as fulfillemtMethodsSDK from '@wix/auto_sdk_restaurants_fulfillment-methods';
+import { processFulfillmentTimeSlotByOperationList } from '../utils/fulfillments-utils.js';
+export const FulfillmentsServiceDefinition = defineService('fulfillments');
+export const FulfillmentsService = implementService.withConfig()(FulfillmentsServiceDefinition, ({ getService, config }) => {
+    console.log('config', config);
+    if (!config.operation) {
+        throw new Error('Operation ID is required');
+    }
+    const signalsService = getService(SignalsServiceDefinition);
+    const fulfillmentsMap = new Map(config.fulfillments?.map(processFulfillmentTimeSlotByOperationList) ??
+        []);
+    const fulfillments = signalsService.signal(
+    // @ts-expect-error - operation is not typed
+    fulfillmentsMap.get(config.operation?.id ?? '') ?? []);
+    const isLoading = signalsService.signal(false);
+    const error = signalsService.signal(null);
+    const initialSelected = fulfillments.get()?.[0] ?? null;
+    const selectedFulfillment = signalsService.signal(initialSelected);
+    selectedFulfillment.set(initialSelected);
+    const setSelectedFulfillment = (fulfillment) => {
+        selectedFulfillment.set(fulfillment);
+    };
+    if (!config.fulfillments && config.operation) {
+        loadFulfillmentsServiceConfig(config.operation).then((config) => {
+            const fulfillmentsMap = new Map(config.fulfillments?.map(processFulfillmentTimeSlotByOperationList) ?? []);
+            fulfillments.set(
+            // @ts-expect-error - operation is not typed
+            fulfillmentsMap.get(config.operation?.id ?? '') ?? []);
+            const initialSelected = fulfillments.get()?.[0] ?? null;
+            selectedFulfillment.set(initialSelected);
+        });
+    }
+    return {
+        fulfillments,
+        selectedFulfillment,
+        isLoading,
+        error,
+        setSelectedFulfillment,
+    };
+});
+export const loadFulfillmentsServiceConfig = async (operation) => {
+    const [timeSlots, fulfillments] = await Promise.all([
+        operationsSDK.calculateFirstAvailableTimeSlotsPerOperation([
+            // @ts-expect-error - operation is not typed
+            operation.id,
+        ]),
+        fulfillemtMethodsSDK
+            .queryFulfillmentMethods()
+            .in('_id', operation?.fulfillmentIds)
+            .find(),
+    ]);
+    // const fulfillments = await operationsSDK.calculateFirstAvailableTimeSlotsPerOperation([
+    //   operationId,
+    // ]);
+    console.log('fulfillments', fulfillments.items);
+    // const fulfillmentsMap = new Map(fulfillments.timeSlotsPerOperation?.map(processFulfillmentTimeSlotByOperationList));
+    return {
+        fulfillments: timeSlots.timeSlotsPerOperation, //fulfillmentsMap.get(operationId) ?? [],
+        operation: operation,
+    };
+};

package/dist/services/index.d.ts

@@ -1,3 +1,4 @@
 export { ItemService, ItemServiceDefinition, loadItemServiceConfig, ItemServiceConfig, } from './item-details-service.js';
 export { OLOSettingsService, OLOSettingsServiceDefinition, loadOLOSettingsServiceConfig, type OLOSettingsServiceConfig, type OLOSettingsServiceAPI, } from './olo-settings-service.js';
 export { AvailabilityStatus, AvailabilityStatusMap } from './common-types.js';
+export { FulfillmentsService, FulfillmentsServiceDefinition, loadFulfillmentsServiceConfig, } from './fulfillments-service.js';

package/dist/services/index.js

@@ -1,3 +1,4 @@
 export { ItemService, ItemServiceDefinition, loadItemServiceConfig, } from './item-details-service.js';
 export { OLOSettingsService, OLOSettingsServiceDefinition, loadOLOSettingsServiceConfig, } from './olo-settings-service.js';
 export { AvailabilityStatus } from './common-types.js';
+export { FulfillmentsService, FulfillmentsServiceDefinition, loadFulfillmentsServiceConfig, } from './fulfillments-service.js';

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

@@ -58,8 +58,8 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
     const modifierGroups = config.item?.modifierGroups || [];
     const initialSelectedModifiers = getModifiersInitState(modifierGroups);
     const selectedModifiers = signalsService.signal(initialSelectedModifiers);
+    console.log('config.item', config.item);
     if (config.item) {
-        console.log('config.item', config.item);
         lineItem.set({
             quantity: quantity.get(),
             catalogReference: {