@wix/headless-restaurants-olo 0.0.6 → 0.0.7

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

@@ -157,8 +157,8 @@ export interface ItemDetailsModifierGroupsProps {
 }
 export declare const ModifierGroups: React.ForwardRefExoticComponent<ItemDetailsModifierGroupsProps & React.RefAttributes<HTMLElement>>;
 /**
- * Wrapper component for Item.VariantsRepeater.
- * Renders the variants for the item using the headless component.
+ * Wrapper component for CoreItemDetails.VariantsComponent.
+ * Renders the variants for the item using Radix UI RadioGroup.
  *
  * @component
  * @example
@@ -171,11 +171,16 @@ export declare const ModifierGroups: React.ForwardRefExoticComponent<ItemDetails
 export interface ItemDetailsVariantsProps {
     children?: AsChildChildren<{
         variant: any;
+        variants: any[];
+        hasVariants: boolean;
+        selectedVariantId?: string;
+        onVariantChange?: (variantId: string) => void;
     }>;
     className?: string;
     asChild?: boolean;
     variantNameClassName?: string;
     variantPriceClassName?: string;
+    emptyState?: React.ReactNode;
 }
 export declare const Variants: React.ForwardRefExoticComponent<ItemDetailsVariantsProps & React.RefAttributes<HTMLElement>>;
 export interface AddToCartActionProps {

package/cjs/dist/react/ItemDetails.js

@@ -3,7 +3,8 @@ import React from 'react';
 import { Commerce } from '@wix/ecom/components';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { Quantity as QuantityComponent } from '@wix/headless-components/react';
-import { Item, Label, Modifier, ModifierGroup, Variant, } from '@wix/restaurants/components';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Item, Label, Modifier, ModifierGroup, } from '@wix/headless-restaurants-menus/react';
 import * as CoreItemDetails from './core/ItemDetails.js';
 var TestIds;
 (function (TestIds) {
@@ -43,8 +44,20 @@ Labels.displayName = 'ItemDetails.Labels';
 export const ModifierGroups = React.forwardRef(({ children, className, asChild, modifierNameClassName, modifierPriceClassName, ...rest }) => {
     return (_jsx(Item.ModifierGroupsRepeater, { ...rest, children: _jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifierGroups, className: className, customElement: children, children: _jsxs(ModifierGroup.ModifiersRepeater, { children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] }) }) }));
 });
-export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, ...rest }) => {
-    return (_jsx(Item.VariantsRepeater, { ...rest, children: _jsxs(AsChildSlot, { asChild: asChild, testId: TestIds.itemVariants, className: className, customElement: children, children: [_jsx(Variant.Name, { className: variantNameClassName }), _jsx(Variant.Price, { className: variantPriceClassName })] }) }));
+export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, emptyState, }, ref) => {
+    return (_jsx(CoreItemDetails.VariantsComponent, { children: ({ variants, hasVariants, selectedVariantId, onVariantChange }) => {
+            if (!hasVariants) {
+                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 ||
+                                        variant.priceInfo?.price ||
+                                        '' })] }) }, variant._id))) }) }));
+        } }));
 });
 Variants.displayName = 'ItemDetails.Variants';
 ModifierGroups.displayName = 'ItemDetails.ModifierGroups';

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

@@ -1,4 +1,4 @@
-import { useItemContext, useMenuContext, useSectionContext, } from '@wix/restaurants/components';
+import { useItemContext, useMenuContext, useSectionContext, } from '@wix/headless-restaurants-menus/react';
 import { useService } from '@wix/services-manager-react';
 import { OLOSettingsServiceDefinition } from '@wix/headless-restaurants-olo/services';
 // import { OLOSettingsServiceDefinition } from "../../services/OLOSettingsService";

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

@@ -15,13 +15,6 @@ interface ItemDetailsModifiersRepeaterProps {
     }) => React.ReactNode;
 }
 export declare const ModifiersRepeater: React.FC<ItemDetailsModifiersRepeaterProps>;
-interface ItemDetailsVariantsRepeaterProps {
-    children: (props: {
-        variants: [];
-        hasVariants: boolean;
-    }) => React.ReactNode;
-}
-export declare const VariantsRepeater: React.FC<ItemDetailsVariantsRepeaterProps>;
 interface ItemDetailsSpecialRequestProps {
     children: (props: {
         value: string;
@@ -47,4 +40,14 @@ interface ItemDetailsQuantityProps {
     }) => React.ReactNode;
 }
 export declare const QuantityComponent: React.FC<ItemDetailsQuantityProps>;
+interface ItemDetailsVariantsProps {
+    children: (props: {
+        variants: any[];
+        hasVariants: boolean;
+        selectedVariantId?: string;
+        onVariantChange?: (variantId: string) => void;
+        selectedVariant?: any;
+    }) => React.ReactNode;
+}
+export declare const VariantsComponent: React.FC<ItemDetailsVariantsProps>;
 export {};

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

@@ -4,6 +4,7 @@ import { useService, WixServices } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
 import { ItemService, ItemServiceDefinition, loadItemServiceConfig, } from '../../services/item-details-service.js';
 import { OLOSettingsServiceDefinition } from '../../services/olo-settings-service.js';
+import { useItemContext } from '@wix/headless-restaurants-menus/react';
 export const Root = ({ children, itemDetailsServiceConfig, }) => {
     const service = useService(OLOSettingsServiceDefinition);
     const selectedItem = service.selectedItem?.get();
@@ -27,14 +28,6 @@ export const ModifiersRepeater = ({ children, }) => {
     const hasModifiers = modifiers.length > 0;
     return children({ modifiers, hasModifiers });
 };
-export const VariantsRepeater = ({ children, }) => {
-    const service = useService(ItemServiceDefinition);
-    const item = service.item?.get();
-    // TODO: Check if variants exist on item type - might be in a different property
-    const variants = item?.variants || [];
-    const hasVariants = variants.length > 0;
-    return children({ variants, hasVariants });
-};
 export const SpecialRequest = ({ children, }) => {
     const [value, setValue] = useState('');
     const service = useService(ItemServiceDefinition);
@@ -77,3 +70,25 @@ export const QuantityComponent = ({ children, }) => {
         onValueChange,
     });
 };
+export const VariantsComponent = ({ children, }) => {
+    const service = useService(ItemServiceDefinition);
+    const { item } = useItemContext();
+    const selectedVariant = service.selectedVariant?.get?.();
+    // Get variants from item context
+    const variants = item?.priceVariants || [];
+    const hasVariants = variants.length > 0;
+    const selectedVariantId = selectedVariant?._id ?? undefined;
+    const onVariantChange = (variantId) => {
+        const variant = variants.find((v) => v._id === variantId);
+        if (variant) {
+            service.updateSelectedVariant?.(variant);
+        }
+    };
+    return children({
+        variants,
+        hasVariants,
+        selectedVariantId,
+        onVariantChange,
+        selectedVariant,
+    });
+};

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

@@ -1,6 +1,8 @@
 import { type Signal } from '@wix/services-definitions/core-services/signals';
 import * as items from '@wix/auto_sdk_restaurants_items';
 import { type LineItem } from '@wix/ecom/services';
+import { itemVariants } from '@wix/restaurants';
+type Variant = itemVariants.Variant;
 /**
  * API interface for the Item Detailsservice, providing reactive item data management.
  * This service handles loading and managing a single item's data, loading state, and errors.
@@ -13,6 +15,7 @@ export interface ItemServiceAPI {
     quantity: Signal<number>;
     specialRequest: Signal<string>;
     lineItem: Signal<LineItem>;
+    selectedVariant: Signal<Variant | undefined>;
     /** Reactive signal indicating if a item is currently being loaded */
     isLoading: Signal<boolean>;
     /** Reactive signal containing any error message, or null if no error */
@@ -21,6 +24,8 @@ export interface ItemServiceAPI {
     updateQuantity: (quantity: number) => void;
     /** Function to update the special request of the item */
     updateSpecialRequest: (specialRequest: string) => void;
+    /** Function to update the selected variant of the item */
+    updateSelectedVariant: (variant: Variant) => void;
 }
 /**
  * Service definition for the Item service.
@@ -152,3 +157,4 @@ export declare function loadItemServiceConfig({ item, operationId, }: {
     item: any;
     operationId: string;
 }): ItemServiceConfig;
+export {};

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

@@ -49,6 +49,9 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
     const quantity = signalsService.signal(1);
     const specialRequest = signalsService.signal('');
     const lineItem = signalsService.signal({});
+    const priceVariants = config.item?.priceVariants || [];
+    const initialVariant = priceVariants.length > 0 ? priceVariants[0] : undefined;
+    const selectedVariant = signalsService.signal(initialVariant);
     if (config.item) {
         console.log('config.item', config.item);
         lineItem.set({
@@ -89,15 +92,20 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
             },
         });
     };
+    const updateSelectedVariant = (variant) => {
+        selectedVariant.set(variant);
+    };
     return {
         item,
         quantity,
         updateQuantity,
         updateSpecialRequest,
+        updateSelectedVariant,
         isLoading,
         error,
         specialRequest,
         lineItem,
+        selectedVariant,
     };
 });
 /**

package/dist/react/ItemDetails.d.ts

@@ -157,8 +157,8 @@ export interface ItemDetailsModifierGroupsProps {
 }
 export declare const ModifierGroups: React.ForwardRefExoticComponent<ItemDetailsModifierGroupsProps & React.RefAttributes<HTMLElement>>;
 /**
- * Wrapper component for Item.VariantsRepeater.
- * Renders the variants for the item using the headless component.
+ * Wrapper component for CoreItemDetails.VariantsComponent.
+ * Renders the variants for the item using Radix UI RadioGroup.
  *
  * @component
  * @example
@@ -171,11 +171,16 @@ export declare const ModifierGroups: React.ForwardRefExoticComponent<ItemDetails
 export interface ItemDetailsVariantsProps {
     children?: AsChildChildren<{
         variant: any;
+        variants: any[];
+        hasVariants: boolean;
+        selectedVariantId?: string;
+        onVariantChange?: (variantId: string) => void;
     }>;
     className?: string;
     asChild?: boolean;
     variantNameClassName?: string;
     variantPriceClassName?: string;
+    emptyState?: React.ReactNode;
 }
 export declare const Variants: React.ForwardRefExoticComponent<ItemDetailsVariantsProps & React.RefAttributes<HTMLElement>>;
 export interface AddToCartActionProps {

package/dist/react/ItemDetails.js

@@ -3,7 +3,8 @@ import React from 'react';
 import { Commerce } from '@wix/ecom/components';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { Quantity as QuantityComponent } from '@wix/headless-components/react';
-import { Item, Label, Modifier, ModifierGroup, Variant, } from '@wix/restaurants/components';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Item, Label, Modifier, ModifierGroup, } from '@wix/headless-restaurants-menus/react';
 import * as CoreItemDetails from './core/ItemDetails.js';
 var TestIds;
 (function (TestIds) {
@@ -43,8 +44,20 @@ Labels.displayName = 'ItemDetails.Labels';
 export const ModifierGroups = React.forwardRef(({ children, className, asChild, modifierNameClassName, modifierPriceClassName, ...rest }) => {
     return (_jsx(Item.ModifierGroupsRepeater, { ...rest, children: _jsx(AsChildSlot, { asChild: asChild, testId: TestIds.itemModifierGroups, className: className, customElement: children, children: _jsxs(ModifierGroup.ModifiersRepeater, { children: [_jsx(Modifier.Name, { className: modifierNameClassName }), _jsx(Modifier.Price, { className: modifierPriceClassName })] }) }) }));
 });
-export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, ...rest }) => {
-    return (_jsx(Item.VariantsRepeater, { ...rest, children: _jsxs(AsChildSlot, { asChild: asChild, testId: TestIds.itemVariants, className: className, customElement: children, children: [_jsx(Variant.Name, { className: variantNameClassName }), _jsx(Variant.Price, { className: variantPriceClassName })] }) }));
+export const Variants = React.forwardRef(({ children, className, asChild, variantNameClassName, variantPriceClassName, emptyState, }, ref) => {
+    return (_jsx(CoreItemDetails.VariantsComponent, { children: ({ variants, hasVariants, selectedVariantId, onVariantChange }) => {
+            if (!hasVariants) {
+                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 ||
+                                        variant.priceInfo?.price ||
+                                        '' })] }) }, variant._id))) }) }));
+        } }));
 });
 Variants.displayName = 'ItemDetails.Variants';
 ModifierGroups.displayName = 'ItemDetails.ModifierGroups';

package/dist/react/core/ClickableItem.js

@@ -1,4 +1,4 @@
-import { useItemContext, useMenuContext, useSectionContext, } from '@wix/restaurants/components';
+import { useItemContext, useMenuContext, useSectionContext, } from '@wix/headless-restaurants-menus/react';
 import { useService } from '@wix/services-manager-react';
 import { OLOSettingsServiceDefinition } from '@wix/headless-restaurants-olo/services';
 // import { OLOSettingsServiceDefinition } from "../../services/OLOSettingsService";

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

@@ -15,13 +15,6 @@ interface ItemDetailsModifiersRepeaterProps {
     }) => React.ReactNode;
 }
 export declare const ModifiersRepeater: React.FC<ItemDetailsModifiersRepeaterProps>;
-interface ItemDetailsVariantsRepeaterProps {
-    children: (props: {
-        variants: [];
-        hasVariants: boolean;
-    }) => React.ReactNode;
-}
-export declare const VariantsRepeater: React.FC<ItemDetailsVariantsRepeaterProps>;
 interface ItemDetailsSpecialRequestProps {
     children: (props: {
         value: string;
@@ -47,4 +40,14 @@ interface ItemDetailsQuantityProps {
     }) => React.ReactNode;
 }
 export declare const QuantityComponent: React.FC<ItemDetailsQuantityProps>;
+interface ItemDetailsVariantsProps {
+    children: (props: {
+        variants: any[];
+        hasVariants: boolean;
+        selectedVariantId?: string;
+        onVariantChange?: (variantId: string) => void;
+        selectedVariant?: any;
+    }) => React.ReactNode;
+}
+export declare const VariantsComponent: React.FC<ItemDetailsVariantsProps>;
 export {};

package/dist/react/core/ItemDetails.js

@@ -4,6 +4,7 @@ import { useService, WixServices } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
 import { ItemService, ItemServiceDefinition, loadItemServiceConfig, } from '../../services/item-details-service.js';
 import { OLOSettingsServiceDefinition } from '../../services/olo-settings-service.js';
+import { useItemContext } from '@wix/headless-restaurants-menus/react';
 export const Root = ({ children, itemDetailsServiceConfig, }) => {
     const service = useService(OLOSettingsServiceDefinition);
     const selectedItem = service.selectedItem?.get();
@@ -27,14 +28,6 @@ export const ModifiersRepeater = ({ children, }) => {
     const hasModifiers = modifiers.length > 0;
     return children({ modifiers, hasModifiers });
 };
-export const VariantsRepeater = ({ children, }) => {
-    const service = useService(ItemServiceDefinition);
-    const item = service.item?.get();
-    // TODO: Check if variants exist on item type - might be in a different property
-    const variants = item?.variants || [];
-    const hasVariants = variants.length > 0;
-    return children({ variants, hasVariants });
-};
 export const SpecialRequest = ({ children, }) => {
     const [value, setValue] = useState('');
     const service = useService(ItemServiceDefinition);
@@ -77,3 +70,25 @@ export const QuantityComponent = ({ children, }) => {
         onValueChange,
     });
 };
+export const VariantsComponent = ({ children, }) => {
+    const service = useService(ItemServiceDefinition);
+    const { item } = useItemContext();
+    const selectedVariant = service.selectedVariant?.get?.();
+    // Get variants from item context
+    const variants = item?.priceVariants || [];
+    const hasVariants = variants.length > 0;
+    const selectedVariantId = selectedVariant?._id ?? undefined;
+    const onVariantChange = (variantId) => {
+        const variant = variants.find((v) => v._id === variantId);
+        if (variant) {
+            service.updateSelectedVariant?.(variant);
+        }
+    };
+    return children({
+        variants,
+        hasVariants,
+        selectedVariantId,
+        onVariantChange,
+        selectedVariant,
+    });
+};

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

@@ -1,6 +1,8 @@
 import { type Signal } from '@wix/services-definitions/core-services/signals';
 import * as items from '@wix/auto_sdk_restaurants_items';
 import { type LineItem } from '@wix/ecom/services';
+import { itemVariants } from '@wix/restaurants';
+type Variant = itemVariants.Variant;
 /**
  * API interface for the Item Detailsservice, providing reactive item data management.
  * This service handles loading and managing a single item's data, loading state, and errors.
@@ -13,6 +15,7 @@ export interface ItemServiceAPI {
     quantity: Signal<number>;
     specialRequest: Signal<string>;
     lineItem: Signal<LineItem>;
+    selectedVariant: Signal<Variant | undefined>;
     /** Reactive signal indicating if a item is currently being loaded */
     isLoading: Signal<boolean>;
     /** Reactive signal containing any error message, or null if no error */
@@ -21,6 +24,8 @@ export interface ItemServiceAPI {
     updateQuantity: (quantity: number) => void;
     /** Function to update the special request of the item */
     updateSpecialRequest: (specialRequest: string) => void;
+    /** Function to update the selected variant of the item */
+    updateSelectedVariant: (variant: Variant) => void;
 }
 /**
  * Service definition for the Item service.
@@ -152,3 +157,4 @@ export declare function loadItemServiceConfig({ item, operationId, }: {
     item: any;
     operationId: string;
 }): ItemServiceConfig;
+export {};

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

@@ -49,6 +49,9 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
     const quantity = signalsService.signal(1);
     const specialRequest = signalsService.signal('');
     const lineItem = signalsService.signal({});
+    const priceVariants = config.item?.priceVariants || [];
+    const initialVariant = priceVariants.length > 0 ? priceVariants[0] : undefined;
+    const selectedVariant = signalsService.signal(initialVariant);
     if (config.item) {
         console.log('config.item', config.item);
         lineItem.set({
@@ -89,15 +92,20 @@ export const ItemService = implementService.withConfig()(ItemServiceDefinition,
             },
         });
     };
+    const updateSelectedVariant = (variant) => {
+        selectedVariant.set(variant);
+    };
     return {
         item,
         quantity,
         updateQuantity,
         updateSpecialRequest,
+        updateSelectedVariant,
         isLoading,
         error,
         specialRequest,
         lineItem,
+        selectedVariant,
     };
 });
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-restaurants-olo",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "scripts": {
     "build": "npm run build:esm && npm run build:cjs",
@@ -48,9 +48,11 @@
     "vitest": "^3.1.4"
   },
   "dependencies": {
+    "@radix-ui/react-radio-group": "^1.1.3",
     "@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.10",
     "@wix/headless-utils": "^0.0.4",
     "@wix/redirects": "^1.0.0",
     "@wix/restaurants": "^1.0.396",