@wix/headless-restaurants-olo 0.0.30 → 0.0.32

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

@@ -1,12 +1,9 @@
 import React from 'react';
-import { ItemServiceConfig } from '../services/item-details-service.js';
 import { OLOSettingsServiceConfig } from '../services/olo-settings-service.js';
 interface OLORootProps {
-    /** Pre-loaded item service config (optional) */
-    itemServiceConfig?: ItemServiceConfig;
     /** Pre-loaded OLO settings service config (optional) */
     oloSettingsServiceConfig?: OLOSettingsServiceConfig;
-    /** Children render prop that receives the service state */
+    /** Children components */
     children: React.ReactNode;
 }
 /**
@@ -15,164 +12,12 @@ interface OLORootProps {
  *
  * @example
  * ```tsx
- * <OLO.Root itemId="item-123">
- *   {({ isLoading, hasServices, error, retry }) => (
- *     isLoading ? (
- *       <LoadingSpinner />
- *     ) : error ? (
- *       <ErrorMessage error={error} onRetry={retry} />
- *     ) : hasServices ? (
- *       <ItemDetailsComponents />
- *     ) : null
- *   )}
+ * <OLO.Root oloSettingsServiceConfig={config}>
+ *   <Settings.Root>
+ *     <SettingsComponents />
+ *   </Settings.Root>
  * </OLO.Root>
  * ```
  */
 export declare const Root: React.FC<OLORootProps>;
-interface OLOProviderProps {
-    /** The ID of the item to load */
-    itemId?: string;
-    /** Pre-loaded configurations (optional) */
-    configs?: {
-        itemServiceConfig?: ItemServiceConfig;
-    };
-    /** Loading component to show while services are initializing */
-    loading?: React.ReactNode;
-    /** Error component to show if service initialization fails */
-    error?: (props: {
-        error: string;
-        retry: () => void;
-    }) => React.ReactNode;
-    /** Children that will receive the services context */
-    children: React.ReactNode;
-}
-/**
- * Convenience provider that handles loading and error states automatically
- *
- * @example
- * ```tsx
- * <OLO.Provider
- *   itemId="item-123"
- *   loading={<Spinner />}
- *   error={({ error, retry }) => <ErrorBanner message={error} onRetry={retry} />}
- * >
- *   <ItemDetailsComponents />
- * </OLO.Provider>
- * ```
- */
-export declare const Provider: React.FC<OLOProviderProps>;
-interface OLOItemDetailsProps {
-    /** The ID of the item to load */
-    itemId: string;
-    /** Pre-loaded configurations (optional) */
-    configs?: {
-        itemServiceConfig?: ItemServiceConfig;
-        cartServiceConfig?: any;
-    };
-    /** Custom loading component */
-    loading?: React.ReactNode;
-    /** Custom error component */
-    error?: (props: {
-        error: string;
-        retry: () => void;
-    }) => React.ReactNode;
-    /** Custom not found component */
-    notFound?: React.ReactNode;
-    /** Children that will have access to item services */
-    children: React.ReactNode;
-}
-/**
- * Specialized headless component for item details
- * Includes item-specific error handling (like 404 not found)
- *
- * @example
- * ```tsx
- * <OLO.ItemDetails
- *   itemId="item-123"
- *   notFound={<NotFoundPage />}
- * >
- *   <ItemDetailsUI />
- * </OLO.ItemDetails>
- * ```
- */
-export declare const ItemDetails: React.FC<OLOItemDetailsProps>;
-interface OLOCartProps {
-    /** Pre-loaded cart service config (optional) */
-    cartServiceConfig?: any;
-    /** Loading component */
-    loading?: React.ReactNode;
-    /** Error component */
-    error?: (props: {
-        error: string;
-        retry: () => void;
-    }) => React.ReactNode;
-    /** Children that will have access to cart services */
-    children: React.ReactNode;
-}
-/**
- * Headless component for cart-only functionality
- * Doesn't load item services, only cart services
- *
- * @example
- * ```tsx
- * <OLO.Cart>
- *   <CartComponents />
- * </OLO.Cart>
- * ```
- */
-export declare const Cart: React.FC<OLOCartProps>;
-interface OLOServicesStatusProps {
-    /** The ID of the item to check */
-    itemId?: string;
-    /** Children render prop that receives service status */
-    children: React.ReactNode;
-}
-/**
- * Headless component for checking service status
- * Useful for debugging or conditional rendering
- *
- * @example
- * ```tsx
- * <OLO.ServicesStatus itemId="item-123">
- *   {({ hasItemService, hasCartService, error }) => (
- *     <div>
- *       Item Service: {hasItemService ? '✅' : '❌'}
- *       Cart Service: {hasCartService ? '✅' : '❌'}
- *       {error && <div>Error: {error}</div>}
- *     </div>
- *   )}
- * </OLO.ServicesStatus>
- * ```
- */
-export declare const ServicesStatus: React.FC<OLOServicesStatusProps>;
-/**
- * Headless component for Menus service management.
- * Wraps CoreOLO.Menus and provides render props for UI.
- *
- * @example
- * ```tsx
- * <OLO.Menus>
- *   {({ menus, isLoading, error }) => (
- *     isLoading ? (
- *       <div>Loading...</div>
- *     ) : error ? (
- *       <div className="text-destructive">{error}</div>
- *     ) : (
- *       <ul>
- *         {menus.map(menu => (
- *           <li key={menu.id} className="text-foreground font-paragraph">{menu.name}</li>
- *         ))}
- *       </ul>
- *     )
- *   )}
- * </OLO.Menus>
- * ```
- */
-interface OLOMenusProps {
-    /** Optional menu service config */
-    menuServiceConfig?: any;
-    /** Children render prop that receives menus state */
-    children?: React.ReactNode;
-}
-export declare const Menus: React.FC<OLOMenusProps>;
 export {};

package/cjs/dist/react/OLO.js

@@ -1,5 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { CoreOLO } from './core/index.js';
 /**
  * Root headless component for OLO service management
@@ -7,128 +6,13 @@ import { CoreOLO } from './core/index.js';
  *
  * @example
  * ```tsx
- * <OLO.Root itemId="item-123">
- *   {({ isLoading, hasServices, error, retry }) => (
- *     isLoading ? (
- *       <LoadingSpinner />
- *     ) : error ? (
- *       <ErrorMessage error={error} onRetry={retry} />
- *     ) : hasServices ? (
- *       <ItemDetailsComponents />
- *     ) : null
- *   )}
+ * <OLO.Root oloSettingsServiceConfig={config}>
+ *   <Settings.Root>
+ *     <SettingsComponents />
+ *   </Settings.Root>
  * </OLO.Root>
  * ```
  */
 export const Root = ({ oloSettingsServiceConfig, children, }) => {
-    const [retryKey] = React.useState(0);
-    // const retry = React.useCallback(() => {
-    //   setRetryKey(prev => prev + 1);
-    // }, []);
-    return (_jsx(CoreOLO.Root, { oloSettingsServiceConfig: oloSettingsServiceConfig, children: children }, retryKey));
-};
-/**
- * Convenience provider that handles loading and error states automatically
- *
- * @example
- * ```tsx
- * <OLO.Provider
- *   itemId="item-123"
- *   loading={<Spinner />}
- *   error={({ error, retry }) => <ErrorBanner message={error} onRetry={retry} />}
- * >
- *   <ItemDetailsComponents />
- * </OLO.Provider>
- * ```
- */
-export const Provider = ({ configs, 
-// loading = (
-//   <div className="flex items-center justify-center p-8">
-//     <div className="text-secondary-foreground">Loading services...</div>
-//   </div>
-// ),
-// error: errorComponent = ({ error, retry }) => (
-//   <div className="flex flex-col items-center justify-center p-8 space-y-4">
-//     <div className="text-destructive">Error: {error}</div>
-//     <button
-//       onClick={retry}
-//       className="px-4 py-2 bg-primary text-primary-foreground rounded hover:bg-primary/90"
-//     >
-//       Retry
-//     </button>
-//   </div>
-// ),
-children, }) => {
-    return _jsx(Root, { itemServiceConfig: configs?.itemServiceConfig, children: children });
-};
-/**
- * Specialized headless component for item details
- * Includes item-specific error handling (like 404 not found)
- *
- * @example
- * ```tsx
- * <OLO.ItemDetails
- *   itemId="item-123"
- *   notFound={<NotFoundPage />}
- * >
- *   <ItemDetailsUI />
- * </OLO.ItemDetails>
- * ```
- */
-export const ItemDetails = ({ itemId, configs, loading, error, notFound = (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsx("div", { className: "text-secondary-foreground", children: "Item not found" }) })), children, }) => {
-    return (_jsx(Provider, { itemId: itemId, configs: configs, loading: loading, error: ({ error: errorMessage, retry }) => {
-            // Handle item not found specifically
-            if (errorMessage === 'Item not found') {
-                return _jsx(_Fragment, { children: notFound });
-            }
-            // Use custom error component if provided
-            if (error) {
-                return _jsx(_Fragment, { children: error({ error: errorMessage, retry }) });
-            }
-            // Default error handling
-            return (_jsxs("div", { className: "flex flex-col items-center justify-center p-8 space-y-4", children: [_jsxs("div", { className: "text-destructive", children: ["Error: ", errorMessage] }), _jsx("button", { onClick: retry, className: "px-4 py-2 bg-primary text-primary-foreground rounded hover:bg-primary/90", children: "Retry" })] }));
-        }, children: children }));
-};
-/**
- * Headless component for cart-only functionality
- * Doesn't load item services, only cart services
- *
- * @example
- * ```tsx
- * <OLO.Cart>
- *   <CartComponents />
- * </OLO.Cart>
- * ```
- */
-export const Cart = ({ loading, error, children }) => {
-    return (_jsx(Provider, { loading: loading, error: error, children: children }));
-};
-/**
- * Headless component for checking service status
- * Useful for debugging or conditional rendering
- *
- * @example
- * ```tsx
- * <OLO.ServicesStatus itemId="item-123">
- *   {({ hasItemService, hasCartService, error }) => (
- *     <div>
- *       Item Service: {hasItemService ? '✅' : '❌'}
- *       Cart Service: {hasCartService ? '✅' : '❌'}
- *       {error && <div>Error: {error}</div>}
- *     </div>
- *   )}
- * </OLO.ServicesStatus>
- * ```
- */
-export const ServicesStatus = ({ children, }) => {
-    return (_jsx(Root, { children: children }));
-};
-export const Menus = ({ 
-// menuServiceConfig,
-children, }) => {
-    // const [retryKey, setRetryKey] = React.useState(0);
-    // const [menus, setMenus] = React.useState<any[]>([]);
-    // const [isLoading, setIsLoading] = React.useState(true);
-    // const [error, setError] = React.useState<string | undefined>(undefined);
-    return _jsx(_Fragment, { children: children });
+    return (_jsx(CoreOLO.Root, { oloSettingsServiceConfig: oloSettingsServiceConfig, children: children }));
 };

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

@@ -12,9 +12,15 @@ export interface MenusRootProps {
     children: React.ReactNode;
     config: MenusServiceConfig;
 }
-export declare const Root: React.ForwardRefExoticComponent<MenusRootProps & React.RefAttributes<HTMLElement>>;
+export declare const Root: {
+    (props: MenusRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export declare const OLOMenus: {
-    Root: React.ForwardRefExoticComponent<MenusRootProps & React.RefAttributes<HTMLElement>>;
+    Root: {
+        (props: MenusRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
     TestIds: typeof TestIds;
 };
 export {};

package/cjs/dist/react/OLOMenus.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
 import { Menus } from '@wix/headless-restaurants-menus/react';
 import * as CoreOLOMenus from './core/OLOMenus.js';
 // =======================
@@ -10,10 +9,10 @@ var TestIds;
     // Container Level
     TestIds["menusRoot"] = "menus-root";
 })(TestIds || (TestIds = {}));
-export const Root = React.forwardRef((props) => {
+export const Root = function MenusRoot(props) {
     const { children, config } = props;
-    return (_jsx(CoreOLOMenus.Root, { "data-testid": TestIds.menusRoot, config: config, children: (updatedConfig) => (_jsx(Menus.Root, { "data-testid": TestIds.menusRoot, config: updatedConfig, children: children })) }));
-});
+    return (_jsx(CoreOLOMenus.Root, { config: config, children: (updatedConfig) => (_jsx(Menus.Root, { "data-testid": TestIds.menusRoot, config: updatedConfig, children: children })) }));
+};
 Root.displayName = 'Menus.Root';
 // Compose Menus namespace
 export const OLOMenus = {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FulfillmentsServiceConfig } from '../types/fulfillments-types.js';
+import { DispatchType, FulfillmentsServiceConfig } from '../types/fulfillments-types.js';
 import { AsChildChildren } from '@wix/headless-utils/react';
 /**
  * Props for the Settings Root component
@@ -37,30 +37,84 @@ interface CurrentTimeSlotProps {
     className?: string;
     /** Whether to render as a child component */
     asChild?: boolean;
+    deliveryTypeText: string;
+    pickupTypeText: string;
+    asapTimeText: string;
+    asapTimeRangeText: string;
+    preorderTodayText: string;
+    preorderTomorrowText: string;
+}
+export declare const CurrentTimeSlot: React.ForwardRefExoticComponent<CurrentTimeSlotProps & React.RefAttributes<HTMLElement>>;
+interface DispatchTypeSelectorProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Child components that will have access to dispatch type context */
+    children: React.ReactNode;
 }
 /**
- * Headless component for current store details
- * Provides access to store name, address, contact info, and hours
+ * Container component for dispatch type selection (pickup or delivery)
+ * Provides context for child components to access dispatch type data
+ * Does not render if no dispatch types are available
  *
  * @example
  * ```tsx
- * <Settings.CurrentTimeSlot>
- *   {({ details, hasDetails }) => (
- *     hasDetails ? (
- *       <div>
- *         <h3>{details.name}</h3>
- *         <p>{details.address}</p>
- *         <p>{details.phone}</p>
- *         <p>{details.email}</p>
- *       </div>
- *     ) : (
- *       <div>No store details available</div>
- *     )
+ * <Settings.DispatchTypeSelector>
+ *   <Settings.DispatchTypeOptions emptyState={<div>No options</div>}>
+ *     <Settings.DispatchTypeOptionRepeater>
+ *       {({ type, isSelected, selectDispatchType }) => (
+ *         <button onClick={() => selectDispatchType(type)}>
+ *           {type} {isSelected && '✓'}
+ *         </button>
+ *       )}
+ *     </Settings.DispatchTypeOptionRepeater>
+ *   </Settings.DispatchTypeOptions>
+ * </Settings.DispatchTypeSelector>
+ * ```
+ */
+export declare const DispatchTypeSelector: React.ForwardRefExoticComponent<DispatchTypeSelectorProps & React.RefAttributes<HTMLDivElement>>;
+interface DispatchTypeOptionsProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Child components to render when dispatch types are available */
+    children: React.ReactNode;
+    /** Optional content to display when no dispatch types are available */
+    emptyState?: React.ReactNode;
+}
+/**
+ * Container for dispatch type options list with empty state support
+ *
+ * @example
+ * ```tsx
+ * <Settings.DispatchTypeOptions emptyState={<div>No options available</div>}>
+ *   <Settings.DispatchTypeOptionRepeater>
+ *     {({ type }) => <div>{type}</div>}
+ *   </Settings.DispatchTypeOptionRepeater>
+ * </Settings.DispatchTypeOptions>
+ * ```
+ */
+export declare const DispatchTypeOptions: React.ForwardRefExoticComponent<DispatchTypeOptionsProps & React.RefAttributes<HTMLDivElement>>;
+interface DispatchTypeOptionRepeaterProps {
+    /** Render prop that receives each dispatch type option data */
+    children: (props: {
+        type: DispatchType;
+        isSelected: boolean;
+        selectDispatchType: (type: DispatchType) => void;
+    }) => React.ReactNode;
+}
+/**
+ * Repeater component that renders children for each available dispatch type
+ *
+ * @example
+ * ```tsx
+ * <Settings.DispatchTypeOptionRepeater>
+ *   {({ type, isSelected, selectDispatchType }) => (
+ *     <button
+ *       onClick={() => selectDispatchType(type)}
+ *       data-selected={isSelected}
+ *     >
+ *       {type}
+ *     </button>
  *   )}
- * </Settings.CurrentTimeSlot>
+ * </Settings.DispatchTypeOptionRepeater>
  * ```
  */
-export declare const CurrentTimeSlot: React.ForwardRefExoticComponent<CurrentTimeSlotProps & React.RefAttributes<HTMLElement>>;
+export declare const DispatchTypeOptionRepeater: React.FC<DispatchTypeOptionRepeaterProps>;
 /**
  * Headless component for current fulfillment options
  * Provides access to pickup, delivery, and dine-in options
@@ -116,48 +170,122 @@ interface CurrentLocationProps {
  * ```
  */
 export declare const CurrentLocation: React.FC<CurrentLocationProps>;
-interface ExtraDataProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+interface MinOrderAmountProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
     asChild?: boolean;
-    /** Children render prop that receives the extra settings data */
+    /** Children render prop that receives the minimum order amount data */
     children?: AsChildChildren<{
-        extraData: {
-            acceptingOrders: boolean;
-            deliveryFee?: number;
-            minOrderAmount?: number;
-            freeDeliveryThreshold?: number;
-            taxRate?: number;
-            serviceCharge?: number;
-            isOnline?: boolean;
-            orderingDisabledReason?: string;
-        };
-        hasExtraData: boolean;
+        minOrderAmount: number | undefined;
+        hasMinOrderAmount: boolean;
+    }> | React.ReactNode;
+}
+/**
+ * Headless component for minimum order amount information
+ *
+ * @example
+ * ```tsx
+ * <Settings.MinOrderAmount>
+ *   {({ minOrderAmount, hasMinOrderAmount }) => (
+ *     hasMinOrderAmount ? (
+ *       <div>Minimum order: ${minOrderAmount}</div>
+ *     ) : null
+ *   )}
+ * </Settings.MinOrderAmount>
+ * ```
+ */
+export declare const MinOrderAmount: React.FC<MinOrderAmountProps>;
+interface AcceptingOrdersProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    asChild?: boolean;
+    /** Children render prop that receives the accepting orders status */
+    children?: AsChildChildren<{
+        acceptingOrders: boolean;
     }> | React.ReactNode;
 }
 /**
- * Headless component for extra settings data
- * Provides access to ordering status, fees, and thresholds
+ * Headless component for accepting orders status
  *
  * @example
  * ```tsx
- * <Settings.ExtraData>
- *   {({ extraData, hasExtraData }) => (
- *     hasExtraData ? (
- *       <div>
- *         <p>Status: {extraData.acceptingOrders ? 'Open' : 'Closed'}</p>
- *         {extraData.orderingDisabledReason && (
- *           <p>Reason: {extraData.orderingDisabledReason}</p>
- *         )}
- *         <p>Delivery Fee: ${extraData.deliveryFee}</p>
- *         <p>Min Order: ${extraData.minOrderAmount}</p>
- *         <p>Free Delivery: ${extraData.freeDeliveryThreshold}</p>
- *         <p>Tax Rate: {extraData.taxRate}%</p>
- *       </div>
+ * <Settings.AcceptingOrders>
+ *   {({ acceptingOrders }) => (
+ *     <div>
+ *       Status: {acceptingOrders ? 'Accepting Orders' : 'Not Accepting Orders'}
+ *     </div>
+ *   )}
+ * </Settings.AcceptingOrders>
+ * ```
+ */
+export declare const AcceptingOrders: React.FC<AcceptingOrdersProps>;
+interface SelectedAddressProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    asChild?: boolean;
+    /** Children render prop that receives the selected address data */
+    children?: AsChildChildren<{
+        formattedAddress: string | null;
+        selectedType: DispatchType | null;
+        hasAddress: boolean;
+    }> | React.ReactNode;
+}
+/**
+ * Headless component for selected address information
+ *
+ * @example
+ * ```tsx
+ * <Settings.SelectedAddress>
+ *   {({ formattedAddress, selectedType, hasAddress }) => (
+ *     <div>
+ *       <p>{formattedAddress}</p>
+ *       <p>{selectedType}</p>
+ *     </div>
+ *   )}
+ * </Settings.SelectedAddress>
+ * ```
+ */
+export declare const SelectedAddress: React.FC<SelectedAddressProps>;
+interface DeliveryFeeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    asChild?: boolean;
+    /** Children render prop that receives the delivery fee data */
+    children?: AsChildChildren<{
+        deliveryFee: string | undefined;
+        hasDeliveryFee: boolean;
+    }> | React.ReactNode;
+}
+/**
+ * Headless component for delivery fee information
+ *
+ * @example
+ * ```tsx
+ * <Settings.DeliveryFee>
+ *   {({ deliveryFee, hasDeliveryFee }) => (
+ *     hasDeliveryFee ? (
+ *       <div>Delivery Fee: ${deliveryFee}</div>
  *     ) : (
- *       <div>No additional settings available</div>
+ *       <div>Free Delivery</div>
  *     )
  *   )}
- * </Settings.ExtraData>
+ * </Settings.DeliveryFee>
+ * ```
+ */
+export declare const DeliveryFee: React.FC<DeliveryFeeProps>;
+interface FreeDeliveryThresholdProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    asChild?: boolean;
+    /** Children render prop that receives the free delivery threshold data */
+    children?: AsChildChildren<{
+        freeDeliveryThreshold: string | undefined;
+        hasFreeDeliveryThreshold: boolean;
+    }> | React.ReactNode;
+}
+/**
+ * Headless component for free delivery threshold information
+ *
+ * @example
+ * ```tsx
+ * <Settings.FreeDeliveryThreshold>
+ *   {({ freeDeliveryThreshold, hasFreeDeliveryThreshold }) => (
+ *     hasFreeDeliveryThreshold ? (
+ *       <div>Free delivery on orders over ${freeDeliveryThreshold}</div>
+ *     ) : null
+ *   )}
+ * </Settings.FreeDeliveryThreshold>
  * ```
  */
-export declare const ExtraData: React.FC<ExtraDataProps>;
+export declare const FreeDeliveryThreshold: React.FC<FreeDeliveryThresholdProps>;
 export {};