@wix/headless-restaurants-olo 0.0.2 → 0.0.4

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

@@ -0,0 +1,9 @@
+import React from 'react';
+declare function ClickableItem({ onItemSelected, children, }: {
+    onItemSelected: (item: any) => void;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const Actions: {
+    Select: typeof ClickableItem;
+};
+export {};

package/cjs/dist/react/ClickableItem.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CoreClickableItem } from './core/ClickableItem.js';
+function ClickableItem({ onItemSelected, children, }) {
+    const selectItem = (item, callback) => {
+        callback();
+        onItemSelected(item);
+    };
+    return (_jsx(CoreClickableItem, { children: ({ item, itemSelected }) => (_jsx("div", { onClick: () => {
+                selectItem(item, itemSelected);
+            }, children: children })) }));
+}
+export const Actions = {
+    Select: ClickableItem,
+};

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

@@ -21,7 +21,7 @@ import { ItemServiceConfig } from '../services/item-details-service.js';
 export interface RootProps {
     asChild?: boolean;
     children: React.ReactNode;
-    itemDetailsServiceConfig: ItemServiceConfig;
+    itemDetailsServiceConfig?: ItemServiceConfig;
 }
 export declare const Root: ({ children, itemDetailsServiceConfig }: RootProps) => import("react/jsx-runtime").JSX.Element;
 /**
@@ -36,7 +36,6 @@ export declare const Root: ({ children, itemDetailsServiceConfig }: RootProps) =
  * </ItemDetails.Name>
  * ```
  */
-export declare const Name: React.ForwardRefExoticComponent<ItemDetailsNameProps & React.RefAttributes<HTMLElement>>;
 export interface ItemDetailsNameProps {
     asChild?: boolean;
     /** Custom render function when using asChild */
@@ -46,6 +45,139 @@ export interface ItemDetailsNameProps {
     /** CSS classes to apply to the default element */
     className?: string;
 }
+export declare const Name: React.ForwardRefExoticComponent<ItemDetailsNameProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Displays the item image with customizable rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ItemDetails.Image />
+ * <ItemDetails.Image asChild>
+ *   <img className="rounded" />
+ * </ItemDetails.Image>
+ * ```
+ */
+export interface ItemDetailsImageProps {
+    asChild?: boolean;
+    /**
+     * Custom render function when using asChild.
+     * Receives an object with:
+     * - hasImage: boolean - whether the item has an image
+     * - image: string - the actual image element (WixMediaImage)
+     * - altText: string - the alt text for the image
+     */
+    children?: (props: {
+        hasImage: boolean;
+        image?: string;
+        altText: string;
+    }) => React.ReactNode;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+export declare const Image: React.ForwardRefExoticComponent<ItemDetailsImageProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Displays the item price with customizable rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ItemDetails.Price />
+ * <ItemDetails.Price asChild>
+ *   <span className="font-semibold text-lg" />
+ * </ItemDetails.Price>
+ * ```
+ */
+export interface ItemDetailsPriceProps {
+    asChild?: boolean;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+export declare const Price: React.ForwardRefExoticComponent<ItemDetailsPriceProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Displays the item description with customizable rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ItemDetails.Description />
+ * <ItemDetails.Description asChild>
+ *   <p className="text-sm" />
+ * </ItemDetails.Description>
+ * ```
+ */
+export interface ItemDetailsDescriptionProps {
+    asChild?: boolean;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+export declare const Description: React.ForwardRefExoticComponent<ItemDetailsDescriptionProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Wrapper component for Item.LabelsRepeater.
+ * Renders the labels for the item using the headless component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ItemDetails.Labels>
+ *   {(label) => <span>{label.name}</span>}
+ * </ItemDetails.Labels>
+ * ```
+ */
+export interface ItemDetailsLabelsProps {
+    children?: AsChildChildren<{
+        label: string;
+    }>;
+    className?: string;
+    asChild?: boolean;
+    iconClassName?: string;
+    nameClassName?: string;
+}
+export declare const Labels: React.ForwardRefExoticComponent<ItemDetailsLabelsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Wrapper component for Item.ModifierGroupsRepeater.
+ * Renders the modifier groups for the item using the headless component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ItemDetails.ModifierGroups>
+ *   {(modifierGroup) => <span>{modifierGroup.name}</span>}
+ * </ItemDetails.ModifierGroups>
+ * ```
+ */
+export interface ItemDetailsModifierGroupsProps {
+    children?: AsChildChildren<{
+        modifierGroup: any;
+    }>;
+    className?: string;
+    asChild?: boolean;
+    modifierNameClassName?: string;
+    modifierPriceClassName?: string;
+}
+export declare const ModifierGroups: React.ForwardRefExoticComponent<ItemDetailsModifierGroupsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Wrapper component for Item.VariantsRepeater.
+ * Renders the variants for the item using the headless component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ItemDetails.Variants>
+ *   {(variant) => <span>{variant.name}</span>}
+ * </ItemDetails.Variants>
+ * ```
+ */
+export interface ItemDetailsVariantsProps {
+    children?: AsChildChildren<{
+        variant: any;
+    }>;
+    className?: string;
+    asChild?: boolean;
+    variantNameClassName?: string;
+    variantPriceClassName?: string;
+}
+export declare const Variants: React.ForwardRefExoticComponent<ItemDetailsVariantsProps & React.RefAttributes<HTMLElement>>;
 export interface AddToCartActionProps {
     /** Whether to render as a child component */
     asChild?: boolean;

package/cjs/dist/react/ItemDetails.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Commerce } from '@wix/ecom/components';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { Quantity as QuantityComponent } from '@wix/headless-components/react';
-import { Item } from '@wix/restaurants/components';
+import { Item, Label, Modifier, ModifierGroup, Variant, } from '@wix/restaurants/components';
 import * as CoreItemDetails from './core/ItemDetails.js';
 var TestIds;
 (function (TestIds) {
@@ -13,26 +13,41 @@ var TestIds;
     TestIds["itemImage"] = "item-image";
     TestIds["itemAddToCart"] = "item-add-to-cart";
     TestIds["itemSpecialRequest"] = "item-special-request";
+    TestIds["itemLabels"] = "item-labels";
+    TestIds["itemModifierGroups"] = "item-modifier-groups";
+    TestIds["itemVariants"] = "item-variants";
 })(TestIds || (TestIds = {}));
 export const Root = ({ children, itemDetailsServiceConfig }) => {
     return (_jsx(CoreItemDetails.Root, { itemDetailsServiceConfig: itemDetailsServiceConfig, children: ({ item }) => _jsx(Item.Root, { item: item, children: children }) }));
 };
-/**
- * Displays the item name with customizable rendering.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Name />
- * <ItemDetails.Name asChild>
- *   <h2 className="font-heading text-lg" />
- * </ItemDetails.Name>
- * ```
- */
 export const Name = React.forwardRef(({ asChild, children, className, ...rest }, ref) => {
     return (_jsx(Item.Name, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemName, ...rest, children: children }));
 });
 Name.displayName = 'ItemDetails.Name';
+export const Image = React.forwardRef(({ asChild, children, className, ...rest }) => {
+    return (_jsx(Item.Image, { asChild: asChild, className: className, "data-testid": TestIds.itemImage, ...rest, children: children }));
+});
+Image.displayName = 'ItemDetails.Image';
+export const Price = React.forwardRef(({ asChild, className, ...rest }, ref) => {
+    return (_jsx(Item.Price, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemPrice, ...rest }));
+});
+Price.displayName = 'ItemDetails.Price';
+export const Description = React.forwardRef(({ asChild, className, ...rest }, ref) => {
+    return (_jsx(Item.Description, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemDescription, ...rest }));
+});
+Description.displayName = 'ItemDetails.Description';
+export const Labels = React.forwardRef(({ children, className, asChild, iconClassName, nameClassName, ...rest }) => {
+    return (_jsx(Item.LabelsRepeater, { ...rest, children: _jsxs(AsChildSlot, { asChild: asChild, testId: TestIds.itemLabels, className: className, customElement: children, children: [_jsx(Label.Icon, { className: iconClassName }), _jsx(Label.Name, { className: nameClassName })] }) }));
+});
+Labels.displayName = 'ItemDetails.Labels';
+export const ModifierGroups = React.forwardRef(({ children, className, asChild, modifierNameClassName, modifierPriceClassName, ...rest }) => {
+    return (_jsx(Item.ModifierGroupsRepeater, { ...rest, children: _jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifierGroups, className: className, customElement: children, children: _jsxs(ModifierGroup.ModifiersRepeater, { children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] }) }) }));
+});
+export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, ...rest }) => {
+    return (_jsx(Item.VariantsRepeater, { ...rest, children: _jsxs(AsChildSlot, { asChild: asChild, testId: TestIds.itemVariants, className: className, customElement: children, children: [_jsx(Variant.Name, { className: variantNameClassName }), _jsx(Variant.Price, { className: variantPriceClassName })] }) }));
+});
+Variants.displayName = 'ItemDetails.Variants';
+ModifierGroups.displayName = 'ItemDetails.ModifierGroups';
 /**
  * Add to Cart button for the menu item.
  * Triggers the action to add the selected item (and its modifiers/variants) to the cart.
@@ -57,8 +72,8 @@ export const AddToCartButton = ({ asChild = false, children, className, onClick,
                 onClick,
             }, children: _jsx(Commerce.Actions.AddToCart, { asChild: false, label: label, className: className, lineItems: [lineItem], ...props, children: children }) })) }));
 };
-export const Quantity = ({ children }, ref) => {
-    return (_jsx(CoreItemDetails.QuantityComponent, { children: ({ quantity, onValueChange, }) => (_jsx(QuantityComponent.Root, { ref: ref, onValueChange: onValueChange, initialValue: quantity, children: children })) }));
+export const Quantity = ({ children }) => {
+    return (_jsx(CoreItemDetails.QuantityComponent, { children: ({ quantity, onValueChange, }) => (_jsx(QuantityComponent.Root, { onValueChange: onValueChange, initialValue: quantity, children: children })) }));
 };
 Quantity.displayName = 'Quantity';
 export const SpecialRequest = React.forwardRef(({ className, labelClassName, placeholder = 'Any special requests or dietary restrictions?', maxLength = 200, rows = 3, label = 'Special Requests', asChild, children, ...props }, ref) => {

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

@@ -0,0 +1,179 @@
+import React from 'react';
+import { ItemServiceConfig } from '../services/item-details-service.js';
+interface OLORootProps {
+    /** The ID of the item to load */
+    itemId?: string;
+    /** Pre-loaded item service config (optional) */
+    itemServiceConfig?: any;
+    /** Pre-loaded OLO settings service config (optional) */
+    oloSettingsServiceConfig?: any;
+    /** Children render prop that receives the service state */
+    children: React.ReactNode;
+}
+/**
+ * Root headless component for OLO service management
+ * Wraps CoreOLO.Root and provides service state to children
+ *
+ * @example
+ * ```tsx
+ * <OLO.Root itemId="item-123">
+ *   {({ isLoading, hasServices, error, retry }) => (
+ *     isLoading ? (
+ *       <LoadingSpinner />
+ *     ) : error ? (
+ *       <ErrorMessage error={error} onRetry={retry} />
+ *     ) : hasServices ? (
+ *       <ItemDetailsComponents />
+ *     ) : null
+ *   )}
+ * </OLO.Root>
+ * ```
+ */
+export declare const Root: React.FC<OLORootProps>;
+interface OLOProviderProps {
+    /** The ID of the item to load */
+    itemId?: string;
+    /** Pre-loaded configurations (optional) */
+    configs?: {
+        itemServiceConfig?: ItemServiceConfig;
+    };
+    /** Loading component to show while services are initializing */
+    loading?: React.ReactNode;
+    /** Error component to show if service initialization fails */
+    error?: (props: {
+        error: string;
+        retry: () => void;
+    }) => React.ReactNode;
+    /** Children that will receive the services context */
+    children: React.ReactNode;
+}
+/**
+ * Convenience provider that handles loading and error states automatically
+ *
+ * @example
+ * ```tsx
+ * <OLO.Provider
+ *   itemId="item-123"
+ *   loading={<Spinner />}
+ *   error={({ error, retry }) => <ErrorBanner message={error} onRetry={retry} />}
+ * >
+ *   <ItemDetailsComponents />
+ * </OLO.Provider>
+ * ```
+ */
+export declare const Provider: React.FC<OLOProviderProps>;
+interface OLOItemDetailsProps {
+    /** The ID of the item to load */
+    itemId: string;
+    /** Pre-loaded configurations (optional) */
+    configs?: {
+        itemServiceConfig?: ItemServiceConfig;
+        cartServiceConfig?: any;
+    };
+    /** Custom loading component */
+    loading?: React.ReactNode;
+    /** Custom error component */
+    error?: (props: {
+        error: string;
+        retry: () => void;
+    }) => React.ReactNode;
+    /** Custom not found component */
+    notFound?: React.ReactNode;
+    /** Children that will have access to item services */
+    children: React.ReactNode;
+}
+/**
+ * Specialized headless component for item details
+ * Includes item-specific error handling (like 404 not found)
+ *
+ * @example
+ * ```tsx
+ * <OLO.ItemDetails
+ *   itemId="item-123"
+ *   notFound={<NotFoundPage />}
+ * >
+ *   <ItemDetailsUI />
+ * </OLO.ItemDetails>
+ * ```
+ */
+export declare const ItemDetails: React.FC<OLOItemDetailsProps>;
+interface OLOCartProps {
+    /** Pre-loaded cart service config (optional) */
+    cartServiceConfig?: any;
+    /** Loading component */
+    loading?: React.ReactNode;
+    /** Error component */
+    error?: (props: {
+        error: string;
+        retry: () => void;
+    }) => React.ReactNode;
+    /** Children that will have access to cart services */
+    children: React.ReactNode;
+}
+/**
+ * Headless component for cart-only functionality
+ * Doesn't load item services, only cart services
+ *
+ * @example
+ * ```tsx
+ * <OLO.Cart>
+ *   <CartComponents />
+ * </OLO.Cart>
+ * ```
+ */
+export declare const Cart: React.FC<OLOCartProps>;
+interface OLOServicesStatusProps {
+    /** The ID of the item to check */
+    itemId?: string;
+    /** Children render prop that receives service status */
+    children: React.ReactNode;
+}
+/**
+ * Headless component for checking service status
+ * Useful for debugging or conditional rendering
+ *
+ * @example
+ * ```tsx
+ * <OLO.ServicesStatus itemId="item-123">
+ *   {({ hasItemService, hasCartService, error }) => (
+ *     <div>
+ *       Item Service: {hasItemService ? '✅' : '❌'}
+ *       Cart Service: {hasCartService ? '✅' : '❌'}
+ *       {error && <div>Error: {error}</div>}
+ *     </div>
+ *   )}
+ * </OLO.ServicesStatus>
+ * ```
+ */
+export declare const ServicesStatus: React.FC<OLOServicesStatusProps>;
+/**
+ * Headless component for Menus service management.
+ * Wraps CoreOLO.Menus and provides render props for UI.
+ *
+ * @example
+ * ```tsx
+ * <OLO.Menus>
+ *   {({ menus, isLoading, error }) => (
+ *     isLoading ? (
+ *       <div>Loading...</div>
+ *     ) : error ? (
+ *       <div className="text-destructive">{error}</div>
+ *     ) : (
+ *       <ul>
+ *         {menus.map(menu => (
+ *           <li key={menu.id} className="text-foreground font-paragraph">{menu.name}</li>
+ *         ))}
+ *       </ul>
+ *     )
+ *   )}
+ * </OLO.Menus>
+ * ```
+ */
+interface OLOMenusProps {
+    /** Optional menu service config */
+    menuServiceConfig?: any;
+    /** Children render prop that receives menus state */
+    children?: React.ReactNode;
+}
+export declare const Menus: React.FC<OLOMenusProps>;
+export {};

package/cjs/dist/react/OLO.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { CoreOLO } from './core/index.js';
+/**
+ * Root headless component for OLO service management
+ * Wraps CoreOLO.Root and provides service state to children
+ *
+ * @example
+ * ```tsx
+ * <OLO.Root itemId="item-123">
+ *   {({ isLoading, hasServices, error, retry }) => (
+ *     isLoading ? (
+ *       <LoadingSpinner />
+ *     ) : error ? (
+ *       <ErrorMessage error={error} onRetry={retry} />
+ *     ) : hasServices ? (
+ *       <ItemDetailsComponents />
+ *     ) : null
+ *   )}
+ * </OLO.Root>
+ * ```
+ */
+export const Root = ({ itemId, oloSettingsServiceConfig, children, }) => {
+    const [retryKey] = React.useState(0);
+    // const retry = React.useCallback(() => {
+    //   setRetryKey(prev => prev + 1);
+    // }, []);
+    return (_jsx(CoreOLO.Root, { itemId: itemId, oloSettingsServiceConfig: oloSettingsServiceConfig, children: children }, retryKey));
+};
+/**
+ * Convenience provider that handles loading and error states automatically
+ *
+ * @example
+ * ```tsx
+ * <OLO.Provider
+ *   itemId="item-123"
+ *   loading={<Spinner />}
+ *   error={({ error, retry }) => <ErrorBanner message={error} onRetry={retry} />}
+ * >
+ *   <ItemDetailsComponents />
+ * </OLO.Provider>
+ * ```
+ */
+export const Provider = ({ itemId, configs, 
+// loading = (
+//   <div className="flex items-center justify-center p-8">
+//     <div className="text-secondary-foreground">Loading services...</div>
+//   </div>
+// ),
+// error: errorComponent = ({ error, retry }) => (
+//   <div className="flex flex-col items-center justify-center p-8 space-y-4">
+//     <div className="text-destructive">Error: {error}</div>
+//     <button
+//       onClick={retry}
+//       className="px-4 py-2 bg-primary text-primary-foreground rounded hover:bg-primary/90"
+//     >
+//       Retry
+//     </button>
+//   </div>
+// ),
+children, }) => {
+    return (_jsx(Root, { itemId: itemId, itemServiceConfig: configs?.itemServiceConfig, children: children }));
+};
+/**
+ * Specialized headless component for item details
+ * Includes item-specific error handling (like 404 not found)
+ *
+ * @example
+ * ```tsx
+ * <OLO.ItemDetails
+ *   itemId="item-123"
+ *   notFound={<NotFoundPage />}
+ * >
+ *   <ItemDetailsUI />
+ * </OLO.ItemDetails>
+ * ```
+ */
+export const ItemDetails = ({ itemId, configs, loading, error, notFound = (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx("div", { className: "text-secondary-foreground", children: "Item not found" }) })), children, }) => {
+    return (_jsx(Provider, { itemId: itemId, configs: configs, loading: loading, error: ({ error: errorMessage, retry }) => {
+            // Handle item not found specifically
+            if (errorMessage === 'Item not found') {
+                return _jsx(_Fragment, { children: notFound });
+            }
+            // Use custom error component if provided
+            if (error) {
+                return _jsx(_Fragment, { children: error({ error: errorMessage, retry }) });
+            }
+            // Default error handling
+            return (_jsxs("div", { className: "flex flex-col items-center justify-center p-8 space-y-4", children: [_jsxs("div", { className: "text-destructive", children: ["Error: ", errorMessage] }), _jsx("button", { onClick: retry, className: "px-4 py-2 bg-primary text-primary-foreground rounded hover:bg-primary/90", children: "Retry" })] }));
+        }, children: children }));
+};
+/**
+ * Headless component for cart-only functionality
+ * Doesn't load item services, only cart services
+ *
+ * @example
+ * ```tsx
+ * <OLO.Cart>
+ *   <CartComponents />
+ * </OLO.Cart>
+ * ```
+ */
+export const Cart = ({ loading, error, children }) => {
+    return (_jsx(Provider, { loading: loading, error: error, children: children }));
+};
+/**
+ * Headless component for checking service status
+ * Useful for debugging or conditional rendering
+ *
+ * @example
+ * ```tsx
+ * <OLO.ServicesStatus itemId="item-123">
+ *   {({ hasItemService, hasCartService, error }) => (
+ *     <div>
+ *       Item Service: {hasItemService ? '✅' : '❌'}
+ *       Cart Service: {hasCartService ? '✅' : '❌'}
+ *       {error && <div>Error: {error}</div>}
+ *     </div>
+ *   )}
+ * </OLO.ServicesStatus>
+ * ```
+ */
+export const ServicesStatus = ({ itemId, children, }) => {
+    return (_jsx(Root, { itemId: itemId, children: children }));
+};
+export const Menus = ({ 
+// menuServiceConfig,
+children, }) => {
+    // const [retryKey, setRetryKey] = React.useState(0);
+    // const [menus, setMenus] = React.useState<any[]>([]);
+    // const [isLoading, setIsLoading] = React.useState(true);
+    // const [error, setError] = React.useState<string | undefined>(undefined);
+    return _jsx(_Fragment, { children: children });
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+/**
+ * CoreMenuItem
+ *
+ * A core menu item component that displays the item image, name, description, and price
+ * using the project's design system for colors and fonts.
+ */
+export declare function CoreClickableItem({ children, }: {
+    children: (props: {
+        item: any;
+        itemSelected: () => void;
+    }) => React.ReactNode;
+}): React.ReactNode;

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

@@ -0,0 +1,21 @@
+import { useItemContext, useMenuContext, useSectionContext, } from '@wix/restaurants/components';
+import { useService } from '@wix/services-manager-react';
+import { OLOSettingsServiceDefinition } from '@wix/headless-restaurants-olo/services';
+// import { OLOSettingsServiceDefinition } from "../../services/OLOSettingsService";
+/**
+ * CoreMenuItem
+ *
+ * A core menu item component that displays the item image, name, description, and price
+ * using the project's design system for colors and fonts.
+ */
+export function CoreClickableItem({ children, }) {
+    const { item } = useItemContext();
+    const { section } = useSectionContext();
+    const { menu } = useMenuContext();
+    const service = useService(OLOSettingsServiceDefinition);
+    const itemSelected = () => {
+        const selectedItem = { ...item, sectionId: section._id, menuId: menu._id };
+        service.selectedItem?.set(selectedItem);
+    };
+    return children({ item, itemSelected });
+}

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

@@ -5,7 +5,7 @@ interface ItemDetailsRootProps {
     children: (props: {
         item: unknown;
     }) => React.ReactNode;
-    itemDetailsServiceConfig: ItemServiceConfig;
+    itemDetailsServiceConfig?: ItemServiceConfig;
 }
 export declare const Root: React.FC<ItemDetailsRootProps>;
 interface ItemDetailsModifiersRepeaterProps {

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

@@ -4,18 +4,21 @@ 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';
-export const Root = ({ children }) => {
+export const Root = ({ children, itemDetailsServiceConfig, }) => {
     const service = useService(OLOSettingsServiceDefinition);
     const selectedItem = service.selectedItem?.get();
-    const itemDetailsServiceConfig = loadItemServiceConfig({
-        item: selectedItem,
-        operationId: service.operation?.get()?._id ?? '',
-    });
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ItemServiceDefinition, ItemService, itemDetailsServiceConfig), children: children({ item: selectedItem }) }));
+    let config = itemDetailsServiceConfig;
+    if (!config) {
+        config = loadItemServiceConfig({
+            item: selectedItem,
+            operationId: service.operation?.get()?._id ?? '',
+        });
+    }
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ItemServiceDefinition, ItemService, config), children: children({ item: selectedItem }) }));
 };
 export const ModifiersRepeater = ({ children, }) => {
     const service = useService(ItemServiceDefinition);
-    const item = service.item.get();
+    const item = service.item?.get();
     // TODO: Check if modifiers exist on item type - might be in a different property
     const modifiers = item?.modifiers || [];
     const hasModifiers = modifiers.length > 0;
@@ -23,7 +26,7 @@ export const ModifiersRepeater = ({ children, }) => {
 };
 export const VariantsRepeater = ({ children, }) => {
     const service = useService(ItemServiceDefinition);
-    const item = service.item.get();
+    const item = service.item?.get();
     // TODO: Check if variants exist on item type - might be in a different property
     const variants = item?.variants || [];
     const hasVariants = variants.length > 0;