@wix/headless-restaurants-olo 0.0.22 → 0.0.24

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

@@ -71,7 +71,7 @@ export declare const Variants: React.ForwardRefExoticComponent<ItemDetailsVarian
 export interface SpecialRequestProps {
     asChild?: boolean;
     children?: AsChildChildren<{
-        description: string;
+        value: string;
         onChange: (value: string) => void;
     }>;
     /** Placeholder text for the textarea */
@@ -108,6 +108,7 @@ export interface AddToCartButtonProps {
         /** Text label for the button */
         label: React.ReactNode;
         formattedPrice: string;
+        modifierGroupHasError: boolean;
     }) => React.ReactNode;
 }
 export declare const AddToCartButton: React.ForwardRefExoticComponent<AddToCartButtonProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/ItemDetails.js

@@ -39,7 +39,7 @@ export const Variants = React.forwardRef(({ children, className, asChild, varian
 });
 Variants.displayName = 'ItemDetails.Variants';
 export const AddToCartButton = React.forwardRef(({ asChild, children, className, addToCartLabelMap, ...props }, ref) => {
-    return (_jsx(CoreItemDetails.LineItemComponent, { addToCartLabelMap: addToCartLabelMap, children: ({ lineItem, buttonState, addToCartButtonDisabled, loadingState, labelText, formattedPrice, }) => {
+    return (_jsx(CoreItemDetails.LineItemComponent, { addToCartLabelMap: addToCartLabelMap, children: ({ lineItem, buttonState, addToCartButtonDisabled, loadingState, labelText, formattedPrice, modifierGroupHasError, }) => {
             const label = (_jsxs(_Fragment, { children: [_jsx("span", { children: labelText }), " ", _jsx("span", { children: " | " }), _jsx("span", { children: formattedPrice })] }));
             return (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: {
                     buttonState,
@@ -49,6 +49,7 @@ export const AddToCartButton = React.forwardRef(({ asChild, children, className,
                     lineItems: [lineItem],
                     label,
                     formattedPrice,
+                    modifierGroupHasError,
                 }, ref: ref, ...props, children: _jsx(Commerce.Actions.AddToCart, { asChild: false, label: label, className: className, lineItems: [lineItem], ...props, children: children({
                         lineItem,
                         buttonState,
@@ -56,6 +57,7 @@ export const AddToCartButton = React.forwardRef(({ asChild, children, className,
                         loadingState,
                         label,
                         formattedPrice,
+                        modifierGroupHasError,
                     }) }) }));
         } }));
 });

package/cjs/dist/react/ModifierGroup.js

@@ -44,12 +44,12 @@ export const Description = React.forwardRef(({ ruleTypeMap, className, asChild,
         } }));
 });
 Description.displayName = 'ItemDetailsModifierGroup.Description';
-export const Error = React.forwardRef(({ ruleTypeMap, className, asChild, children }, ref) => {
+export const Error = React.forwardRef(({ ruleTypeMap, className, asChild, children, ...otherProps }, 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 }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, "data-testid": TestIds.modifierGroupError, className: className, customElement: children, customElementProps: { error }, content: error, ...otherProps, children: _jsx("p", { className: className, children: error }) }));
         } }));
 });
 Error.displayName = 'ItemDetailsModifierGroup.Error';

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

@@ -26,6 +26,7 @@ interface ItemDetailsLineItemProps {
         addToCartButtonDisabled: boolean;
         labelText: string;
         formattedPrice: string;
+        modifierGroupHasError: boolean;
     }) => React.ReactNode;
 }
 export declare const LineItemComponent: React.FC<ItemDetailsLineItemProps>;

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

@@ -24,11 +24,14 @@ export const Root = ({ children, itemDetailsServiceConfig, }) => {
     return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ItemServiceDefinition, ItemService, config), children: children({ item: itemDetailsServiceConfig?.item ?? selectedItem }) }));
 };
 export const SpecialRequest = ({ children, }) => {
-    const [value, setValue] = useState('');
     const service = useService(ItemServiceDefinition);
+    const initialSpecialRequest = service.specialRequest?.get?.() ?? '';
+    const [value, setValue] = useState(initialSpecialRequest);
     const onChange = (newValue) => {
-        setValue(newValue);
-        service.updateSpecialRequest(newValue);
+        if (typeof newValue === 'string') {
+            setValue(newValue);
+            service.updateSpecialRequest(newValue);
+        }
     };
     return children({
         value,
@@ -48,6 +51,7 @@ export const LineItemComponent = ({ addToCartLabelMap, children, }) => {
     const formatCurrency = oloSettingsService.formatCurrency;
     const formattedPrice = formatCurrency(price);
     const labelText = addToCartLabelMap[buttonState];
+    const modifierGroupHasError = service.doesModifierGroupHaveError?.get?.() ?? false;
     return children({
         loadingState,
         lineItem,
@@ -55,6 +59,7 @@ export const LineItemComponent = ({ addToCartLabelMap, children, }) => {
         addToCartButtonDisabled,
         labelText,
         formattedPrice,
+        modifierGroupHasError,
     });
 };
 export const QuantityComponent = ({ children, }) => {

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

@@ -49,8 +49,7 @@ export const ModifiersComponent = ({ children, }) => {
 };
 export const Description = ({ ruleTypeMap, children, }) => {
     const { ruleType, modifierGroup } = useModifiersContext();
-    const modifierGroupName = modifierGroup.name || '';
-    const description = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroupName, modifierGroup.rule);
+    const description = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroup.rule);
     return children({ description });
 };
 export const GroupError = ({ ruleTypeMap, children, }) => {
@@ -58,10 +57,9 @@ export const GroupError = ({ ruleTypeMap, children, }) => {
     const { ruleType, modifierGroup } = useModifiersContext();
     const groupId = modifierGroup._id || '';
     const modifierGroupErrors = service.modifierGroupError?.get() || {};
-    const modifierGroupName = modifierGroup.name || '';
     let error;
     if (modifierGroupErrors[groupId]) {
-        error = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroupName, modifierGroup.rule);
+        error = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroup.rule);
     }
     return children({ error });
 };

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

@@ -11,13 +11,13 @@ export declare enum RuleType {
     CHOOSE_BETWEEN_X_AND_Y = "CHOOSE_BETWEEN_X_AND_Y"
 }
 export interface RuleTypeMap {
-    [RuleType.NO_LIMIT]?: (modifierGroupName: string) => string;
-    [RuleType.CHOOSE_ONE]?: (modifierGroupName: string) => string;
-    [RuleType.CHOOSE_X]?: (modifierGroupName: string, x: number) => string;
-    [RuleType.CHOOSE_AT_LEAST_ONE]?: (modifierGroupName: string) => string;
-    [RuleType.CHOOSE_AT_LEAST_X]?: (modifierGroupName: string, x: number) => string;
-    [RuleType.CHOOSE_UP_TO_X]?: (modifierGroupName: string, x: number) => string;
-    [RuleType.CHOOSE_BETWEEN_X_AND_Y]?: (modifierGroupName: string, x: number, y: number) => string;
+    [RuleType.NO_LIMIT]?: () => string;
+    [RuleType.CHOOSE_ONE]?: () => string;
+    [RuleType.CHOOSE_X]?: (x: number) => string;
+    [RuleType.CHOOSE_AT_LEAST_ONE]?: () => string;
+    [RuleType.CHOOSE_AT_LEAST_X]?: (x: number) => string;
+    [RuleType.CHOOSE_UP_TO_X]?: (x: number) => string;
+    [RuleType.CHOOSE_BETWEEN_X_AND_Y]?: (x: number, y: number) => string;
 }
 export declare enum AvailabilityStatus {
     AVAILABLE = 0,

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

@@ -43,6 +43,7 @@ export interface ItemServiceAPI {
         endDate?: Date;
         weeklyAvailabilitySummary?: WeeklyAvailability;
     };
+    doesModifierGroupHaveError: ReadOnlySignal<boolean>;
 }
 /**
  * Service definition for the Item service.
@@ -67,6 +68,12 @@ export interface ItemServiceConfig {
     operationId?: string;
     availabilityStatus?: AvailabilityStatus;
     editItemMode?: boolean;
+    editingItemValues?: {
+        quantity?: number;
+        specialRequest?: string;
+        selectedVariantId?: string;
+        selectedModifiers?: Record<string, Array<string>>;
+    };
     menuId?: string;
     sectionId?: string;
     futureAvailability?: FutureAvailability;

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

@@ -1,7 +1,7 @@
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
 import { AddToCartButtonState, AvailabilityStatus, } from './common-types.js';
-import { getAreNotEnoughModifiersOfMandatoryModifierGroupInStock, getModifiersInitState, getLineItemModifiers, getPriceVariantOptions, getSelectedModifierPrices, getSelectedVariantPrice, calculateItemPrice, } from './utils.js';
+import { getAreNotEnoughModifiersOfMandatoryModifierGroupInStock, getModifiersInitState, getLineItemModifiers, getPriceVariantOptions, getSelectedModifierPrices, getSelectedVariantPrice, calculateItemPrice, checkModifiersValidation, } from './utils.js';
 import { OLOSettingsServiceDefinition } from './olo-settings-service.js';
 /**
  * Service definition for the Item service.
@@ -56,13 +56,27 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
     const item = signalsService.signal(config.item);
     const isLoading = signalsService.signal(!!config.item);
     const error = signalsService.signal(config.item ? null : 'Item not found');
-    const quantity = signalsService.signal(1);
-    const specialRequest = signalsService.signal('');
+    const quantity = signalsService.signal(config.editItemMode ? (config.editingItemValues?.quantity ?? 1) : 1);
+    const specialRequest = signalsService.signal(config.editItemMode
+        ? (config.editingItemValues?.specialRequest ?? '')
+        : '');
     const priceVariants = config.item?.priceVariants || [];
-    const initialVariant = priceVariants.length > 0 ? priceVariants[0] : undefined;
+    let initialVariant;
+    if (!config.editItemMode) {
+        initialVariant = priceVariants.length > 0 ? priceVariants[0] : undefined;
+    }
+    else {
+        if (config.editingItemValues?.selectedVariantId) {
+            initialVariant = priceVariants.find((variant) => variant._id === config.editingItemValues?.selectedVariantId);
+        }
+        else {
+            initialVariant =
+                priceVariants.length > 0 ? priceVariants[0] : undefined;
+        }
+    }
     const selectedVariant = signalsService.signal(initialVariant);
     const modifierGroups = config.item?.modifierGroups || [];
-    const initialSelectedModifiers = getModifiersInitState(modifierGroups);
+    const initialSelectedModifiers = getModifiersInitState(modifierGroups, config.editItemMode, config.editingItemValues?.selectedModifiers);
     const selectedModifiers = signalsService.signal(initialSelectedModifiers);
     const initialModifierGroupError = modifierGroups.reduce((acc, group) => {
         if (group._id) {
@@ -121,7 +135,9 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
         quantity.set(_quantity);
     };
     const updateSpecialRequest = (_specialRequest) => {
-        specialRequest.set(_specialRequest);
+        if (typeof _specialRequest === 'string') {
+            specialRequest.set(_specialRequest);
+        }
     };
     const updateSelectedVariant = (variant) => {
         selectedVariant.set(variant);
@@ -148,6 +164,20 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
             }
         }
     };
+    const doesModifierGroupHaveError = signalsService.computed(() => {
+        const currentSelectedModifiers = selectedModifiers.get();
+        const errors = {};
+        modifierGroups.forEach((group) => {
+            if (group._id) {
+                const selectedCount = (currentSelectedModifiers[group._id] || [])
+                    .length;
+                const isValid = checkModifiersValidation(group.rule, selectedCount);
+                errors[group._id] = !isValid;
+            }
+        });
+        modifierGroupError.set(errors);
+        return Object.values(errors).some((error) => error);
+    });
     const toggleModifier = (modifierGroupId, modifierId, singleSelect = false) => {
         const currentSelectedModifiers = selectedModifiers.get();
         const modifierIds = getModifierIds(modifierGroupId, modifierId, singleSelect);
@@ -155,6 +185,11 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
             ...currentSelectedModifiers,
             [modifierGroupId]: modifierIds,
         });
+        const currentModifierGroupError = modifierGroupError.get();
+        modifierGroupError.set({
+            ...currentModifierGroupError,
+            [modifierGroupId]: false,
+        });
     };
     const getSelectedModifiers = (modifierGroupId) => {
         const currentSelectedModifiers = selectedModifiers.get();
@@ -180,6 +215,7 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
         addToCartButtonDisabled,
         price,
         futureAvailability,
+        doesModifierGroupHaveError,
     };
 });
 /**

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

@@ -5,7 +5,7 @@ interface ruleUtilsArgs {
     minSelections: number;
     maxSelections?: number | null;
 }
-export declare const getModifiersInitState: (modifierGroups: EnhancedModifierGroup[]) => Record<string, string[]>;
+export declare const getModifiersInitState: (modifierGroups: EnhancedModifierGroup[], editingItemMode?: boolean, editItemSelectedModifiers?: Record<string, Array<string>>) => 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[];
@@ -33,7 +33,8 @@ export declare const hasToChooseAtLeastOne: ({ required, minSelections, maxSelec
 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 declare const getRuleTypeMapValue: (ruleTypeMap: RuleTypeMap, ruleType: RuleType, rule: EnhancedModifierGroup["rule"]) => string | undefined;
+export declare const checkModifiersValidation: (rule: EnhancedModifierGroup["rule"], selectedCount: number) => boolean;
 export declare const getAreNotEnoughModifiersOfMandatoryModifierGroupInStock: (modifierGroups: EnhancedModifierGroup[]) => boolean;
 export declare const getLineItemModifiers: (selectedModifiers: Record<string, Array<string>>, modifierGroups: EnhancedModifierGroup[], formatCurrency: (price?: number) => string) => {
     id: string;

package/cjs/dist/services/utils.js

@@ -1,10 +1,17 @@
 import { AvailabilityStatus, RuleType, } from './common-types.js';
-export const getModifiersInitState = (modifierGroups) => {
+export const getModifiersInitState = (modifierGroups, editingItemMode, editItemSelectedModifiers) => {
     const initialSelectedModifiers = {};
     modifierGroups.forEach((group) => {
         if (group._id) {
-            const isMultiSelectItem = !isSingleSelectRule(group.rule ?? {});
+            if (editingItemMode) {
+                const selectedModifiers = editItemSelectedModifiers?.[group._id ?? ''];
+                if (selectedModifiers) {
+                    initialSelectedModifiers[group._id] = selectedModifiers;
+                }
+                return;
+            }
             const formModifiers = group.modifiers.map(convertModifierToFormModifier);
+            const isMultiSelectItem = !isSingleSelectRule(group.rule ?? {});
             if (isMultiSelectItem) {
                 const preSelectedModifiers = getPreSelectedModifiers(formModifiers);
                 initialSelectedModifiers[group._id] = preSelectedModifiers;
@@ -80,62 +87,77 @@ export const hasToChooseBetweenXAndY = ({ required, minSelections, maxSelections
         ? minSelections > 0 && maxSelections > minSelections
         : false
     : false;
-export const getRuleTypeMapValue = (ruleTypeMap, ruleType, modifierGroupName, rule) => {
+export const getRuleTypeMapValue = (ruleTypeMap, ruleType, 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);
+                return callback();
             }
             break;
         }
         case RuleType.CHOOSE_ONE: {
             const callback = ruleTypeMap[RuleType.CHOOSE_ONE];
             if (callback) {
-                return callback(modifierGroupName);
+                return callback();
             }
             break;
         }
         case RuleType.CHOOSE_X: {
             const callback = ruleTypeMap[RuleType.CHOOSE_X];
             if (callback) {
-                return callback(modifierGroupName, minSelections);
+                return callback(minSelections);
             }
             break;
         }
         case RuleType.CHOOSE_AT_LEAST_ONE: {
             const callback = ruleTypeMap[RuleType.CHOOSE_AT_LEAST_ONE];
             if (callback) {
-                return callback(modifierGroupName);
+                return callback();
             }
             break;
         }
         case RuleType.CHOOSE_AT_LEAST_X: {
             const callback = ruleTypeMap[RuleType.CHOOSE_AT_LEAST_X];
             if (callback) {
-                return callback(modifierGroupName, minSelections);
+                return callback(minSelections);
             }
             break;
         }
         case RuleType.CHOOSE_UP_TO_X: {
             const callback = ruleTypeMap[RuleType.CHOOSE_UP_TO_X];
             if (callback && maxSelections) {
-                return callback(modifierGroupName, maxSelections);
+                return callback(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);
+                return callback(minSelections, maxSelections);
             }
             break;
         }
     }
     return undefined;
 };
+export const checkModifiersValidation = (rule, selectedCount) => {
+    const required = rule?.required ?? false;
+    const minSelections = rule?.minSelections ?? 0;
+    const maxSelections = rule?.maxSelections;
+    if (required && selectedCount === 0) {
+        return false;
+    }
+    if (selectedCount < minSelections) {
+        return false;
+    }
+    if (maxSelections && selectedCount > maxSelections) {
+        return false;
+    }
+    return true;
+};
 export const getAreNotEnoughModifiersOfMandatoryModifierGroupInStock = (modifierGroups) => modifierGroups.some((modifierGroup) => {
     const isModifierGroupMandatory = modifierGroup.rule?.required;
     const minimumRequiredModifiers = modifierGroup.rule?.minSelections ?? 0;

package/dist/react/ItemDetails.d.ts

@@ -71,7 +71,7 @@ export declare const Variants: React.ForwardRefExoticComponent<ItemDetailsVarian
 export interface SpecialRequestProps {
     asChild?: boolean;
     children?: AsChildChildren<{
-        description: string;
+        value: string;
         onChange: (value: string) => void;
     }>;
     /** Placeholder text for the textarea */
@@ -108,6 +108,7 @@ export interface AddToCartButtonProps {
         /** Text label for the button */
         label: React.ReactNode;
         formattedPrice: string;
+        modifierGroupHasError: boolean;
     }) => React.ReactNode;
 }
 export declare const AddToCartButton: React.ForwardRefExoticComponent<AddToCartButtonProps & React.RefAttributes<HTMLElement>>;

package/dist/react/ItemDetails.js

@@ -39,7 +39,7 @@ export const Variants = React.forwardRef(({ children, className, asChild, varian
 });
 Variants.displayName = 'ItemDetails.Variants';
 export const AddToCartButton = React.forwardRef(({ asChild, children, className, addToCartLabelMap, ...props }, ref) => {
-    return (_jsx(CoreItemDetails.LineItemComponent, { addToCartLabelMap: addToCartLabelMap, children: ({ lineItem, buttonState, addToCartButtonDisabled, loadingState, labelText, formattedPrice, }) => {
+    return (_jsx(CoreItemDetails.LineItemComponent, { addToCartLabelMap: addToCartLabelMap, children: ({ lineItem, buttonState, addToCartButtonDisabled, loadingState, labelText, formattedPrice, modifierGroupHasError, }) => {
             const label = (_jsxs(_Fragment, { children: [_jsx("span", { children: labelText }), " ", _jsx("span", { children: " | " }), _jsx("span", { children: formattedPrice })] }));
             return (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: {
                     buttonState,
@@ -49,6 +49,7 @@ export const AddToCartButton = React.forwardRef(({ asChild, children, className,
                     lineItems: [lineItem],
                     label,
                     formattedPrice,
+                    modifierGroupHasError,
                 }, ref: ref, ...props, children: _jsx(Commerce.Actions.AddToCart, { asChild: false, label: label, className: className, lineItems: [lineItem], ...props, children: children({
                         lineItem,
                         buttonState,
@@ -56,6 +57,7 @@ export const AddToCartButton = React.forwardRef(({ asChild, children, className,
                         loadingState,
                         label,
                         formattedPrice,
+                        modifierGroupHasError,
                     }) }) }));
         } }));
 });

package/dist/react/ModifierGroup.js

@@ -44,12 +44,12 @@ export const Description = React.forwardRef(({ ruleTypeMap, className, asChild,
         } }));
 });
 Description.displayName = 'ItemDetailsModifierGroup.Description';
-export const Error = React.forwardRef(({ ruleTypeMap, className, asChild, children }, ref) => {
+export const Error = React.forwardRef(({ ruleTypeMap, className, asChild, children, ...otherProps }, 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 }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, "data-testid": TestIds.modifierGroupError, className: className, customElement: children, customElementProps: { error }, content: error, ...otherProps, children: _jsx("p", { className: className, children: error }) }));
         } }));
 });
 Error.displayName = 'ItemDetailsModifierGroup.Error';

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

@@ -26,6 +26,7 @@ interface ItemDetailsLineItemProps {
         addToCartButtonDisabled: boolean;
         labelText: string;
         formattedPrice: string;
+        modifierGroupHasError: boolean;
     }) => React.ReactNode;
 }
 export declare const LineItemComponent: React.FC<ItemDetailsLineItemProps>;

package/dist/react/core/ItemDetails.js

@@ -24,11 +24,14 @@ export const Root = ({ children, itemDetailsServiceConfig, }) => {
     return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ItemServiceDefinition, ItemService, config), children: children({ item: itemDetailsServiceConfig?.item ?? selectedItem }) }));
 };
 export const SpecialRequest = ({ children, }) => {
-    const [value, setValue] = useState('');
     const service = useService(ItemServiceDefinition);
+    const initialSpecialRequest = service.specialRequest?.get?.() ?? '';
+    const [value, setValue] = useState(initialSpecialRequest);
     const onChange = (newValue) => {
-        setValue(newValue);
-        service.updateSpecialRequest(newValue);
+        if (typeof newValue === 'string') {
+            setValue(newValue);
+            service.updateSpecialRequest(newValue);
+        }
     };
     return children({
         value,
@@ -48,6 +51,7 @@ export const LineItemComponent = ({ addToCartLabelMap, children, }) => {
     const formatCurrency = oloSettingsService.formatCurrency;
     const formattedPrice = formatCurrency(price);
     const labelText = addToCartLabelMap[buttonState];
+    const modifierGroupHasError = service.doesModifierGroupHaveError?.get?.() ?? false;
     return children({
         loadingState,
         lineItem,
@@ -55,6 +59,7 @@ export const LineItemComponent = ({ addToCartLabelMap, children, }) => {
         addToCartButtonDisabled,
         labelText,
         formattedPrice,
+        modifierGroupHasError,
     });
 };
 export const QuantityComponent = ({ children, }) => {

package/dist/react/core/ModifierGroup.js

@@ -49,8 +49,7 @@ export const ModifiersComponent = ({ children, }) => {
 };
 export const Description = ({ ruleTypeMap, children, }) => {
     const { ruleType, modifierGroup } = useModifiersContext();
-    const modifierGroupName = modifierGroup.name || '';
-    const description = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroupName, modifierGroup.rule);
+    const description = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroup.rule);
     return children({ description });
 };
 export const GroupError = ({ ruleTypeMap, children, }) => {
@@ -58,10 +57,9 @@ export const GroupError = ({ ruleTypeMap, children, }) => {
     const { ruleType, modifierGroup } = useModifiersContext();
     const groupId = modifierGroup._id || '';
     const modifierGroupErrors = service.modifierGroupError?.get() || {};
-    const modifierGroupName = modifierGroup.name || '';
     let error;
     if (modifierGroupErrors[groupId]) {
-        error = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroupName, modifierGroup.rule);
+        error = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroup.rule);
     }
     return children({ error });
 };

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

@@ -11,13 +11,13 @@ export declare enum RuleType {
     CHOOSE_BETWEEN_X_AND_Y = "CHOOSE_BETWEEN_X_AND_Y"
 }
 export interface RuleTypeMap {
-    [RuleType.NO_LIMIT]?: (modifierGroupName: string) => string;
-    [RuleType.CHOOSE_ONE]?: (modifierGroupName: string) => string;
-    [RuleType.CHOOSE_X]?: (modifierGroupName: string, x: number) => string;
-    [RuleType.CHOOSE_AT_LEAST_ONE]?: (modifierGroupName: string) => string;
-    [RuleType.CHOOSE_AT_LEAST_X]?: (modifierGroupName: string, x: number) => string;
-    [RuleType.CHOOSE_UP_TO_X]?: (modifierGroupName: string, x: number) => string;
-    [RuleType.CHOOSE_BETWEEN_X_AND_Y]?: (modifierGroupName: string, x: number, y: number) => string;
+    [RuleType.NO_LIMIT]?: () => string;
+    [RuleType.CHOOSE_ONE]?: () => string;
+    [RuleType.CHOOSE_X]?: (x: number) => string;
+    [RuleType.CHOOSE_AT_LEAST_ONE]?: () => string;
+    [RuleType.CHOOSE_AT_LEAST_X]?: (x: number) => string;
+    [RuleType.CHOOSE_UP_TO_X]?: (x: number) => string;
+    [RuleType.CHOOSE_BETWEEN_X_AND_Y]?: (x: number, y: number) => string;
 }
 export declare enum AvailabilityStatus {
     AVAILABLE = 0,

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

@@ -43,6 +43,7 @@ export interface ItemServiceAPI {
         endDate?: Date;
         weeklyAvailabilitySummary?: WeeklyAvailability;
     };
+    doesModifierGroupHaveError: ReadOnlySignal<boolean>;
 }
 /**
  * Service definition for the Item service.
@@ -67,6 +68,12 @@ export interface ItemServiceConfig {
     operationId?: string;
     availabilityStatus?: AvailabilityStatus;
     editItemMode?: boolean;
+    editingItemValues?: {
+        quantity?: number;
+        specialRequest?: string;
+        selectedVariantId?: string;
+        selectedModifiers?: Record<string, Array<string>>;
+    };
     menuId?: string;
     sectionId?: string;
     futureAvailability?: FutureAvailability;

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

@@ -1,7 +1,7 @@
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
 import { AddToCartButtonState, AvailabilityStatus, } from './common-types.js';
-import { getAreNotEnoughModifiersOfMandatoryModifierGroupInStock, getModifiersInitState, getLineItemModifiers, getPriceVariantOptions, getSelectedModifierPrices, getSelectedVariantPrice, calculateItemPrice, } from './utils.js';
+import { getAreNotEnoughModifiersOfMandatoryModifierGroupInStock, getModifiersInitState, getLineItemModifiers, getPriceVariantOptions, getSelectedModifierPrices, getSelectedVariantPrice, calculateItemPrice, checkModifiersValidation, } from './utils.js';
 import { OLOSettingsServiceDefinition } from './olo-settings-service.js';
 /**
  * Service definition for the Item service.
@@ -56,13 +56,27 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
     const item = signalsService.signal(config.item);
     const isLoading = signalsService.signal(!!config.item);
     const error = signalsService.signal(config.item ? null : 'Item not found');
-    const quantity = signalsService.signal(1);
-    const specialRequest = signalsService.signal('');
+    const quantity = signalsService.signal(config.editItemMode ? (config.editingItemValues?.quantity ?? 1) : 1);
+    const specialRequest = signalsService.signal(config.editItemMode
+        ? (config.editingItemValues?.specialRequest ?? '')
+        : '');
     const priceVariants = config.item?.priceVariants || [];
-    const initialVariant = priceVariants.length > 0 ? priceVariants[0] : undefined;
+    let initialVariant;
+    if (!config.editItemMode) {
+        initialVariant = priceVariants.length > 0 ? priceVariants[0] : undefined;
+    }
+    else {
+        if (config.editingItemValues?.selectedVariantId) {
+            initialVariant = priceVariants.find((variant) => variant._id === config.editingItemValues?.selectedVariantId);
+        }
+        else {
+            initialVariant =
+                priceVariants.length > 0 ? priceVariants[0] : undefined;
+        }
+    }
     const selectedVariant = signalsService.signal(initialVariant);
     const modifierGroups = config.item?.modifierGroups || [];
-    const initialSelectedModifiers = getModifiersInitState(modifierGroups);
+    const initialSelectedModifiers = getModifiersInitState(modifierGroups, config.editItemMode, config.editingItemValues?.selectedModifiers);
     const selectedModifiers = signalsService.signal(initialSelectedModifiers);
     const initialModifierGroupError = modifierGroups.reduce((acc, group) => {
         if (group._id) {
@@ -121,7 +135,9 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
         quantity.set(_quantity);
     };
     const updateSpecialRequest = (_specialRequest) => {
-        specialRequest.set(_specialRequest);
+        if (typeof _specialRequest === 'string') {
+            specialRequest.set(_specialRequest);
+        }
     };
     const updateSelectedVariant = (variant) => {
         selectedVariant.set(variant);
@@ -148,6 +164,20 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
             }
         }
     };
+    const doesModifierGroupHaveError = signalsService.computed(() => {
+        const currentSelectedModifiers = selectedModifiers.get();
+        const errors = {};
+        modifierGroups.forEach((group) => {
+            if (group._id) {
+                const selectedCount = (currentSelectedModifiers[group._id] || [])
+                    .length;
+                const isValid = checkModifiersValidation(group.rule, selectedCount);
+                errors[group._id] = !isValid;
+            }
+        });
+        modifierGroupError.set(errors);
+        return Object.values(errors).some((error) => error);
+    });
     const toggleModifier = (modifierGroupId, modifierId, singleSelect = false) => {
         const currentSelectedModifiers = selectedModifiers.get();
         const modifierIds = getModifierIds(modifierGroupId, modifierId, singleSelect);
@@ -155,6 +185,11 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
             ...currentSelectedModifiers,
             [modifierGroupId]: modifierIds,
         });
+        const currentModifierGroupError = modifierGroupError.get();
+        modifierGroupError.set({
+            ...currentModifierGroupError,
+            [modifierGroupId]: false,
+        });
     };
     const getSelectedModifiers = (modifierGroupId) => {
         const currentSelectedModifiers = selectedModifiers.get();
@@ -180,6 +215,7 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
         addToCartButtonDisabled,
         price,
         futureAvailability,
+        doesModifierGroupHaveError,
     };
 });
 /**

package/dist/services/utils.d.ts

@@ -5,7 +5,7 @@ interface ruleUtilsArgs {
     minSelections: number;
     maxSelections?: number | null;
 }
-export declare const getModifiersInitState: (modifierGroups: EnhancedModifierGroup[]) => Record<string, string[]>;
+export declare const getModifiersInitState: (modifierGroups: EnhancedModifierGroup[], editingItemMode?: boolean, editItemSelectedModifiers?: Record<string, Array<string>>) => 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[];
@@ -33,7 +33,8 @@ export declare const hasToChooseAtLeastOne: ({ required, minSelections, maxSelec
 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 declare const getRuleTypeMapValue: (ruleTypeMap: RuleTypeMap, ruleType: RuleType, rule: EnhancedModifierGroup["rule"]) => string | undefined;
+export declare const checkModifiersValidation: (rule: EnhancedModifierGroup["rule"], selectedCount: number) => boolean;
 export declare const getAreNotEnoughModifiersOfMandatoryModifierGroupInStock: (modifierGroups: EnhancedModifierGroup[]) => boolean;
 export declare const getLineItemModifiers: (selectedModifiers: Record<string, Array<string>>, modifierGroups: EnhancedModifierGroup[], formatCurrency: (price?: number) => string) => {
     id: string;

package/dist/services/utils.js

@@ -1,10 +1,17 @@
 import { AvailabilityStatus, RuleType, } from './common-types.js';
-export const getModifiersInitState = (modifierGroups) => {
+export const getModifiersInitState = (modifierGroups, editingItemMode, editItemSelectedModifiers) => {
     const initialSelectedModifiers = {};
     modifierGroups.forEach((group) => {
         if (group._id) {
-            const isMultiSelectItem = !isSingleSelectRule(group.rule ?? {});
+            if (editingItemMode) {
+                const selectedModifiers = editItemSelectedModifiers?.[group._id ?? ''];
+                if (selectedModifiers) {
+                    initialSelectedModifiers[group._id] = selectedModifiers;
+                }
+                return;
+            }
             const formModifiers = group.modifiers.map(convertModifierToFormModifier);
+            const isMultiSelectItem = !isSingleSelectRule(group.rule ?? {});
             if (isMultiSelectItem) {
                 const preSelectedModifiers = getPreSelectedModifiers(formModifiers);
                 initialSelectedModifiers[group._id] = preSelectedModifiers;
@@ -80,62 +87,77 @@ export const hasToChooseBetweenXAndY = ({ required, minSelections, maxSelections
         ? minSelections > 0 && maxSelections > minSelections
         : false
     : false;
-export const getRuleTypeMapValue = (ruleTypeMap, ruleType, modifierGroupName, rule) => {
+export const getRuleTypeMapValue = (ruleTypeMap, ruleType, 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);
+                return callback();
             }
             break;
         }
         case RuleType.CHOOSE_ONE: {
             const callback = ruleTypeMap[RuleType.CHOOSE_ONE];
             if (callback) {
-                return callback(modifierGroupName);
+                return callback();
             }
             break;
         }
         case RuleType.CHOOSE_X: {
             const callback = ruleTypeMap[RuleType.CHOOSE_X];
             if (callback) {
-                return callback(modifierGroupName, minSelections);
+                return callback(minSelections);
             }
             break;
         }
         case RuleType.CHOOSE_AT_LEAST_ONE: {
             const callback = ruleTypeMap[RuleType.CHOOSE_AT_LEAST_ONE];
             if (callback) {
-                return callback(modifierGroupName);
+                return callback();
             }
             break;
         }
         case RuleType.CHOOSE_AT_LEAST_X: {
             const callback = ruleTypeMap[RuleType.CHOOSE_AT_LEAST_X];
             if (callback) {
-                return callback(modifierGroupName, minSelections);
+                return callback(minSelections);
             }
             break;
         }
         case RuleType.CHOOSE_UP_TO_X: {
             const callback = ruleTypeMap[RuleType.CHOOSE_UP_TO_X];
             if (callback && maxSelections) {
-                return callback(modifierGroupName, maxSelections);
+                return callback(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);
+                return callback(minSelections, maxSelections);
             }
             break;
         }
     }
     return undefined;
 };
+export const checkModifiersValidation = (rule, selectedCount) => {
+    const required = rule?.required ?? false;
+    const minSelections = rule?.minSelections ?? 0;
+    const maxSelections = rule?.maxSelections;
+    if (required && selectedCount === 0) {
+        return false;
+    }
+    if (selectedCount < minSelections) {
+        return false;
+    }
+    if (maxSelections && selectedCount > maxSelections) {
+        return false;
+    }
+    return true;
+};
 export const getAreNotEnoughModifiersOfMandatoryModifierGroupInStock = (modifierGroups) => modifierGroups.some((modifierGroup) => {
     const isModifierGroupMandatory = modifierGroup.rule?.required;
     const minimumRequiredModifiers = modifierGroup.rule?.minSelections ?? 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-restaurants-olo",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -56,7 +56,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@wix/auto_sdk_restaurants_items": "^1.0.48",
     "@wix/ecom": "^1.0.1461",
-    "@wix/headless-components": "0.0.29",
+    "@wix/headless-components": "0.0.30",
     "@wix/headless-media": "0.0.17",
     "@wix/headless-restaurants-menus": "0.0.20",
     "@wix/headless-utils": "0.0.7",
@@ -76,5 +76,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "22c7edc50a34f26aaa424a9e2d3195386db4cb0a84e96dc40950fca2"
+  "falconPackageHash": "8a5140aec5569bc45df3f464fbf17f0cdcbc5a879f3cb33e3acfbe36"
 }