@wix/headless-restaurants-olo 0.0.33 → 0.0.35

package/cjs/dist/utils/fulfillments-utils.js

@@ -1,7 +1,11 @@
 import * as operationsSDK from '@wix/auto_sdk_restaurants_operations';
 import { DispatchType, } from '../types/fulfillments-types.js';
-import { EntitiesDayOfWeek as DayOfWeek, } from '@wix/auto_sdk_restaurants_fulfillment-methods';
 import { FulfillmentTimeType, } from '@wix/auto_sdk_restaurants_operations';
+import { DAY_OF_WEEK, isInTimeRange, getDayOfWeekNumber, getLocale, convertDateToTimezone, } from './date-utils.js';
+// Re-export date utilities for convenience
+export { convertTimeOfDayToDateTime, convertDateToTimezone, formatDateInTimezone, formatTime, formatTimeRange, getDatePartsInTimezone, buildDateFromParts, isInTimeRange, DAY_OF_WEEK, DayOfWeek, getDayOfWeekNumber, 
+// Locale & timezone utilities
+getLocale, getTimezone, } from './date-utils.js';
 /**
  * Format a string with placeholders like {0}, {1}, etc.
  * Similar to C#'s String.Format
@@ -150,6 +154,8 @@ export const processFulfillmentTimeSlotByOperationList = (operationTimeSlot) =>
                 durationRangeOptions: selectedFulfillmentInfo?.durationRange,
                 ...selectedFulfillmentInfo,
             };
+            // const startTime = convertTimeOfDayToDateTime(startTime!, timezone);
+            // const endTime = convertTimeOfDayToDateTime(endTime!, timezone);
             return {
                 id: createTimeSlotId(startTime, endTime),
                 startTime: startTime,
@@ -163,71 +169,22 @@ export const processFulfillmentTimeSlotByOperationList = (operationTimeSlot) =>
         }),
     ];
 };
-const DAY_OF_WEEK = {
-    [DayOfWeek.MON]: 1,
-    [DayOfWeek.TUE]: 2,
-    [DayOfWeek.WED]: 3,
-    [DayOfWeek.THU]: 4,
-    [DayOfWeek.FRI]: 5,
-    [DayOfWeek.SAT]: 6,
-    [DayOfWeek.SUN]: 7,
-};
-const convertTimeOfDayToDateTime = (time, timezone) => {
-    const now = new Date();
-    if (timezone) {
-        // Get today's date components in the specified timezone
-        const options = {
-            timeZone: timezone,
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-        };
-        const parts = new Intl.DateTimeFormat('en-US', options).formatToParts(now);
-        const year = parts.find((p) => p.type === 'year')?.value;
-        const month = parts.find((p) => p.type === 'month')?.value;
-        const day = parts.find((p) => p.type === 'day')?.value;
-        // Create an ISO string with the date in the timezone and the specified time
-        const hours = String(time.hours ?? 0).padStart(2, '0');
-        const minutes = String(time.minutes ?? 0).padStart(2, '0');
-        const isoString = `${year}-${month}-${day}T${hours}:${minutes}:00.000`;
-        // Convert to Date - this will be interpreted as local time
-        const localDate = new Date(isoString);
-        // Get what this time would be formatted as in the target timezone
-        const formattedInTz = new Date(localDate.toLocaleString('en-US', { timeZone: timezone }));
-        // Calculate the difference and adjust
-        const offset = localDate.getTime() - formattedInTz.getTime();
-        return new Date(localDate.getTime() + offset);
-    }
-    // If no timezone specified, use local time
-    const date = new Date();
-    date.setHours(time.hours ?? 0, time.minutes ?? 0, 0, 0);
-    return date;
-};
-const isInTimeRange = (time, range, timeZone) => {
-    const startTime = range.startTime
-        ? convertTimeOfDayToDateTime(range.startTime, timeZone)
-        : time;
-    const endTime = range.endTime
-        ? convertTimeOfDayToDateTime(range.endTime, timeZone)
-        : time;
-    return (time.getTime() >= startTime.getTime() && time.getTime() <= endTime.getTime());
-};
 const isFulfillmentAvailable = (fulfillment, operation) => {
     const { availability: { timeZone, availableTimes } = {} } = fulfillment;
     const { asapOptions: { maxInMinutes, rangeInMinutes } = {} } = operation;
     const deliveryTime = fulfillment.deliveryOptions?.deliveryTimeInMinutes ?? 0;
-    const zone = timeZone;
-    const timeNow = new Date();
+    const timezone = timeZone;
+    const locale = getLocale();
+    const timeNow = convertDateToTimezone(new Date(), timezone, locale);
     timeNow.setMinutes(timeNow.getMinutes() +
         (maxInMinutes ?? rangeInMinutes?.min ?? 0) +
         deliveryTime);
-    // getDay() returns 0 (Sunday) to 6 (Saturday), but we need 1 (Monday) to 7 (Sunday)
-    const currentDayOfWeek = timeNow.getDay() === 0 ? 7 : timeNow.getDay();
+    const currentDayOfWeek = getDayOfWeekNumber(timeNow);
     return !!availableTimes?.some((availableTime) => {
         const { dayOfWeek, timeRanges } = availableTime;
         const dayOfWeekNumber = DAY_OF_WEEK[dayOfWeek];
         const isAvailable = dayOfWeekNumber === currentDayOfWeek &&
-            !!timeRanges?.some((range) => isInTimeRange(timeNow, range, zone));
+            !!timeRanges?.some((range) => isInTimeRange(timeNow, range, timezone));
         return isAvailable;
     });
 };
@@ -291,10 +248,9 @@ export const createTimeRange = (arr) => {
         return { durationRangeOptions: { minDuration, maxDuration } };
     }
 };
-export const processFulfillments = async (fulfillments, timeSlots, operation) => {
+export const processFulfillments = (fulfillments, timeSlots, operation) => {
     const shouldConsiderAvailability = timeSlots.length > 0;
     try {
-        console.log('fulfillments :>>', fulfillments);
         const pickupFulfillment = fulfillments.find((fulfillment) => fulfillment.type === 'PICKUP' && fulfillment.enabled);
         let deliveryFulfillments = fulfillments.filter((fulfillment) => fulfillment.type === 'DELIVERY' && fulfillment.enabled);
         const isPickupConfigured = !!pickupFulfillment;

package/dist/react/FulfillmentDetails.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { CoreFulfillmentDetails } from './core/index.js';
-import { DispatchType } from '../types/fulfillments-types.js';
+import { DispatchType, FulfillmentTypeEnum } from '../types/fulfillments-types.js';
 import { AsChildChildren } from '@wix/headless-utils/react';
 interface TimeSlotContextValue {
     timeSlots: Array<{
@@ -67,6 +66,12 @@ export declare const AddressName: React.ForwardRefExoticComponent<AddressNamePro
 interface FulfillmentDateProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'children' | 'type' | 'value' | 'onChange' | 'min' | 'max'> {
     /** Whether to render as a child component */
     asChild?: boolean;
+    /** Optional label text or element for the date picker */
+    label?: React.ReactNode;
+    /** Optional class name for the label element */
+    labelClassName?: string;
+    /** Optional class name for the wrapper div (only rendered when label is provided) */
+    wrapperClassName?: string;
     /** Optional children render prop that receives the date picker props */
     children?: AsChildChildren<{
         selectedDate: Date | null;
@@ -87,15 +92,23 @@ interface FulfillmentDateProps extends Omit<React.ComponentPropsWithoutRef<'inpu
  * // With custom class name
  * <FulfillmentDetails.FulfillmentDate className="my-date-input" />
  *
+ * // With label
+ * <FulfillmentDetails.FulfillmentDate
+ *   label="Date"
+ *   labelClassName="block mb-1 text-sm"
+ *   wrapperClassName="flex-1"
+ *   className="my-date-input"
+ * />
+ *
  * // Using asChild pattern
  * <FulfillmentDetails.FulfillmentDate asChild>
  *   {({ selectedDate, onDateChange, minDate, maxDate }) => (
  *     <input
  *       type="date"
- *       value={selectedDate?.toISOString().split('T')[0]}
+ *       value={selectedDate ? toISODateString(selectedDate) : ''}
  *       onChange={(e) => onDateChange(new Date(e.target.value))}
- *       min={minDate.toISOString().split('T')[0]}
- *       max={maxDate.toISOString().split('T')[0]}
+ *       min={toISODateString(minDate)}
+ *       max={toISODateString(maxDate)}
  *     />
  *   )}
  * </FulfillmentDetails.FulfillmentDate>
@@ -191,22 +204,50 @@ interface TimeSlotOptionRepeaterProps {
  * ```
  */
 export declare const TimeSlotOptionRepeater: React.FC<TimeSlotOptionRepeaterProps>;
-export { FulfillmentTypeEnum } from './core/FulfillmentDetails.js';
-interface FulfillmentTypeProps {
+interface FulfillmentTypeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Label text for the ASAP option */
+    asapLabel?: string;
+    /** Label text for the schedule for later (preorder) option */
+    scheduleLabel?: string;
+    /** Aria label for the radio group */
+    groupAriaLabel?: string;
+    /** Template text for ASAP time display (e.g., "Ready in {0} min"). Use {0} for asapTime placeholder */
+    asapTimeText?: string;
+    /** Optional class name for the radio input elements */
+    inputClassName?: string;
     /** Children render prop that receives the fulfillment type selection props */
-    children: (props: {
-        selectedType: CoreFulfillmentDetails.FulfillmentTypeEnum;
-        onTypeChange: (type: CoreFulfillmentDetails.FulfillmentTypeEnum) => void;
+    children?: AsChildChildren<{
+        selectedType: FulfillmentTypeEnum;
+        onTypeChange: (type: FulfillmentTypeEnum) => void;
         hasAsapOption: boolean;
         hasPreorderOption: boolean;
-    }) => React.ReactNode;
+        asapTime: number | undefined;
+        asapTimeRange: {
+            minDuration?: number;
+            maxDuration?: number;
+        } | undefined;
+    }> | React.ReactNode;
 }
 /**
- * Headless component for fulfillment type selection (ASAP or Pre-order)
+ * Headless component for fulfillment type selection (ASAP or Schedule for later)
+ * Provides radio button functionality with default rendering
  *
  * @example
  * ```tsx
- * <FulfillmentDetails.FulfillmentType>
+ * // Default usage - renders radio buttons
+ * <FulfillmentDetails.FulfillmentType />
+ *
+ * // With custom labels
+ * <FulfillmentDetails.FulfillmentType
+ *   asapLabel="Now"
+ *   scheduleLabel="Later"
+ *   groupAriaLabel="When do you want your order?"
+ * />
+ *
+ * // Using asChild pattern
+ * <FulfillmentDetails.FulfillmentType asChild>
  *   {({ selectedType, onTypeChange, hasAsapOption, hasPreorderOption }) => (
  *     <div>
  *       {hasAsapOption && (
@@ -222,7 +263,7 @@ interface FulfillmentTypeProps {
  *           onClick={() => onTypeChange(FulfillmentTypeEnum.PREORDER)}
  *           data-selected={selectedType === FulfillmentTypeEnum.PREORDER}
  *         >
- *           Pre-order
+ *           Schedule for later
  *         </button>
  *       )}
  *     </div>
@@ -230,4 +271,87 @@ interface FulfillmentTypeProps {
  * </FulfillmentDetails.FulfillmentType>
  * ```
  */
-export declare const FulfillmentType: React.FC<FulfillmentTypeProps>;
+export declare const FulfillmentType: React.ForwardRefExoticComponent<FulfillmentTypeProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Address fields that can be updated
+ */
+export interface DeliveryAddressFields {
+    /** Street address line 1 */
+    addressLine?: string;
+    /** Street address line 2 (apartment, suite, etc.) */
+    addressLine2?: string;
+    /** City */
+    city?: string;
+    /** State/Province/Subdivision */
+    subdivision?: string;
+    /** Postal/ZIP code */
+    postalCode?: string;
+    /** Country */
+    country?: string;
+    /** Formatted full address string */
+    formattedAddress?: string;
+}
+interface DeliveryAddressProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Label text for the address input */
+    label?: React.ReactNode;
+    /** Optional class name for the label element */
+    labelClassName?: string;
+    /** Optional class name for the wrapper div (only rendered when label is provided) */
+    wrapperClassName?: string;
+    /** Placeholder text for the address input */
+    placeholder?: string;
+    /** Optional class name for the input element */
+    inputClassName?: string;
+    /** Children render prop that receives the address data */
+    children?: AsChildChildren<{
+        address: DeliveryAddressFields | null;
+        hasAddress: boolean;
+        isDelivery: boolean;
+        dispatchType: DispatchType | null;
+        onAddressChange: (address: DeliveryAddressFields) => void;
+        onAddressClear: () => void;
+    }> | React.ReactNode;
+}
+/**
+ * Headless component for editing the delivery address
+ * Only renders when dispatch type is DELIVERY
+ *
+ * @example
+ * ```tsx
+ * // Default usage - renders input for address line
+ * <FulfillmentDetails.DeliveryAddress
+ *   label="Delivery Address"
+ *   placeholder="Enter your address"
+ * />
+ *
+ * // Using asChild pattern for custom rendering
+ * <FulfillmentDetails.DeliveryAddress asChild>
+ *   {({ address, hasAddress, isDelivery, onAddressChange, onAddressClear }) => (
+ *     isDelivery && (
+ *       <div>
+ *         <input
+ *           value={address?.addressLine || ''}
+ *           onChange={(e) => onAddressChange({ ...address, addressLine: e.target.value })}
+ *           placeholder="Street Address"
+ *         />
+ *         <input
+ *           value={address?.city || ''}
+ *           onChange={(e) => onAddressChange({ ...address, city: e.target.value })}
+ *           placeholder="City"
+ *         />
+ *         <input
+ *           value={address?.postalCode || ''}
+ *           onChange={(e) => onAddressChange({ ...address, postalCode: e.target.value })}
+ *           placeholder="ZIP Code"
+ *         />
+ *         {hasAddress && <button onClick={onAddressClear}>Clear</button>}
+ *       </div>
+ *     )
+ *   )}
+ * </FulfillmentDetails.DeliveryAddress>
+ * ```
+ */
+export declare const DeliveryAddress: React.ForwardRefExoticComponent<DeliveryAddressProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/react/FulfillmentDetails.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { CoreFulfillmentDetails } from './core/index.js';
+import { FulfillmentTypeEnum, } from '../types/fulfillments-types.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
+import { stringFormat } from '../utils/fulfillments-utils.js';
+import { toISODateString } from '../utils/date-utils.js';
 const TimeSlotContext = React.createContext(null);
 function useTimeSlotContext() {
     const context = React.useContext(TimeSlotContext);
@@ -22,6 +25,8 @@ var TestIds;
     TestIds["timeSlotOptions"] = "fulfillment-time-slot-options";
     TestIds["timeSlotOption"] = "fulfillment-time-slot-option";
     TestIds["fulfillmentType"] = "fulfillment-type";
+    TestIds["deliveryAddress"] = "fulfillment-delivery-address";
+    TestIds["deliveryAddressInput"] = "fulfillment-delivery-address-input";
 })(TestIds || (TestIds = {}));
 /**
  * Root headless component for Fulfillment Details
@@ -61,7 +66,7 @@ Root.displayName = 'FulfillmentDetails.Root';
  */
 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';
+            const displayText = addressName || fullAddress;
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: {
                     addressName,
                     fullAddress,
@@ -83,29 +88,38 @@ AddressName.displayName = 'FulfillmentDetails.AddressName';
  * // With custom class name
  * <FulfillmentDetails.FulfillmentDate className="my-date-input" />
  *
+ * // With label
+ * <FulfillmentDetails.FulfillmentDate
+ *   label="Date"
+ *   labelClassName="block mb-1 text-sm"
+ *   wrapperClassName="flex-1"
+ *   className="my-date-input"
+ * />
+ *
  * // Using asChild pattern
  * <FulfillmentDetails.FulfillmentDate asChild>
  *   {({ selectedDate, onDateChange, minDate, maxDate }) => (
  *     <input
  *       type="date"
- *       value={selectedDate?.toISOString().split('T')[0]}
+ *       value={selectedDate ? toISODateString(selectedDate) : ''}
  *       onChange={(e) => onDateChange(new Date(e.target.value))}
- *       min={minDate.toISOString().split('T')[0]}
- *       max={maxDate.toISOString().split('T')[0]}
+ *       min={toISODateString(minDate)}
+ *       max={toISODateString(maxDate)}
  *     />
  *   )}
  * </FulfillmentDetails.FulfillmentDate>
  * ```
  */
-export const FulfillmentDate = React.forwardRef(({ children, asChild, className, ...rest }, ref) => {
+export const FulfillmentDate = React.forwardRef(({ children, asChild, className, label, labelClassName, wrapperClassName, ...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: {
+            const inputElement = (_jsx("input", { ref: ref, type: "date", className: className, value: selectedDate ? toISODateString(selectedDate) : '', onChange: (e) => onDateChange(new Date(e.target.value)), min: toISODateString(minDate), max: toISODateString(maxDate), "data-testid": TestIds.fulfillmentDate, ...rest }));
+            const defaultContent = label ? (_jsxs("div", { className: wrapperClassName, children: [_jsx("label", { className: labelClassName, children: label }), inputElement] })) : (inputElement);
+            return (_jsx(AsChildSlot, { asChild: asChild, customElement: children, customElementProps: {
                     selectedDate,
                     onDateChange,
                     minDate,
                     maxDate,
-                }, content: defaultContent, "data-testid": TestIds.fulfillmentDate, ...rest, children: defaultContent }));
+                }, content: defaultContent, children: defaultContent }));
         } }));
 });
 FulfillmentDate.displayName = 'FulfillmentDetails.FulfillmentDate';
@@ -211,16 +225,24 @@ export const TimeSlotOptionRepeater = ({ children, }) => {
 };
 TimeSlotOptionRepeater.displayName =
     'FulfillmentDetails.TimeSlotOptionRepeater';
-// ========================================
-// FULFILLMENT TYPE COMPONENT
-// ========================================
-export { FulfillmentTypeEnum } from './core/FulfillmentDetails.js';
 /**
- * Headless component for fulfillment type selection (ASAP or Pre-order)
+ * Headless component for fulfillment type selection (ASAP or Schedule for later)
+ * Provides radio button functionality with default rendering
  *
  * @example
  * ```tsx
- * <FulfillmentDetails.FulfillmentType>
+ * // Default usage - renders radio buttons
+ * <FulfillmentDetails.FulfillmentType />
+ *
+ * // With custom labels
+ * <FulfillmentDetails.FulfillmentType
+ *   asapLabel="Now"
+ *   scheduleLabel="Later"
+ *   groupAriaLabel="When do you want your order?"
+ * />
+ *
+ * // Using asChild pattern
+ * <FulfillmentDetails.FulfillmentType asChild>
  *   {({ selectedType, onTypeChange, hasAsapOption, hasPreorderOption }) => (
  *     <div>
  *       {hasAsapOption && (
@@ -236,7 +258,7 @@ export { FulfillmentTypeEnum } from './core/FulfillmentDetails.js';
  *           onClick={() => onTypeChange(FulfillmentTypeEnum.PREORDER)}
  *           data-selected={selectedType === FulfillmentTypeEnum.PREORDER}
  *         >
- *           Pre-order
+ *           Schedule for later
  *         </button>
  *       )}
  *     </div>
@@ -244,12 +266,94 @@ export { FulfillmentTypeEnum } from './core/FulfillmentDetails.js';
  * </FulfillmentDetails.FulfillmentType>
  * ```
  */
-export const FulfillmentType = ({ children, }) => {
-    return (_jsx(CoreFulfillmentDetails.FulfillmentType, { children: ({ selectedType, onTypeChange, hasAsapOption, hasPreorderOption }) => children({
-            selectedType,
-            onTypeChange,
-            hasAsapOption,
-            hasPreorderOption,
-        }) }));
-};
+export const FulfillmentType = React.forwardRef(({ children, asChild, className, asapLabel, scheduleLabel, groupAriaLabel, asapTimeText, inputClassName, ...rest }, ref) => {
+    return (_jsx(CoreFulfillmentDetails.FulfillmentType, { children: ({ selectedType, onTypeChange, hasAsapOption, hasPreorderOption, hasAsapAndFutureOption, asapTime, asapTimeRange, }) => {
+            const radioGroupName = React.useId();
+            const isOnlyAsap = hasAsapOption && !hasAsapAndFutureOption;
+            // Format ASAP label with time if asapTimeText template is provided
+            const formattedAsapLabel = asapTimeText
+                ? stringFormat(asapTimeText, asapTime)
+                : asapTime;
+            const onlyAsapContent = isOnlyAsap && formattedAsapLabel;
+            const renderRadioOption = (value, label) => (_jsxs("label", { children: [_jsx("input", { type: "radio", name: radioGroupName, value: value, checked: selectedType === value, onChange: () => onTypeChange(value), className: inputClassName }), label] }));
+            const defaultContent = hasAsapAndFutureOption && (_jsxs("div", { role: "radiogroup", "aria-label": groupAriaLabel, children: [hasAsapOption &&
+                        renderRadioOption(FulfillmentTypeEnum.ASAP, asapLabel), hasAsapAndFutureOption &&
+                        renderRadioOption(FulfillmentTypeEnum.ASAP_AND_FUTURE, scheduleLabel)] }));
+            // Use onlyAsapContent when only ASAP is available, otherwise use defaultContent
+            const contentToRender = isOnlyAsap ? onlyAsapContent : defaultContent;
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: {
+                    selectedType,
+                    onTypeChange,
+                    hasAsapOption,
+                    hasAsapAndFutureOption,
+                    hasPreorderOption,
+                    asapTime,
+                    asapTimeRange,
+                }, content: contentToRender, "data-testid": TestIds.fulfillmentType, ...rest, children: contentToRender }));
+        } }));
+});
 FulfillmentType.displayName = 'FulfillmentDetails.FulfillmentType';
+/**
+ * Headless component for editing the delivery address
+ * Only renders when dispatch type is DELIVERY
+ *
+ * @example
+ * ```tsx
+ * // Default usage - renders input for address line
+ * <FulfillmentDetails.DeliveryAddress
+ *   label="Delivery Address"
+ *   placeholder="Enter your address"
+ * />
+ *
+ * // Using asChild pattern for custom rendering
+ * <FulfillmentDetails.DeliveryAddress asChild>
+ *   {({ address, hasAddress, isDelivery, onAddressChange, onAddressClear }) => (
+ *     isDelivery && (
+ *       <div>
+ *         <input
+ *           value={address?.addressLine || ''}
+ *           onChange={(e) => onAddressChange({ ...address, addressLine: e.target.value })}
+ *           placeholder="Street Address"
+ *         />
+ *         <input
+ *           value={address?.city || ''}
+ *           onChange={(e) => onAddressChange({ ...address, city: e.target.value })}
+ *           placeholder="City"
+ *         />
+ *         <input
+ *           value={address?.postalCode || ''}
+ *           onChange={(e) => onAddressChange({ ...address, postalCode: e.target.value })}
+ *           placeholder="ZIP Code"
+ *         />
+ *         {hasAddress && <button onClick={onAddressClear}>Clear</button>}
+ *       </div>
+ *     )
+ *   )}
+ * </FulfillmentDetails.DeliveryAddress>
+ * ```
+ */
+export const DeliveryAddress = React.forwardRef(({ children, asChild, className, label, labelClassName, wrapperClassName, placeholder = 'Enter delivery address', inputClassName, ...rest }, ref) => {
+    return (_jsx(CoreFulfillmentDetails.DeliveryAddress, { children: ({ address, hasAddress, isDelivery, dispatchType, onAddressChange, onAddressClear, }) => {
+            // Don't render anything if not delivery
+            if (!isDelivery) {
+                return null;
+            }
+            const handleAddressLineChange = (e) => {
+                onAddressChange({
+                    ...address,
+                    addressLine: e.target.value,
+                });
+            };
+            const inputElement = (_jsx("input", { type: "text", className: inputClassName, value: address?.addressLine || '', onChange: handleAddressLineChange, placeholder: placeholder, "data-testid": TestIds.deliveryAddressInput }));
+            const defaultContent = label ? (_jsxs("div", { className: wrapperClassName, children: [_jsx("label", { className: labelClassName, children: label }), inputElement] })) : (inputElement);
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: {
+                    address,
+                    hasAddress,
+                    isDelivery,
+                    dispatchType,
+                    onAddressChange,
+                    onAddressClear,
+                }, content: defaultContent, "data-testid": TestIds.deliveryAddress, ...rest, children: defaultContent }));
+        } }));
+});
+DeliveryAddress.displayName = 'FulfillmentDetails.DeliveryAddress';

package/dist/react/ItemDetails.d.ts

@@ -131,7 +131,7 @@ export interface AddToCartButtonProps {
     addToCartLabelMap: Record<AddToCartButtonState, string>;
     /** Children render prop that receives button state and line item data */
     children?: AsChildChildren<{
-        lineItem: LineItem;
+        onHandleAddToCart: (onClick: (lineItem: LineItem) => void) => void;
         buttonState: AddToCartButtonState;
         addToCartButtonDisabled?: boolean;
         /** Content to display when loading */
@@ -139,7 +139,6 @@ export interface AddToCartButtonProps {
         /** Text label for the button */
         label: React.ReactNode;
         formattedPrice: string;
-        modifierGroupHasError: boolean;
     }>;
 }
 /**
@@ -166,9 +165,10 @@ export interface AddToCartButtonProps {
  *   addToCartLabelMap={labelMap}
  *   asChild
  * >
- *   {({ buttonState, formattedPrice, modifierGroupHasError, addToCartButtonDisabled }) => (
+ *   {({ buttonState, formattedPrice, addToCartButtonDisabled,onHandleAddToCart }) => (
  *     <button
- *       disabled={addToCartButtonDisabled || modifierGroupHasError}
+ *       onClick={() => onHandleAddToCart(onClickFunction)}
+ *       disabled={addToCartButtonDisabled}
  *       className="bg-primary text-primary-foreground"
  *     >
  *       <span>{labelMap[buttonState]}</span>

package/dist/react/ItemDetails.js

@@ -118,9 +118,10 @@ Variants.displayName = 'ItemDetails.Variants';
  *   addToCartLabelMap={labelMap}
  *   asChild
  * >
- *   {({ buttonState, formattedPrice, modifierGroupHasError, addToCartButtonDisabled }) => (
+ *   {({ buttonState, formattedPrice, addToCartButtonDisabled,onHandleAddToCart }) => (
  *     <button
- *       disabled={addToCartButtonDisabled || modifierGroupHasError}
+ *       onClick={() => onHandleAddToCart(onClickFunction)}
+ *       disabled={addToCartButtonDisabled}
  *       className="bg-primary text-primary-foreground"
  *     >
  *       <span>{labelMap[buttonState]}</span>
@@ -131,17 +132,15 @@ 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, modifierGroupHasError, }) => {
+    return (_jsx(CoreItemDetails.LineItemComponent, { addToCartLabelMap: addToCartLabelMap, children: ({ onHandleAddToCart, buttonState, addToCartButtonDisabled, loadingState, labelText, formattedPrice, lineItem, }) => {
             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,
                     addToCartButtonDisabled,
                     loadingState,
-                    lineItem,
-                    lineItems: [lineItem],
+                    onHandleAddToCart,
                     label,
                     formattedPrice,
-                    modifierGroupHasError,
                 }, ref: ref, ...props, children: _jsx(Commerce.Actions.AddToCart, { asChild: false, label: label, className: className, lineItems: [lineItem], ...props }) }));
         } }));
 });

package/dist/react/Settings.d.ts

@@ -37,6 +37,8 @@ interface CurrentTimeSlotProps {
     className?: string;
     /** Whether to render as a child component */
     asChild?: boolean;
+    /** prefixElement to display before the time slot text */
+    prefixElement?: React.ReactNode;
     deliveryTypeText: string;
     pickupTypeText: string;
     asapTimeText: string;
@@ -172,6 +174,8 @@ interface CurrentLocationProps {
 export declare const CurrentLocation: React.FC<CurrentLocationProps>;
 interface MinOrderAmountProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
     asChild?: boolean;
+    /** Label text to display before the minimum order amount (e.g., "Min Order:") */
+    label?: string;
     /** Children render prop that receives the minimum order amount data */
     children?: AsChildChildren<{
         minOrderAmount: number | undefined;
@@ -242,6 +246,8 @@ interface SelectedAddressProps extends Omit<React.ComponentPropsWithoutRef<'div'
 export declare const SelectedAddress: React.FC<SelectedAddressProps>;
 interface DeliveryFeeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
     asChild?: boolean;
+    /** Label text to display before the delivery fee (e.g., "Delivery Fee:") */
+    label?: string;
     /** Children render prop that receives the delivery fee data */
     children?: AsChildChildren<{
         deliveryFee: string | undefined;
@@ -267,6 +273,8 @@ interface DeliveryFeeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, '
 export declare const DeliveryFee: React.FC<DeliveryFeeProps>;
 interface FreeDeliveryThresholdProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
     asChild?: boolean;
+    /** Label text to display before the free delivery threshold (e.g., "Free delivery above:") */
+    label?: string;
     /** Children render prop that receives the free delivery threshold data */
     children?: AsChildChildren<{
         freeDeliveryThreshold: string | undefined;