@wix/headless-restaurants-olo 0.0.18 → 0.0.20

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

@@ -1,9 +1,9 @@
 import React from 'react';
-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 { EnhancedVariant } from '@wix/headless-restaurants-menus/services';
-import { AvailabilityStatus, AvailabilityStatusMap } from '../services/common-types.js';
+import { AvailabilityStatus, AvailabilityStatusMap, AddToCartButtonState } 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.
@@ -72,6 +72,7 @@ export interface SpecialRequestProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         description: string;
+        onChange: (value: string) => void;
     }>;
     /** Placeholder text for the textarea */
     placeholder?: string;
@@ -94,16 +95,35 @@ export interface SpecialRequestProps {
  * Usage:
  * <ItemDetails.AddToCartButton>Add to cart</ItemDetails.AddToCartButton>
  */
-export interface AddToCartButtonProps extends Omit<React.ComponentPropsWithoutRef<typeof Commerce.Actions.AddToCart>, 'lineItems'> {
+export interface AddToCartButtonProps {
     asChild?: boolean;
-    children?: React.ReactNode;
     className?: string;
-    label?: string;
+    addToCartLabelMap: Record<AddToCartButtonState, string>;
+    children: (props: {
+        lineItem: LineItem;
+        buttonState: AddToCartButtonState;
+        addToCartButtonDisabled?: boolean;
+        /** Content to display when loading */
+        loadingState?: string | React.ReactNode;
+        /** Text label for the button */
+        label: React.ReactNode;
+        formattedPrice: string;
+    }) => React.ReactNode;
 }
+export declare const AddToCartButton: React.ForwardRefExoticComponent<AddToCartButtonProps & React.RefAttributes<HTMLElement>>;
 export interface ItemDetailsQuantityProps {
-    children: React.ReactNode;
+    asChild?: boolean;
+    className?: string;
+    children: (props: {
+        quantity: number;
+        increment: () => void;
+        decrement: () => void;
+        setQuantity: (quantity: number) => void;
+        canIncrement: boolean;
+        canDecrement: boolean;
+        onValueChange: (value: number) => void;
+    }) => React.ReactNode;
 }
-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 {

package/cjs/dist/react/ItemDetails.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { Commerce } from '@wix/ecom/components';
 import { AsChildSlot } from '@wix/headless-utils/react';
@@ -38,15 +38,42 @@ export const Variants = React.forwardRef(({ children, className, asChild, varian
         } }));
 });
 Variants.displayName = 'ItemDetails.Variants';
-export const AddToCartButton = ({ asChild, children, className, label = 'Add to cart', ...props }) => {
-    return (_jsx(CoreItemDetails.LineItemComponent, { children: ({ lineItem }) => (_jsx(Commerce.Actions.AddToCart, { asChild: asChild, label: label, className: className, lineItems: [lineItem], ...props, children: children })) }));
-};
+export const AddToCartButton = React.forwardRef(({ asChild, children, className, addToCartLabelMap, ...props }, ref) => {
+    return (_jsx(CoreItemDetails.LineItemComponent, { addToCartLabelMap: addToCartLabelMap, children: ({ lineItem, buttonState, addToCartButtonDisabled, loadingState, labelText, formattedPrice, }) => {
+            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,
+                    addToCartButtonDisabled,
+                    loadingState,
+                    lineItem,
+                    lineItems: [lineItem],
+                    label,
+                    formattedPrice,
+                }, ref: ref, ...props, children: _jsx(Commerce.Actions.AddToCart, { asChild: false, label: label, className: className, lineItems: [lineItem], ...props, children: children({
+                        lineItem,
+                        buttonState,
+                        addToCartButtonDisabled,
+                        loadingState,
+                        label,
+                        formattedPrice,
+                    }) }) }));
+        } }));
+});
+AddToCartButton.displayName = 'AddToCartButton';
 export const Quantity = ({ children }) => {
-    return (_jsx(CoreItemDetails.QuantityComponent, { children: ({ quantity, onValueChange, }) => (_jsx(QuantityComponent.Root, { onValueChange: onValueChange, initialValue: quantity, children: children })) }));
+    return (_jsx(CoreItemDetails.QuantityComponent, { children: ({ quantity, onValueChange, increment, decrement, setQuantity, canIncrement, canDecrement, }) => (_jsx(QuantityComponent.Root, { onValueChange: onValueChange, initialValue: quantity, children: children({
+                quantity,
+                increment,
+                decrement,
+                setQuantity,
+                canIncrement,
+                canDecrement,
+                onValueChange,
+            }) })) }));
 };
 Quantity.displayName = 'Quantity';
 export const SpecialRequest = React.forwardRef(({ className, labelClassName, placeholder = 'Any special requests or dietary restrictions?', maxLength = 200, rows = 3, label = 'Special Requests', asChild, children, ...props }, ref) => {
-    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 })] })) }));
+    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, onChange }, 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) => {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { type LineItem } from '@wix/ecom/services';
 import { ItemServiceConfig } from '../../services/item-details-service.js';
 import { EnhancedVariant } from '@wix/headless-restaurants-menus/services';
-import { AvailabilityStatus, AvailabilityStatusMap } from '../../services/common-types.js';
+import { AvailabilityStatus, AvailabilityStatusMap, AddToCartButtonState } from '../../services/common-types.js';
 interface ItemDetailsRootProps {
     children: (props: {
         item: unknown;
@@ -18,8 +18,14 @@ interface ItemDetailsSpecialRequestProps {
 }
 export declare const SpecialRequest: React.FC<ItemDetailsSpecialRequestProps>;
 interface ItemDetailsLineItemProps {
+    addToCartLabelMap: Record<AddToCartButtonState, string>;
     children: (props: {
+        loadingState: string | React.ReactNode;
         lineItem: LineItem;
+        buttonState: AddToCartButtonState;
+        addToCartButtonDisabled: boolean;
+        labelText: string;
+        formattedPrice: string;
     }) => React.ReactNode;
 }
 export declare const LineItemComponent: React.FC<ItemDetailsLineItemProps>;

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

@@ -5,11 +5,10 @@ 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 { AvailabilityStatus, } from '../../services/common-types.js';
+import { AvailabilityStatus, AddToCartButtonState, } from '../../services/common-types.js';
 export const Root = ({ children, itemDetailsServiceConfig, }) => {
     const service = useService(OLOSettingsServiceDefinition);
     const selectedItem = service.selectedItem?.get();
-    console.log('selectedItem', selectedItem, itemDetailsServiceConfig);
     let config = itemDetailsServiceConfig;
     if (!config) {
         config = loadItemServiceConfig({
@@ -37,10 +36,25 @@ export const SpecialRequest = ({ children, }) => {
         // maxLength: 200
     });
 };
-export const LineItemComponent = ({ children, }) => {
+export const LineItemComponent = ({ addToCartLabelMap, children, }) => {
     const service = useService(ItemServiceDefinition);
+    const oloSettingsService = useService(OLOSettingsServiceDefinition);
     const lineItem = service.lineItem?.get?.() ?? {};
-    return children({ lineItem });
+    const loadingState = service.isLoading?.get?.() ?? false;
+    const buttonState = service.buttonState?.get?.() ?? AddToCartButtonState.VALID_TO_CONTINUE;
+    const addToCartButtonDisabled = service.addToCartButtonDisabled?.get?.() ?? false;
+    const price = service.price?.get?.() ?? 0;
+    const formatCurrency = oloSettingsService.formatCurrency;
+    const formattedPrice = formatCurrency(price);
+    const labelText = addToCartLabelMap[buttonState];
+    return children({
+        loadingState,
+        lineItem,
+        buttonState,
+        addToCartButtonDisabled,
+        labelText,
+        formattedPrice,
+    });
 };
 export const QuantityComponent = ({ children, }) => {
     const service = useService(ItemServiceDefinition);

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

@@ -35,3 +35,11 @@ export type AvailabilityStatusObject = {
     text?: string;
 };
 export type AvailabilityStatusMap = Partial<Record<Exclude<AvailabilityStatus, NextAvailability>, AvailabilityStatusObject>> & Record<NextAvailability, AvailabilityStatusWithActionObject>;
+export declare enum AddToCartButtonState {
+    ITEM_UNAVAILABLE = 0,
+    OUT_OF_STOCK = 1,
+    NOT_VALID = 2,
+    EDITING = 3,
+    VALID_TO_CONTINUE = 4
+}
+export type AddToCartButtonLabelMap = Record<AddToCartButtonState, string>;

package/cjs/dist/services/common-types.js

@@ -16,3 +16,11 @@ export var AvailabilityStatus;
     AvailabilityStatus[AvailabilityStatus["NEXT_AVAILABILITY_PICKUP"] = 3] = "NEXT_AVAILABILITY_PICKUP";
     AvailabilityStatus[AvailabilityStatus["NEXT_AVAILABILITY_DELIVERY"] = 4] = "NEXT_AVAILABILITY_DELIVERY";
 })(AvailabilityStatus || (AvailabilityStatus = {}));
+export var AddToCartButtonState;
+(function (AddToCartButtonState) {
+    AddToCartButtonState[AddToCartButtonState["ITEM_UNAVAILABLE"] = 0] = "ITEM_UNAVAILABLE";
+    AddToCartButtonState[AddToCartButtonState["OUT_OF_STOCK"] = 1] = "OUT_OF_STOCK";
+    AddToCartButtonState[AddToCartButtonState["NOT_VALID"] = 2] = "NOT_VALID";
+    AddToCartButtonState[AddToCartButtonState["EDITING"] = 3] = "EDITING";
+    AddToCartButtonState[AddToCartButtonState["VALID_TO_CONTINUE"] = 4] = "VALID_TO_CONTINUE";
+})(AddToCartButtonState || (AddToCartButtonState = {}));

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

@@ -1,4 +1,4 @@
 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';
+export { AvailabilityStatus, AvailabilityStatusMap, AddToCartButtonState, AddToCartButtonLabelMap, } from './common-types.js';
 export { FulfillmentsService, FulfillmentsServiceDefinition, loadFulfillmentsServiceConfig, } from './fulfillments-service.js';

package/cjs/dist/services/index.js

@@ -1,4 +1,4 @@
 export { ItemService, ItemServiceDefinition, loadItemServiceConfig, } from './item-details-service.js';
 export { OLOSettingsService, OLOSettingsServiceDefinition, loadOLOSettingsServiceConfig, } from './olo-settings-service.js';
-export { AvailabilityStatus } from './common-types.js';
+export { AvailabilityStatus, AddToCartButtonState, } from './common-types.js';
 export { FulfillmentsService, FulfillmentsServiceDefinition, loadFulfillmentsServiceConfig, } from './fulfillments-service.js';

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

@@ -1,8 +1,8 @@
-import { type Signal } from '@wix/services-definitions/core-services/signals';
+import { type Signal, type ReadOnlySignal } from '@wix/services-definitions/core-services/signals';
 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';
+import { AddToCartButtonState, AvailabilityStatus } from './common-types.js';
 type Variant = itemVariants.Variant;
 /**
  * API interface for the Item Detailsservice, providing reactive item data management.
@@ -15,7 +15,10 @@ export interface ItemServiceAPI {
     item?: Signal<EnhancedItem | undefined>;
     quantity: Signal<number>;
     specialRequest: Signal<string>;
-    lineItem: Signal<LineItem>;
+    lineItem: ReadOnlySignal<LineItem>;
+    buttonState: ReadOnlySignal<AddToCartButtonState | undefined>;
+    addToCartButtonDisabled: Signal<boolean>;
+    price: ReadOnlySignal<number>;
     selectedVariant: Signal<Variant | undefined>;
     selectedModifiers: Signal<Record<string, Array<string>>>;
     availabilityStatus: Signal<AvailabilityStatus>;
@@ -59,6 +62,9 @@ export interface ItemServiceConfig {
     itemId?: string;
     operationId?: string;
     availabilityStatus?: AvailabilityStatus;
+    editItemMode?: boolean;
+    menuId?: string;
+    sectionId?: string;
 }
 export declare const ItemService: import("@wix/services-definitions").ServiceFactory<string & {
     __api: ItemServiceAPI;

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

@@ -1,7 +1,8 @@
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
-import { AvailabilityStatus } from './common-types.js';
-import { getModifiersInitState } from './utils.js';
+import { AddToCartButtonState, AvailabilityStatus } from './common-types.js';
+import { getAreNotEnoughModifiersOfMandatoryModifierGroupInStock, getModifiersInitState, getLineItemModifiers, getPriceVariantOptions, getSelectedModifierPrices, getSelectedVariantPrice, calculateItemPrice, } from './utils.js';
+import { OLOSettingsServiceDefinition } from './olo-settings-service.js';
 /**
  * Service definition for the Item service.
  * This defines the contract that the ItemService must implement.
@@ -45,13 +46,13 @@ export const ItemServiceDefinition = defineService('item');
 const APP_ID = '9a5d83fd-8570-482e-81ab-cfa88942ee60';
 export const ItemService = implementService.withConfig()(ItemServiceDefinition, ({ getService, config }) => {
     const signalsService = getService(SignalsServiceDefinition);
+    const oloSettingsService = getService(OLOSettingsServiceDefinition);
     const availabilityStatus = signalsService.signal(config.availabilityStatus ?? AvailabilityStatus.AVAILABLE);
     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 lineItem = signalsService.signal({});
     const priceVariants = config.item?.priceVariants || [];
     const initialVariant = priceVariants.length > 0 ? priceVariants[0] : undefined;
     const selectedVariant = signalsService.signal(initialVariant);
@@ -65,44 +66,57 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
         return acc;
     }, {});
     const modifierGroupError = signalsService.signal(initialModifierGroupError);
-    if (config.item) {
-        lineItem.set({
+    const price = signalsService.computed(() => {
+        const basePrice = Number(config?.item?.priceInfo?.price ?? 0);
+        const variantPrice = getSelectedVariantPrice(selectedVariant.get(), priceVariants);
+        const modifierPrices = getSelectedModifierPrices(selectedModifiers.get() || {}, modifierGroups);
+        const itemQuantity = quantity.get() ?? 1;
+        return calculateItemPrice(basePrice, variantPrice, modifierPrices, itemQuantity);
+    });
+    const areModifiersOfMandatoryModifierGroupOutOfStock = getAreNotEnoughModifiersOfMandatoryModifierGroupInStock(modifierGroups);
+    const canAcceptOrders = oloSettingsService.canAcceptOrders ?? true;
+    const isValidToContinue = canAcceptOrders &&
+        config?.item?.orderSettings?.inStock &&
+        config.availabilityStatus === AvailabilityStatus.AVAILABLE &&
+        !areModifiersOfMandatoryModifierGroupOutOfStock;
+    const buttonState = signalsService.computed(() => {
+        return !config?.item?.orderSettings?.inStock ||
+            areModifiersOfMandatoryModifierGroupOutOfStock
+            ? AddToCartButtonState.OUT_OF_STOCK
+            : availabilityStatus.get() !== AvailabilityStatus.AVAILABLE
+                ? AddToCartButtonState.ITEM_UNAVAILABLE
+                : !canAcceptOrders
+                    ? AddToCartButtonState.NOT_VALID
+                    : config.editItemMode
+                        ? AddToCartButtonState.EDITING
+                        : isValidToContinue
+                            ? AddToCartButtonState.VALID_TO_CONTINUE
+                            : AddToCartButtonState.NOT_VALID;
+    });
+    const addToCartButtonDisabled = signalsService.signal(!isValidToContinue);
+    const lineItem = signalsService.computed(() => {
+        const formatCurrency = oloSettingsService.formatCurrency;
+        return {
             quantity: quantity.get(),
             catalogReference: {
-                // @ts-expect-error - item is not typed
-                catalogItemId: config.item._id,
+                catalogItemId: config.item?._id ?? undefined,
                 appId: APP_ID,
                 options: {
                     operationId: config.operationId,
-                    // @ts-expect-error - item is not typed
-                    menuId: config.item.menuId,
-                    // @ts-expect-error - item is not typed
-                    sectionId: config.item.sectionId,
+                    menuId: config.menuId,
+                    sectionId: config.sectionId,
+                    priceVariant: getPriceVariantOptions(selectedVariant.get(), formatCurrency),
+                    modifierGroups: getLineItemModifiers(selectedModifiers.get(), modifierGroups, formatCurrency),
+                    specialRequests: specialRequest.get(),
                 },
             },
-        });
-    }
+        };
+    });
     const updateQuantity = (_quantity) => {
         quantity.set(_quantity);
-        const _lineItem = lineItem.get();
-        lineItem.set({
-            ..._lineItem,
-            quantity: _quantity,
-        });
     };
     const updateSpecialRequest = (_specialRequest) => {
         specialRequest.set(_specialRequest);
-        const _lineItem = lineItem.get();
-        lineItem.set({
-            ..._lineItem,
-            catalogReference: {
-                ..._lineItem.catalogReference,
-                options: {
-                    ..._lineItem.catalogReference?.options,
-                    specialRequest: _specialRequest,
-                },
-            },
-        });
     };
     const updateSelectedVariant = (variant) => {
         selectedVariant.set(variant);
@@ -157,6 +171,9 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
         availabilityStatus,
         getSelectedModifiers,
         modifierGroupError,
+        buttonState,
+        addToCartButtonDisabled,
+        price,
     };
 });
 /**

package/cjs/dist/services/olo-settings-service.d.ts

@@ -11,12 +11,16 @@ export interface OLOSettingsServiceAPI {
     currentFulfillment: Signal<string>;
     currentTimeSlot: Signal<string>;
     filterMenus: (menus: MenusServiceConfig['menus']) => MenusServiceConfig['menus'];
+    canAcceptOrders: boolean;
+    formatCurrency: (price?: number) => string;
 }
 export interface OLOSettingsServiceConfig {
     operationGroup?: operationGroupsSDK.OperationGroup;
     operation?: operationsSDK.Operation;
     availabilityDispatchAction?: () => void;
     menuIdsByOperation?: string[];
+    canAcceptOrders?: boolean;
+    formattedPrice?: (price?: number) => string;
 }
 export declare const OLOSettingsServiceDefinition: string & {
     __api: OLOSettingsServiceAPI;

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

@@ -8,6 +8,8 @@ export const OLOSettingsService = implementService.withConfig()(OLOSettingsServi
     const availabilityDispatchAction = signalsService.signal(config.availabilityDispatchAction);
     const operationGroup = signalsService.signal(config.operationGroup);
     const operation = signalsService.signal(config.operation);
+    const formatCurrency = config.formattedPrice ??
+        ((price) => price?.toFixed(2)?.toString() ?? '');
     const selectedItem = signalsService.signal(null);
     const isLoading = signalsService.signal(false);
     const error = signalsService.signal(null);
@@ -27,6 +29,8 @@ export const OLOSettingsService = implementService.withConfig()(OLOSettingsServi
         currentFulfillment,
         currentTimeSlot,
         filterMenus,
+        canAcceptOrders: config.canAcceptOrders ?? true,
+        formatCurrency,
     };
 });
 export async function loadOLOSettingsServiceConfig() {

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

@@ -34,4 +34,32 @@ export declare const hasToChooseAtLeastX: ({ required, minSelections, maxSelecti
 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 getAreNotEnoughModifiersOfMandatoryModifierGroupInStock: (modifierGroups: EnhancedModifierGroup[]) => boolean;
+export declare const getLineItemModifiers: (selectedModifiers: Record<string, Array<string>>, modifierGroups: EnhancedModifierGroup[], formatCurrency: (price?: number) => string) => {
+    id: string;
+    modifiers: {
+        id: string;
+        price: string | undefined;
+        formattedPrice: string | undefined;
+    }[];
+}[] | undefined;
+export declare const getPriceVariantOptions: (selectedPriceVariant: {
+    _id?: string | null;
+    priceInfo?: {
+        price?: string;
+    };
+} | undefined, formatCurrency: (price?: number) => string) => {
+    id: string;
+    formattedPrice: string;
+} | undefined;
+export declare const getSelectedModifierPrices: (selectedModifiers: Record<string, Array<string>>, modifierGroups: EnhancedModifierGroup[]) => number;
+export declare const getSelectedVariantPrice: (selectedVariant: {
+    _id?: string | null;
+} | undefined, priceVariants: Array<{
+    _id?: string | null;
+    priceInfo?: {
+        price?: string;
+    };
+}>) => number;
+export declare const calculateItemPrice: (basePrice: number, variantPrice: number, modifierPrices: number, quantity: number) => number;
 export {};

package/cjs/dist/services/utils.js

@@ -136,3 +136,79 @@ export const getRuleTypeMapValue = (ruleTypeMap, ruleType, modifierGroupName, ru
     }
     return undefined;
 };
+export const getAreNotEnoughModifiersOfMandatoryModifierGroupInStock = (modifierGroups) => modifierGroups.some((modifierGroup) => {
+    const isModifierGroupMandatory = modifierGroup.rule?.required;
+    const minimumRequiredModifiers = modifierGroup.rule?.minSelections ?? 0;
+    const inStockModifiers = modifierGroup.modifiers.filter((modifier) => modifier.inStock ?? true);
+    const areMinimumRequiredModifiersInStock = inStockModifiers.length >= minimumRequiredModifiers;
+    return isModifierGroupMandatory && !areMinimumRequiredModifiersInStock;
+});
+export const getLineItemModifiers = (selectedModifiers, modifierGroups, formatCurrency) => {
+    const modifierGroupsOptions = modifierGroups
+        .map((modifierGroup) => {
+        const selectedModifierIds = selectedModifiers[modifierGroup._id ?? ''];
+        if (!selectedModifierIds || selectedModifierIds.length === 0) {
+            return null;
+        }
+        const modifiers = selectedModifierIds
+            .map((modifierIdWithIndex) => {
+            const baseModifierId = modifierIdWithIndex.split('~')[0];
+            const modifier = modifierGroup.modifiers.find((mod) => mod._id === baseModifierId);
+            if (!modifier)
+                return null;
+            const price = Number(modifier?.additionalChargeInfo?.additionalCharge ?? 0);
+            return {
+                id: modifier._id ?? '',
+                price: modifier?.additionalChargeInfo?.additionalCharge,
+                formattedPrice: price > 0 ? formatCurrency(price) : undefined,
+            };
+        })
+            .filter((modifier) => modifier !== null);
+        if (modifiers.length === 0 || !modifierGroup._id) {
+            return null;
+        }
+        return {
+            id: modifierGroup._id,
+            modifiers,
+        };
+    })
+        .filter((modifierGroup) => modifierGroup !== null &&
+        modifierGroup.modifiers.length > 0 &&
+        !!modifierGroup?.id?.length);
+    return modifierGroupsOptions.length > 0 ? modifierGroupsOptions : undefined;
+};
+export const getPriceVariantOptions = (selectedPriceVariant, formatCurrency) => {
+    const variantId = selectedPriceVariant?._id;
+    const variantPrice = selectedPriceVariant?.priceInfo?.price;
+    if (!variantId) {
+        return undefined;
+    }
+    const price = variantPrice ? Number(variantPrice) : undefined;
+    return {
+        id: variantId,
+        formattedPrice: formatCurrency(price),
+    };
+};
+export const getSelectedModifierPrices = (selectedModifiers, modifierGroups) => {
+    return Object.entries(selectedModifiers).reduce((total, [modifierGroupId, modifierIds]) => {
+        const groupTotal = modifierIds.reduce((groupSum, modifierId) => {
+            const baseModifierId = modifierId.split('~')[0];
+            const modifier = modifierGroups
+                .find((group) => group._id === modifierGroupId)
+                ?.modifiers.find((mod) => mod._id === baseModifierId);
+            return (groupSum +
+                Number(modifier?.additionalChargeInfo?.additionalCharge ?? 0));
+        }, 0);
+        return total + groupTotal;
+    }, 0);
+};
+export const getSelectedVariantPrice = (selectedVariant, priceVariants) => {
+    if (!selectedVariant?._id) {
+        return 0;
+    }
+    const variant = priceVariants.find((variant) => variant._id === selectedVariant._id);
+    return Number(variant?.priceInfo?.price ?? 0);
+};
+export const calculateItemPrice = (basePrice, variantPrice, modifierPrices, quantity) => {
+    return (basePrice + variantPrice + modifierPrices) * quantity;
+};

package/dist/react/ItemDetails.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-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 { EnhancedVariant } from '@wix/headless-restaurants-menus/services';
-import { AvailabilityStatus, AvailabilityStatusMap } from '../services/common-types.js';
+import { AvailabilityStatus, AvailabilityStatusMap, AddToCartButtonState } 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.
@@ -72,6 +72,7 @@ export interface SpecialRequestProps {
     asChild?: boolean;
     children?: AsChildChildren<{
         description: string;
+        onChange: (value: string) => void;
     }>;
     /** Placeholder text for the textarea */
     placeholder?: string;
@@ -94,16 +95,35 @@ export interface SpecialRequestProps {
  * Usage:
  * <ItemDetails.AddToCartButton>Add to cart</ItemDetails.AddToCartButton>
  */
-export interface AddToCartButtonProps extends Omit<React.ComponentPropsWithoutRef<typeof Commerce.Actions.AddToCart>, 'lineItems'> {
+export interface AddToCartButtonProps {
     asChild?: boolean;
-    children?: React.ReactNode;
     className?: string;
-    label?: string;
+    addToCartLabelMap: Record<AddToCartButtonState, string>;
+    children: (props: {
+        lineItem: LineItem;
+        buttonState: AddToCartButtonState;
+        addToCartButtonDisabled?: boolean;
+        /** Content to display when loading */
+        loadingState?: string | React.ReactNode;
+        /** Text label for the button */
+        label: React.ReactNode;
+        formattedPrice: string;
+    }) => React.ReactNode;
 }
+export declare const AddToCartButton: React.ForwardRefExoticComponent<AddToCartButtonProps & React.RefAttributes<HTMLElement>>;
 export interface ItemDetailsQuantityProps {
-    children: React.ReactNode;
+    asChild?: boolean;
+    className?: string;
+    children: (props: {
+        quantity: number;
+        increment: () => void;
+        decrement: () => void;
+        setQuantity: (quantity: number) => void;
+        canIncrement: boolean;
+        canDecrement: boolean;
+        onValueChange: (value: number) => void;
+    }) => React.ReactNode;
 }
-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 {

package/dist/react/ItemDetails.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { Commerce } from '@wix/ecom/components';
 import { AsChildSlot } from '@wix/headless-utils/react';
@@ -38,15 +38,42 @@ export const Variants = React.forwardRef(({ children, className, asChild, varian
         } }));
 });
 Variants.displayName = 'ItemDetails.Variants';
-export const AddToCartButton = ({ asChild, children, className, label = 'Add to cart', ...props }) => {
-    return (_jsx(CoreItemDetails.LineItemComponent, { children: ({ lineItem }) => (_jsx(Commerce.Actions.AddToCart, { asChild: asChild, label: label, className: className, lineItems: [lineItem], ...props, children: children })) }));
-};
+export const AddToCartButton = React.forwardRef(({ asChild, children, className, addToCartLabelMap, ...props }, ref) => {
+    return (_jsx(CoreItemDetails.LineItemComponent, { addToCartLabelMap: addToCartLabelMap, children: ({ lineItem, buttonState, addToCartButtonDisabled, loadingState, labelText, formattedPrice, }) => {
+            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,
+                    addToCartButtonDisabled,
+                    loadingState,
+                    lineItem,
+                    lineItems: [lineItem],
+                    label,
+                    formattedPrice,
+                }, ref: ref, ...props, children: _jsx(Commerce.Actions.AddToCart, { asChild: false, label: label, className: className, lineItems: [lineItem], ...props, children: children({
+                        lineItem,
+                        buttonState,
+                        addToCartButtonDisabled,
+                        loadingState,
+                        label,
+                        formattedPrice,
+                    }) }) }));
+        } }));
+});
+AddToCartButton.displayName = 'AddToCartButton';
 export const Quantity = ({ children }) => {
-    return (_jsx(CoreItemDetails.QuantityComponent, { children: ({ quantity, onValueChange, }) => (_jsx(QuantityComponent.Root, { onValueChange: onValueChange, initialValue: quantity, children: children })) }));
+    return (_jsx(CoreItemDetails.QuantityComponent, { children: ({ quantity, onValueChange, increment, decrement, setQuantity, canIncrement, canDecrement, }) => (_jsx(QuantityComponent.Root, { onValueChange: onValueChange, initialValue: quantity, children: children({
+                quantity,
+                increment,
+                decrement,
+                setQuantity,
+                canIncrement,
+                canDecrement,
+                onValueChange,
+            }) })) }));
 };
 Quantity.displayName = 'Quantity';
 export const SpecialRequest = React.forwardRef(({ className, labelClassName, placeholder = 'Any special requests or dietary restrictions?', maxLength = 200, rows = 3, label = 'Special Requests', asChild, children, ...props }, ref) => {
-    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 })] })) }));
+    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, onChange }, 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) => {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { type LineItem } from '@wix/ecom/services';
 import { ItemServiceConfig } from '../../services/item-details-service.js';
 import { EnhancedVariant } from '@wix/headless-restaurants-menus/services';
-import { AvailabilityStatus, AvailabilityStatusMap } from '../../services/common-types.js';
+import { AvailabilityStatus, AvailabilityStatusMap, AddToCartButtonState } from '../../services/common-types.js';
 interface ItemDetailsRootProps {
     children: (props: {
         item: unknown;
@@ -18,8 +18,14 @@ interface ItemDetailsSpecialRequestProps {
 }
 export declare const SpecialRequest: React.FC<ItemDetailsSpecialRequestProps>;
 interface ItemDetailsLineItemProps {
+    addToCartLabelMap: Record<AddToCartButtonState, string>;
     children: (props: {
+        loadingState: string | React.ReactNode;
         lineItem: LineItem;
+        buttonState: AddToCartButtonState;
+        addToCartButtonDisabled: boolean;
+        labelText: string;
+        formattedPrice: string;
     }) => React.ReactNode;
 }
 export declare const LineItemComponent: React.FC<ItemDetailsLineItemProps>;

package/dist/react/core/ItemDetails.js

@@ -5,11 +5,10 @@ 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 { AvailabilityStatus, } from '../../services/common-types.js';
+import { AvailabilityStatus, AddToCartButtonState, } from '../../services/common-types.js';
 export const Root = ({ children, itemDetailsServiceConfig, }) => {
     const service = useService(OLOSettingsServiceDefinition);
     const selectedItem = service.selectedItem?.get();
-    console.log('selectedItem', selectedItem, itemDetailsServiceConfig);
     let config = itemDetailsServiceConfig;
     if (!config) {
         config = loadItemServiceConfig({
@@ -37,10 +36,25 @@ export const SpecialRequest = ({ children, }) => {
         // maxLength: 200
     });
 };
-export const LineItemComponent = ({ children, }) => {
+export const LineItemComponent = ({ addToCartLabelMap, children, }) => {
     const service = useService(ItemServiceDefinition);
+    const oloSettingsService = useService(OLOSettingsServiceDefinition);
     const lineItem = service.lineItem?.get?.() ?? {};
-    return children({ lineItem });
+    const loadingState = service.isLoading?.get?.() ?? false;
+    const buttonState = service.buttonState?.get?.() ?? AddToCartButtonState.VALID_TO_CONTINUE;
+    const addToCartButtonDisabled = service.addToCartButtonDisabled?.get?.() ?? false;
+    const price = service.price?.get?.() ?? 0;
+    const formatCurrency = oloSettingsService.formatCurrency;
+    const formattedPrice = formatCurrency(price);
+    const labelText = addToCartLabelMap[buttonState];
+    return children({
+        loadingState,
+        lineItem,
+        buttonState,
+        addToCartButtonDisabled,
+        labelText,
+        formattedPrice,
+    });
 };
 export const QuantityComponent = ({ children, }) => {
     const service = useService(ItemServiceDefinition);

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

@@ -35,3 +35,11 @@ export type AvailabilityStatusObject = {
     text?: string;
 };
 export type AvailabilityStatusMap = Partial<Record<Exclude<AvailabilityStatus, NextAvailability>, AvailabilityStatusObject>> & Record<NextAvailability, AvailabilityStatusWithActionObject>;
+export declare enum AddToCartButtonState {
+    ITEM_UNAVAILABLE = 0,
+    OUT_OF_STOCK = 1,
+    NOT_VALID = 2,
+    EDITING = 3,
+    VALID_TO_CONTINUE = 4
+}
+export type AddToCartButtonLabelMap = Record<AddToCartButtonState, string>;

package/dist/services/common-types.js

@@ -16,3 +16,11 @@ export var AvailabilityStatus;
     AvailabilityStatus[AvailabilityStatus["NEXT_AVAILABILITY_PICKUP"] = 3] = "NEXT_AVAILABILITY_PICKUP";
     AvailabilityStatus[AvailabilityStatus["NEXT_AVAILABILITY_DELIVERY"] = 4] = "NEXT_AVAILABILITY_DELIVERY";
 })(AvailabilityStatus || (AvailabilityStatus = {}));
+export var AddToCartButtonState;
+(function (AddToCartButtonState) {
+    AddToCartButtonState[AddToCartButtonState["ITEM_UNAVAILABLE"] = 0] = "ITEM_UNAVAILABLE";
+    AddToCartButtonState[AddToCartButtonState["OUT_OF_STOCK"] = 1] = "OUT_OF_STOCK";
+    AddToCartButtonState[AddToCartButtonState["NOT_VALID"] = 2] = "NOT_VALID";
+    AddToCartButtonState[AddToCartButtonState["EDITING"] = 3] = "EDITING";
+    AddToCartButtonState[AddToCartButtonState["VALID_TO_CONTINUE"] = 4] = "VALID_TO_CONTINUE";
+})(AddToCartButtonState || (AddToCartButtonState = {}));

package/dist/services/index.d.ts

@@ -1,4 +1,4 @@
 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';
+export { AvailabilityStatus, AvailabilityStatusMap, AddToCartButtonState, AddToCartButtonLabelMap, } from './common-types.js';
 export { FulfillmentsService, FulfillmentsServiceDefinition, loadFulfillmentsServiceConfig, } from './fulfillments-service.js';

package/dist/services/index.js

@@ -1,4 +1,4 @@
 export { ItemService, ItemServiceDefinition, loadItemServiceConfig, } from './item-details-service.js';
 export { OLOSettingsService, OLOSettingsServiceDefinition, loadOLOSettingsServiceConfig, } from './olo-settings-service.js';
-export { AvailabilityStatus } from './common-types.js';
+export { AvailabilityStatus, AddToCartButtonState, } from './common-types.js';
 export { FulfillmentsService, FulfillmentsServiceDefinition, loadFulfillmentsServiceConfig, } from './fulfillments-service.js';

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

@@ -1,8 +1,8 @@
-import { type Signal } from '@wix/services-definitions/core-services/signals';
+import { type Signal, type ReadOnlySignal } from '@wix/services-definitions/core-services/signals';
 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';
+import { AddToCartButtonState, AvailabilityStatus } from './common-types.js';
 type Variant = itemVariants.Variant;
 /**
  * API interface for the Item Detailsservice, providing reactive item data management.
@@ -15,7 +15,10 @@ export interface ItemServiceAPI {
     item?: Signal<EnhancedItem | undefined>;
     quantity: Signal<number>;
     specialRequest: Signal<string>;
-    lineItem: Signal<LineItem>;
+    lineItem: ReadOnlySignal<LineItem>;
+    buttonState: ReadOnlySignal<AddToCartButtonState | undefined>;
+    addToCartButtonDisabled: Signal<boolean>;
+    price: ReadOnlySignal<number>;
     selectedVariant: Signal<Variant | undefined>;
     selectedModifiers: Signal<Record<string, Array<string>>>;
     availabilityStatus: Signal<AvailabilityStatus>;
@@ -59,6 +62,9 @@ export interface ItemServiceConfig {
     itemId?: string;
     operationId?: string;
     availabilityStatus?: AvailabilityStatus;
+    editItemMode?: boolean;
+    menuId?: string;
+    sectionId?: string;
 }
 export declare const ItemService: import("@wix/services-definitions").ServiceFactory<string & {
     __api: ItemServiceAPI;

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

@@ -1,7 +1,8 @@
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
-import { AvailabilityStatus } from './common-types.js';
-import { getModifiersInitState } from './utils.js';
+import { AddToCartButtonState, AvailabilityStatus } from './common-types.js';
+import { getAreNotEnoughModifiersOfMandatoryModifierGroupInStock, getModifiersInitState, getLineItemModifiers, getPriceVariantOptions, getSelectedModifierPrices, getSelectedVariantPrice, calculateItemPrice, } from './utils.js';
+import { OLOSettingsServiceDefinition } from './olo-settings-service.js';
 /**
  * Service definition for the Item service.
  * This defines the contract that the ItemService must implement.
@@ -45,13 +46,13 @@ export const ItemServiceDefinition = defineService('item');
 const APP_ID = '9a5d83fd-8570-482e-81ab-cfa88942ee60';
 export const ItemService = implementService.withConfig()(ItemServiceDefinition, ({ getService, config }) => {
     const signalsService = getService(SignalsServiceDefinition);
+    const oloSettingsService = getService(OLOSettingsServiceDefinition);
     const availabilityStatus = signalsService.signal(config.availabilityStatus ?? AvailabilityStatus.AVAILABLE);
     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 lineItem = signalsService.signal({});
     const priceVariants = config.item?.priceVariants || [];
     const initialVariant = priceVariants.length > 0 ? priceVariants[0] : undefined;
     const selectedVariant = signalsService.signal(initialVariant);
@@ -65,44 +66,57 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
         return acc;
     }, {});
     const modifierGroupError = signalsService.signal(initialModifierGroupError);
-    if (config.item) {
-        lineItem.set({
+    const price = signalsService.computed(() => {
+        const basePrice = Number(config?.item?.priceInfo?.price ?? 0);
+        const variantPrice = getSelectedVariantPrice(selectedVariant.get(), priceVariants);
+        const modifierPrices = getSelectedModifierPrices(selectedModifiers.get() || {}, modifierGroups);
+        const itemQuantity = quantity.get() ?? 1;
+        return calculateItemPrice(basePrice, variantPrice, modifierPrices, itemQuantity);
+    });
+    const areModifiersOfMandatoryModifierGroupOutOfStock = getAreNotEnoughModifiersOfMandatoryModifierGroupInStock(modifierGroups);
+    const canAcceptOrders = oloSettingsService.canAcceptOrders ?? true;
+    const isValidToContinue = canAcceptOrders &&
+        config?.item?.orderSettings?.inStock &&
+        config.availabilityStatus === AvailabilityStatus.AVAILABLE &&
+        !areModifiersOfMandatoryModifierGroupOutOfStock;
+    const buttonState = signalsService.computed(() => {
+        return !config?.item?.orderSettings?.inStock ||
+            areModifiersOfMandatoryModifierGroupOutOfStock
+            ? AddToCartButtonState.OUT_OF_STOCK
+            : availabilityStatus.get() !== AvailabilityStatus.AVAILABLE
+                ? AddToCartButtonState.ITEM_UNAVAILABLE
+                : !canAcceptOrders
+                    ? AddToCartButtonState.NOT_VALID
+                    : config.editItemMode
+                        ? AddToCartButtonState.EDITING
+                        : isValidToContinue
+                            ? AddToCartButtonState.VALID_TO_CONTINUE
+                            : AddToCartButtonState.NOT_VALID;
+    });
+    const addToCartButtonDisabled = signalsService.signal(!isValidToContinue);
+    const lineItem = signalsService.computed(() => {
+        const formatCurrency = oloSettingsService.formatCurrency;
+        return {
             quantity: quantity.get(),
             catalogReference: {
-                // @ts-expect-error - item is not typed
-                catalogItemId: config.item._id,
+                catalogItemId: config.item?._id ?? undefined,
                 appId: APP_ID,
                 options: {
                     operationId: config.operationId,
-                    // @ts-expect-error - item is not typed
-                    menuId: config.item.menuId,
-                    // @ts-expect-error - item is not typed
-                    sectionId: config.item.sectionId,
+                    menuId: config.menuId,
+                    sectionId: config.sectionId,
+                    priceVariant: getPriceVariantOptions(selectedVariant.get(), formatCurrency),
+                    modifierGroups: getLineItemModifiers(selectedModifiers.get(), modifierGroups, formatCurrency),
+                    specialRequests: specialRequest.get(),
                 },
             },
-        });
-    }
+        };
+    });
     const updateQuantity = (_quantity) => {
         quantity.set(_quantity);
-        const _lineItem = lineItem.get();
-        lineItem.set({
-            ..._lineItem,
-            quantity: _quantity,
-        });
     };
     const updateSpecialRequest = (_specialRequest) => {
         specialRequest.set(_specialRequest);
-        const _lineItem = lineItem.get();
-        lineItem.set({
-            ..._lineItem,
-            catalogReference: {
-                ..._lineItem.catalogReference,
-                options: {
-                    ..._lineItem.catalogReference?.options,
-                    specialRequest: _specialRequest,
-                },
-            },
-        });
     };
     const updateSelectedVariant = (variant) => {
         selectedVariant.set(variant);
@@ -157,6 +171,9 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
         availabilityStatus,
         getSelectedModifiers,
         modifierGroupError,
+        buttonState,
+        addToCartButtonDisabled,
+        price,
     };
 });
 /**

package/dist/services/olo-settings-service.d.ts

@@ -11,12 +11,16 @@ export interface OLOSettingsServiceAPI {
     currentFulfillment: Signal<string>;
     currentTimeSlot: Signal<string>;
     filterMenus: (menus: MenusServiceConfig['menus']) => MenusServiceConfig['menus'];
+    canAcceptOrders: boolean;
+    formatCurrency: (price?: number) => string;
 }
 export interface OLOSettingsServiceConfig {
     operationGroup?: operationGroupsSDK.OperationGroup;
     operation?: operationsSDK.Operation;
     availabilityDispatchAction?: () => void;
     menuIdsByOperation?: string[];
+    canAcceptOrders?: boolean;
+    formattedPrice?: (price?: number) => string;
 }
 export declare const OLOSettingsServiceDefinition: string & {
     __api: OLOSettingsServiceAPI;

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

@@ -8,6 +8,8 @@ export const OLOSettingsService = implementService.withConfig()(OLOSettingsServi
     const availabilityDispatchAction = signalsService.signal(config.availabilityDispatchAction);
     const operationGroup = signalsService.signal(config.operationGroup);
     const operation = signalsService.signal(config.operation);
+    const formatCurrency = config.formattedPrice ??
+        ((price) => price?.toFixed(2)?.toString() ?? '');
     const selectedItem = signalsService.signal(null);
     const isLoading = signalsService.signal(false);
     const error = signalsService.signal(null);
@@ -27,6 +29,8 @@ export const OLOSettingsService = implementService.withConfig()(OLOSettingsServi
         currentFulfillment,
         currentTimeSlot,
         filterMenus,
+        canAcceptOrders: config.canAcceptOrders ?? true,
+        formatCurrency,
     };
 });
 export async function loadOLOSettingsServiceConfig() {

package/dist/services/utils.d.ts

@@ -34,4 +34,32 @@ export declare const hasToChooseAtLeastX: ({ required, minSelections, maxSelecti
 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 getAreNotEnoughModifiersOfMandatoryModifierGroupInStock: (modifierGroups: EnhancedModifierGroup[]) => boolean;
+export declare const getLineItemModifiers: (selectedModifiers: Record<string, Array<string>>, modifierGroups: EnhancedModifierGroup[], formatCurrency: (price?: number) => string) => {
+    id: string;
+    modifiers: {
+        id: string;
+        price: string | undefined;
+        formattedPrice: string | undefined;
+    }[];
+}[] | undefined;
+export declare const getPriceVariantOptions: (selectedPriceVariant: {
+    _id?: string | null;
+    priceInfo?: {
+        price?: string;
+    };
+} | undefined, formatCurrency: (price?: number) => string) => {
+    id: string;
+    formattedPrice: string;
+} | undefined;
+export declare const getSelectedModifierPrices: (selectedModifiers: Record<string, Array<string>>, modifierGroups: EnhancedModifierGroup[]) => number;
+export declare const getSelectedVariantPrice: (selectedVariant: {
+    _id?: string | null;
+} | undefined, priceVariants: Array<{
+    _id?: string | null;
+    priceInfo?: {
+        price?: string;
+    };
+}>) => number;
+export declare const calculateItemPrice: (basePrice: number, variantPrice: number, modifierPrices: number, quantity: number) => number;
 export {};

package/dist/services/utils.js

@@ -136,3 +136,79 @@ export const getRuleTypeMapValue = (ruleTypeMap, ruleType, modifierGroupName, ru
     }
     return undefined;
 };
+export const getAreNotEnoughModifiersOfMandatoryModifierGroupInStock = (modifierGroups) => modifierGroups.some((modifierGroup) => {
+    const isModifierGroupMandatory = modifierGroup.rule?.required;
+    const minimumRequiredModifiers = modifierGroup.rule?.minSelections ?? 0;
+    const inStockModifiers = modifierGroup.modifiers.filter((modifier) => modifier.inStock ?? true);
+    const areMinimumRequiredModifiersInStock = inStockModifiers.length >= minimumRequiredModifiers;
+    return isModifierGroupMandatory && !areMinimumRequiredModifiersInStock;
+});
+export const getLineItemModifiers = (selectedModifiers, modifierGroups, formatCurrency) => {
+    const modifierGroupsOptions = modifierGroups
+        .map((modifierGroup) => {
+        const selectedModifierIds = selectedModifiers[modifierGroup._id ?? ''];
+        if (!selectedModifierIds || selectedModifierIds.length === 0) {
+            return null;
+        }
+        const modifiers = selectedModifierIds
+            .map((modifierIdWithIndex) => {
+            const baseModifierId = modifierIdWithIndex.split('~')[0];
+            const modifier = modifierGroup.modifiers.find((mod) => mod._id === baseModifierId);
+            if (!modifier)
+                return null;
+            const price = Number(modifier?.additionalChargeInfo?.additionalCharge ?? 0);
+            return {
+                id: modifier._id ?? '',
+                price: modifier?.additionalChargeInfo?.additionalCharge,
+                formattedPrice: price > 0 ? formatCurrency(price) : undefined,
+            };
+        })
+            .filter((modifier) => modifier !== null);
+        if (modifiers.length === 0 || !modifierGroup._id) {
+            return null;
+        }
+        return {
+            id: modifierGroup._id,
+            modifiers,
+        };
+    })
+        .filter((modifierGroup) => modifierGroup !== null &&
+        modifierGroup.modifiers.length > 0 &&
+        !!modifierGroup?.id?.length);
+    return modifierGroupsOptions.length > 0 ? modifierGroupsOptions : undefined;
+};
+export const getPriceVariantOptions = (selectedPriceVariant, formatCurrency) => {
+    const variantId = selectedPriceVariant?._id;
+    const variantPrice = selectedPriceVariant?.priceInfo?.price;
+    if (!variantId) {
+        return undefined;
+    }
+    const price = variantPrice ? Number(variantPrice) : undefined;
+    return {
+        id: variantId,
+        formattedPrice: formatCurrency(price),
+    };
+};
+export const getSelectedModifierPrices = (selectedModifiers, modifierGroups) => {
+    return Object.entries(selectedModifiers).reduce((total, [modifierGroupId, modifierIds]) => {
+        const groupTotal = modifierIds.reduce((groupSum, modifierId) => {
+            const baseModifierId = modifierId.split('~')[0];
+            const modifier = modifierGroups
+                .find((group) => group._id === modifierGroupId)
+                ?.modifiers.find((mod) => mod._id === baseModifierId);
+            return (groupSum +
+                Number(modifier?.additionalChargeInfo?.additionalCharge ?? 0));
+        }, 0);
+        return total + groupTotal;
+    }, 0);
+};
+export const getSelectedVariantPrice = (selectedVariant, priceVariants) => {
+    if (!selectedVariant?._id) {
+        return 0;
+    }
+    const variant = priceVariants.find((variant) => variant._id === selectedVariant._id);
+    return Number(variant?.priceInfo?.price ?? 0);
+};
+export const calculateItemPrice = (basePrice, variantPrice, modifierPrices, quantity) => {
+    return (basePrice + variantPrice + modifierPrices) * quantity;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-restaurants-olo",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "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.28",
+    "@wix/headless-components": "0.0.29",
     "@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": "6ef651f979e931c988422aacda83069a7dfe90bcab34438af4500a4a"
+  "falconPackageHash": "62b03d48ee9763fd64c2c4dd77886b6399b70c84d6cf03279404176c"
 }