@wix/headless-restaurants-olo 0.0.23 → 0.0.25

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

@@ -71,7 +71,7 @@ export declare const Variants: React.ForwardRefExoticComponent<ItemDetailsVarian
 export interface SpecialRequestProps {
     asChild?: boolean;
     children?: AsChildChildren<{
-        description: string;
+        value: string;
         onChange: (value: string) => void;
     }>;
     /** Placeholder text for the textarea */
@@ -99,7 +99,7 @@ export interface AddToCartButtonProps {
     asChild?: boolean;
     className?: string;
     addToCartLabelMap: Record<AddToCartButtonState, string>;
-    children: (props: {
+    children?: AsChildChildren<{
         lineItem: LineItem;
         buttonState: AddToCartButtonState;
         addToCartButtonDisabled?: boolean;
@@ -108,7 +108,8 @@ export interface AddToCartButtonProps {
         /** Text label for the button */
         label: React.ReactNode;
         formattedPrice: string;
-    }) => React.ReactNode;
+        modifierGroupHasError: boolean;
+    }>;
 }
 export declare const AddToCartButton: React.ForwardRefExoticComponent<AddToCartButtonProps & React.RefAttributes<HTMLElement>>;
 export interface ItemDetailsQuantityProps {

package/cjs/dist/react/ItemDetails.js

@@ -39,7 +39,7 @@ export const Variants = React.forwardRef(({ children, className, asChild, varian
 });
 Variants.displayName = 'ItemDetails.Variants';
 export const AddToCartButton = React.forwardRef(({ asChild, children, className, addToCartLabelMap, ...props }, ref) => {
-    return (_jsx(CoreItemDetails.LineItemComponent, { addToCartLabelMap: addToCartLabelMap, children: ({ lineItem, buttonState, addToCartButtonDisabled, loadingState, labelText, formattedPrice, }) => {
+    return (_jsx(CoreItemDetails.LineItemComponent, { addToCartLabelMap: addToCartLabelMap, children: ({ lineItem, buttonState, addToCartButtonDisabled, loadingState, labelText, formattedPrice, modifierGroupHasError, }) => {
             const label = (_jsxs(_Fragment, { children: [_jsx("span", { children: labelText }), " ", _jsx("span", { children: " | " }), _jsx("span", { children: formattedPrice })] }));
             return (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: {
                     buttonState,
@@ -49,14 +49,8 @@ export const AddToCartButton = React.forwardRef(({ asChild, children, className,
                     lineItems: [lineItem],
                     label,
                     formattedPrice,
-                }, ref: ref, ...props, children: _jsx(Commerce.Actions.AddToCart, { asChild: false, label: label, className: className, lineItems: [lineItem], ...props, children: children({
-                        lineItem,
-                        buttonState,
-                        addToCartButtonDisabled,
-                        loadingState,
-                        label,
-                        formattedPrice,
-                    }) }) }));
+                    modifierGroupHasError,
+                }, ref: ref, ...props, children: _jsx(Commerce.Actions.AddToCart, { asChild: false, label: label, className: className, lineItems: [lineItem], ...props }) }));
         } }));
 });
 AddToCartButton.displayName = 'AddToCartButton';

package/cjs/dist/react/ModifierGroup.js

@@ -44,12 +44,12 @@ export const Description = React.forwardRef(({ ruleTypeMap, className, asChild,
         } }));
 });
 Description.displayName = 'ItemDetailsModifierGroup.Description';
-export const Error = React.forwardRef(({ ruleTypeMap, className, asChild, children }, ref) => {
+export const Error = React.forwardRef(({ ruleTypeMap, className, asChild, children, ...otherProps }, ref) => {
     return (_jsx(GroupError, { ruleTypeMap: ruleTypeMap, children: ({ error }) => {
             if (!error) {
                 return null;
             }
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, testId: TestIds.modifierGroupError, className: className, customElement: children, customElementProps: { error }, children: _jsx("p", { className: className, children: error }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, "data-testid": TestIds.modifierGroupError, className: className, customElement: children, customElementProps: { error }, content: error, ...otherProps, children: _jsx("p", { className: className, children: error }) }));
         } }));
 });
 Error.displayName = 'ItemDetailsModifierGroup.Error';

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

@@ -1,31 +1,33 @@
 import React from 'react';
+import { FulfillmentsServiceConfig } from '../types/fulfillments-types.js';
 import { AsChildChildren } from '@wix/headless-utils/react';
+/**
+ * Props for the Settings Root component
+ */
+export interface RootProps {
+    /** Child components that will have access to the settings context */
+    children: (props: {
+        isLoading: boolean;
+    }) => React.ReactNode;
+    /** Optional pre-loaded fulfillments service configuration */
+    fulfillmentsServiceConfig?: FulfillmentsServiceConfig;
+}
 /**
  * Root headless component for OLO Settings
- * Provides access to current details, fulfillment options, location, and extra data
+ * Provides service context for settings components
  *
  * @example
  * ```tsx
- * <Settings.Root>
- *   {({ currentDetails, currentFulfillment, currentLocation, extraData, isLoading, error }) => (
- *     isLoading ? (
- *       <div>Loading settings...</div>
- *     ) : error ? (
- *       <div>Error: {error}</div>
- *     ) : (
- *       <div>
- *         <h2>{currentDetails.name}</h2>
- *         <p>{currentDetails.address}</p>
- *         <p>Accepting Orders: {extraData.acceptingOrders ? 'Yes' : 'No'}</p>
- *         <p>Delivery Fee: ${extraData.deliveryFee}</p>
- *         <p>Min Order: ${extraData.minOrderAmount}</p>
- *         <p>Free Delivery: ${extraData.freeDeliveryThreshold}</p>
- *       </div>
- *     )
- *   )}
+ * <Settings.Root fulfillmentsServiceConfig={config}>
+ *   <Settings.CurrentTimeSlot>
+ *     {({ timeSlot, hasDetails }) => (
+ *       <div>{timeSlot?.dispatchType}</div>
+ *     )}
+ *   </Settings.CurrentTimeSlot>
  * </Settings.Root>
  * ```
  */
+export declare const Root: React.FC<RootProps>;
 interface CurrentTimeSlotProps {
     /** Children render prop that receives the current details */
     children?: AsChildChildren<{
@@ -114,9 +116,10 @@ interface CurrentLocationProps {
  * ```
  */
 export declare const CurrentLocation: React.FC<CurrentLocationProps>;
-interface ExtraDataProps {
+interface ExtraDataProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    asChild?: boolean;
     /** Children render prop that receives the extra settings data */
-    children: (props: {
+    children?: AsChildChildren<{
         extraData: {
             acceptingOrders: boolean;
             deliveryFee?: number;
@@ -128,7 +131,7 @@ interface ExtraDataProps {
             orderingDisabledReason?: string;
         };
         hasExtraData: boolean;
-    }) => React.ReactNode;
+    }> | React.ReactNode;
 }
 /**
  * Headless component for extra settings data

package/cjs/dist/react/Settings.js

@@ -1,8 +1,38 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { CoreSettings } from './core/index.js';
-// import { OLOSettingsServiceConfig } from '../services/olo-settings-service.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
+// ========================================
+// OLO SETTINGS HEADLESS COMPONENTS
+// ========================================
+// Headless components that wrap CoreSettings and provide convenient service management
+// These components handle service initialization and provide render props for UI
+// ========================================
+// ROOT COMPONENT
+// ========================================
+var TestIds;
+(function (TestIds) {
+    TestIds["settingsRoot"] = "settings-root";
+})(TestIds || (TestIds = {}));
+/**
+ * Root headless component for OLO Settings
+ * Provides service context for settings components
+ *
+ * @example
+ * ```tsx
+ * <Settings.Root fulfillmentsServiceConfig={config}>
+ *   <Settings.CurrentTimeSlot>
+ *     {({ timeSlot, hasDetails }) => (
+ *       <div>{timeSlot?.dispatchType}</div>
+ *     )}
+ *   </Settings.CurrentTimeSlot>
+ * </Settings.Root>
+ * ```
+ */
+export const Root = ({ children, fulfillmentsServiceConfig, }) => {
+    return (_jsx(CoreSettings.Root, { fulfillmentsServiceConfig: fulfillmentsServiceConfig, "data-testid": TestIds.settingsRoot, children: ({ isLoading }) => children({ isLoading }) }));
+};
+Root.displayName = 'Settings.Root';
 /**
  * Headless component for current store details
  * Provides access to store name, address, contact info, and hours
@@ -89,6 +119,6 @@ export const CurrentLocation = ({ children, className, asChild, }) => {
  * </Settings.ExtraData>
  * ```
  */
-export const ExtraData = ({ children }) => {
-    return _jsx(CoreSettings.ExtraData, { children: children });
+export const ExtraData = ({ children, asChild, className, ...rest }) => {
+    return (_jsx(CoreSettings.ExtraData, { children: ({ extraData, hasExtraData }) => (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: { extraData, hasExtraData }, content: hasExtraData ? (_jsx("div", { children: extraData.acceptingOrders ? 'Accepting Orders' : 'Closed' })) : null, ...rest, children: hasExtraData ? (_jsx("div", { children: extraData.acceptingOrders ? 'Accepting Orders' : 'Closed' })) : null })) }));
 };

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

@@ -26,6 +26,7 @@ interface ItemDetailsLineItemProps {
         addToCartButtonDisabled: boolean;
         labelText: string;
         formattedPrice: string;
+        modifierGroupHasError: boolean;
     }) => React.ReactNode;
 }
 export declare const LineItemComponent: React.FC<ItemDetailsLineItemProps>;

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

@@ -24,11 +24,14 @@ export const Root = ({ children, itemDetailsServiceConfig, }) => {
     return (_jsx(WixServices, { servicesMap: createServicesMap().addService(ItemServiceDefinition, ItemService, config), children: children({ item: itemDetailsServiceConfig?.item ?? selectedItem }) }));
 };
 export const SpecialRequest = ({ children, }) => {
-    const [value, setValue] = useState('');
     const service = useService(ItemServiceDefinition);
+    const initialSpecialRequest = service.specialRequest?.get?.() ?? '';
+    const [value, setValue] = useState(initialSpecialRequest);
     const onChange = (newValue) => {
-        setValue(newValue);
-        service.updateSpecialRequest(newValue);
+        if (typeof newValue === 'string') {
+            setValue(newValue);
+            service.updateSpecialRequest(newValue);
+        }
     };
     return children({
         value,
@@ -48,6 +51,7 @@ export const LineItemComponent = ({ addToCartLabelMap, children, }) => {
     const formatCurrency = oloSettingsService.formatCurrency;
     const formattedPrice = formatCurrency(price);
     const labelText = addToCartLabelMap[buttonState];
+    const modifierGroupHasError = service.doesModifierGroupHaveError?.get?.() ?? false;
     return children({
         loadingState,
         lineItem,
@@ -55,6 +59,7 @@ export const LineItemComponent = ({ addToCartLabelMap, children, }) => {
         addToCartButtonDisabled,
         labelText,
         formattedPrice,
+        modifierGroupHasError,
     });
 };
 export const QuantityComponent = ({ children, }) => {

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

@@ -49,8 +49,7 @@ export const ModifiersComponent = ({ children, }) => {
 };
 export const Description = ({ ruleTypeMap, children, }) => {
     const { ruleType, modifierGroup } = useModifiersContext();
-    const modifierGroupName = modifierGroup.name || '';
-    const description = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroupName, modifierGroup.rule);
+    const description = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroup.rule);
     return children({ description });
 };
 export const GroupError = ({ ruleTypeMap, children, }) => {
@@ -58,10 +57,9 @@ export const GroupError = ({ ruleTypeMap, children, }) => {
     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);
+        error = getRuleTypeMapValue(ruleTypeMap, ruleType, modifierGroup.rule);
     }
     return children({ error });
 };

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

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+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';
-import { FulfillmentsService, FulfillmentsServiceDefinition, loadFulfillmentsServiceConfig, } from '../../services/fulfillments-service.js';
 /**
  * Core OLO Root component that sets up service management
  * Provides ItemService and CurrentCartService to child components
@@ -25,9 +24,6 @@ import { FulfillmentsService, FulfillmentsServiceDefinition, loadFulfillmentsSer
  * ```
  */
 export const Root = ({ itemId, itemServiceConfig, cartServiceConfig, oloSettingsServiceConfig, children, }) => {
-    const [fulfillmentsServiceConfig, setFulfillmentsServiceConfig] = useState({
-        operation: oloSettingsServiceConfig?.operation ?? undefined,
-    });
     // const [servicesManager, setServicesManager] = useState<ServicesManager | null>(null);
     // const [isLoading, setIsLoading] = useState(true);
     // const [error, setError] = useState<string | undefined>();
@@ -90,17 +86,7 @@ export const Root = ({ itemId, itemServiceConfig, cartServiceConfig, oloSettings
     //     hasServices
     //   });
     console.log('oloSettingsServiceConfig', oloSettingsServiceConfig);
-    useEffect(() => {
-        if (oloSettingsServiceConfig?.operation?._id) {
-            loadFulfillmentsServiceConfig(oloSettingsServiceConfig.operation).then((config) => {
-                console.log('config', config);
-                setFulfillmentsServiceConfig(config);
-            });
-        }
-    }, [oloSettingsServiceConfig?.operation?._id]);
-    return (_jsx(WixServices, { servicesMap: createServicesMap()
-            .addService(OLOSettingsServiceDefinition, OLOSettingsService, oloSettingsServiceConfig)
-            .addService(FulfillmentsServiceDefinition, FulfillmentsService, fulfillmentsServiceConfig), children: children }));
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(OLOSettingsServiceDefinition, OLOSettingsService, oloSettingsServiceConfig), children: children }));
 };
 /**
  * Convenience wrapper that combines Root with ServicesManagerProvider

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

@@ -1,89 +1,58 @@
 import React from 'react';
 import * as operationsSDK from '@wix/auto_sdk_restaurants_operations';
-import { TimeSlot } from '../../types/fulfillments-types.js';
-interface CurrentTime {
-    timeSlot: string;
-}
-interface CurrentFulfillment {
-    current?: operationsSDK.TimeSlot;
-}
-interface CurrentLocation {
-    name: string;
-}
-interface ExtraData {
-    acceptingOrders: boolean;
-    deliveryFee?: number;
-    minOrderAmount?: number;
-    freeDeliveryThreshold?: number;
-    taxRate?: number;
-    serviceCharge?: number;
-    isOnline?: boolean;
-    orderingDisabledReason?: string;
-}
-interface SettingsData {
-    currentTime: CurrentTime;
-    currentFulfillment: CurrentFulfillment;
-    currentLocation: CurrentLocation;
-    selectedFulfillment: any;
-    extraData: ExtraData;
-    isLoading: boolean;
-    error?: string | null;
-}
-interface SettingsRootProps {
-    children: (props: SettingsData) => React.ReactNode;
+import { FulfillmentsServiceConfig, TimeSlot } from '../../types/fulfillments-types.js';
+export interface RootProps {
+    children: (props: {
+        isLoading: boolean;
+    }) => React.ReactNode;
+    fulfillmentsServiceConfig?: FulfillmentsServiceConfig;
 }
 /**
- * Core Settings component that provides access to OLO settings data
- * Integrates with OLOSettingsService to expose operation and operation group data
+ * Core Settings Root component that provides service context
+ * Wraps children with both OLOSettingsService and FulfillmentsService providers
  *
  * @example
  * ```tsx
- * <CoreSettings.Root>
- *   {({ currentDetails, currentFulfillment, currentLocation, extraData, isLoading, error }) => (
- *     isLoading ? (
- *       <div>Loading settings...</div>
- *     ) : error ? (
- *       <div>Error: {error}</div>
- *     ) : (
- *       <div>
- *         <h2>{currentDetails.name}</h2>
- *         <p>Accepting Orders: {extraData.acceptingOrders ? 'Yes' : 'No'}</p>
- *         <p>Delivery Fee: ${extraData.deliveryFee}</p>
- *       </div>
- *     )
- *   )}
+ * <CoreSettings.Root fulfillmentsServiceConfig={config}>
+ *   <CoreSettings.CurrentTimeSlot>
+ *     {({ timeSlot, hasDetails }) => (
+ *       <div>{timeSlot?.dispatchType}</div>
+ *     )}
+ *   </CoreSettings.CurrentTimeSlot>
  * </CoreSettings.Root>
  * ```
  */
-export declare const Root: React.FC<SettingsRootProps>;
-interface CurrentTimeSlotProps {
+export declare const Root: React.FC<RootProps>;
+export interface CurrentTimeSlotProps {
     children: (props: {
         timeSlot: TimeSlot;
         hasDetails: boolean;
     }) => React.ReactNode;
 }
 /**
- * Component that provides access to current store details
+ * Component that provides access to current time slot
  *
  * @example
  * ```tsx
  * <CoreSettings.CurrentTimeSlot>
- *   {({ details, hasDetails }) => (
+ *   {({ timeSlot, hasDetails }) => (
  *     hasDetails ? (
  *       <div>
- *         <h3>{details.timeSlot}</h3>
+ *         <h3>{timeSlot.dispatchType}</h3>
  *       </div>
  *     ) : (
- *       <div>No store details available</div>
+ *       <div>No time slot selected</div>
  *     )
  *   )}
  * </CoreSettings.CurrentTimeSlot>
  * ```
  */
 export declare const CurrentTimeSlot: React.FC<CurrentTimeSlotProps>;
-interface CurrentFulfillmentProps {
+export interface CurrentFulfillmentProps {
     children: (props: {
-        fulfillment: CurrentFulfillment;
+        fulfillment: {
+            current?: operationsSDK.TimeSlot;
+        };
         hasFulfillment: boolean;
         availableOptions: string[];
     }) => React.ReactNode;
@@ -106,9 +75,11 @@ interface CurrentFulfillmentProps {
  * ```
  */
 export declare const CurrentFulfillment: React.FC<CurrentFulfillmentProps>;
-interface CurrentLocationProps {
+export interface CurrentLocationProps {
     children: (props: {
-        location: CurrentLocation;
+        location: {
+            name: string;
+        };
         hasLocation: boolean;
     }) => React.ReactNode;
 }
@@ -118,21 +89,27 @@ interface CurrentLocationProps {
  * @example
  * ```tsx
  * <CoreSettings.CurrentLocation>
- *   {({ location, hasCoordinates }) => (
+ *   {({ location, hasLocation }) => (
  *     <div>
- *       <p>{location.address}</p>
- *       {hasCoordinates && (
- *         <p>Coordinates: {location.latitude}, {location.longitude}</p>
- *       )}
+ *       <p>{location.name}</p>
  *     </div>
  *   )}
  * </CoreSettings.CurrentLocation>
  * ```
  */
 export declare const CurrentLocation: React.FC<CurrentLocationProps>;
-interface ExtraDataProps {
+export interface ExtraDataProps {
     children: (props: {
-        extraData: ExtraData;
+        extraData: {
+            acceptingOrders: boolean;
+            deliveryFee?: number;
+            minOrderAmount?: number;
+            freeDeliveryThreshold?: number;
+            taxRate?: number;
+            serviceCharge?: number;
+            isOnline?: boolean;
+            orderingDisabledReason?: string;
+        };
         hasExtraData: boolean;
     }) => React.ReactNode;
 }
@@ -154,4 +131,3 @@ interface ExtraDataProps {
  * ```
  */
 export declare const ExtraData: React.FC<ExtraDataProps>;
-export {};