@wix/headless-restaurants-olo 0.0.7 → 0.0.9

package/cjs/dist/services/olo-settings-service.js

@@ -2,20 +2,30 @@ import { defineService, implementService } from '@wix/services-definitions';
 import * as operationGroupsApi from '@wix/auto_sdk_restaurants_operation-groups';
 import * as operationsApi from '@wix/auto_sdk_restaurants_operations';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
+import { AvailabilityStatus } from './common-types.js';
 export const OLOSettingsServiceDefinition = defineService('oloSettings');
 export const OLOSettingsService = implementService.withConfig()(OLOSettingsServiceDefinition, ({ getService, config }) => {
     const signalsService = getService(SignalsServiceDefinition);
+    const availabilityStatusMenuMap = signalsService.signal(config.availabilityStatusMenuMap);
+    const availabilityDispatchAction = signalsService.signal(config.availabilityDispatchAction);
     const operationGroup = signalsService.signal(config.operationGroup);
     const operation = signalsService.signal(config.operation);
     const selectedItem = signalsService.signal(null);
     const isLoading = signalsService.signal(false);
     const error = signalsService.signal(null);
+    const getAvailabilityStatusFn = (menuId) => {
+        return (availabilityStatusMenuMap.get()?.[menuId] ??
+            AvailabilityStatus.AVAILABLE);
+    };
+    const getAvailabilityStatus = signalsService.signal(getAvailabilityStatusFn);
     return {
         operationGroup,
         operation,
         isLoading,
         error,
         selectedItem,
+        getAvailabilityStatus,
+        availabilityDispatchAction,
     };
 });
 export async function loadOLOSettingsServiceConfig() {

package/cjs/dist/services/utils.d.ts

@@ -0,0 +1,20 @@
+import type { EnhancedModifier, EnhancedModifierGroup } from '@wix/headless-restaurants-menus/services';
+export declare const getModifiersInitState: (modifierGroups: EnhancedModifierGroup[]) => Record<string, string[]>;
+export declare const isSingleSelectRule: (rule: NonNullable<EnhancedModifierGroup["rule"]>) => boolean | null | undefined;
+export declare const getFirstPreSelectedModifier: (modifiers: EnhancedModifier[]) => string | null | undefined;
+export declare const getPreSelectedModifiers: (modifiers: EnhancedModifier[]) => string[];
+export declare const convertModifierToFormModifier: (modifier: EnhancedModifier, index: number) => {
+    _id: string;
+    revision?: string | null;
+    _createdDate?: Date | null;
+    _updatedDate?: Date | null;
+    name?: string | null;
+    extendedFields?: import("@wix/auto_sdk_restaurants_item-modifiers").ExtendedFields;
+    inStock?: boolean | null;
+    businessLocationIds?: string[];
+    additionalChargeInfo?: {
+        additionalCharge?: string;
+        formattedAdditionalCharge?: string;
+    };
+    preSelected?: boolean;
+};

package/cjs/dist/services/utils.js

@@ -0,0 +1,34 @@
+export const getModifiersInitState = (modifierGroups) => {
+    const initialSelectedModifiers = {};
+    modifierGroups.forEach((group) => {
+        if (group._id) {
+            const isMultiSelectItem = !isSingleSelectRule(group.rule ?? {});
+            const formModifiers = group.modifiers.map(convertModifierToFormModifier);
+            if (isMultiSelectItem) {
+                const preSelectedModifiers = getPreSelectedModifiers(formModifiers);
+                initialSelectedModifiers[group._id] = preSelectedModifiers;
+            }
+            else {
+                const preSelectedModifier = getFirstPreSelectedModifier(formModifiers);
+                initialSelectedModifiers[group._id] = preSelectedModifier
+                    ? [preSelectedModifier]
+                    : [];
+            }
+        }
+    });
+    return initialSelectedModifiers;
+};
+export const isSingleSelectRule = (rule) => rule.required && rule.minSelections === 1 && rule.maxSelections === 1;
+export const getFirstPreSelectedModifier = (modifiers) => modifiers.find(({ preSelected, inStock }) => preSelected && inStock)?._id;
+export const getPreSelectedModifiers = (modifiers) => modifiers.reduce((acc, modifier) => {
+    if (modifier.preSelected && modifier.inStock && modifier._id) {
+        return [...acc, modifier._id];
+    }
+    return acc;
+}, []);
+export const convertModifierToFormModifier = (modifier, index) => {
+    return {
+        ...modifier,
+        _id: `${modifier._id}~${index}`,
+    };
+};

package/dist/react/ItemDetails.d.ts

@@ -3,6 +3,8 @@ import { Commerce } from '@wix/ecom/components';
 import { type LineItem } from '@wix/ecom/services';
 import { type AsChildChildren } from '@wix/headless-utils/react';
 import { ItemServiceConfig } from '../services/item-details-service.js';
+import { EnhancedModifier, EnhancedModifierGroup, EnhancedVariant } from '@wix/headless-restaurants-menus/services';
+import { AvailabilityStatus, AvailabilityStatusMap } from '../services/common-types.js';
 /**
  * Root component for menu item display and interaction.
  * Provides context for all menu item-related components like name, price, description, image, etc.
@@ -46,36 +48,6 @@ export interface ItemDetailsNameProps {
     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.
  *
@@ -113,49 +85,77 @@ export interface ItemDetailsDescriptionProps {
 }
 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.
+ * Wrapper component for CoreItemDetails.ModifierComponent.
+ * Renders a single modifier with checkbox functionality.
  *
  * @component
  * @example
  * ```tsx
- * <ItemDetails.Labels>
- *   {(label) => <span>{label.name}</span>}
- * </ItemDetails.Labels>
+ * <ItemDetails.Modifier>
+ *   {({ modifier, isSelected, onToggle }) => (
+ *     <div style={{ display: "flex", alignItems: "center" }}>
+ *       <CheckboxPrimitive.Root
+ *         className="CheckboxRoot"
+ *         checked={isSelected}
+ *         onCheckedChange={onToggle}
+ *         id={modifier._id}
+ *       >
+ *         <CheckboxPrimitive.Indicator className="CheckboxIndicator">
+ *           <CheckIcon />
+ *         </CheckboxPrimitive.Indicator>
+ *       </CheckboxPrimitive.Root>
+ *       <label className="Label" htmlFor={modifier._id}>
+ *         {modifier.name}
+ *       </label>
+ *     </div>
+ *   )}
+ * </ItemDetails.Modifier>
  * ```
  */
-export interface ItemDetailsLabelsProps {
+export interface ItemDetailsModifiersSingleSelectProps {
     children?: AsChildChildren<{
-        label: string;
+        selectedModifierIds: string[];
+        onToggle: (modifierId: string) => void;
+        modifierGroup: EnhancedModifierGroup;
+        modifiers: EnhancedModifier[];
     }>;
     className?: string;
     asChild?: boolean;
-    iconClassName?: string;
-    nameClassName?: string;
+    modifierNameClassName?: string;
+    modifierPriceClassName?: 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 {
+export interface ModifierCheckboxProps {
+    selectedModifierIds: string[];
+    onToggle: (modifierId: string) => void;
+    className?: string;
+    asChild?: boolean;
+    modifierNameClassName?: string;
+    modifierPriceClassName?: string;
     children?: AsChildChildren<{
-        modifierGroup: any;
+        selectedModifierIds: string[];
+        onToggle: (modifierId: string) => void;
+    }>;
+}
+export declare const ModifierCheckbox: React.ForwardRefExoticComponent<ModifierCheckboxProps & React.RefAttributes<HTMLElement>>;
+export interface ModifierRadioProps {
+    modifierNameClassName?: string;
+    modifierPriceClassName?: string;
+}
+export declare const ModifierRadio: React.ForwardRefExoticComponent<ModifierRadioProps & React.RefAttributes<HTMLElement>>;
+export declare const ModifiersSingleSelect: React.ForwardRefExoticComponent<ItemDetailsModifiersSingleSelectProps & React.RefAttributes<HTMLElement>>;
+export interface ItemDetailsModifiersMultiSelectProps {
+    children?: AsChildChildren<{
+        selectedModifierIds: string[];
+        onToggle: (modifierId: string) => void;
+        modifierGroup: EnhancedModifierGroup;
+        modifiers: EnhancedModifier[];
     }>;
     className?: string;
     asChild?: boolean;
     modifierNameClassName?: string;
     modifierPriceClassName?: string;
 }
-export declare const ModifierGroups: React.ForwardRefExoticComponent<ItemDetailsModifierGroupsProps & React.RefAttributes<HTMLElement>>;
+export declare const ModifiersMultiSelect: React.ForwardRefExoticComponent<ItemDetailsModifiersMultiSelectProps & React.RefAttributes<HTMLElement>>;
 /**
  * Wrapper component for CoreItemDetails.VariantsComponent.
  * Renders the variants for the item using Radix UI RadioGroup.
@@ -170,8 +170,8 @@ export declare const ModifierGroups: React.ForwardRefExoticComponent<ItemDetails
  */
 export interface ItemDetailsVariantsProps {
     children?: AsChildChildren<{
-        variant: any;
-        variants: any[];
+        variant: EnhancedVariant;
+        variants: EnhancedVariant[];
         hasVariants: boolean;
         selectedVariantId?: string;
         onVariantChange?: (variantId: string) => void;
@@ -267,3 +267,16 @@ export interface ItemDetailsQuantityProps {
 export declare const AddToCartButton: React.FC<AddToCartButtonProps>;
 export declare const Quantity: React.FC<ItemDetailsQuantityProps>;
 export declare const SpecialRequest: React.ForwardRefExoticComponent<SpecialRequestProps & React.RefAttributes<never>>;
+export interface ItemDetailsAvailabilityProps {
+    asChild?: boolean;
+    textClassName?: string;
+    buttonClassName?: string;
+    availabilityStatusMap: AvailabilityStatusMap;
+    children: (props: {
+        availabilityStatus: AvailabilityStatus;
+        availabilityStatusText?: string;
+        availabilityStatusButtonText?: string;
+        availabilityAction?: () => void;
+    }) => React.ReactNode;
+}
+export declare const AvailabilityComponent: React.ForwardRefExoticComponent<ItemDetailsAvailabilityProps & React.RefAttributes<HTMLElement>>;

package/dist/react/ItemDetails.js

@@ -4,8 +4,10 @@ import { Commerce } from '@wix/ecom/components';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { Quantity as QuantityComponent } from '@wix/headless-components/react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { Item, Label, Modifier, ModifierGroup, } from '@wix/headless-restaurants-menus/react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Item, Modifier, ModifierGroup, useModifierContext, } from '@wix/headless-restaurants-menus/react';
 import * as CoreItemDetails from './core/ItemDetails.js';
+import { AvailabilityStatus, } from '../services/common-types.js';
 var TestIds;
 (function (TestIds) {
     TestIds["itemName"] = "item-name";
@@ -15,9 +17,11 @@ var TestIds;
     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["itemModifier"] = "item-modifier";
+    TestIds["itemAvailability"] = "item-availability";
 })(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 = ({ children, itemDetailsServiceConfig }) => {
     return (_jsx(CoreItemDetails.Root, { itemDetailsServiceConfig: itemDetailsServiceConfig, children: ({ item }) => _jsx(Item.Root, { item: item, children: children }) }));
 };
@@ -25,10 +29,6 @@ export const Name = React.forwardRef(({ asChild, children, className, ...rest },
     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 }));
 });
@@ -37,13 +37,43 @@ export const Description = React.forwardRef(({ asChild, className, ...rest }, re
     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 })] }) }));
+export const ModifierCheckbox = React.forwardRef(({ selectedModifierIds, onToggle, className, asChild, modifierNameClassName, modifierPriceClassName, children, ...rest }) => {
+    const { modifier } = useModifierContext();
+    const isSelected = selectedModifierIds.includes(modifier._id || '');
+    return (_jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifier, className: className, customElement: children, customElementProps: {
+            selectedModifierIds,
+            onToggle,
+        }, ...rest, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(CheckboxPrimitive.Root, { className: "CheckboxRoot", checked: isSelected, onCheckedChange: () => onToggle(modifier._id || ''), id: modifier._id || undefined, 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 })] })] }) }));
+});
+ModifierCheckbox.displayName = 'ItemDetails.ModifierCheckbox';
+export const ModifierRadio = React.forwardRef(({ modifierNameClassName, modifierPriceClassName }) => {
+    const { modifier } = useModifierContext();
+    return (_jsx(RadioGroupPrimitive.Item, { className: "RadioGroupItem", value: modifier._id || '', id: modifier._id || undefined, 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 })] })] }) }));
+});
+ModifierRadio.displayName = 'ItemDetails.ModifierRadio';
+export const ModifiersSingleSelect = React.forwardRef(({ children, className, asChild, modifierNameClassName, modifierPriceClassName, ...rest }) => {
+    return (_jsx(CoreItemDetails.ModifiersComponent, { singleSelect: true, children: ({ selectedModifierIds, onToggle, modifierGroup, modifiers }) => {
+            const selectedModifierId = selectedModifierIds.length > 0 ? selectedModifierIds[0] : '';
+            return (_jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifier, className: className, customElement: children, customElementProps: {
+                    selectedModifierIds,
+                    onToggle,
+                    modifierGroup,
+                    modifiers,
+                }, ...rest, children: _jsx(RadioGroupPrimitive.Root, { value: selectedModifierId, onValueChange: onToggle, children: _jsx(ModifierGroup.ModifiersRepeater, { children: _jsx(ModifierRadio, { modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) }) }) }));
+        } }));
 });
-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 })] }) }) }));
+ModifiersSingleSelect.displayName = 'ItemDetails.ModifiersSingleSelect';
+export const ModifiersMultiSelect = React.forwardRef(({ children, className, asChild, modifierNameClassName, modifierPriceClassName, ...rest }) => {
+    return (_jsx(CoreItemDetails.ModifiersComponent, { singleSelect: false, children: ({ selectedModifierIds, onToggle, modifierGroup, modifiers }) => {
+            return (_jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifier, className: className, customElement: children, customElementProps: {
+                    selectedModifierIds,
+                    onToggle,
+                    modifierGroup,
+                    modifiers,
+                }, ...rest, children: _jsx(ModifierGroup.ModifiersRepeater, { children: _jsx(ModifierCheckbox, { selectedModifierIds: selectedModifierIds, onToggle: onToggle, modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) }) }));
+        } }));
 });
+ModifiersMultiSelect.displayName = 'ItemDetails.ModifiersMultiSelect';
 export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, emptyState, }, ref) => {
     return (_jsx(CoreItemDetails.VariantsComponent, { children: ({ variants, hasVariants, selectedVariantId, onVariantChange }) => {
             if (!hasVariants) {
@@ -54,13 +84,12 @@ export const Variants = React.forwardRef(({ children, className, asChild, varian
                     hasVariants,
                     selectedVariantId,
                     onVariantChange,
-                }, children: _jsx(RadioGroupPrimitive.Root, { value: selectedVariantId, onValueChange: onVariantChange, children: variants.map((variant) => (_jsx(RadioGroupPrimitive.Item, { value: variant._id, children: _jsxs("div", { children: [_jsx("div", { className: variantNameClassName, children: variant.name }), _jsx("div", { className: variantPriceClassName, children: variant.priceInfo?.formattedPrice ||
+                }, children: _jsx(RadioGroupPrimitive.Root, { value: selectedVariantId, onValueChange: onVariantChange, children: variants.map((variant) => (_jsx(RadioGroupPrimitive.Item, { value: variant._id ?? '', children: _jsxs("div", { children: [_jsx("div", { className: variantNameClassName, children: variant.name }), _jsx("div", { className: variantPriceClassName, children: variant.priceInfo?.formattedPrice ||
                                         variant.priceInfo?.price ||
                                         '' })] }) }, variant._id))) }) }));
         } }));
 });
 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.
@@ -93,3 +122,17 @@ export const SpecialRequest = React.forwardRef(({ className, labelClassName, pla
     return (_jsx(CoreItemDetails.SpecialRequest, { children: ({ value, onChange, }) => (_jsxs(AsChildSlot, { ref: ref, asChild: asChild, className: className, onChange: onChange, "data-testid": TestIds.itemSpecialRequest, customElement: children, customElementProps: { label, value }, content: value, ...props, children: [label && _jsx("label", { className: labelClassName, children: label }), _jsx("textarea", { value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, maxLength: maxLength, rows: rows, className: className, children: value })] })) }));
 });
 SpecialRequest.displayName = 'SpecialRequest';
+export const AvailabilityComponent = React.forwardRef(({ asChild, children, textClassName, buttonClassName, availabilityStatusMap, ...rest }, ref) => {
+    return (_jsx(CoreItemDetails.AvailabilityComponent, { availabilityStatusMap: availabilityStatusMap, children: ({ availabilityStatus, availabilityAction, availabilityStatusText, availabilityStatusButtonText, }) => {
+            if (availabilityStatus === AvailabilityStatus.AVAILABLE) {
+                return null;
+            }
+            return (_jsxs(AsChildSlot, { asChild: asChild, "data-testid": TestIds.itemAvailability, customElement: children, customElementProps: {
+                    availabilityStatus,
+                    availabilityStatusText,
+                    availabilityStatusButtonText,
+                    availabilityAction,
+                }, ref: ref, ...rest, children: [_jsx("p", { className: textClassName, children: availabilityStatusText }), availabilityStatusButtonText && availabilityAction && (_jsx("button", { className: buttonClassName, onClick: availabilityAction, children: availabilityStatusButtonText }))] }));
+        } }));
+});
+AvailabilityComponent.displayName = 'AvailabilityComponent';

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

@@ -1,6 +1,8 @@
 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 { AvailabilityStatus, AvailabilityStatusMap } from '../../services/common-types.js';
 interface ItemDetailsRootProps {
     children: (props: {
         item: unknown;
@@ -8,13 +10,6 @@ interface ItemDetailsRootProps {
     itemDetailsServiceConfig?: ItemServiceConfig;
 }
 export declare const Root: React.FC<ItemDetailsRootProps>;
-interface ItemDetailsModifiersRepeaterProps {
-    children: (props: {
-        modifiers: [];
-        hasModifiers: boolean;
-    }) => React.ReactNode;
-}
-export declare const ModifiersRepeater: React.FC<ItemDetailsModifiersRepeaterProps>;
 interface ItemDetailsSpecialRequestProps {
     children: (props: {
         value: string;
@@ -42,12 +37,32 @@ interface ItemDetailsQuantityProps {
 export declare const QuantityComponent: React.FC<ItemDetailsQuantityProps>;
 interface ItemDetailsVariantsProps {
     children: (props: {
-        variants: any[];
+        variants: EnhancedVariant[];
         hasVariants: boolean;
         selectedVariantId?: string;
         onVariantChange?: (variantId: string) => void;
-        selectedVariant?: any;
+        selectedVariant?: EnhancedVariant;
     }) => 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: {
+        availabilityStatus: AvailabilityStatus;
+        availabilityAction?: () => void;
+        availabilityStatusText?: string;
+        availabilityStatusButtonText?: string;
+    }) => React.ReactNode;
+}
+export declare const AvailabilityComponent: React.FC<ItemDetailsAvailabilityProps>;
 export {};

package/dist/react/core/ItemDetails.js

@@ -4,7 +4,9 @@ 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 } from '@wix/headless-restaurants-menus/react';
+import { useItemContext, useModifierGroupContext, } 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();
@@ -20,14 +22,6 @@ export const Root = ({ children, itemDetailsServiceConfig, }) => {
     }
     return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ItemServiceDefinition, ItemService, config), children: children({ item: itemDetailsServiceConfig?.item ?? selectedItem }) }));
 };
-export const ModifiersRepeater = ({ children, }) => {
-    const service = useService(ItemServiceDefinition);
-    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;
-    return children({ modifiers, hasModifiers });
-};
 export const SpecialRequest = ({ children, }) => {
     const [value, setValue] = useState('');
     const service = useService(ItemServiceDefinition);
@@ -92,3 +86,42 @@ 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?.();
+    const itemService = useService(ItemServiceDefinition);
+    const availabilityStatus = itemService.availabilityStatus?.get?.() ?? AvailabilityStatus.AVAILABLE;
+    const availabilityStatusWithAction = availabilityStatus === AvailabilityStatus.NEXT_AVAILABILITY_PICKUP ||
+        availabilityStatus === AvailabilityStatus.NEXT_AVAILABILITY_DELIVERY;
+    const availabilityStatusObject = availabilityStatusMap[availabilityStatus];
+    const availabilityStatusButtonText = availabilityStatusWithAction
+        ? availabilityStatusObject
+            ?.buttonText
+        : undefined;
+    return children({
+        availabilityStatus,
+        availabilityAction: availabilityStatusWithAction
+            ? availabilityDispatchAction
+            : undefined,
+        availabilityStatusText: availabilityStatusObject?.text,
+        availabilityStatusButtonText,
+    });
+};

package/dist/services/common-types.d.ts

@@ -1,3 +1,19 @@
 import * as currentCart from '@wix/auto_sdk_ecom_current-cart';
 export type LineItem = currentCart.LineItem;
 export type DescriptionLine = currentCart.DescriptionLine;
+export declare enum AvailabilityStatus {
+    AVAILABLE = 0,
+    NOT_AVAILABLE = 1,
+    OUT_OF_STOCK = 2,
+    NEXT_AVAILABILITY_PICKUP = 3,
+    NEXT_AVAILABILITY_DELIVERY = 4
+}
+export type NextAvailability = AvailabilityStatus.NEXT_AVAILABILITY_PICKUP | AvailabilityStatus.NEXT_AVAILABILITY_DELIVERY;
+export type AvailabilityStatusWithActionObject = {
+    text?: string;
+    buttonText?: string;
+};
+export type AvailabilityStatusObject = {
+    text?: string;
+};
+export type AvailabilityStatusMap = Partial<Record<Exclude<AvailabilityStatus, NextAvailability>, AvailabilityStatusObject>> & Record<NextAvailability, AvailabilityStatusWithActionObject>;

package/dist/services/common-types.js

@@ -1 +1,8 @@
-export {};
+export var AvailabilityStatus;
+(function (AvailabilityStatus) {
+    AvailabilityStatus[AvailabilityStatus["AVAILABLE"] = 0] = "AVAILABLE";
+    AvailabilityStatus[AvailabilityStatus["NOT_AVAILABLE"] = 1] = "NOT_AVAILABLE";
+    AvailabilityStatus[AvailabilityStatus["OUT_OF_STOCK"] = 2] = "OUT_OF_STOCK";
+    AvailabilityStatus[AvailabilityStatus["NEXT_AVAILABILITY_PICKUP"] = 3] = "NEXT_AVAILABILITY_PICKUP";
+    AvailabilityStatus[AvailabilityStatus["NEXT_AVAILABILITY_DELIVERY"] = 4] = "NEXT_AVAILABILITY_DELIVERY";
+})(AvailabilityStatus || (AvailabilityStatus = {}));

package/dist/services/index.d.ts

@@ -1,2 +1,3 @@
 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';

package/dist/services/index.js

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

package/dist/services/item-details-service.d.ts

@@ -1,7 +1,8 @@
 import { type Signal } from '@wix/services-definitions/core-services/signals';
-import * as items from '@wix/auto_sdk_restaurants_items';
 import { type LineItem } from '@wix/ecom/services';
 import { itemVariants } from '@wix/restaurants';
+import type { EnhancedItem } from '@wix/headless-restaurants-menus/services';
+import { AvailabilityStatus } from './common-types.js';
 type Variant = itemVariants.Variant;
 /**
  * API interface for the Item Detailsservice, providing reactive item data management.
@@ -11,11 +12,13 @@ type Variant = itemVariants.Variant;
  */
 export interface ItemServiceAPI {
     /** Reactive signal containing the current item data */
-    item?: Signal<items.Item | undefined>;
+    item?: Signal<EnhancedItem | undefined>;
     quantity: Signal<number>;
     specialRequest: Signal<string>;
     lineItem: Signal<LineItem>;
     selectedVariant: Signal<Variant | undefined>;
+    selectedModifiers: Signal<Record<string, Array<string>>>;
+    availabilityStatus: Signal<AvailabilityStatus>;
     /** Reactive signal indicating if a item is currently being loaded */
     isLoading: Signal<boolean>;
     /** Reactive signal containing any error message, or null if no error */
@@ -26,6 +29,10 @@ export interface ItemServiceAPI {
     updateSpecialRequest: (specialRequest: string) => void;
     /** Function to update the selected variant of the item */
     updateSelectedVariant: (variant: Variant) => void;
+    /** Function to toggle a modifier instance in a specific group */
+    toggleModifier: (modifierGroupId: string, modifierId: string, singleSelect?: boolean) => void;
+    /** Function to get the selected modifiers for a specific group */
+    getSelectedModifiers: (modifierGroupId: string) => Array<string>;
 }
 /**
  * Service definition for the Item service.
@@ -46,9 +53,10 @@ export declare const ItemServiceDefinition: string & {
  */
 export interface ItemServiceConfig {
     /** The initial item data to configure the service with */
-    item?: items.Item;
+    item?: EnhancedItem;
     itemId?: string;
     operationId?: string;
+    menuId?: string;
 }
 export declare const ItemService: import("@wix/services-definitions").ServiceFactory<string & {
     __api: ItemServiceAPI;
@@ -154,7 +162,7 @@ export interface NotFoundItemServiceConfigResult {
  * ```
  */
 export declare function loadItemServiceConfig({ item, operationId, }: {
-    item: any;
+    item: EnhancedItem;
     operationId: string;
 }): ItemServiceConfig;
 export {};