@wix/headless-restaurants-olo 0.0.2 → 0.0.5

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import { OLOSettingsServiceConfig } from '../../services/olo-settings-service.js';
+import { ItemServiceConfig } from '../../services/item-details-service.js';
+interface CoreOLORootProps {
+    /** The ID of the item to load */
+    itemId?: string;
+    /** Pre-loaded item service config (optional) */
+    itemServiceConfig?: ItemServiceConfig;
+    /** Pre-loaded cart service config (optional) */
+    cartServiceConfig?: any;
+    /** Pre-loaded OLO settings service config (optional) */
+    oloSettingsServiceConfig?: OLOSettingsServiceConfig;
+    /** Children render prop that receives the services manager state */
+    children: React.ReactNode;
+}
+/**
+ * Core OLO Root component that sets up service management
+ * Provides ItemService and CurrentCartService to child components
+ *
+ * @example
+ * ```tsx
+ * <CoreOLO.Root itemId="item-123">
+ *   {({ servicesManager, isLoading, hasServices }) => (
+ *     hasServices ? (
+ *       <ServicesManagerProvider servicesManager={servicesManager}>
+ *         <ItemDetailsComponents />
+ *       </ServicesManagerProvider>
+ *     ) : (
+ *       <LoadingSpinner />
+ *     )
+ *   )}
+ * </CoreOLO.Root>
+ * ```
+ */
+export declare const Root: React.FC<CoreOLORootProps>;
+interface CoreOLOProviderProps {
+    /** The ID of the item to load */
+    itemId?: string;
+    /** Pre-loaded item service config (optional) */
+    itemServiceConfig?: ItemServiceConfig;
+    /** Pre-loaded cart service config (optional) */
+    cartServiceConfig?: any;
+    /** Pre-loaded OLO settings service config (optional) */
+    oloSettingsServiceConfig?: OLOSettingsServiceConfig;
+    /** Loading component to show while services are initializing */
+    loading?: React.ReactNode;
+    /** Error component to show if service initialization fails */
+    error?: (error: string) => React.ReactNode;
+    /** Children that will receive the services context */
+    children: React.ReactNode;
+}
+/**
+ * Convenience wrapper that combines Root with ServicesManagerProvider
+ * Automatically provides services context to children
+ *
+ * @example
+ * ```tsx
+ * <CoreOLO.Provider itemId="item-123">
+ *   <ItemDetailsComponents />
+ * </CoreOLO.Provider>
+ * ```
+ */
+export declare const Provider: React.FC<CoreOLOProviderProps>;
+interface CoreOLOItemDetailsProps {
+    /** The ID of the item to load */
+    itemId: string;
+    /** Pre-loaded configurations (optional) */
+    configs?: {
+        itemServiceConfig?: ItemServiceConfig;
+        cartServiceConfig?: any;
+    };
+    /** Loading component */
+    loading?: React.ReactNode;
+    /** Error component */
+    error?: (error: string) => React.ReactNode;
+    /** Children that will have access to item services */
+    children: React.ReactNode;
+}
+/**
+ * Specialized wrapper for item details that ensures ItemService is available
+ *
+ * @example
+ * ```tsx
+ * <CoreOLO.ItemDetails itemId="item-123">
+ *   <ItemDetailsPrimitive.Root>
+ *     {({ item }) => <div>{item.name}</div>}
+ *   </ItemDetailsPrimitive.Root>
+ * </CoreOLO.ItemDetails>
+ * ```
+ */
+export declare const ItemDetails: React.FC<CoreOLOItemDetailsProps>;
+export {};

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

@@ -0,0 +1,122 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { createServicesMap } from '@wix/services-manager';
+import { WixServices } from '@wix/services-manager-react';
+// import { ItemService, ItemServiceDefinition, loadItemServiceConfig } from '@/components/restaurants-olo/services/itemDetailsService';
+import { OLOSettingsService, OLOSettingsServiceDefinition, } from '@wix/headless-restaurants-olo/services';
+/**
+ * Core OLO Root component that sets up service management
+ * Provides ItemService and CurrentCartService to child components
+ *
+ * @example
+ * ```tsx
+ * <CoreOLO.Root itemId="item-123">
+ *   {({ servicesManager, isLoading, hasServices }) => (
+ *     hasServices ? (
+ *       <ServicesManagerProvider servicesManager={servicesManager}>
+ *         <ItemDetailsComponents />
+ *       </ServicesManagerProvider>
+ *     ) : (
+ *       <LoadingSpinner />
+ *     )
+ *   )}
+ * </CoreOLO.Root>
+ * ```
+ */
+export const Root = ({ itemId, itemServiceConfig, cartServiceConfig, oloSettingsServiceConfig, children, }) => {
+    // const [servicesManager, setServicesManager] = useState<ServicesManager | null>(null);
+    // const [isLoading, setIsLoading] = useState(true);
+    // const [error, setError] = useState<string | undefined>();
+    useEffect(() => {
+        // const initializeServices = async () => {
+        //   setIsLoading(true);
+        //   setError(undefined);
+        //   try {
+        //     // Load configurations if not provided
+        //     const loadedConfigs = await Promise.all([
+        //       cartServiceConfig || loadCurrentCartServiceConfig(),
+        //       itemServiceConfig || (loadItemServiceConfig(itemId))
+        //     ]);
+        //     const [currentCartServiceConfig, itemServiceConfigResult] = loadedConfigs;
+        //     // Handle item service config result (discriminated union)
+        //     if (itemServiceConfigResult && 'type' in itemServiceConfigResult) {
+        //       if (itemServiceConfigResult.type === 'notFound') {
+        //         setError('Item not found');
+        //         return;
+        //       }
+        //       // Use the config from the success result
+        //       const finalItemServiceConfig = itemServiceConfigResult.config;
+        //       // Create services manager with both services
+        //       const manager = createServicesManager(
+        //         createServicesMap()
+        //           .addService(CurrentCartServiceDefinition, CurrentCartService, currentCartServiceConfig)
+        //         //   .addService(ItemServiceDefinition, ItemService, finalItemServiceConfig)
+        //       );
+        //       setServicesManager(manager);
+        //     } else if (itemServiceConfigResult) {
+        //       // Direct config provided
+        //       const manager = createServicesManager(
+        //         createServicesMap()
+        //           .addService(CurrentCartServiceDefinition, CurrentCartService, currentCartServiceConfig)
+        //         //   .addService(ItemServiceDefinition, ItemService, itemServiceConfigResult)
+        //       );
+        //       setServicesManager(manager);
+        //     } else {
+        //       // Only cart service, no item service
+        //       const manager = createServicesManager(
+        //         createServicesMap()
+        //           .addService(CurrentCartServiceDefinition, CurrentCartService, currentCartServiceConfig)
+        //       );
+        //       setServicesManager(manager);
+        //     }
+        //   } catch (err) {
+        //     console.error('Failed to initialize services:', err);
+        //     setError('Failed to initialize services');
+        //   } finally {
+        //     setIsLoading(false);
+        //   }
+        // };
+        // initializeServices();
+    }, [itemId, itemServiceConfig, cartServiceConfig]);
+    // const hasServices = Boolean(servicesManager);
+    //   return children({
+    //     servicesManager,
+    //     isLoading,
+    //     error,
+    //     hasServices
+    //   });
+    console.log('oloSettingsServiceConfig', oloSettingsServiceConfig);
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(OLOSettingsServiceDefinition, OLOSettingsService, oloSettingsServiceConfig), children: children }));
+};
+/**
+ * Convenience wrapper that combines Root with ServicesManagerProvider
+ * Automatically provides services context to children
+ *
+ * @example
+ * ```tsx
+ * <CoreOLO.Provider itemId="item-123">
+ *   <ItemDetailsComponents />
+ * </CoreOLO.Provider>
+ * ```
+ */
+export const Provider = ({ itemId, itemServiceConfig, cartServiceConfig, oloSettingsServiceConfig, 
+// loading = <div>Loading services...</div>,
+// error: errorComponent = (error: string) => <div>Error: {error}</div>,
+children, }) => {
+    return (_jsx(Root, { itemId: itemId, itemServiceConfig: itemServiceConfig, cartServiceConfig: cartServiceConfig, oloSettingsServiceConfig: oloSettingsServiceConfig, children: children }));
+};
+/**
+ * Specialized wrapper for item details that ensures ItemService is available
+ *
+ * @example
+ * ```tsx
+ * <CoreOLO.ItemDetails itemId="item-123">
+ *   <ItemDetailsPrimitive.Root>
+ *     {({ item }) => <div>{item.name}</div>}
+ *   </ItemDetailsPrimitive.Root>
+ * </CoreOLO.ItemDetails>
+ * ```
+ */
+export const ItemDetails = ({ itemId, configs, loading, error, children, }) => {
+    return (_jsx(Provider, { itemId: itemId, itemServiceConfig: configs?.itemServiceConfig, cartServiceConfig: configs?.cartServiceConfig, loading: loading, error: error, children: children }));
+};

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

@@ -1 +1,3 @@
 export * as CoreItemDetails from './ItemDetails.js';
+export { CoreClickableItem } from './ClickableItem.js';
+export * as CoreOLO from './OLO.js';

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

@@ -1 +1,3 @@
 export * as CoreItemDetails from './ItemDetails.js';
+export { CoreClickableItem } from './ClickableItem.js';
+export * as CoreOLO from './OLO.js';

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

@@ -1 +1,3 @@
-export * from './ItemDetails.js';
+export * as ItemDetails from './ItemDetails.js';
+export * as ClickableItem from './ClickableItem.js';
+export * as OLO from './OLO.js';

package/cjs/dist/react/index.js

@@ -1 +1,3 @@
-export * from './ItemDetails.js';
+export * as ItemDetails from './ItemDetails.js';
+export * as ClickableItem from './ClickableItem.js';
+export * as OLO from './OLO.js';

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

@@ -9,7 +9,7 @@ import { type LineItem } from '@wix/ecom/services';
  */
 export interface ItemServiceAPI {
     /** Reactive signal containing the current item data */
-    item: Signal<items.Item>;
+    item?: Signal<items.Item | undefined>;
     quantity: Signal<number>;
     specialRequest: Signal<string>;
     lineItem: Signal<LineItem>;
@@ -41,7 +41,7 @@ export declare const ItemServiceDefinition: string & {
  */
 export interface ItemServiceConfig {
     /** The initial item data to configure the service with */
-    item: items.Item;
+    item?: items.Item;
     itemId?: string;
     operationId?: string;
 }

package/dist/react/ClickableItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare function ClickableItem({ onItemSelected, children, }: {
+    onItemSelected: (item: any) => void;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const Actions: {
+    Select: typeof ClickableItem;
+};
+export {};

package/dist/react/ClickableItem.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CoreClickableItem } from './core/ClickableItem.js';
+function ClickableItem({ onItemSelected, children, }) {
+    const selectItem = (item, callback) => {
+        callback();
+        onItemSelected(item);
+    };
+    return (_jsx(CoreClickableItem, { children: ({ item, itemSelected }) => (_jsx("div", { onClick: () => {
+                selectItem(item, itemSelected);
+            }, children: children })) }));
+}
+export const Actions = {
+    Select: ClickableItem,
+};

package/dist/react/ItemDetails.d.ts

@@ -21,7 +21,7 @@ import { ItemServiceConfig } from '../services/item-details-service.js';
 export interface RootProps {
     asChild?: boolean;
     children: React.ReactNode;
-    itemDetailsServiceConfig: ItemServiceConfig;
+    itemDetailsServiceConfig?: ItemServiceConfig;
 }
 export declare const Root: ({ children, itemDetailsServiceConfig }: RootProps) => import("react/jsx-runtime").JSX.Element;
 /**
@@ -36,7 +36,6 @@ export declare const Root: ({ children, itemDetailsServiceConfig }: RootProps) =
  * </ItemDetails.Name>
  * ```
  */
-export declare const Name: React.ForwardRefExoticComponent<ItemDetailsNameProps & React.RefAttributes<HTMLElement>>;
 export interface ItemDetailsNameProps {
     asChild?: boolean;
     /** Custom render function when using asChild */
@@ -46,6 +45,139 @@ export interface ItemDetailsNameProps {
     /** CSS classes to apply to the default element */
     className?: string;
 }
+export declare const Name: React.ForwardRefExoticComponent<ItemDetailsNameProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Displays the item image with customizable rendering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ItemDetails.Image />
+ * <ItemDetails.Image asChild>
+ *   <img className="rounded" />
+ * </ItemDetails.Image>
+ * ```
+ */
+export interface ItemDetailsImageProps {
+    asChild?: boolean;
+    /**
+     * Custom render function when using asChild.
+     * Receives an object with:
+     * - hasImage: boolean - whether the item has an image
+     * - image: string - the actual image element (WixMediaImage)
+     * - altText: string - the alt text for the image
+     */
+    children?: (props: {
+        hasImage: boolean;
+        image?: string;
+        altText: string;
+    }) => React.ReactNode;
+    /** CSS classes to apply to the default element */
+    className?: string;
+}
+export declare const Image: React.ForwardRefExoticComponent<ItemDetailsImageProps & 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 Item.LabelsRepeater.
+ * Renders the labels for the item using the headless component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ItemDetails.Labels>
+ *   {(label) => <span>{label.name}</span>}
+ * </ItemDetails.Labels>
+ * ```
+ */
+export interface ItemDetailsLabelsProps {
+    children?: AsChildChildren<{
+        label: string;
+    }>;
+    className?: string;
+    asChild?: boolean;
+    iconClassName?: string;
+    nameClassName?: string;
+}
+export declare const Labels: React.ForwardRefExoticComponent<ItemDetailsLabelsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Wrapper component for Item.ModifierGroupsRepeater.
+ * Renders the modifier groups for the item using the headless component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ItemDetails.ModifierGroups>
+ *   {(modifierGroup) => <span>{modifierGroup.name}</span>}
+ * </ItemDetails.ModifierGroups>
+ * ```
+ */
+export interface ItemDetailsModifierGroupsProps {
+    children?: AsChildChildren<{
+        modifierGroup: any;
+    }>;
+    className?: string;
+    asChild?: boolean;
+    modifierNameClassName?: string;
+    modifierPriceClassName?: string;
+}
+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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ItemDetails.Variants>
+ *   {(variant) => <span>{variant.name}</span>}
+ * </ItemDetails.Variants>
+ * ```
+ */
+export interface ItemDetailsVariantsProps {
+    children?: AsChildChildren<{
+        variant: any;
+    }>;
+    className?: string;
+    asChild?: boolean;
+    variantNameClassName?: string;
+    variantPriceClassName?: string;
+}
+export declare const Variants: React.ForwardRefExoticComponent<ItemDetailsVariantsProps & React.RefAttributes<HTMLElement>>;
 export interface AddToCartActionProps {
     /** Whether to render as a child component */
     asChild?: boolean;

package/dist/react/ItemDetails.js

@@ -3,7 +3,7 @@ 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 } from '@wix/restaurants/components';
+import { Item, Label, Modifier, ModifierGroup, Variant, } from '@wix/restaurants/components';
 import * as CoreItemDetails from './core/ItemDetails.js';
 var TestIds;
 (function (TestIds) {
@@ -13,26 +13,41 @@ var TestIds;
     TestIds["itemImage"] = "item-image";
     TestIds["itemAddToCart"] = "item-add-to-cart";
     TestIds["itemSpecialRequest"] = "item-special-request";
+    TestIds["itemLabels"] = "item-labels";
+    TestIds["itemModifierGroups"] = "item-modifier-groups";
+    TestIds["itemVariants"] = "item-variants";
 })(TestIds || (TestIds = {}));
 export const Root = ({ children, itemDetailsServiceConfig }) => {
     return (_jsx(CoreItemDetails.Root, { itemDetailsServiceConfig: itemDetailsServiceConfig, children: ({ item }) => _jsx(Item.Root, { item: item, children: children }) }));
 };
-/**
- * Displays the item name with customizable rendering.
- *
- * @component
- * @example
- * ```tsx
- * <ItemDetails.Name />
- * <ItemDetails.Name asChild>
- *   <h2 className="font-heading text-lg" />
- * </ItemDetails.Name>
- * ```
- */
 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 Image = React.forwardRef(({ asChild, children, className, ...rest }) => {
+    return (_jsx(Item.Image, { asChild: asChild, className: className, "data-testid": TestIds.itemImage, ...rest, children: children }));
+});
+Image.displayName = 'ItemDetails.Image';
+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 Labels = React.forwardRef(({ children, className, asChild, iconClassName, nameClassName, ...rest }) => {
+    return (_jsx(Item.LabelsRepeater, { ...rest, children: _jsxs(AsChildSlot, { asChild: asChild, testId: TestIds.itemLabels, className: className, customElement: children, children: [_jsx(Label.Icon, { className: iconClassName }), _jsx(Label.Name, { className: nameClassName })] }) }));
+});
+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 })] }) }));
+});
+Variants.displayName = 'ItemDetails.Variants';
+ModifierGroups.displayName = 'ItemDetails.ModifierGroups';
 /**
  * Add to Cart button for the menu item.
  * Triggers the action to add the selected item (and its modifiers/variants) to the cart.
@@ -57,8 +72,8 @@ export const AddToCartButton = ({ asChild = false, children, className, onClick,
                 onClick,
             }, children: _jsx(Commerce.Actions.AddToCart, { asChild: false, label: label, className: className, lineItems: [lineItem], ...props, children: children }) })) }));
 };
-export const Quantity = ({ children }, ref) => {
-    return (_jsx(CoreItemDetails.QuantityComponent, { children: ({ quantity, onValueChange, }) => (_jsx(QuantityComponent.Root, { ref: ref, onValueChange: onValueChange, initialValue: quantity, children: children })) }));
+export const Quantity = ({ children }) => {
+    return (_jsx(CoreItemDetails.QuantityComponent, { children: ({ quantity, onValueChange, }) => (_jsx(QuantityComponent.Root, { onValueChange: onValueChange, initialValue: quantity, children: children })) }));
 };
 Quantity.displayName = 'Quantity';
 export const SpecialRequest = React.forwardRef(({ className, labelClassName, placeholder = 'Any special requests or dietary restrictions?', maxLength = 200, rows = 3, label = 'Special Requests', asChild, children, ...props }, ref) => {