@wix/headless-restaurants-olo 0.0.8 → 0.0.10

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

@@ -4,6 +4,7 @@ import { type LineItem } from '@wix/ecom/services';
 import { type AsChildChildren } from '@wix/headless-utils/react';
 import { ItemServiceConfig } from '../services/item-details-service.js';
 import { EnhancedModifier, EnhancedModifierGroup, EnhancedVariant } from '@wix/headless-restaurants-menus/services';
+import { AvailabilityStatus, AvailabilityStatusMap } from '../services/common-types.js';
 /**
  * Root component for menu item display and interaction.
  * Provides context for all menu item-related components like name, price, description, image, etc.
@@ -266,3 +267,16 @@ export interface ItemDetailsQuantityProps {
 export declare const AddToCartButton: React.FC<AddToCartButtonProps>;
 export declare const Quantity: React.FC<ItemDetailsQuantityProps>;
 export declare const SpecialRequest: React.ForwardRefExoticComponent<SpecialRequestProps & React.RefAttributes<never>>;
+export interface ItemDetailsAvailabilityProps {
+    asChild?: boolean;
+    textClassName?: string;
+    buttonClassName?: string;
+    availabilityStatusMap: AvailabilityStatusMap;
+    children: (props: {
+        availabilityStatus: AvailabilityStatus;
+        availabilityStatusText?: string;
+        availabilityStatusButtonText?: string;
+        availabilityAction?: () => void;
+    }) => React.ReactNode;
+}
+export declare const AvailabilityComponent: React.ForwardRefExoticComponent<ItemDetailsAvailabilityProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/ItemDetails.js

@@ -7,6 +7,7 @@ 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 * as CoreItemDetails from './core/ItemDetails.js';
+import { AvailabilityStatus, } from '../services/common-types.js';
 var TestIds;
 (function (TestIds) {
     TestIds["itemName"] = "item-name";
@@ -18,6 +19,7 @@ var TestIds;
     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 }) => {
@@ -120,3 +122,17 @@ export const SpecialRequest = React.forwardRef(({ className, labelClassName, pla
     return (_jsx(CoreItemDetails.SpecialRequest, { children: ({ value, onChange, }) => (_jsxs(AsChildSlot, { ref: ref, asChild: asChild, className: className, onChange: onChange, "data-testid": TestIds.itemSpecialRequest, customElement: children, customElementProps: { label, value }, content: value, ...props, children: [label && _jsx("label", { className: labelClassName, children: label }), _jsx("textarea", { value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, maxLength: maxLength, rows: rows, className: className, children: value })] })) }));
 });
 SpecialRequest.displayName = 'SpecialRequest';
+export const AvailabilityComponent = React.forwardRef(({ asChild, children, textClassName, buttonClassName, availabilityStatusMap, ...rest }, ref) => {
+    return (_jsx(CoreItemDetails.AvailabilityComponent, { availabilityStatusMap: availabilityStatusMap, children: ({ availabilityStatus, availabilityAction, availabilityStatusText, availabilityStatusButtonText, }) => {
+            if (availabilityStatus === AvailabilityStatus.AVAILABLE) {
+                return null;
+            }
+            return (_jsxs(AsChildSlot, { asChild: asChild, "data-testid": TestIds.itemAvailability, customElement: children, customElementProps: {
+                    availabilityStatus,
+                    availabilityStatusText,
+                    availabilityStatusButtonText,
+                    availabilityAction,
+                }, ref: ref, ...rest, children: [_jsx("p", { className: textClassName, children: availabilityStatusText }), availabilityStatusButtonText && availabilityAction && (_jsx("button", { className: buttonClassName, onClick: availabilityAction, children: availabilityStatusButtonText }))] }));
+        } }));
+});
+AvailabilityComponent.displayName = 'AvailabilityComponent';

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { type LineItem } from '@wix/ecom/services';
 import { ItemServiceConfig } from '../../services/item-details-service.js';
 import { EnhancedModifier, EnhancedModifierGroup, EnhancedVariant } from '@wix/headless-restaurants-menus/services';
+import { AvailabilityStatus, AvailabilityStatusMap } from '../../services/common-types.js';
 interface ItemDetailsRootProps {
     children: (props: {
         item: unknown;
@@ -54,4 +55,14 @@ interface ItemDetailsModifiersProps {
     singleSelect?: boolean;
 }
 export declare const ModifiersComponent: React.FC<ItemDetailsModifiersProps>;
+interface ItemDetailsAvailabilityProps {
+    availabilityStatusMap: AvailabilityStatusMap;
+    children: (props: {
+        availabilityStatus: AvailabilityStatus;
+        availabilityAction?: () => void;
+        availabilityStatusText?: string;
+        availabilityStatusButtonText?: string;
+    }) => React.ReactNode;
+}
+export declare const AvailabilityComponent: React.FC<ItemDetailsAvailabilityProps>;
 export {};

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

@@ -5,6 +5,8 @@ import { createServicesMap } from '@wix/services-manager';
 import { ItemService, ItemServiceDefinition, loadItemServiceConfig, } from '../../services/item-details-service.js';
 import { OLOSettingsServiceDefinition } from '../../services/olo-settings-service.js';
 import { useItemContext, useModifierGroupContext, } from '@wix/headless-restaurants-menus/react';
+import { AvailabilityStatus, } from '../../services/common-types.js';
+import { convertModifierToFormModifier } from '../../services/utils.js';
 export const Root = ({ children, itemDetailsServiceConfig, }) => {
     const service = useService(OLOSettingsServiceDefinition);
     const selectedItem = service.selectedItem?.get();
@@ -87,12 +89,9 @@ export const VariantsComponent = ({ children, }) => {
 export const ModifiersComponent = ({ children, singleSelect, }) => {
     const service = useService(ItemServiceDefinition);
     const { modifierGroup } = useModifierGroupContext();
-    const selectedModifiers = service.selectedModifiers?.get?.() ?? {};
     // Get selected modifier IDs for this group
     const groupId = modifierGroup._id;
-    const groupSelectedModifierIds = groupId
-        ? selectedModifiers[groupId] || []
-        : [];
+    const groupSelectedModifierIds = service.getSelectedModifiers?.(groupId ?? '');
     const onToggle = (modifierId) => {
         if (groupId) {
             service.toggleModifier?.(groupId, modifierId, singleSelect);
@@ -102,9 +101,27 @@ export const ModifiersComponent = ({ children, singleSelect, }) => {
         selectedModifierIds: groupSelectedModifierIds,
         onToggle,
         modifierGroup,
-        modifiers: modifierGroup.modifiers.map((modifier, index) => ({
-            ...modifier,
-            _id: `${modifier._id}~${index}`,
-        })),
+        modifiers: modifierGroup.modifiers.map(convertModifierToFormModifier),
+    });
+};
+export const AvailabilityComponent = ({ children, availabilityStatusMap, }) => {
+    const oloSettingsService = useService(OLOSettingsServiceDefinition);
+    const availabilityDispatchAction = oloSettingsService.availabilityDispatchAction?.get?.();
+    const itemService = useService(ItemServiceDefinition);
+    const availabilityStatus = itemService.availabilityStatus?.get?.() ?? AvailabilityStatus.AVAILABLE;
+    const availabilityStatusWithAction = availabilityStatus === AvailabilityStatus.NEXT_AVAILABILITY_PICKUP ||
+        availabilityStatus === AvailabilityStatus.NEXT_AVAILABILITY_DELIVERY;
+    const availabilityStatusObject = availabilityStatusMap[availabilityStatus];
+    const availabilityStatusButtonText = availabilityStatusWithAction
+        ? availabilityStatusObject
+            ?.buttonText
+        : undefined;
+    return children({
+        availabilityStatus,
+        availabilityAction: availabilityStatusWithAction
+            ? availabilityDispatchAction
+            : undefined,
+        availabilityStatusText: availabilityStatusObject?.text,
+        availabilityStatusButtonText,
     });
 };

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

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

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

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

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

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

package/cjs/dist/services/index.js

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

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

@@ -2,6 +2,7 @@ import { type Signal } 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';
 type Variant = itemVariants.Variant;
 /**
  * API interface for the Item Detailsservice, providing reactive item data management.
@@ -17,6 +18,7 @@ export interface ItemServiceAPI {
     lineItem: Signal<LineItem>;
     selectedVariant: Signal<Variant | undefined>;
     selectedModifiers: Signal<Record<string, Array<string>>>;
+    availabilityStatus: Signal<AvailabilityStatus>;
     /** Reactive signal indicating if a item is currently being loaded */
     isLoading: Signal<boolean>;
     /** Reactive signal containing any error message, or null if no error */
@@ -29,6 +31,8 @@ export interface ItemServiceAPI {
     updateSelectedVariant: (variant: Variant) => void;
     /** Function to toggle a modifier instance in a specific group */
     toggleModifier: (modifierGroupId: string, modifierId: string, singleSelect?: boolean) => void;
+    /** Function to get the selected modifiers for a specific group */
+    getSelectedModifiers: (modifierGroupId: string) => Array<string>;
 }
 /**
  * Service definition for the Item service.
@@ -52,6 +56,7 @@ export interface ItemServiceConfig {
     item?: EnhancedItem;
     itemId?: string;
     operationId?: string;
+    availabilityStatus?: AvailabilityStatus;
 }
 export declare const ItemService: import("@wix/services-definitions").ServiceFactory<string & {
     __api: ItemServiceAPI;
@@ -156,8 +161,9 @@ export interface NotFoundItemServiceConfigResult {
  * }
  * ```
  */
-export declare function loadItemServiceConfig({ item, operationId, }: {
+export declare function loadItemServiceConfig({ item, operationId, availabilityStatus, }: {
     item: EnhancedItem;
     operationId: string;
+    availabilityStatus?: AvailabilityStatus;
 }): ItemServiceConfig;
 export {};

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

@@ -1,5 +1,7 @@
 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';
 /**
  * Service definition for the Item service.
  * This defines the contract that the ItemService must implement.
@@ -43,6 +45,7 @@ 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 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');
@@ -53,12 +56,7 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
     const initialVariant = priceVariants.length > 0 ? priceVariants[0] : undefined;
     const selectedVariant = signalsService.signal(initialVariant);
     const modifierGroups = config.item?.modifierGroups || [];
-    const initialSelectedModifiers = {};
-    modifierGroups.forEach((group) => {
-        if (group._id) {
-            initialSelectedModifiers[group._id] = [];
-        }
-    });
+    const initialSelectedModifiers = getModifiersInitState(modifierGroups);
     const selectedModifiers = signalsService.signal(initialSelectedModifiers);
     if (config.item) {
         console.log('config.item', config.item);
@@ -103,37 +101,40 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
     const updateSelectedVariant = (variant) => {
         selectedVariant.set(variant);
     };
-    const toggleModifier = (modifierGroupId, modifierId, singleSelect = false) => {
+    const getModifierIds = (modifierGroupId, modifierId, singleSelect = false) => {
         const currentSelectedModifiers = selectedModifiers.get();
         const groupModifierIds = currentSelectedModifiers[modifierGroupId] || [];
         // Check if this modifier is already selected
         const isModifierSelected = groupModifierIds.includes(modifierId);
         if (singleSelect) {
             // Single select behavior: select the modifier, replacing any existing selection
-            selectedModifiers.set({
-                ...currentSelectedModifiers,
-                [modifierGroupId]: [modifierId],
-            });
+            return [modifierId];
         }
         else {
             // Multi-select behavior: toggle the modifier
             if (isModifierSelected) {
                 // Remove the modifier if it exists
                 const updatedModifierIds = groupModifierIds.filter((id) => id !== modifierId);
-                selectedModifiers.set({
-                    ...currentSelectedModifiers,
-                    [modifierGroupId]: updatedModifierIds,
-                });
+                return updatedModifierIds;
             }
             else {
                 // Add the modifier to the existing selection
-                selectedModifiers.set({
-                    ...currentSelectedModifiers,
-                    [modifierGroupId]: [...groupModifierIds, modifierId],
-                });
+                return [...groupModifierIds, modifierId];
             }
         }
     };
+    const toggleModifier = (modifierGroupId, modifierId, singleSelect = false) => {
+        const currentSelectedModifiers = selectedModifiers.get();
+        const modifierIds = getModifierIds(modifierGroupId, modifierId, singleSelect);
+        selectedModifiers.set({
+            ...currentSelectedModifiers,
+            [modifierGroupId]: modifierIds,
+        });
+    };
+    const getSelectedModifiers = (modifierGroupId) => {
+        const currentSelectedModifiers = selectedModifiers.get();
+        return currentSelectedModifiers[modifierGroupId] || [];
+    };
     return {
         item,
         quantity,
@@ -147,6 +148,8 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
         lineItem,
         selectedVariant,
         selectedModifiers,
+        availabilityStatus,
+        getSelectedModifiers,
     };
 });
 /**
@@ -225,8 +228,8 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
  * }
  * ```
  */
-export function loadItemServiceConfig({ item, operationId, }) {
-    return { item, operationId };
+export function loadItemServiceConfig({ item, operationId, availabilityStatus = AvailabilityStatus.AVAILABLE, }) {
+    return { item, operationId, availabilityStatus };
 }
 // try {
 //   if (item === null) {

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

@@ -7,10 +7,12 @@ export interface OLOSettingsServiceAPI {
     selectedItem?: Signal<unknown>;
     isLoading: Signal<boolean>;
     error: Signal<string | null>;
+    availabilityDispatchAction?: Signal<(() => void) | undefined>;
 }
 export interface OLOSettingsServiceConfig {
     operationGroup?: operationGroupsApi.OperationGroup;
     operation?: operationsApi.Operation;
+    availabilityDispatchAction?: () => void;
 }
 export declare const OLOSettingsServiceDefinition: string & {
     __api: OLOSettingsServiceAPI;

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

@@ -5,6 +5,7 @@ import { SignalsServiceDefinition, } from '@wix/services-definitions/core-servic
 export const OLOSettingsServiceDefinition = defineService('oloSettings');
 export const OLOSettingsService = implementService.withConfig()(OLOSettingsServiceDefinition, ({ getService, config }) => {
     const signalsService = getService(SignalsServiceDefinition);
+    const availabilityDispatchAction = signalsService.signal(config.availabilityDispatchAction);
     const operationGroup = signalsService.signal(config.operationGroup);
     const operation = signalsService.signal(config.operation);
     const selectedItem = signalsService.signal(null);
@@ -16,6 +17,7 @@ export const OLOSettingsService = implementService.withConfig()(OLOSettingsServi
         isLoading,
         error,
         selectedItem,
+        availabilityDispatchAction,
     };
 });
 export async function loadOLOSettingsServiceConfig() {

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

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

package/cjs/dist/services/utils.js

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

package/dist/react/ItemDetails.d.ts

@@ -4,6 +4,7 @@ import { type LineItem } from '@wix/ecom/services';
 import { type AsChildChildren } from '@wix/headless-utils/react';
 import { ItemServiceConfig } from '../services/item-details-service.js';
 import { EnhancedModifier, EnhancedModifierGroup, EnhancedVariant } from '@wix/headless-restaurants-menus/services';
+import { AvailabilityStatus, AvailabilityStatusMap } from '../services/common-types.js';
 /**
  * Root component for menu item display and interaction.
  * Provides context for all menu item-related components like name, price, description, image, etc.
@@ -266,3 +267,16 @@ export interface ItemDetailsQuantityProps {
 export declare const AddToCartButton: React.FC<AddToCartButtonProps>;
 export declare const Quantity: React.FC<ItemDetailsQuantityProps>;
 export declare const SpecialRequest: React.ForwardRefExoticComponent<SpecialRequestProps & React.RefAttributes<never>>;
+export interface ItemDetailsAvailabilityProps {
+    asChild?: boolean;
+    textClassName?: string;
+    buttonClassName?: string;
+    availabilityStatusMap: AvailabilityStatusMap;
+    children: (props: {
+        availabilityStatus: AvailabilityStatus;
+        availabilityStatusText?: string;
+        availabilityStatusButtonText?: string;
+        availabilityAction?: () => void;
+    }) => React.ReactNode;
+}
+export declare const AvailabilityComponent: React.ForwardRefExoticComponent<ItemDetailsAvailabilityProps & React.RefAttributes<HTMLElement>>;

package/dist/react/ItemDetails.js

@@ -7,6 +7,7 @@ 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 * as CoreItemDetails from './core/ItemDetails.js';
+import { AvailabilityStatus, } from '../services/common-types.js';
 var TestIds;
 (function (TestIds) {
     TestIds["itemName"] = "item-name";
@@ -18,6 +19,7 @@ var TestIds;
     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 }) => {
@@ -120,3 +122,17 @@ export const SpecialRequest = React.forwardRef(({ className, labelClassName, pla
     return (_jsx(CoreItemDetails.SpecialRequest, { children: ({ value, onChange, }) => (_jsxs(AsChildSlot, { ref: ref, asChild: asChild, className: className, onChange: onChange, "data-testid": TestIds.itemSpecialRequest, customElement: children, customElementProps: { label, value }, content: value, ...props, children: [label && _jsx("label", { className: labelClassName, children: label }), _jsx("textarea", { value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, maxLength: maxLength, rows: rows, className: className, children: value })] })) }));
 });
 SpecialRequest.displayName = 'SpecialRequest';
+export const AvailabilityComponent = React.forwardRef(({ asChild, children, textClassName, buttonClassName, availabilityStatusMap, ...rest }, ref) => {
+    return (_jsx(CoreItemDetails.AvailabilityComponent, { availabilityStatusMap: availabilityStatusMap, children: ({ availabilityStatus, availabilityAction, availabilityStatusText, availabilityStatusButtonText, }) => {
+            if (availabilityStatus === AvailabilityStatus.AVAILABLE) {
+                return null;
+            }
+            return (_jsxs(AsChildSlot, { asChild: asChild, "data-testid": TestIds.itemAvailability, customElement: children, customElementProps: {
+                    availabilityStatus,
+                    availabilityStatusText,
+                    availabilityStatusButtonText,
+                    availabilityAction,
+                }, ref: ref, ...rest, children: [_jsx("p", { className: textClassName, children: availabilityStatusText }), availabilityStatusButtonText && availabilityAction && (_jsx("button", { className: buttonClassName, onClick: availabilityAction, children: availabilityStatusButtonText }))] }));
+        } }));
+});
+AvailabilityComponent.displayName = 'AvailabilityComponent';

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { type LineItem } from '@wix/ecom/services';
 import { ItemServiceConfig } from '../../services/item-details-service.js';
 import { EnhancedModifier, EnhancedModifierGroup, EnhancedVariant } from '@wix/headless-restaurants-menus/services';
+import { AvailabilityStatus, AvailabilityStatusMap } from '../../services/common-types.js';
 interface ItemDetailsRootProps {
     children: (props: {
         item: unknown;
@@ -54,4 +55,14 @@ interface ItemDetailsModifiersProps {
     singleSelect?: boolean;
 }
 export declare const ModifiersComponent: React.FC<ItemDetailsModifiersProps>;
+interface ItemDetailsAvailabilityProps {
+    availabilityStatusMap: AvailabilityStatusMap;
+    children: (props: {
+        availabilityStatus: AvailabilityStatus;
+        availabilityAction?: () => void;
+        availabilityStatusText?: string;
+        availabilityStatusButtonText?: string;
+    }) => React.ReactNode;
+}
+export declare const AvailabilityComponent: React.FC<ItemDetailsAvailabilityProps>;
 export {};

package/dist/react/core/ItemDetails.js

@@ -5,6 +5,8 @@ import { createServicesMap } from '@wix/services-manager';
 import { ItemService, ItemServiceDefinition, loadItemServiceConfig, } from '../../services/item-details-service.js';
 import { OLOSettingsServiceDefinition } from '../../services/olo-settings-service.js';
 import { useItemContext, useModifierGroupContext, } from '@wix/headless-restaurants-menus/react';
+import { AvailabilityStatus, } from '../../services/common-types.js';
+import { convertModifierToFormModifier } from '../../services/utils.js';
 export const Root = ({ children, itemDetailsServiceConfig, }) => {
     const service = useService(OLOSettingsServiceDefinition);
     const selectedItem = service.selectedItem?.get();
@@ -87,12 +89,9 @@ export const VariantsComponent = ({ children, }) => {
 export const ModifiersComponent = ({ children, singleSelect, }) => {
     const service = useService(ItemServiceDefinition);
     const { modifierGroup } = useModifierGroupContext();
-    const selectedModifiers = service.selectedModifiers?.get?.() ?? {};
     // Get selected modifier IDs for this group
     const groupId = modifierGroup._id;
-    const groupSelectedModifierIds = groupId
-        ? selectedModifiers[groupId] || []
-        : [];
+    const groupSelectedModifierIds = service.getSelectedModifiers?.(groupId ?? '');
     const onToggle = (modifierId) => {
         if (groupId) {
             service.toggleModifier?.(groupId, modifierId, singleSelect);
@@ -102,9 +101,27 @@ export const ModifiersComponent = ({ children, singleSelect, }) => {
         selectedModifierIds: groupSelectedModifierIds,
         onToggle,
         modifierGroup,
-        modifiers: modifierGroup.modifiers.map((modifier, index) => ({
-            ...modifier,
-            _id: `${modifier._id}~${index}`,
-        })),
+        modifiers: modifierGroup.modifiers.map(convertModifierToFormModifier),
+    });
+};
+export const AvailabilityComponent = ({ children, availabilityStatusMap, }) => {
+    const oloSettingsService = useService(OLOSettingsServiceDefinition);
+    const availabilityDispatchAction = oloSettingsService.availabilityDispatchAction?.get?.();
+    const itemService = useService(ItemServiceDefinition);
+    const availabilityStatus = itemService.availabilityStatus?.get?.() ?? AvailabilityStatus.AVAILABLE;
+    const availabilityStatusWithAction = availabilityStatus === AvailabilityStatus.NEXT_AVAILABILITY_PICKUP ||
+        availabilityStatus === AvailabilityStatus.NEXT_AVAILABILITY_DELIVERY;
+    const availabilityStatusObject = availabilityStatusMap[availabilityStatus];
+    const availabilityStatusButtonText = availabilityStatusWithAction
+        ? availabilityStatusObject
+            ?.buttonText
+        : undefined;
+    return children({
+        availabilityStatus,
+        availabilityAction: availabilityStatusWithAction
+            ? availabilityDispatchAction
+            : undefined,
+        availabilityStatusText: availabilityStatusObject?.text,
+        availabilityStatusButtonText,
     });
 };

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

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

package/dist/services/common-types.js

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

package/dist/services/index.d.ts

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

package/dist/services/index.js

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

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

@@ -2,6 +2,7 @@ import { type Signal } 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';
 type Variant = itemVariants.Variant;
 /**
  * API interface for the Item Detailsservice, providing reactive item data management.
@@ -17,6 +18,7 @@ export interface ItemServiceAPI {
     lineItem: Signal<LineItem>;
     selectedVariant: Signal<Variant | undefined>;
     selectedModifiers: Signal<Record<string, Array<string>>>;
+    availabilityStatus: Signal<AvailabilityStatus>;
     /** Reactive signal indicating if a item is currently being loaded */
     isLoading: Signal<boolean>;
     /** Reactive signal containing any error message, or null if no error */
@@ -29,6 +31,8 @@ export interface ItemServiceAPI {
     updateSelectedVariant: (variant: Variant) => void;
     /** Function to toggle a modifier instance in a specific group */
     toggleModifier: (modifierGroupId: string, modifierId: string, singleSelect?: boolean) => void;
+    /** Function to get the selected modifiers for a specific group */
+    getSelectedModifiers: (modifierGroupId: string) => Array<string>;
 }
 /**
  * Service definition for the Item service.
@@ -52,6 +56,7 @@ export interface ItemServiceConfig {
     item?: EnhancedItem;
     itemId?: string;
     operationId?: string;
+    availabilityStatus?: AvailabilityStatus;
 }
 export declare const ItemService: import("@wix/services-definitions").ServiceFactory<string & {
     __api: ItemServiceAPI;
@@ -156,8 +161,9 @@ export interface NotFoundItemServiceConfigResult {
  * }
  * ```
  */
-export declare function loadItemServiceConfig({ item, operationId, }: {
+export declare function loadItemServiceConfig({ item, operationId, availabilityStatus, }: {
     item: EnhancedItem;
     operationId: string;
+    availabilityStatus?: AvailabilityStatus;
 }): ItemServiceConfig;
 export {};

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

@@ -1,5 +1,7 @@
 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';
 /**
  * Service definition for the Item service.
  * This defines the contract that the ItemService must implement.
@@ -43,6 +45,7 @@ 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 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');
@@ -53,12 +56,7 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
     const initialVariant = priceVariants.length > 0 ? priceVariants[0] : undefined;
     const selectedVariant = signalsService.signal(initialVariant);
     const modifierGroups = config.item?.modifierGroups || [];
-    const initialSelectedModifiers = {};
-    modifierGroups.forEach((group) => {
-        if (group._id) {
-            initialSelectedModifiers[group._id] = [];
-        }
-    });
+    const initialSelectedModifiers = getModifiersInitState(modifierGroups);
     const selectedModifiers = signalsService.signal(initialSelectedModifiers);
     if (config.item) {
         console.log('config.item', config.item);
@@ -103,37 +101,40 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
     const updateSelectedVariant = (variant) => {
         selectedVariant.set(variant);
     };
-    const toggleModifier = (modifierGroupId, modifierId, singleSelect = false) => {
+    const getModifierIds = (modifierGroupId, modifierId, singleSelect = false) => {
         const currentSelectedModifiers = selectedModifiers.get();
         const groupModifierIds = currentSelectedModifiers[modifierGroupId] || [];
         // Check if this modifier is already selected
         const isModifierSelected = groupModifierIds.includes(modifierId);
         if (singleSelect) {
             // Single select behavior: select the modifier, replacing any existing selection
-            selectedModifiers.set({
-                ...currentSelectedModifiers,
-                [modifierGroupId]: [modifierId],
-            });
+            return [modifierId];
         }
         else {
             // Multi-select behavior: toggle the modifier
             if (isModifierSelected) {
                 // Remove the modifier if it exists
                 const updatedModifierIds = groupModifierIds.filter((id) => id !== modifierId);
-                selectedModifiers.set({
-                    ...currentSelectedModifiers,
-                    [modifierGroupId]: updatedModifierIds,
-                });
+                return updatedModifierIds;
             }
             else {
                 // Add the modifier to the existing selection
-                selectedModifiers.set({
-                    ...currentSelectedModifiers,
-                    [modifierGroupId]: [...groupModifierIds, modifierId],
-                });
+                return [...groupModifierIds, modifierId];
             }
         }
     };
+    const toggleModifier = (modifierGroupId, modifierId, singleSelect = false) => {
+        const currentSelectedModifiers = selectedModifiers.get();
+        const modifierIds = getModifierIds(modifierGroupId, modifierId, singleSelect);
+        selectedModifiers.set({
+            ...currentSelectedModifiers,
+            [modifierGroupId]: modifierIds,
+        });
+    };
+    const getSelectedModifiers = (modifierGroupId) => {
+        const currentSelectedModifiers = selectedModifiers.get();
+        return currentSelectedModifiers[modifierGroupId] || [];
+    };
     return {
         item,
         quantity,
@@ -147,6 +148,8 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
         lineItem,
         selectedVariant,
         selectedModifiers,
+        availabilityStatus,
+        getSelectedModifiers,
     };
 });
 /**
@@ -225,8 +228,8 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
  * }
  * ```
  */
-export function loadItemServiceConfig({ item, operationId, }) {
-    return { item, operationId };
+export function loadItemServiceConfig({ item, operationId, availabilityStatus = AvailabilityStatus.AVAILABLE, }) {
+    return { item, operationId, availabilityStatus };
 }
 // try {
 //   if (item === null) {

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

@@ -7,10 +7,12 @@ export interface OLOSettingsServiceAPI {
     selectedItem?: Signal<unknown>;
     isLoading: Signal<boolean>;
     error: Signal<string | null>;
+    availabilityDispatchAction?: Signal<(() => void) | undefined>;
 }
 export interface OLOSettingsServiceConfig {
     operationGroup?: operationGroupsApi.OperationGroup;
     operation?: operationsApi.Operation;
+    availabilityDispatchAction?: () => void;
 }
 export declare const OLOSettingsServiceDefinition: string & {
     __api: OLOSettingsServiceAPI;

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

@@ -5,6 +5,7 @@ import { SignalsServiceDefinition, } from '@wix/services-definitions/core-servic
 export const OLOSettingsServiceDefinition = defineService('oloSettings');
 export const OLOSettingsService = implementService.withConfig()(OLOSettingsServiceDefinition, ({ getService, config }) => {
     const signalsService = getService(SignalsServiceDefinition);
+    const availabilityDispatchAction = signalsService.signal(config.availabilityDispatchAction);
     const operationGroup = signalsService.signal(config.operationGroup);
     const operation = signalsService.signal(config.operation);
     const selectedItem = signalsService.signal(null);
@@ -16,6 +17,7 @@ export const OLOSettingsService = implementService.withConfig()(OLOSettingsServi
         isLoading,
         error,
         selectedItem,
+        availabilityDispatchAction,
     };
 });
 export async function loadOLOSettingsServiceConfig() {

package/dist/services/utils.d.ts

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

package/dist/services/utils.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-restaurants-olo",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "scripts": {
     "build": "npm run build:esm && npm run build:cjs",
@@ -53,7 +53,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@wix/auto_sdk_restaurants_items": "^1.0.48",
     "@wix/headless-media": "0.0.15",
-    "@wix/headless-restaurants-menus": "^0.0.11",
+    "@wix/headless-restaurants-menus": "^0.0.12",
     "@wix/headless-utils": "^0.0.4",
     "@wix/redirects": "^1.0.0",
     "@wix/restaurants": "^1.0.396",