@wix/headless-restaurants-olo 0.0.15 → 0.0.17

package/dist/react/core/ModifierGroup.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext } from 'react';
+import { useService } from '@wix/services-manager-react';
+import { useModifierGroupContext } from '@wix/headless-restaurants-menus/react';
+import { convertModifierToFormModifier, getModifierGroupRuleType, getRuleTypeMapValue, isSingleSelectRule, } from '../../services/utils.js';
+import { ItemServiceDefinition } from '../../services/item-details-service.js';
+const ModifiersContext = createContext(null);
+export function useModifiersContext() {
+    const context = React.useContext(ModifiersContext);
+    if (!context) {
+        throw new Error('useModifiersContext must be used within a ModifierGroupComponent');
+    }
+    return context;
+}
+export const ModifierGroupComponent = ({ children, }) => {
+    const service = useService(ItemServiceDefinition);
+    const { modifierGroup } = useModifierGroupContext();
+    const rule = modifierGroup.rule;
+    const isSingleSelect = Boolean(rule ? isSingleSelectRule(rule) : false);
+    const groupId = modifierGroup._id;
+    const groupSelectedModifierIds = service.getSelectedModifiers?.(groupId ?? '');
+    const onToggle = (modifierId) => {
+        if (groupId) {
+            service.toggleModifier?.(groupId, modifierId, isSingleSelect);
+        }
+    };
+    const ruleType = getModifierGroupRuleType(modifierGroup.rule);
+    const contextValue = {
+        selectedModifierIds: groupSelectedModifierIds,
+        onToggle,
+        modifierGroup,
+        modifiers: modifierGroup.modifiers.map(convertModifierToFormModifier),
+        isSingleSelect,
+        ruleType,
+    };
+    return (_jsx(ModifiersContext.Provider, { value: contextValue, children: children }));
+};
+export const ModifiersComponent = ({ children, }) => {
+    const { selectedModifierIds, onToggle, modifierGroup, modifiers, isSingleSelect, } = useModifiersContext();
+    const singleSelectedModifierId = selectedModifierIds.length > 0 ? (selectedModifierIds[0] ?? '') : '';
+    return children({
+        selectedModifierIds,
+        onToggle,
+        modifierGroup,
+        modifiers,
+        isSingleSelect,
+        singleSelectedModifierId,
+    });
+};
+export const Description = ({ ruleTypeMap, children, }) => {
+    const { ruleType, modifierGroup } = useModifiersContext();
+    const modifierGroupName = modifierGroup.name || '';
+    const description = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroupName, modifierGroup.rule);
+    return children({ description });
+};
+export const GroupError = ({ ruleTypeMap, children, }) => {
+    const service = useService(ItemServiceDefinition);
+    const { ruleType, modifierGroup } = useModifiersContext();
+    const groupId = modifierGroup._id || '';
+    const modifierGroupErrors = service.modifierGroupError?.get() || {};
+    const modifierGroupName = modifierGroup.name || '';
+    let error;
+    if (modifierGroupErrors[groupId]) {
+        error = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroupName, modifierGroup.rule);
+    }
+    return children({ error });
+};

package/dist/react/index.d.ts

@@ -1,4 +1,5 @@
 export * as ItemDetails from './ItemDetails.js';
+export * as ModifierGroup from './ModifierGroup.js';
 export * as ClickableItem from './ClickableItem.js';
 export * as OLO from './OLO.js';
 export * as Settings from './Settings.js';

package/dist/react/index.js

@@ -1,4 +1,5 @@
 export * as ItemDetails from './ItemDetails.js';
+export * as ModifierGroup from './ModifierGroup.js';
 export * as ClickableItem from './ClickableItem.js';
 export * as OLO from './OLO.js';
 export * as Settings from './Settings.js';

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

@@ -1,6 +1,24 @@
 import * as currentCart from '@wix/auto_sdk_ecom_current-cart';
 export type LineItem = currentCart.LineItem;
 export type DescriptionLine = currentCart.DescriptionLine;
+export declare enum RuleType {
+    NO_LIMIT = "NO_LIMIT",
+    CHOOSE_ONE = "CHOOSE_ONE",
+    CHOOSE_X = "CHOOSE_X",
+    CHOOSE_AT_LEAST_ONE = "CHOOSE_AT_LEAST_ONE",
+    CHOOSE_AT_LEAST_X = "CHOOSE_AT_LEAST_X",
+    CHOOSE_UP_TO_X = "CHOOSE_UP_TO_X",
+    CHOOSE_BETWEEN_X_AND_Y = "CHOOSE_BETWEEN_X_AND_Y"
+}
+export interface RuleTypeMap {
+    [RuleType.NO_LIMIT]?: (modifierGroupName: string) => string;
+    [RuleType.CHOOSE_ONE]?: (modifierGroupName: string) => string;
+    [RuleType.CHOOSE_X]?: (modifierGroupName: string, x: number) => string;
+    [RuleType.CHOOSE_AT_LEAST_ONE]?: (modifierGroupName: string) => string;
+    [RuleType.CHOOSE_AT_LEAST_X]?: (modifierGroupName: string, x: number) => string;
+    [RuleType.CHOOSE_UP_TO_X]?: (modifierGroupName: string, x: number) => string;
+    [RuleType.CHOOSE_BETWEEN_X_AND_Y]?: (modifierGroupName: string, x: number, y: number) => string;
+}
 export declare enum AvailabilityStatus {
     AVAILABLE = 0,
     NOT_AVAILABLE = 1,

package/dist/services/common-types.js

@@ -1,3 +1,13 @@
+export var RuleType;
+(function (RuleType) {
+    RuleType["NO_LIMIT"] = "NO_LIMIT";
+    RuleType["CHOOSE_ONE"] = "CHOOSE_ONE";
+    RuleType["CHOOSE_X"] = "CHOOSE_X";
+    RuleType["CHOOSE_AT_LEAST_ONE"] = "CHOOSE_AT_LEAST_ONE";
+    RuleType["CHOOSE_AT_LEAST_X"] = "CHOOSE_AT_LEAST_X";
+    RuleType["CHOOSE_UP_TO_X"] = "CHOOSE_UP_TO_X";
+    RuleType["CHOOSE_BETWEEN_X_AND_Y"] = "CHOOSE_BETWEEN_X_AND_Y";
+})(RuleType || (RuleType = {}));
 export var AvailabilityStatus;
 (function (AvailabilityStatus) {
     AvailabilityStatus[AvailabilityStatus["AVAILABLE"] = 0] = "AVAILABLE";

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

@@ -23,6 +23,8 @@ export interface ItemServiceAPI {
     isLoading: Signal<boolean>;
     /** Reactive signal containing any error message, or null if no error */
     error: Signal<string | null>;
+    /** Reactive signal containing error state for each modifier group */
+    modifierGroupError: Signal<Record<string, boolean>>;
     /** Function to update the quantity of the item */
     updateQuantity: (quantity: number) => void;
     /** Function to update the special request of the item */

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

@@ -58,7 +58,13 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
     const modifierGroups = config.item?.modifierGroups || [];
     const initialSelectedModifiers = getModifiersInitState(modifierGroups);
     const selectedModifiers = signalsService.signal(initialSelectedModifiers);
-    console.log('config.item', config.item);
+    const initialModifierGroupError = modifierGroups.reduce((acc, group) => {
+        if (group._id) {
+            acc[group._id] = false;
+        }
+        return acc;
+    }, {});
+    const modifierGroupError = signalsService.signal(initialModifierGroupError);
     if (config.item) {
         lineItem.set({
             quantity: quantity.get(),
@@ -150,6 +156,7 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
         selectedModifiers,
         availabilityStatus,
         getSelectedModifiers,
+        modifierGroupError,
     };
 });
 /**

package/dist/services/utils.d.ts

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

package/dist/services/utils.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-restaurants-olo",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -40,6 +40,7 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitest/ui": "^3.1.4",
+    "@wix/headless-components": "0.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.34.1",
@@ -55,8 +56,9 @@
     "@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.27",
     "@wix/headless-media": "0.0.17",
-    "@wix/headless-restaurants-menus": "0.0.19",
+    "@wix/headless-restaurants-menus": "0.0.20",
     "@wix/headless-utils": "0.0.7",
     "@wix/redirects": "^1.0.0",
     "@wix/restaurants": "^1.0.396",
@@ -64,9 +66,6 @@
     "@wix/services-definitions": "^0.1.4",
     "@wix/services-manager-react": "^0.1.26"
   },
-  "peerDependencies": {
-    "@wix/headless-components": "^0.0.0"
-  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -77,5 +76,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "71ec66f326eb20964a9b1df3e46c9cad2246603e42239226a8cacaf6"
+  "falconPackageHash": "4642f5bdaedb6d472e41409ca88d2be3914e062b018972f37b44ea55"
 }