@wix/headless-restaurants-olo 0.0.14 → 0.0.16

package/dist/react/ModifierGroup.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { type AsChildChildren } from '@wix/headless-utils/react';
+import { EnhancedModifier, EnhancedModifierGroup } from '@wix/headless-restaurants-menus/services';
+import { RuleTypeMap } from '../services/common-types.js';
+export interface ItemDetailsModifierGroupProps {
+    children: React.ReactNode;
+}
+export interface ModifiersProps {
+    className?: string;
+    asChild?: boolean;
+    modifierNameClassName?: string;
+    modifierPriceClassName?: string;
+    children?: AsChildChildren<{
+        selectedModifierIds: string[];
+        onToggle: (modifierId: string) => void;
+        modifierGroup: EnhancedModifierGroup;
+        modifiers: EnhancedModifier[];
+        isSingleSelect: boolean;
+    }>;
+}
+export interface ModifierCheckboxProps {
+    selectedModifierIds: string[];
+    onToggle: (modifierId: string) => void;
+    className?: string;
+    modifierNameClassName?: string;
+    modifierPriceClassName?: string;
+}
+export interface ModifierRadioProps {
+    modifierNameClassName?: string;
+    modifierPriceClassName?: string;
+}
+export declare const Root: React.ForwardRefExoticComponent<ItemDetailsModifierGroupProps & React.RefAttributes<HTMLElement>>;
+export declare const Modifiers: React.ForwardRefExoticComponent<ModifiersProps & React.RefAttributes<HTMLElement>>;
+export interface DescriptionProps {
+    ruleTypeMap: RuleTypeMap;
+    className?: string;
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        description: string;
+    }>;
+}
+export declare const Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLElement>>;
+export interface ErrorProps {
+    ruleTypeMap: RuleTypeMap;
+    className?: string;
+    asChild?: boolean;
+    children?: AsChildChildren<{
+        error: string;
+    }>;
+}
+export declare const Error: React.ForwardRefExoticComponent<ErrorProps & React.RefAttributes<HTMLElement>>;
+export declare const ModifierGroup: {
+    readonly Root: React.ForwardRefExoticComponent<ItemDetailsModifierGroupProps & React.RefAttributes<HTMLElement>>;
+    readonly Modifiers: React.ForwardRefExoticComponent<ModifiersProps & React.RefAttributes<HTMLElement>>;
+    readonly Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLElement>>;
+    readonly Error: React.ForwardRefExoticComponent<ErrorProps & React.RefAttributes<HTMLElement>>;
+};

package/dist/react/ModifierGroup.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Modifier, ModifierGroup as ModifierGroupComponents, useModifierContext, } from '@wix/headless-restaurants-menus/react';
+import { ModifierGroupComponent, ModifiersComponent, Description as DescriptionComponent, GroupError, } from './core/ModifierGroup.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["modifiers"] = "modifiers";
+    TestIds["modifierGroupDescription"] = "modifier-group-description";
+    TestIds["modifierGroupError"] = "modifier-group-error";
+})(TestIds || (TestIds = {}));
+const CheckIcon = () => (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z", fill: "currentColor" }) }));
+export const Root = React.forwardRef(({ children }) => {
+    return _jsx(ModifierGroupComponent, { children: children });
+});
+Root.displayName = 'ItemDetailsModifierGroup.Root';
+export const Modifiers = React.forwardRef(({ className, asChild, modifierNameClassName, modifierPriceClassName, children, }, ref) => {
+    return (_jsx(ModifiersComponent, { children: ({ selectedModifierIds, onToggle, modifierGroup, modifiers, isSingleSelect, singleSelectedModifierId, }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.modifiers, className: className, customElement: children, customElementProps: {
+                selectedModifierIds,
+                onToggle,
+                modifierGroup,
+                modifiers,
+                isSingleSelect,
+            }, children: isSingleSelect ? (_jsx(RadioGroupPrimitive.Root, { value: singleSelectedModifierId, onValueChange: onToggle, children: _jsx(ModifierGroupComponents.ModifiersRepeater, { children: _jsx(ModifierRadio, { modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) }) })) : (_jsx(ModifierGroupComponents.ModifiersRepeater, { children: _jsx(ModifierCheckbox, { selectedModifierIds: selectedModifierIds, onToggle: onToggle, modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) })) })) }));
+});
+Modifiers.displayName = 'ItemDetailsModifierGroup.Modifiers';
+const ModifierCheckbox = ({ selectedModifierIds, onToggle, className, modifierNameClassName, modifierPriceClassName, }) => {
+    const { modifier } = useModifierContext();
+    const isSelected = selectedModifierIds.includes(modifier._id || '');
+    return (_jsxs("div", { className: className, style: { display: 'flex', alignItems: 'center' }, children: [_jsx(CheckboxPrimitive.Root, { className: "CheckboxRoot", checked: isSelected, onCheckedChange: () => onToggle(modifier._id || ''), id: modifier._id || undefined, disabled: !modifier.inStock, children: _jsx(CheckboxPrimitive.Indicator, { className: "CheckboxIndicator", children: _jsx(CheckIcon, {}) }) }), _jsxs("label", { className: "Label", htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }));
+};
+const ModifierRadio = ({ modifierNameClassName, modifierPriceClassName, }) => {
+    const { modifier } = useModifierContext();
+    return (_jsx(RadioGroupPrimitive.Item, { className: "RadioGroupItem", value: modifier._id || '', id: modifier._id || undefined, disabled: !modifier.inStock, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(RadioGroupPrimitive.Indicator, { className: "RadioGroupIndicator" }), _jsxs("label", { className: "Label", htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }) }));
+};
+export const Description = React.forwardRef(({ ruleTypeMap, className, asChild, children }, ref) => {
+    return (_jsx(DescriptionComponent, { ruleTypeMap: ruleTypeMap, children: ({ description }) => {
+            if (!description) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.modifierGroupDescription, className: className, customElement: children, customElementProps: { description }, children: _jsx("p", { className: className, children: description }) }));
+        } }));
+});
+Description.displayName = 'ItemDetailsModifierGroup.Description';
+export const Error = React.forwardRef(({ ruleTypeMap, className, asChild, children }, ref) => {
+    return (_jsx(GroupError, { ruleTypeMap: ruleTypeMap, children: ({ error }) => {
+            if (!error) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.modifierGroupError, className: className, customElement: children, customElementProps: { error }, children: _jsx("p", { className: className, children: error }) }));
+        } }));
+});
+Error.displayName = 'ItemDetailsModifierGroup.Error';
+export const ModifierGroup = {
+    Root,
+    Modifiers,
+    Description,
+    Error,
+};

package/dist/react/OLO.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import { ItemServiceConfig } from '../services/item-details-service.js';
+import { OLOSettingsServiceConfig } from '../services/olo-settings-service.js';
 interface OLORootProps {
     /** The ID of the item to load */
     itemId?: string;
     /** Pre-loaded item service config (optional) */
-    itemServiceConfig?: any;
+    itemServiceConfig?: ItemServiceConfig;
     /** Pre-loaded OLO settings service config (optional) */
-    oloSettingsServiceConfig?: any;
+    oloSettingsServiceConfig?: OLOSettingsServiceConfig;
     /** Children render prop that receives the service state */
     children: React.ReactNode;
 }

package/dist/react/OLOMenus.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { type MenusServiceConfig } from '@wix/headless-restaurants-menus/services';
+declare enum TestIds {
+    menusRoot = "menus-root"
+}
+/**
+ * Menus.Root
+ * Container for the menus context and data loading.
+ * Does not render if there are no menus.
+ */
+export interface MenusRootProps {
+    children: React.ReactNode;
+    config: MenusServiceConfig;
+}
+export declare const Root: React.ForwardRefExoticComponent<MenusRootProps & React.RefAttributes<HTMLElement>>;
+export declare const OLOMenus: {
+    Root: React.ForwardRefExoticComponent<MenusRootProps & React.RefAttributes<HTMLElement>>;
+    TestIds: typeof TestIds;
+};
+export {};

package/dist/react/OLOMenus.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Menus } from '@wix/headless-restaurants-menus/react';
+import * as CoreOLOMenus from './core/OLOMenus.js';
+// =======================
+// TestIds Enum
+// =======================
+var TestIds;
+(function (TestIds) {
+    // Container Level
+    TestIds["menusRoot"] = "menus-root";
+})(TestIds || (TestIds = {}));
+export const Root = React.forwardRef((props) => {
+    const { children, config } = props;
+    return (_jsx(CoreOLOMenus.Root, { "data-testid": TestIds.menusRoot, config: config, children: (updatedConfig) => (_jsx(Menus.Root, { "data-testid": TestIds.menusRoot, config: updatedConfig, children: children })) }));
+});
+Root.displayName = 'Menus.Root';
+// Compose Menus namespace
+export const OLOMenus = {
+    Root,
+    TestIds,
+};

package/dist/react/Settings.d.ts

@@ -0,0 +1,160 @@
+import React from 'react';
+import { AsChildChildren } from '@wix/headless-utils/react';
+/**
+ * Root headless component for OLO Settings
+ * Provides access to current details, fulfillment options, location, and extra data
+ *
+ * @example
+ * ```tsx
+ * <Settings.Root>
+ *   {({ currentDetails, currentFulfillment, currentLocation, extraData, isLoading, error }) => (
+ *     isLoading ? (
+ *       <div>Loading settings...</div>
+ *     ) : error ? (
+ *       <div>Error: {error}</div>
+ *     ) : (
+ *       <div>
+ *         <h2>{currentDetails.name}</h2>
+ *         <p>{currentDetails.address}</p>
+ *         <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>
+ *     )
+ *   )}
+ * </Settings.Root>
+ * ```
+ */
+interface CurrentTimeSlotProps {
+    /** Children render prop that receives the current details */
+    children?: AsChildChildren<{
+        timeSlot: string;
+    }>;
+    /** CSS classes to apply to the default element */
+    className?: string;
+    /** Whether to render as a child component */
+    asChild?: boolean;
+}
+/**
+ * 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 declare const CurrentTimeSlot: React.ForwardRefExoticComponent<CurrentTimeSlotProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Headless component for current fulfillment options
+ * Provides access to pickup, delivery, and dine-in options
+ *
+ * @example
+ * ```tsx
+ * <Settings.CurrentFulfillment>
+ *   {({ fulfillment, availableOptions }) => (
+ *     <div>
+ *       <h3>Available Options:</h3>
+ *       {availableOptions.map(option => (
+ *         <div key={option}>
+ *           {option}: {fulfillment[option]?.enabled ? 'Available' : 'Unavailable'}
+ *           {fulfillment[option]?.estimatedTime && (
+ *             <span> - {fulfillment[option].estimatedTime} mins</span>
+ *           )}
+ *         </div>
+ *       ))}
+ *     </div>
+ *   )}
+ * </Settings.CurrentFulfillment>
+ * ```
+ */
+interface CurrentLocationProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** CSS classes to apply to the default element */
+    className?: string;
+    /** Children render prop that receives the location data */
+    children?: AsChildChildren<{
+        currentLocation: {
+            name: string;
+        };
+        hasLocation: boolean;
+    }>;
+}
+/**
+ * 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 declare const CurrentLocation: React.FC<CurrentLocationProps>;
+interface ExtraDataProps {
+    /** Children render prop that receives the extra settings data */
+    children: (props: {
+        extraData: {
+            acceptingOrders: boolean;
+            deliveryFee?: number;
+            minOrderAmount?: number;
+            freeDeliveryThreshold?: number;
+            taxRate?: number;
+            serviceCharge?: number;
+            isOnline?: boolean;
+            orderingDisabledReason?: string;
+        };
+        hasExtraData: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * 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 declare const ExtraData: React.FC<ExtraDataProps>;
+export {};

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type LineItem } from '@wix/ecom/services';
 import { ItemServiceConfig } from '../../services/item-details-service.js';
-import { EnhancedModifier, EnhancedModifierGroup, EnhancedVariant } from '@wix/headless-restaurants-menus/services';
+import { EnhancedVariant } from '@wix/headless-restaurants-menus/services';
 import { AvailabilityStatus, AvailabilityStatusMap } from '../../services/common-types.js';
 interface ItemDetailsRootProps {
     children: (props: {
@@ -45,16 +45,6 @@ interface ItemDetailsVariantsProps {
     }) => React.ReactNode;
 }
 export declare const VariantsComponent: React.FC<ItemDetailsVariantsProps>;
-interface ItemDetailsModifiersProps {
-    children: (props: {
-        selectedModifierIds: string[];
-        onToggle: (modifierId: string) => void;
-        modifierGroup: EnhancedModifierGroup;
-        modifiers: EnhancedModifier[];
-    }) => React.ReactNode;
-    singleSelect?: boolean;
-}
-export declare const ModifiersComponent: React.FC<ItemDetailsModifiersProps>;
 interface ItemDetailsAvailabilityProps {
     availabilityStatusMap: AvailabilityStatusMap;
     children: (props: {

package/dist/react/core/ItemDetails.js

@@ -4,17 +4,18 @@ import { useService, WixServices } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
 import { ItemService, ItemServiceDefinition, loadItemServiceConfig, } from '../../services/item-details-service.js';
 import { OLOSettingsServiceDefinition } from '../../services/olo-settings-service.js';
-import { useItemContext, useModifierGroupContext, } from '@wix/headless-restaurants-menus/react';
+import { useItemContext } from '@wix/headless-restaurants-menus/react';
 import { AvailabilityStatus, } from '../../services/common-types.js';
-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) {
@@ -86,24 +87,6 @@ export const VariantsComponent = ({ children, }) => {
         selectedVariant,
     });
 };
-export const ModifiersComponent = ({ children, singleSelect, }) => {
-    const service = useService(ItemServiceDefinition);
-    const { modifierGroup } = useModifierGroupContext();
-    // Get selected modifier IDs for this group
-    const groupId = modifierGroup._id;
-    const groupSelectedModifierIds = service.getSelectedModifiers?.(groupId ?? '');
-    const onToggle = (modifierId) => {
-        if (groupId) {
-            service.toggleModifier?.(groupId, modifierId, singleSelect);
-        }
-    };
-    return children({
-        selectedModifierIds: groupSelectedModifierIds,
-        onToggle,
-        modifierGroup,
-        modifiers: modifierGroup.modifiers.map(convertModifierToFormModifier),
-    });
-};
 export const AvailabilityComponent = ({ children, availabilityStatusMap, }) => {
     const oloSettingsService = useService(OLOSettingsServiceDefinition);
     const availabilityDispatchAction = oloSettingsService.availabilityDispatchAction?.get?.();

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { EnhancedModifier, EnhancedModifierGroup } from '@wix/headless-restaurants-menus/services';
+import { RuleType, RuleTypeMap } from '../../services/common-types.js';
+interface ModifiersContextValue {
+    selectedModifierIds: string[];
+    onToggle: (modifierId: string) => void;
+    modifierGroup: EnhancedModifierGroup;
+    modifiers: EnhancedModifier[];
+    ruleType: RuleType;
+    isSingleSelect: boolean;
+}
+export declare function useModifiersContext(): ModifiersContextValue;
+interface ModifierGroupComponentProps {
+    children: React.ReactNode;
+}
+export declare const ModifierGroupComponent: React.FC<ModifierGroupComponentProps>;
+interface ModifiersComponentProps {
+    children: (props: {
+        selectedModifierIds: string[];
+        onToggle: (modifierId: string) => void;
+        modifierGroup: EnhancedModifierGroup;
+        modifiers: EnhancedModifier[];
+        isSingleSelect: boolean;
+        singleSelectedModifierId: string;
+    }) => React.ReactNode;
+}
+export declare const ModifiersComponent: React.FC<ModifiersComponentProps>;
+interface DescriptionProps {
+    ruleTypeMap: RuleTypeMap;
+    children: (props: {
+        description: string | undefined;
+    }) => React.ReactNode;
+}
+export declare const Description: React.FC<DescriptionProps>;
+interface GroupErrorProps {
+    ruleTypeMap: RuleTypeMap;
+    children: (props: {
+        error: string | undefined;
+    }) => React.ReactNode;
+}
+export declare const GroupError: React.FC<GroupErrorProps>;
+export {};

package/dist/react/core/ModifierGroup.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext } from 'react';
+import { useService } from '@wix/services-manager-react';
+import { useModifierGroupContext } from '@wix/headless-restaurants-menus/react';
+import { convertModifierToFormModifier, getModifierGroupRuleType, getRuleTypeMapValue, isSingleSelectRule, } from '../../services/utils.js';
+import { ItemServiceDefinition } from '../../services/item-details-service.js';
+const ModifiersContext = createContext(null);
+export function useModifiersContext() {
+    const context = React.useContext(ModifiersContext);
+    if (!context) {
+        throw new Error('useModifiersContext must be used within a ModifierGroupComponent');
+    }
+    return context;
+}
+export const ModifierGroupComponent = ({ children, }) => {
+    const service = useService(ItemServiceDefinition);
+    const { modifierGroup } = useModifierGroupContext();
+    const rule = modifierGroup.rule;
+    const isSingleSelect = Boolean(rule ? isSingleSelectRule(rule) : false);
+    const groupId = modifierGroup._id;
+    const groupSelectedModifierIds = service.getSelectedModifiers?.(groupId ?? '');
+    const onToggle = (modifierId) => {
+        if (groupId) {
+            service.toggleModifier?.(groupId, modifierId, isSingleSelect);
+        }
+    };
+    const ruleType = getModifierGroupRuleType(modifierGroup.rule);
+    const contextValue = {
+        selectedModifierIds: groupSelectedModifierIds,
+        onToggle,
+        modifierGroup,
+        modifiers: modifierGroup.modifiers.map(convertModifierToFormModifier),
+        isSingleSelect,
+        ruleType,
+    };
+    return (_jsx(ModifiersContext.Provider, { value: contextValue, children: children }));
+};
+export const ModifiersComponent = ({ children, }) => {
+    const { selectedModifierIds, onToggle, modifierGroup, modifiers, isSingleSelect, } = useModifiersContext();
+    const singleSelectedModifierId = selectedModifierIds.length > 0 ? (selectedModifierIds[0] ?? '') : '';
+    return children({
+        selectedModifierIds,
+        onToggle,
+        modifierGroup,
+        modifiers,
+        isSingleSelect,
+        singleSelectedModifierId,
+    });
+};
+export const Description = ({ ruleTypeMap, children, }) => {
+    const { ruleType, modifierGroup } = useModifiersContext();
+    const modifierGroupName = modifierGroup.name || '';
+    const description = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroupName, modifierGroup.rule);
+    return children({ description });
+};
+export const GroupError = ({ ruleTypeMap, children, }) => {
+    const service = useService(ItemServiceDefinition);
+    const { ruleType, modifierGroup } = useModifiersContext();
+    const groupId = modifierGroup._id || '';
+    const modifierGroupErrors = service.modifierGroupError?.get() || {};
+    const modifierGroupName = modifierGroup.name || '';
+    let error;
+    if (modifierGroupErrors[groupId]) {
+        error = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroupName, modifierGroup.rule);
+    }
+    return children({ error });
+};

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