@wix/headless-restaurants-olo 0.0.14 → 0.0.16

package/cjs/dist/types/fulfillments-types.js

@@ -0,0 +1,7 @@
+export var DispatchType;
+(function (DispatchType) {
+    /** Pickup fulfillment */
+    DispatchType["PICKUP"] = "PICKUP";
+    /** Delivery fulfillment */
+    DispatchType["DELIVERY"] = "DELIVERY";
+})(DispatchType || (DispatchType = {}));

package/cjs/dist/types/operation.d.ts

@@ -0,0 +1,57 @@
+import { DispatchType } from './fulfillments-types.js';
+export type MinMaxRange = {
+    min: number;
+    max: number;
+};
+export type AsapScheduling = {
+    maxInMinutes?: number;
+    rangeInMinutes?: MinMaxRange;
+};
+export type PreorderScheduling = {
+    timeWindowDuration: number;
+    timeInAdvance: MinMaxRange;
+};
+export type OperationType = 'PRE_ORDER' | 'ASAP';
+type BaseOperation = {
+    id: string;
+    name: string;
+};
+export interface StreetAddress {
+    apt?: String;
+    formattedAddressLine?: String;
+    name?: String;
+    number?: String;
+}
+export interface Address {
+    addressLine?: String;
+    addressLine2?: String;
+    city?: String;
+    country?: String;
+    countryFullname?: String;
+    formattedAddress?: String;
+    hint?: String;
+    postalCode?: String;
+    streetAddress?: StreetAddress;
+    subdivision?: String;
+    subdivisionFullname?: String;
+}
+export type OSLocation = {
+    name: string;
+    address?: Address;
+    default?: boolean;
+    timeZone?: string;
+};
+export type Operation = BaseOperation & {
+    enabled: boolean;
+    fulfillmentIds: string[];
+    asapOptions?: AsapScheduling;
+    allowAsapFutureHandling?: boolean;
+    businessDaysAheadHandlingOptions?: number;
+    operationType: OperationType;
+    preOrderOptions?: PreorderScheduling;
+    defaultDispatchType?: DispatchType;
+    operationGroupId: string;
+    locationId: string;
+    locationDetails?: OSLocation;
+};
+export {};

package/cjs/dist/types/operation.js

@@ -0,0 +1 @@
+export {};

package/cjs/dist/utils/fulfillments-utils.d.ts

@@ -0,0 +1,23 @@
+import * as operationsSDK from '@wix/auto_sdk_restaurants_operations';
+import { TimeSlot } from '../types/fulfillments-types.js';
+export declare const createTimeSlotId: (startTime: Date, endTime: Date, maxTimeOptions?: number) => string;
+export declare function hasSameByField<T>(field: keyof T, arr: T[]): boolean;
+export declare function getMinValueObjects<T>(key: keyof T, arr: T[]): T[];
+export declare function getMinTime(info: operationsSDK.FulfillmentInfo): number;
+export declare function getFastestTimeOptionsByFulfillmentInfo(arr: operationsSDK.FulfillmentInfo[]): operationsSDK.FulfillmentInfo[];
+export declare function getSlowestTimeOptionByFulfillmentInfo(arr: operationsSDK.FulfillmentInfo[]): operationsSDK.FulfillmentInfo;
+export declare const createTimeRangeByFulfillmentInfo: (arr: operationsSDK.FulfillmentInfo[]) => {
+    maxTimeOptions: number | undefined;
+    durationRangeOptions?: undefined;
+} | {
+    durationRangeOptions: {
+        minDuration: number | undefined;
+        maxDuration: number | undefined;
+    };
+    maxTimeOptions?: undefined;
+};
+export declare function hasSameTime(arr: operationsSDK.FulfillmentDetails[]): boolean;
+export declare const resolveDifferentMinOrderPriceOptionByFulfillmentInfo: (fulfillmentInfo: operationsSDK.FulfillmentInfo[]) => operationsSDK.FulfillmentInfo | undefined;
+export declare const resolveSameMinOrderPriceOptionByFulfillmentInfo: (fulfillmentInfo: operationsSDK.FulfillmentInfo[]) => operationsSDK.FulfillmentInfo;
+export declare const resolveFulfillmentInfo: (fulfillmentInfo: operationsSDK.FulfillmentInfo[]) => operationsSDK.FulfillmentInfo | undefined;
+export declare const processFulfillmentTimeSlotByOperationList: (operationTimeSlot: operationsSDK.TimeSlotForOperation) => [string, TimeSlot[] | undefined];

package/cjs/dist/utils/fulfillments-utils.js

@@ -0,0 +1,144 @@
+import * as operationsSDK from '@wix/auto_sdk_restaurants_operations';
+import { DispatchType } from '../types/fulfillments-types.js';
+export const createTimeSlotId = (startTime, endTime, maxTimeOptions = 0) => 
+// maxTimeOptions is used to avoid collisions when order pacing is enabled
+`${startTime?.toUTCString()}-${endTime?.toUTCString()}-${maxTimeOptions}`;
+export function hasSameByField(field, arr) {
+    const [first, ...rest] = arr;
+    return rest.every((item) => item[field] === first?.[field]);
+}
+export function getMinValueObjects(key, arr) {
+    return arr.slice(1).reduce((min, item) => {
+        if (Number(item[key]) < Number(min[0]?.[key])) {
+            return [item];
+        }
+        else if (Number(item[key]) === Number(min[0]?.[key])) {
+            return [...min, item];
+        }
+        return min;
+    }, (arr[0] ? [arr[0]] : []));
+}
+export function getMinTime(info) {
+    return info.durationRange
+        ? Number(info.durationRange.minDuration)
+        : Number(info.maxTime);
+}
+export function getFastestTimeOptionsByFulfillmentInfo(arr) {
+    const [first, ...rest] = arr;
+    if (!first) {
+        return [];
+    }
+    return rest.reduce((fastestOptions, current) => {
+        const currentTime = getMinTime(current);
+        const fastestTime = getMinTime(fastestOptions[0]);
+        if (currentTime < fastestTime) {
+            return [current];
+        }
+        else if (currentTime === fastestTime) {
+            return [...fastestOptions, current];
+        }
+        return fastestOptions;
+    }, [first]);
+}
+export function getSlowestTimeOptionByFulfillmentInfo(arr) {
+    return arr.reduce((max, item) => {
+        const { durationRange, maxTime: maxTimeOptions } = item;
+        let maxTime;
+        if (max.durationRange) {
+            maxTime = Number(max.durationRange?.maxDuration || 0);
+        }
+        else {
+            maxTime = Number(max.maxTime || 0);
+        }
+        if (durationRange) {
+            return Number(durationRange.maxDuration) > maxTime ? item : max;
+        }
+        else {
+            return Number(maxTimeOptions) > maxTime ? item : max;
+        }
+    }, {});
+}
+export const createTimeRangeByFulfillmentInfo = (arr) => {
+    const fastestOption = getFastestTimeOptionsByFulfillmentInfo(arr)[0];
+    const slowestOption = getSlowestTimeOptionByFulfillmentInfo(arr);
+    const minDuration = fastestOption?.durationRange?.minDuration ?? fastestOption?.maxTime;
+    const maxDuration = slowestOption.durationRange?.maxDuration ?? slowestOption.maxTime;
+    if (minDuration === maxDuration) {
+        return { maxTimeOptions: minDuration };
+    }
+    else {
+        return { durationRangeOptions: { minDuration, maxDuration } };
+    }
+};
+export function hasSameTime(arr) {
+    return (hasSameByField('fulfillmentTimeType', arr) &&
+        (arr[0]?.fulfillmentTimeType === operationsSDK.FulfillmentTimeType.MAX_TIME
+            ? hasSameByField('maxTimeOptions', arr)
+            : arr.every((details) => {
+                const { durationRangeOptions } = details;
+                return (durationRangeOptions?.maxDuration ===
+                    arr[0]?.durationRangeOptions?.maxDuration &&
+                    durationRangeOptions?.minDuration ===
+                        arr[0]?.durationRangeOptions?.minDuration);
+            })));
+}
+export const resolveDifferentMinOrderPriceOptionByFulfillmentInfo = (fulfillmentInfo) => {
+    const hasSameFee = hasSameByField('fee', fulfillmentInfo);
+    if (hasSameFee && hasSameTime(fulfillmentInfo)) {
+        // if fee and time are the same, return the object with the min order price with the min free delivery price threshold
+        return getMinValueObjects('freeFulfillmentPriceThreshold', getMinValueObjects('minOrderPrice', fulfillmentInfo))[0];
+    }
+    else {
+        // if the fee is the same and time is different, return the fee
+        const fee = hasSameFee ? fulfillmentInfo[0]?.fee : undefined;
+        // if free delivery price threshold is the same, return free delivery price threshold
+        const freeFulfillmentPriceThreshold = hasSameByField('freeFulfillmentPriceThreshold', fulfillmentInfo)
+            ? fulfillmentInfo[0]?.freeFulfillmentPriceThreshold
+            : undefined;
+        // create a time range object from all the fulfillments
+        return {
+            fee,
+            ...createTimeRangeByFulfillmentInfo(fulfillmentInfo),
+            freeFulfillmentPriceThreshold,
+        };
+    }
+};
+export const resolveSameMinOrderPriceOptionByFulfillmentInfo = (fulfillmentInfo) => {
+    // filtering fulfillment details by order of precedent: fee, time, free delivery price threshold
+    const cheapestFulfillmentInfo = getMinValueObjects('fee', fulfillmentInfo);
+    const fastestFulfillmentInfo = getFastestTimeOptionsByFulfillmentInfo(cheapestFulfillmentInfo);
+    return getMinValueObjects('freeFulfillmentPriceThreshold', fastestFulfillmentInfo)[0];
+};
+export const resolveFulfillmentInfo = (fulfillmentInfo) => {
+    if (hasSameByField('minOrderPrice', fulfillmentInfo)) {
+        return resolveSameMinOrderPriceOptionByFulfillmentInfo(fulfillmentInfo);
+    }
+    else {
+        return resolveDifferentMinOrderPriceOptionByFulfillmentInfo(fulfillmentInfo);
+    }
+};
+export const processFulfillmentTimeSlotByOperationList = (operationTimeSlot) => {
+    return [
+        operationTimeSlot.operationId ?? '',
+        operationTimeSlot.timeslotsPerFulfillmentType?.map((fulfillmentTimeSlot) => {
+            const { timeSlot, fulfilmentType, fulfillmentInfo } = fulfillmentTimeSlot;
+            const { startTime, endTime, orderSchedulingType } = timeSlot ?? {};
+            const selectedFulfillmentInfo = resolveFulfillmentInfo(fulfillmentInfo);
+            const fulfillmentDetails = {
+                maxTimeOptions: selectedFulfillmentInfo?.maxTime,
+                durationRangeOptions: selectedFulfillmentInfo?.durationRange,
+                ...selectedFulfillmentInfo,
+            };
+            return {
+                id: createTimeSlotId(startTime, endTime),
+                startTime: startTime,
+                endTime: endTime,
+                dispatchType: fulfilmentType === 'DELIVERY'
+                    ? DispatchType.DELIVERY
+                    : DispatchType.PICKUP,
+                startsNow: orderSchedulingType === operationsSDK.OrderSchedulingType.ASAP,
+                fulfillmentDetails,
+            };
+        }),
+    ];
+};

package/dist/mappers/operation-mapper.d.ts

@@ -0,0 +1,3 @@
+import * as operationsSDK from '@wix/auto_sdk_restaurants_operations';
+import { Operation } from '../types/operation.js';
+export declare const OperationMapper: (operation: operationsSDK.Operation) => Operation;

package/dist/mappers/operation-mapper.js

@@ -0,0 +1,95 @@
+import * as operationsSDK from '@wix/auto_sdk_restaurants_operations';
+import { DispatchType } from '../types/fulfillments-types.js';
+const TIME_UNIT_MULTIPLIER = {
+    MINUTES: 1,
+    UNKNOWN_TIME_UNIT: 0,
+    DAYS: 24 * 60,
+    HOURS: 60,
+};
+const getAsapOptionsFromOperation = (operation) => {
+    if (!operation.orderScheduling?.asapOptions) {
+        return;
+    }
+    const { timeRangeOptions, maxTimeOptions } = operation.orderScheduling.asapOptions.preparationTime || {};
+    if (maxTimeOptions &&
+        maxTimeOptions.duration !== null &&
+        maxTimeOptions.duration !== undefined &&
+        maxTimeOptions.timeUnit) {
+        return {
+            maxInMinutes: maxTimeOptions.duration * TIME_UNIT_MULTIPLIER[maxTimeOptions.timeUnit],
+        };
+    }
+    if (timeRangeOptions &&
+        timeRangeOptions.timeUnit &&
+        timeRangeOptions.maxDuration !== undefined &&
+        timeRangeOptions.maxDuration !== null &&
+        timeRangeOptions.minDuration !== undefined &&
+        timeRangeOptions.minDuration !== null) {
+        return {
+            rangeInMinutes: {
+                min: timeRangeOptions.minDuration *
+                    TIME_UNIT_MULTIPLIER[timeRangeOptions.timeUnit],
+                max: timeRangeOptions.maxDuration *
+                    TIME_UNIT_MULTIPLIER[timeRangeOptions.timeUnit],
+            },
+        };
+    }
+};
+function getPreOrderOptions(operation) {
+    if (!operation.orderScheduling?.preorderOptions) {
+        return;
+    }
+    const timeBoundedOptions = operation.orderScheduling?.preorderOptions?.method?.timeBoundedOptions;
+    if (!timeBoundedOptions) {
+        return;
+    }
+    const { maxTimeInAdvance, minTimeInAdvance } = timeBoundedOptions;
+    const max = TIME_UNIT_MULTIPLIER[maxTimeInAdvance?.timeUnit] *
+        maxTimeInAdvance?.duration;
+    const min = TIME_UNIT_MULTIPLIER[minTimeInAdvance?.timeUnit] *
+        minTimeInAdvance?.duration;
+    const timeWindowsOptions = operation.orderScheduling?.preorderOptions?.fulfillmentTimesDisplay
+        ?.timeWindowsOptions;
+    const timeWindowDuration = TIME_UNIT_MULTIPLIER[timeWindowsOptions.timeUnit] *
+        timeWindowsOptions.duration;
+    return {
+        timeInAdvance: { min, max },
+        timeWindowDuration,
+    };
+}
+function getOperationType(operation) {
+    switch (operation.orderScheduling?.type) {
+        case operationsSDK.SchedulingType.PREORDER:
+            return 'PRE_ORDER';
+        case operationsSDK.SchedulingType.ASAP:
+        default:
+            return 'ASAP';
+    }
+}
+export const OperationMapper = (operation) => {
+    const { asapFutureHandlingType, businessDaysAheadHandlingOptions } = operation.orderScheduling?.asapOptions || {};
+    const { daysCount } = businessDaysAheadHandlingOptions || {};
+    const allowAsapFutureHandling = asapFutureHandlingType ===
+        operationsSDK.AsapFutureHandlingType.BUSINESS_DAYS_AHEAD_HANDLING &&
+        Number(daysCount) >= 0;
+    return {
+        id: operation._id || '',
+        name: operation.name || '',
+        // @ts-expect-error - operation is not typed
+        enabled: !!operation.enabled,
+        fulfillmentIds: operation.fulfillmentIds || [],
+        asapOptions: getAsapOptionsFromOperation(operation),
+        preOrderOptions: getPreOrderOptions(operation),
+        operationType: getOperationType(operation),
+        allowAsapFutureHandling,
+        businessDaysAheadHandlingOptions: daysCount ?? undefined,
+        defaultDispatchType: operation.defaultFulfillmentType ===
+            operationsSDK.FulfillmentType.DELIVERY
+            ? DispatchType.DELIVERY
+            : DispatchType.PICKUP,
+        operationGroupId: operation.operationGroupId || '',
+        locationId: operation.businessLocationId || '',
+        // @ts-expect-error - operation is not typed
+        locationDetails: operation.businessLocationDetails,
+    };
+};

package/dist/react/ItemDetails.d.ts

@@ -1,9 +1,8 @@
 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 { EnhancedModifier, EnhancedModifierGroup, EnhancedVariant } from '@wix/headless-restaurants-menus/services';
+import { EnhancedVariant } from '@wix/headless-restaurants-menus/services';
 import { AvailabilityStatus, AvailabilityStatusMap } from '../services/common-types.js';
 /**
  * Root component for menu item display and interaction.
@@ -26,136 +25,6 @@ export interface RootProps {
     itemDetailsServiceConfig?: ItemServiceConfig;
 }
 export declare const Root: ({ children, itemDetailsServiceConfig }: RootProps) => import("react/jsx-runtime").JSX.Element;
-/**
- * Displays the item name with customizable rendering.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Name />
- * <ItemDetails.Name asChild>
- *   <h2 className="font-heading text-lg" />
- * </ItemDetails.Name>
- * ```
- */
-export interface ItemDetailsNameProps {
-    asChild?: boolean;
-    /** Custom render function when using asChild */
-    children?: AsChildChildren<{
-        name: string;
-    }>;
-    /** CSS classes to apply to the default element */
-    className?: string;
-}
-export declare const Name: React.ForwardRefExoticComponent<ItemDetailsNameProps & React.RefAttributes<HTMLElement>>;
-/**
- * Displays the item price with customizable rendering.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Price />
- * <ItemDetails.Price asChild>
- *   <span className="font-semibold text-lg" />
- * </ItemDetails.Price>
- * ```
- */
-export interface ItemDetailsPriceProps {
-    asChild?: boolean;
-    /** CSS classes to apply to the default element */
-    className?: string;
-}
-export declare const Price: React.ForwardRefExoticComponent<ItemDetailsPriceProps & React.RefAttributes<HTMLElement>>;
-/**
- * Displays the item description with customizable rendering.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Description />
- * <ItemDetails.Description asChild>
- *   <p className="text-sm" />
- * </ItemDetails.Description>
- * ```
- */
-export interface ItemDetailsDescriptionProps {
-    asChild?: boolean;
-    /** CSS classes to apply to the default element */
-    className?: string;
-}
-export declare const Description: React.ForwardRefExoticComponent<ItemDetailsDescriptionProps & React.RefAttributes<HTMLElement>>;
-/**
- * Wrapper component for CoreItemDetails.ModifierComponent.
- * Renders a single modifier with checkbox functionality.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Modifier>
- *   {({ modifier, isSelected, onToggle }) => (
- *     <div style={{ display: "flex", alignItems: "center" }}>
- *       <CheckboxPrimitive.Root
- *         className="CheckboxRoot"
- *         checked={isSelected}
- *         onCheckedChange={onToggle}
- *         id={modifier._id}
- *       >
- *         <CheckboxPrimitive.Indicator className="CheckboxIndicator">
- *           <CheckIcon />
- *         </CheckboxPrimitive.Indicator>
- *       </CheckboxPrimitive.Root>
- *       <label className="Label" htmlFor={modifier._id}>
- *         {modifier.name}
- *       </label>
- *     </div>
- *   )}
- * </ItemDetails.Modifier>
- * ```
- */
-export interface ItemDetailsModifiersSingleSelectProps {
-    children?: AsChildChildren<{
-        selectedModifierIds: string[];
-        onToggle: (modifierId: string) => void;
-        modifierGroup: EnhancedModifierGroup;
-        modifiers: EnhancedModifier[];
-    }>;
-    className?: string;
-    asChild?: boolean;
-    modifierNameClassName?: string;
-    modifierPriceClassName?: string;
-}
-export interface ModifierCheckboxProps {
-    selectedModifierIds: string[];
-    onToggle: (modifierId: string) => void;
-    className?: string;
-    asChild?: boolean;
-    modifierNameClassName?: string;
-    modifierPriceClassName?: string;
-    children?: AsChildChildren<{
-        selectedModifierIds: string[];
-        onToggle: (modifierId: string) => void;
-    }>;
-}
-export declare const ModifierCheckbox: React.ForwardRefExoticComponent<ModifierCheckboxProps & React.RefAttributes<HTMLElement>>;
-export interface ModifierRadioProps {
-    modifierNameClassName?: string;
-    modifierPriceClassName?: string;
-}
-export declare const ModifierRadio: React.ForwardRefExoticComponent<ModifierRadioProps & React.RefAttributes<HTMLElement>>;
-export declare const ModifiersSingleSelect: React.ForwardRefExoticComponent<ItemDetailsModifiersSingleSelectProps & React.RefAttributes<HTMLElement>>;
-export interface ItemDetailsModifiersMultiSelectProps {
-    children?: AsChildChildren<{
-        selectedModifierIds: string[];
-        onToggle: (modifierId: string) => void;
-        modifierGroup: EnhancedModifierGroup;
-        modifiers: EnhancedModifier[];
-    }>;
-    className?: string;
-    asChild?: boolean;
-    modifierNameClassName?: string;
-    modifierPriceClassName?: string;
-}
-export declare const ModifiersMultiSelect: React.ForwardRefExoticComponent<ItemDetailsModifiersMultiSelectProps & React.RefAttributes<HTMLElement>>;
 /**
  * Wrapper component for CoreItemDetails.VariantsComponent.
  * Renders the variants for the item using Radix UI RadioGroup.
@@ -170,7 +39,9 @@ export declare const ModifiersMultiSelect: React.ForwardRefExoticComponent<ItemD
  */
 export interface ItemDetailsVariantsProps {
     children?: AsChildChildren<{
+        variant: EnhancedVariant;
         variants: EnhancedVariant[];
+        hasVariants: boolean;
         selectedVariantId?: string;
         onVariantChange?: (variantId: string) => void;
     }>;
@@ -178,37 +49,9 @@ export interface ItemDetailsVariantsProps {
     asChild?: boolean;
     variantNameClassName?: string;
     variantPriceClassName?: string;
+    emptyState?: React.ReactNode;
 }
 export declare const Variants: React.ForwardRefExoticComponent<ItemDetailsVariantsProps & React.RefAttributes<HTMLElement>>;
-export interface AddToCartActionProps {
-    /** Whether to render as a child component */
-    asChild?: boolean;
-    /** Text label for the button */
-    label: string;
-    /** Custom render function when using asChild */
-    lineItems: LineItem[];
-    /** CSS classes to apply to the button */
-    className?: string;
-    /** Content to display when loading */
-    loadingState?: string | React.ReactNode;
-    children?: React.ReactNode;
-}
-/**
- * Add to Cart button for the menu item.
- * Triggers the action to add the selected item (and its modifiers/variants) to the cart.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails>
- *   <AddToCart
- *     label="Add to Cart"
- *     lineItems={[{ catalogReference: { ... }, quantity: 1 }]}
- *   />
- * </ItemDetails>
- * ```
- */
-export declare const AddToCart: React.ForwardRefExoticComponent<AddToCartActionProps & React.RefAttributes<HTMLButtonElement>>;
 /**
  * Multi-line text input component for special requests or instructions.
  * Provides a textarea for customers to add custom notes or modifications.
@@ -256,7 +99,6 @@ export interface AddToCartButtonProps extends Omit<React.ComponentPropsWithoutRe
     children?: React.ReactNode;
     className?: string;
     label?: string;
-    onClick?: () => void;
 }
 export interface ItemDetailsQuantityProps {
     children: React.ReactNode;

package/dist/react/ItemDetails.js

@@ -4,8 +4,7 @@ import { Commerce } from '@wix/ecom/components';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { Quantity as QuantityComponent } from '@wix/headless-components/react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Item, Modifier, ModifierGroup, useModifierContext, } from '@wix/headless-restaurants-menus/react';
+import { Item } from '@wix/headless-restaurants-menus/react';
 import * as CoreItemDetails from './core/ItemDetails.js';
 import { AvailabilityStatus, } from '../services/common-types.js';
 var TestIds;
@@ -18,69 +17,19 @@ var TestIds;
     TestIds["itemSpecialRequest"] = "item-special-request";
     TestIds["itemLabels"] = "item-labels";
     TestIds["itemVariants"] = "item-variants";
-    TestIds["itemModifier"] = "item-modifier";
     TestIds["itemAvailability"] = "item-availability";
 })(TestIds || (TestIds = {}));
-const CheckIcon = () => (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z", fill: "currentColor" }) }));
 export const Root = ({ children, itemDetailsServiceConfig }) => {
     return (_jsx(CoreItemDetails.Root, { itemDetailsServiceConfig: itemDetailsServiceConfig, children: ({ item }) => _jsx(Item.Root, { item: item, children: children }) }));
 };
-export const Name = React.forwardRef(({ asChild, children, className, ...rest }, ref) => {
-    return (_jsx(Item.Name, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemName, ...rest, children: children }));
-});
-Name.displayName = 'ItemDetails.Name';
-export const Price = React.forwardRef(({ asChild, className, ...rest }, ref) => {
-    return (_jsx(Item.Price, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemPrice, ...rest }));
-});
-Price.displayName = 'ItemDetails.Price';
-export const Description = React.forwardRef(({ asChild, className, ...rest }, ref) => {
-    return (_jsx(Item.Description, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.itemDescription, ...rest }));
-});
-Description.displayName = 'ItemDetails.Description';
-export const ModifierCheckbox = React.forwardRef(({ selectedModifierIds, onToggle, className, asChild, modifierNameClassName, modifierPriceClassName, children, ...rest }) => {
-    const { modifier } = useModifierContext();
-    const isSelected = selectedModifierIds.includes(modifier._id || '');
-    return (_jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifier, className: className, customElement: children, customElementProps: {
-            selectedModifierIds,
-            onToggle,
-        }, ...rest, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(CheckboxPrimitive.Root, { className: "CheckboxRoot", checked: isSelected, onCheckedChange: () => onToggle(modifier._id || ''), id: modifier._id || undefined, children: _jsx(CheckboxPrimitive.Indicator, { className: "CheckboxIndicator", children: _jsx(CheckIcon, {}) }) }), _jsxs("label", { className: "Label", htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }) }));
-});
-ModifierCheckbox.displayName = 'ItemDetails.ModifierCheckbox';
-export const ModifierRadio = React.forwardRef(({ modifierNameClassName, modifierPriceClassName }) => {
-    const { modifier } = useModifierContext();
-    return (_jsx(RadioGroupPrimitive.Item, { className: "RadioGroupItem", value: modifier._id || '', id: modifier._id || undefined, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(RadioGroupPrimitive.Indicator, { className: "RadioGroupIndicator" }), _jsxs("label", { className: "Label", htmlFor: modifier._id || undefined, children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] })] }) }));
-});
-ModifierRadio.displayName = 'ItemDetails.ModifierRadio';
-export const ModifiersSingleSelect = React.forwardRef(({ children, className, asChild, modifierNameClassName, modifierPriceClassName, ...rest }) => {
-    return (_jsx(CoreItemDetails.ModifiersComponent, { singleSelect: true, children: ({ selectedModifierIds, onToggle, modifierGroup, modifiers }) => {
-            const selectedModifierId = selectedModifierIds.length > 0 ? selectedModifierIds[0] : '';
-            return (_jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifier, className: className, customElement: children, customElementProps: {
-                    selectedModifierIds,
-                    onToggle,
-                    modifierGroup,
-                    modifiers,
-                }, ...rest, children: _jsx(RadioGroupPrimitive.Root, { value: selectedModifierId, onValueChange: onToggle, children: _jsx(ModifierGroup.ModifiersRepeater, { children: _jsx(ModifierRadio, { modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) }) }) }));
-        } }));
-});
-ModifiersSingleSelect.displayName = 'ItemDetails.ModifiersSingleSelect';
-export const ModifiersMultiSelect = React.forwardRef(({ children, className, asChild, modifierNameClassName, modifierPriceClassName, ...rest }) => {
-    return (_jsx(CoreItemDetails.ModifiersComponent, { singleSelect: false, children: ({ selectedModifierIds, onToggle, modifierGroup, modifiers }) => {
-            return (_jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifier, className: className, customElement: children, customElementProps: {
-                    selectedModifierIds,
-                    onToggle,
-                    modifierGroup,
-                    modifiers,
-                }, ...rest, children: _jsx(ModifierGroup.ModifiersRepeater, { children: _jsx(ModifierCheckbox, { selectedModifierIds: selectedModifierIds, onToggle: onToggle, modifierNameClassName: modifierNameClassName, modifierPriceClassName: modifierPriceClassName }) }) }));
-        } }));
-});
-ModifiersMultiSelect.displayName = 'ItemDetails.ModifiersMultiSelect';
-export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, }, ref) => {
+export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, emptyState, }, ref) => {
     return (_jsx(CoreItemDetails.VariantsComponent, { children: ({ variants, hasVariants, selectedVariantId, onVariantChange }) => {
             if (!hasVariants) {
-                return null;
+                return emptyState || null;
             }
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.itemVariants, className: className, customElement: children, customElementProps: {
                     variants,
+                    hasVariants,
                     selectedVariantId,
                     onVariantChange,
                 }, children: _jsx(RadioGroupPrimitive.Root, { value: selectedVariantId, onValueChange: onVariantChange, children: variants.map((variant) => (_jsx(RadioGroupPrimitive.Item, { value: variant._id ?? '', children: _jsxs("div", { children: [_jsx("div", { className: variantNameClassName, children: variant.name }), _jsx("div", { className: variantPriceClassName, children: variant.priceInfo?.formattedPrice ||
@@ -89,29 +38,8 @@ export const Variants = React.forwardRef(({ children, className, asChild, varian
         } }));
 });
 Variants.displayName = 'ItemDetails.Variants';
-/**
- * Add to Cart button for the menu item.
- * Triggers the action to add the selected item (and its modifiers/variants) to the cart.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails>
- *   <AddToCart
- *     label="Add to Cart"
- *     lineItems={[{ catalogReference: { ... }, quantity: 1 }]}
- *   />
- * </ItemDetails>
- * ```
- */
-export const AddToCart = React.forwardRef(({ lineItems, className, label, ...props }, ref) => {
-    return (_jsx(Commerce.Actions.AddToCart, { ref: ref, asChild: false, label: label, className: className, lineItems: lineItems, children: props.children }));
-});
-AddToCart.displayName = 'AddToCart';
-export const AddToCartButton = ({ asChild = false, children, className, onClick, label = 'Add to cart', ...props }) => {
-    return (_jsx(CoreItemDetails.LineItemComponent, { children: ({ lineItem }) => (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: {
-                onClick,
-            }, children: _jsx(Commerce.Actions.AddToCart, { asChild: false, label: label, className: className, lineItems: [lineItem], ...props, children: children }) })) }));
+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 Quantity = ({ children }) => {
     return (_jsx(CoreItemDetails.QuantityComponent, { children: ({ quantity, onValueChange, }) => (_jsx(QuantityComponent.Root, { onValueChange: onValueChange, initialValue: quantity, children: children })) }));