@wix/headless-restaurants-olo 0.0.30 → 0.0.32

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

@@ -1,9 +1,24 @@
 import React from 'react';
-declare function ClickableItem({ onItemSelected, children, }: {
-    onItemSelected: (item: any) => void;
+import { type SelectedItemData } from './core/ClickableItem.js';
+/**
+ * ClickableItem component
+ *
+ * A wrapper that makes an item clickable and passes the selected item data up via callback.
+ * Uses direct props pattern - no global state.
+ *
+ * @example
+ * ```tsx
+ * <ClickableItem onItemSelected={(item) => setSelectedItem(item)}>
+ *   <div>Click me</div>
+ * </ClickableItem>
+ * ```
+ */
+declare function ClickableItem({ onItemSelected, children, className, }: {
+    onItemSelected: (item: SelectedItemData) => void;
     children: React.ReactNode;
+    className?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare const Actions: {
     Select: typeof ClickableItem;
 };
-export {};
+export type { SelectedItemData } from './core/ClickableItem.js';

package/cjs/dist/react/ClickableItem.js

@@ -1,13 +1,20 @@
 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 })) }));
+import { CoreClickableItem, } from './core/ClickableItem.js';
+/**
+ * ClickableItem component
+ *
+ * A wrapper that makes an item clickable and passes the selected item data up via callback.
+ * Uses direct props pattern - no global state.
+ *
+ * @example
+ * ```tsx
+ * <ClickableItem onItemSelected={(item) => setSelectedItem(item)}>
+ *   <div>Click me</div>
+ * </ClickableItem>
+ * ```
+ */
+function ClickableItem({ onItemSelected, children, className, }) {
+    return (_jsx(CoreClickableItem, { children: ({ itemData }) => (_jsx("div", { onClick: () => onItemSelected(itemData), className: className, children: children })) }));
 }
 export const Actions = {
     Select: ClickableItem,

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

@@ -0,0 +1,233 @@
+import React from 'react';
+import { CoreFulfillmentDetails } from './core/index.js';
+import { DispatchType } from '../types/fulfillments-types.js';
+import { AsChildChildren } from '@wix/headless-utils/react';
+interface TimeSlotContextValue {
+    timeSlots: Array<{
+        id: string;
+        label: string;
+        startTime: Date;
+        endTime: Date;
+        dispatchType: DispatchType;
+        isAsap: boolean;
+    }>;
+    selectedTimeSlotId: string | null;
+    onTimeSlotChange: (timeSlotId: string) => void;
+    hasTimeSlots: boolean;
+}
+export interface RootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Child components that will have access to fulfillment details context */
+    children: React.ReactNode;
+}
+/**
+ * Root headless component for Fulfillment Details
+ * Provides context for fulfillment detail components
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.Root>
+ *   <FulfillmentDetails.AddressName />
+ *   <FulfillmentDetails.FulfillmentType />
+ *   <FulfillmentDetails.FulfillmentDate />
+ *   <FulfillmentDetails.AvailableTimeSlots>
+ *     <FulfillmentDetails.TimeSlotOptionRepeater />
+ *   </FulfillmentDetails.AvailableTimeSlots>
+ * </FulfillmentDetails.Root>
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
+interface AddressNameProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Children render prop that receives the address data */
+    children?: AsChildChildren<{
+        addressName: string | null;
+        fullAddress: string | null;
+        hasAddress: boolean;
+        dispatchType: DispatchType | null;
+    }> | React.ReactNode;
+}
+/**
+ * Headless component for displaying the fulfillment address name
+ * Shows pickup location name or delivery address
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.AddressName>
+ *   {({ addressName, dispatchType }) => (
+ *     <div>
+ *       {dispatchType === 'PICKUP' ? 'Pickup at: ' : 'Deliver to: '}
+ *       {addressName}
+ *     </div>
+ *   )}
+ * </FulfillmentDetails.AddressName>
+ * ```
+ */
+export declare const AddressName: React.ForwardRefExoticComponent<AddressNameProps & React.RefAttributes<HTMLDivElement>>;
+interface FulfillmentDateProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'children' | 'type' | 'value' | 'onChange' | 'min' | 'max'> {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Optional children render prop that receives the date picker props */
+    children?: AsChildChildren<{
+        selectedDate: Date | null;
+        onDateChange: (date: Date) => void;
+        minDate: Date;
+        maxDate: Date;
+    }> | React.ReactNode;
+}
+/**
+ * Headless component for fulfillment date selection
+ * Provides date picker functionality with default input type="date" rendering
+ *
+ * @example
+ * ```tsx
+ * // Default usage - renders input type="date"
+ * <FulfillmentDetails.FulfillmentDate />
+ *
+ * // With custom class name
+ * <FulfillmentDetails.FulfillmentDate className="my-date-input" />
+ *
+ * // Using asChild pattern
+ * <FulfillmentDetails.FulfillmentDate asChild>
+ *   {({ selectedDate, onDateChange, minDate, maxDate }) => (
+ *     <input
+ *       type="date"
+ *       value={selectedDate?.toISOString().split('T')[0]}
+ *       onChange={(e) => onDateChange(new Date(e.target.value))}
+ *       min={minDate.toISOString().split('T')[0]}
+ *       max={maxDate.toISOString().split('T')[0]}
+ *     />
+ *   )}
+ * </FulfillmentDetails.FulfillmentDate>
+ * ```
+ */
+export declare const FulfillmentDate: React.ForwardRefExoticComponent<FulfillmentDateProps & React.RefAttributes<HTMLInputElement>>;
+interface AvailableTimeSlotsProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Child components that will have access to time slot context */
+    children: React.ReactNode;
+}
+/**
+ * Container component for available time slots
+ * Provides context for time slot selection
+ * Does not render if no time slots are available
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.AvailableTimeSlots>
+ *   <FulfillmentDetails.TimeSlotOptions emptyState={<div>No slots</div>}>
+ *     <FulfillmentDetails.TimeSlotOptionRepeater>
+ *       {({ label, isSelected }) => (
+ *         <div data-selected={isSelected}>{label}</div>
+ *       )}
+ *     </FulfillmentDetails.TimeSlotOptionRepeater>
+ *   </FulfillmentDetails.TimeSlotOptions>
+ * </FulfillmentDetails.AvailableTimeSlots>
+ * ```
+ */
+export declare const AvailableTimeSlots: React.ForwardRefExoticComponent<AvailableTimeSlotsProps & React.RefAttributes<HTMLDivElement>>;
+type TimeSlotRenderProps = {
+    timeSlots: TimeSlotContextValue['timeSlots'];
+    selectedTimeSlotId: string | null;
+    onTimeSlotChange: (timeSlotId: string) => void;
+    hasTimeSlots: boolean;
+};
+interface TimeSlotOptionsProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Child components or render prop that receives time slot data */
+    children?: ((props: TimeSlotRenderProps) => React.ReactNode) | React.ReactNode;
+    /** Optional content to display when no time slots are available */
+    emptyState?: React.ReactNode;
+}
+/**
+ * Container for time slot options list with empty state support
+ * Supports both regular children and asChild pattern for custom rendering (e.g., select dropdowns)
+ *
+ * @example
+ * ```tsx
+ * // Regular usage with repeater
+ * <FulfillmentDetails.TimeSlotOptions emptyState={<div>No time slots</div>}>
+ *   <FulfillmentDetails.TimeSlotOptionRepeater>
+ *     {({ label }) => <div>{label}</div>}
+ *   </FulfillmentDetails.TimeSlotOptionRepeater>
+ * </FulfillmentDetails.TimeSlotOptions>
+ *
+ * // With asChild for select dropdown
+ * <FulfillmentDetails.TimeSlotOptions asChild>
+ *   {({ timeSlots, selectedTimeSlotId, onTimeSlotChange }) => (
+ *     <select value={selectedTimeSlotId || ''} onChange={(e) => onTimeSlotChange(e.target.value)}>
+ *       {timeSlots.map(slot => <option key={slot.id} value={slot.id}>{slot.label}</option>)}
+ *     </select>
+ *   )}
+ * </FulfillmentDetails.TimeSlotOptions>
+ * ```
+ */
+export declare const TimeSlotOptions: React.ForwardRefExoticComponent<TimeSlotOptionsProps & React.RefAttributes<HTMLDivElement>>;
+interface TimeSlotOptionRepeaterProps {
+    /** Render prop that receives each time slot option data */
+    children: (props: {
+        id: string;
+        label: string;
+        startTime: Date;
+        endTime: Date;
+        isSelected: boolean;
+        isAsap: boolean;
+        onSelect: () => void;
+    }) => React.ReactNode;
+}
+/**
+ * Repeater component that renders children for each available time slot
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.TimeSlotOptionRepeater>
+ *   {({ label, isSelected, onSelect, isAsap }) => (
+ *     <button onClick={onSelect} data-selected={isSelected}>
+ *       {isAsap && '⚡ '}
+ *       {label}
+ *     </button>
+ *   )}
+ * </FulfillmentDetails.TimeSlotOptionRepeater>
+ * ```
+ */
+export declare const TimeSlotOptionRepeater: React.FC<TimeSlotOptionRepeaterProps>;
+export { FulfillmentTypeEnum } from './core/FulfillmentDetails.js';
+interface FulfillmentTypeProps {
+    /** Children render prop that receives the fulfillment type selection props */
+    children: (props: {
+        selectedType: CoreFulfillmentDetails.FulfillmentTypeEnum;
+        onTypeChange: (type: CoreFulfillmentDetails.FulfillmentTypeEnum) => void;
+        hasAsapOption: boolean;
+        hasPreorderOption: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * Headless component for fulfillment type selection (ASAP or Pre-order)
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.FulfillmentType>
+ *   {({ selectedType, onTypeChange, hasAsapOption, hasPreorderOption }) => (
+ *     <div>
+ *       {hasAsapOption && (
+ *         <button
+ *           onClick={() => onTypeChange(FulfillmentTypeEnum.ASAP)}
+ *           data-selected={selectedType === FulfillmentTypeEnum.ASAP}
+ *         >
+ *           ASAP
+ *         </button>
+ *       )}
+ *       {hasPreorderOption && (
+ *         <button
+ *           onClick={() => onTypeChange(FulfillmentTypeEnum.PREORDER)}
+ *           data-selected={selectedType === FulfillmentTypeEnum.PREORDER}
+ *         >
+ *           Pre-order
+ *         </button>
+ *       )}
+ *     </div>
+ *   )}
+ * </FulfillmentDetails.FulfillmentType>
+ * ```
+ */
+export declare const FulfillmentType: React.FC<FulfillmentTypeProps>;

package/cjs/dist/react/FulfillmentDetails.js

@@ -0,0 +1,255 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { CoreFulfillmentDetails } from './core/index.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
+const TimeSlotContext = React.createContext(null);
+function useTimeSlotContext() {
+    const context = React.useContext(TimeSlotContext);
+    if (!context) {
+        throw new Error('useTimeSlotContext must be used within a FulfillmentDetails.AvailableTimeSlots component');
+    }
+    return context;
+}
+// ========================================
+// FULFILLMENT DETAILS HEADLESS COMPONENTS
+// ========================================
+var TestIds;
+(function (TestIds) {
+    TestIds["fulfillmentDetailsRoot"] = "fulfillment-details-root";
+    TestIds["addressName"] = "fulfillment-address-name";
+    TestIds["fulfillmentDate"] = "fulfillment-date";
+    TestIds["availableTimeSlots"] = "fulfillment-available-time-slots";
+    TestIds["timeSlotOptions"] = "fulfillment-time-slot-options";
+    TestIds["timeSlotOption"] = "fulfillment-time-slot-option";
+    TestIds["fulfillmentType"] = "fulfillment-type";
+})(TestIds || (TestIds = {}));
+/**
+ * Root headless component for Fulfillment Details
+ * Provides context for fulfillment detail components
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.Root>
+ *   <FulfillmentDetails.AddressName />
+ *   <FulfillmentDetails.FulfillmentType />
+ *   <FulfillmentDetails.FulfillmentDate />
+ *   <FulfillmentDetails.AvailableTimeSlots>
+ *     <FulfillmentDetails.TimeSlotOptionRepeater />
+ *   </FulfillmentDetails.AvailableTimeSlots>
+ * </FulfillmentDetails.Root>
+ * ```
+ */
+export const Root = React.forwardRef(({ children, className, ...rest }, ref) => {
+    return (_jsx(CoreFulfillmentDetails.Root, { children: _jsx("div", { ref: ref, className: className, "data-testid": TestIds.fulfillmentDetailsRoot, ...rest, children: children }) }));
+});
+Root.displayName = 'FulfillmentDetails.Root';
+/**
+ * Headless component for displaying the fulfillment address name
+ * Shows pickup location name or delivery address
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.AddressName>
+ *   {({ addressName, dispatchType }) => (
+ *     <div>
+ *       {dispatchType === 'PICKUP' ? 'Pickup at: ' : 'Deliver to: '}
+ *       {addressName}
+ *     </div>
+ *   )}
+ * </FulfillmentDetails.AddressName>
+ * ```
+ */
+export const AddressName = React.forwardRef(({ children, asChild, className, ...rest }, ref) => {
+    return (_jsx(CoreFulfillmentDetails.AddressName, { children: ({ addressName, fullAddress, hasAddress, dispatchType }) => {
+            const displayText = addressName || fullAddress || 'No address selected';
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: {
+                    addressName,
+                    fullAddress,
+                    hasAddress,
+                    dispatchType,
+                }, content: displayText, "data-testid": TestIds.addressName, ...rest, children: hasAddress && _jsx("div", { children: displayText }) }));
+        } }));
+});
+AddressName.displayName = 'FulfillmentDetails.AddressName';
+/**
+ * Headless component for fulfillment date selection
+ * Provides date picker functionality with default input type="date" rendering
+ *
+ * @example
+ * ```tsx
+ * // Default usage - renders input type="date"
+ * <FulfillmentDetails.FulfillmentDate />
+ *
+ * // With custom class name
+ * <FulfillmentDetails.FulfillmentDate className="my-date-input" />
+ *
+ * // Using asChild pattern
+ * <FulfillmentDetails.FulfillmentDate asChild>
+ *   {({ selectedDate, onDateChange, minDate, maxDate }) => (
+ *     <input
+ *       type="date"
+ *       value={selectedDate?.toISOString().split('T')[0]}
+ *       onChange={(e) => onDateChange(new Date(e.target.value))}
+ *       min={minDate.toISOString().split('T')[0]}
+ *       max={maxDate.toISOString().split('T')[0]}
+ *     />
+ *   )}
+ * </FulfillmentDetails.FulfillmentDate>
+ * ```
+ */
+export const FulfillmentDate = React.forwardRef(({ children, asChild, className, ...rest }, ref) => {
+    return (_jsx(CoreFulfillmentDetails.FulfillmentDate, { children: ({ selectedDate, onDateChange, minDate, maxDate }) => {
+            const defaultContent = (_jsx("input", { type: "date", value: selectedDate?.toISOString().split('T')[0] || '', onChange: (e) => onDateChange(new Date(e.target.value)), min: minDate.toISOString().split('T')[0], max: maxDate.toISOString().split('T')[0] }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: {
+                    selectedDate,
+                    onDateChange,
+                    minDate,
+                    maxDate,
+                }, content: defaultContent, "data-testid": TestIds.fulfillmentDate, ...rest, children: defaultContent }));
+        } }));
+});
+FulfillmentDate.displayName = 'FulfillmentDetails.FulfillmentDate';
+/**
+ * Container component for available time slots
+ * Provides context for time slot selection
+ * Does not render if no time slots are available
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.AvailableTimeSlots>
+ *   <FulfillmentDetails.TimeSlotOptions emptyState={<div>No slots</div>}>
+ *     <FulfillmentDetails.TimeSlotOptionRepeater>
+ *       {({ label, isSelected }) => (
+ *         <div data-selected={isSelected}>{label}</div>
+ *       )}
+ *     </FulfillmentDetails.TimeSlotOptionRepeater>
+ *   </FulfillmentDetails.TimeSlotOptions>
+ * </FulfillmentDetails.AvailableTimeSlots>
+ * ```
+ */
+export const AvailableTimeSlots = React.forwardRef(({ children, className, ...rest }, ref) => {
+    return (_jsx(CoreFulfillmentDetails.AvailableTimeSlots, { children: ({ timeSlots, selectedTimeSlotId, onTimeSlotChange, hasTimeSlots }) => {
+            if (!hasTimeSlots)
+                return null;
+            const contextValue = {
+                timeSlots,
+                selectedTimeSlotId,
+                onTimeSlotChange,
+                hasTimeSlots,
+            };
+            return (_jsx(TimeSlotContext.Provider, { value: contextValue, children: _jsx("div", { ref: ref, className: className, "data-testid": TestIds.availableTimeSlots, ...rest, children: children }) }));
+        } }));
+});
+AvailableTimeSlots.displayName = 'FulfillmentDetails.AvailableTimeSlots';
+/**
+ * Container for time slot options list with empty state support
+ * Supports both regular children and asChild pattern for custom rendering (e.g., select dropdowns)
+ *
+ * @example
+ * ```tsx
+ * // Regular usage with repeater
+ * <FulfillmentDetails.TimeSlotOptions emptyState={<div>No time slots</div>}>
+ *   <FulfillmentDetails.TimeSlotOptionRepeater>
+ *     {({ label }) => <div>{label}</div>}
+ *   </FulfillmentDetails.TimeSlotOptionRepeater>
+ * </FulfillmentDetails.TimeSlotOptions>
+ *
+ * // With asChild for select dropdown
+ * <FulfillmentDetails.TimeSlotOptions asChild>
+ *   {({ timeSlots, selectedTimeSlotId, onTimeSlotChange }) => (
+ *     <select value={selectedTimeSlotId || ''} onChange={(e) => onTimeSlotChange(e.target.value)}>
+ *       {timeSlots.map(slot => <option key={slot.id} value={slot.id}>{slot.label}</option>)}
+ *     </select>
+ *   )}
+ * </FulfillmentDetails.TimeSlotOptions>
+ * ```
+ */
+export const TimeSlotOptions = React.forwardRef(({ children, asChild, emptyState, className, ...rest }, ref) => {
+    const { hasTimeSlots, timeSlots, selectedTimeSlotId, onTimeSlotChange } = useTimeSlotContext();
+    if (!hasTimeSlots) {
+        return emptyState || null;
+    }
+    if (asChild && typeof children === 'function') {
+        return children({
+            timeSlots,
+            selectedTimeSlotId,
+            onTimeSlotChange,
+            hasTimeSlots,
+        });
+    }
+    return (_jsx("div", { ref: ref, className: className, "data-testid": TestIds.timeSlotOptions, ...rest, children: typeof children === 'function' ? null : children }));
+});
+TimeSlotOptions.displayName = 'FulfillmentDetails.TimeSlotOptions';
+/**
+ * Repeater component that renders children for each available time slot
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.TimeSlotOptionRepeater>
+ *   {({ label, isSelected, onSelect, isAsap }) => (
+ *     <button onClick={onSelect} data-selected={isSelected}>
+ *       {isAsap && '⚡ '}
+ *       {label}
+ *     </button>
+ *   )}
+ * </FulfillmentDetails.TimeSlotOptionRepeater>
+ * ```
+ */
+export const TimeSlotOptionRepeater = ({ children, }) => {
+    const { timeSlots, selectedTimeSlotId, onTimeSlotChange, hasTimeSlots } = useTimeSlotContext();
+    if (!hasTimeSlots)
+        return null;
+    return (_jsx(_Fragment, { children: timeSlots.map((slot) => (_jsx(React.Fragment, { children: children({
+                id: slot.id,
+                label: slot.label,
+                startTime: slot.startTime,
+                endTime: slot.endTime,
+                isSelected: slot.id === selectedTimeSlotId,
+                isAsap: slot.isAsap,
+                onSelect: () => onTimeSlotChange(slot.id),
+            }) }, slot.id))) }));
+};
+TimeSlotOptionRepeater.displayName =
+    'FulfillmentDetails.TimeSlotOptionRepeater';
+// ========================================
+// FULFILLMENT TYPE COMPONENT
+// ========================================
+export { FulfillmentTypeEnum } from './core/FulfillmentDetails.js';
+/**
+ * Headless component for fulfillment type selection (ASAP or Pre-order)
+ *
+ * @example
+ * ```tsx
+ * <FulfillmentDetails.FulfillmentType>
+ *   {({ selectedType, onTypeChange, hasAsapOption, hasPreorderOption }) => (
+ *     <div>
+ *       {hasAsapOption && (
+ *         <button
+ *           onClick={() => onTypeChange(FulfillmentTypeEnum.ASAP)}
+ *           data-selected={selectedType === FulfillmentTypeEnum.ASAP}
+ *         >
+ *           ASAP
+ *         </button>
+ *       )}
+ *       {hasPreorderOption && (
+ *         <button
+ *           onClick={() => onTypeChange(FulfillmentTypeEnum.PREORDER)}
+ *           data-selected={selectedType === FulfillmentTypeEnum.PREORDER}
+ *         >
+ *           Pre-order
+ *         </button>
+ *       )}
+ *     </div>
+ *   )}
+ * </FulfillmentDetails.FulfillmentType>
+ * ```
+ */
+export const FulfillmentType = ({ children, }) => {
+    return (_jsx(CoreFulfillmentDetails.FulfillmentType, { children: ({ selectedType, onTypeChange, hasAsapOption, hasPreorderOption }) => children({
+            selectedType,
+            onTypeChange,
+            hasAsapOption,
+            hasPreorderOption,
+        }) }));
+};
+FulfillmentType.displayName = 'FulfillmentDetails.FulfillmentType';