@wix/headless-restaurants-olo 0.0.15 → 0.0.17

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

@@ -1,4 +1,10 @@
 import type { EnhancedModifier, EnhancedModifierGroup } from '@wix/headless-restaurants-menus/services';
+import { RuleType, RuleTypeMap } from './common-types.js';
+interface ruleUtilsArgs {
+    required: boolean;
+    minSelections: number;
+    maxSelections?: number | null;
+}
 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;
@@ -18,3 +24,14 @@ export declare const convertModifierToFormModifier: (modifier: EnhancedModifier,
     };
     preSelected?: boolean;
 };
+export declare const getModifierGroupRuleType: (modifierGroupRule: EnhancedModifierGroup["rule"]) => RuleType;
+export declare const hasNoLimit: ({ required, minSelections, maxSelections, }: ruleUtilsArgs) => boolean;
+export declare const canChooseOne: ({ required, minSelections, maxSelections, }: ruleUtilsArgs) => boolean;
+export declare const hasToChooseOne: ({ required, minSelections, maxSelections, }: ruleUtilsArgs) => boolean;
+export declare const hasToChooseX: ({ required, minSelections, maxSelections, }: ruleUtilsArgs) => boolean | 0 | null | undefined;
+export declare const hasToChooseAtLeastOne: ({ required, minSelections, maxSelections, }: ruleUtilsArgs) => boolean;
+export declare const hasToChooseAtLeastX: ({ required, minSelections, maxSelections, }: ruleUtilsArgs) => boolean;
+export declare const chooseUpToX: ({ required, minSelections, maxSelections, }: ruleUtilsArgs) => boolean;
+export declare const hasToChooseBetweenXAndY: ({ required, minSelections, maxSelections, }: ruleUtilsArgs) => boolean;
+export declare const getRuleTypeMapValue: (ruleTypeMap: RuleTypeMap, ruleType: RuleType, modifierGroupName: string, rule: EnhancedModifierGroup["rule"]) => string | undefined;
+export {};

package/cjs/dist/services/utils.js

@@ -1,3 +1,4 @@
+import { RuleType } from './common-types.js';
 export const getModifiersInitState = (modifierGroups) => {
     const initialSelectedModifiers = {};
     modifierGroups.forEach((group) => {
@@ -32,3 +33,106 @@ export const convertModifierToFormModifier = (modifier, index) => {
         _id: `${modifier._id}~${index}`,
     };
 };
+export const getModifierGroupRuleType = (modifierGroupRule) => {
+    const required = modifierGroupRule?.required ?? false;
+    const minSelections = modifierGroupRule?.minSelections ?? 0;
+    const maxSelections = modifierGroupRule?.maxSelections;
+    const ruleFields = { required, minSelections, maxSelections };
+    if (hasNoLimit(ruleFields)) {
+        return RuleType.NO_LIMIT;
+    }
+    if (hasToChooseOne(ruleFields) || canChooseOne(ruleFields)) {
+        return RuleType.CHOOSE_ONE;
+    }
+    if (hasToChooseX(ruleFields)) {
+        return RuleType.CHOOSE_X;
+    }
+    if (hasToChooseAtLeastOne(ruleFields)) {
+        return RuleType.CHOOSE_AT_LEAST_ONE;
+    }
+    if (hasToChooseAtLeastX(ruleFields)) {
+        return RuleType.CHOOSE_AT_LEAST_X;
+    }
+    if (chooseUpToX(ruleFields)) {
+        return RuleType.CHOOSE_UP_TO_X;
+    }
+    if (hasToChooseBetweenXAndY(ruleFields)) {
+        return RuleType.CHOOSE_BETWEEN_X_AND_Y;
+    }
+    return RuleType.NO_LIMIT;
+};
+const hasNoValue = (variable) => variable === null || variable === undefined;
+export const hasNoLimit = ({ required, minSelections, maxSelections, }) => !required && minSelections < 1 && (maxSelections ? maxSelections < 1 : true);
+export const canChooseOne = ({ required, minSelections, maxSelections, }) => !required &&
+    minSelections === 0 &&
+    (maxSelections ? maxSelections === 1 : false);
+export const hasToChooseOne = ({ required, minSelections, maxSelections, }) => required &&
+    minSelections === 1 &&
+    (maxSelections ? maxSelections === 1 : false);
+export const hasToChooseX = ({ required, minSelections, maxSelections, }) => required ? maxSelections && minSelections === maxSelections : false;
+export const hasToChooseAtLeastOne = ({ required, minSelections, maxSelections, }) => required ? minSelections === 1 && hasNoValue(maxSelections) : false;
+export const hasToChooseAtLeastX = ({ required, minSelections, maxSelections, }) => required ? minSelections > 1 && hasNoValue(maxSelections) : false;
+export const chooseUpToX = ({ required, minSelections, maxSelections, }) => !required &&
+    minSelections === 0 &&
+    (maxSelections ? maxSelections > 1 : false);
+export const hasToChooseBetweenXAndY = ({ required, minSelections, maxSelections, }) => required
+    ? maxSelections
+        ? minSelections > 0 && maxSelections > minSelections
+        : false
+    : false;
+export const getRuleTypeMapValue = (ruleTypeMap, ruleType, modifierGroupName, rule) => {
+    const minSelections = rule?.minSelections ?? 0;
+    const maxSelections = rule?.maxSelections;
+    switch (ruleType) {
+        case RuleType.NO_LIMIT: {
+            const callback = ruleTypeMap[RuleType.NO_LIMIT];
+            if (callback) {
+                return callback(modifierGroupName);
+            }
+            break;
+        }
+        case RuleType.CHOOSE_ONE: {
+            const callback = ruleTypeMap[RuleType.CHOOSE_ONE];
+            if (callback) {
+                return callback(modifierGroupName);
+            }
+            break;
+        }
+        case RuleType.CHOOSE_X: {
+            const callback = ruleTypeMap[RuleType.CHOOSE_X];
+            if (callback) {
+                return callback(modifierGroupName, minSelections);
+            }
+            break;
+        }
+        case RuleType.CHOOSE_AT_LEAST_ONE: {
+            const callback = ruleTypeMap[RuleType.CHOOSE_AT_LEAST_ONE];
+            if (callback) {
+                return callback(modifierGroupName);
+            }
+            break;
+        }
+        case RuleType.CHOOSE_AT_LEAST_X: {
+            const callback = ruleTypeMap[RuleType.CHOOSE_AT_LEAST_X];
+            if (callback) {
+                return callback(modifierGroupName, minSelections);
+            }
+            break;
+        }
+        case RuleType.CHOOSE_UP_TO_X: {
+            const callback = ruleTypeMap[RuleType.CHOOSE_UP_TO_X];
+            if (callback && maxSelections) {
+                return callback(modifierGroupName, maxSelections);
+            }
+            break;
+        }
+        case RuleType.CHOOSE_BETWEEN_X_AND_Y: {
+            const callback = ruleTypeMap[RuleType.CHOOSE_BETWEEN_X_AND_Y];
+            if (callback && maxSelections) {
+                return callback(modifierGroupName, minSelections, maxSelections);
+            }
+            break;
+        }
+    }
+    return undefined;
+};

package/dist/react/ItemDetails.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { Commerce } from '@wix/ecom/components';
 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 { EnhancedVariant } from '@wix/headless-restaurants-menus/services';
 import { AvailabilityStatus, AvailabilityStatusMap } from '../services/common-types.js';
 /**
  * Root component for menu item display and interaction.
@@ -25,136 +25,6 @@ export interface RootProps {
     itemDetailsServiceConfig?: ItemServiceConfig;
 }
 export declare const Root: ({ children, itemDetailsServiceConfig }: RootProps) => import("react/jsx-runtime").JSX.Element;
-/**
- * Displays the item name with customizable rendering.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Name />
- * <ItemDetails.Name asChild>
- *   <h2 className="font-heading text-lg" />
- * </ItemDetails.Name>
- * ```
- */
-export interface ItemDetailsNameProps {
-    asChild?: boolean;
-    /** Custom render function when using asChild */
-    children?: AsChildChildren<{
-        name: string;
-    }>;
-    /** CSS classes to apply to the default element */
-    className?: string;
-}
-export declare const Name: React.ForwardRefExoticComponent<ItemDetailsNameProps & 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 CoreItemDetails.ModifierComponent.
- * Renders a single modifier with checkbox functionality.
- *
- * @component
- * @example
- * ```tsx
- * <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 ItemDetailsModifiersSingleSelectProps {
-    children?: AsChildChildren<{
-        selectedModifierIds: string[];
-        onToggle: (modifierId: string) => void;
-        modifierGroup: EnhancedModifierGroup;
-        modifiers: EnhancedModifier[];
-    }>;
-    className?: string;
-    asChild?: boolean;
-    modifierNameClassName?: string;
-    modifierPriceClassName?: string;
-}
-export interface ModifierCheckboxProps {
-    selectedModifierIds: string[];
-    onToggle: (modifierId: string) => void;
-    className?: string;
-    asChild?: boolean;
-    modifierNameClassName?: string;
-    modifierPriceClassName?: string;
-    children?: AsChildChildren<{
-        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 ModifiersMultiSelect: React.ForwardRefExoticComponent<ItemDetailsModifiersMultiSelectProps & React.RefAttributes<HTMLElement>>;
 /**
  * Wrapper component for CoreItemDetails.VariantsComponent.
  * Renders the variants for the item using Radix UI RadioGroup.
@@ -169,7 +39,9 @@ export declare const ModifiersMultiSelect: React.ForwardRefExoticComponent<ItemD
  */
 export interface ItemDetailsVariantsProps {
     children?: AsChildChildren<{
+        variant: EnhancedVariant;
         variants: EnhancedVariant[];
+        hasVariants: boolean;
         selectedVariantId?: string;
         onVariantChange?: (variantId: string) => void;
     }>;
@@ -177,6 +49,7 @@ export interface ItemDetailsVariantsProps {
     asChild?: boolean;
     variantNameClassName?: string;
     variantPriceClassName?: string;
+    emptyState?: React.ReactNode;
 }
 export declare const Variants: React.ForwardRefExoticComponent<ItemDetailsVariantsProps & React.RefAttributes<HTMLElement>>;
 /**

package/dist/react/ItemDetails.js

@@ -4,8 +4,7 @@ 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 * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Item, Modifier, ModifierGroup, useModifierContext, } from '@wix/headless-restaurants-menus/react';
+import { Item } from '@wix/headless-restaurants-menus/react';
 import * as CoreItemDetails from './core/ItemDetails.js';
 import { AvailabilityStatus, } from '../services/common-types.js';
 var TestIds;
@@ -18,69 +17,19 @@ var TestIds;
     TestIds["itemSpecialRequest"] = "item-special-request";
     TestIds["itemLabels"] = "item-labels";
     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 }) }));
 };
-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 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 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 }) }) }) }));
-        } }));
-});
-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, }, ref) => {
+export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, emptyState, }, ref) => {
     return (_jsx(CoreItemDetails.VariantsComponent, { children: ({ variants, hasVariants, selectedVariantId, onVariantChange }) => {
             if (!hasVariants) {
-                return null;
+                return emptyState || null;
             }
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.itemVariants, className: className, customElement: children, customElementProps: {
                     variants,
+                    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 ||

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/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,9 +4,8 @@ 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();
@@ -88,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 {};