@wix/headless-restaurants-olo 0.0.33 → 0.0.35

package/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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;

package/cjs/dist/react/Settings.js

@@ -4,6 +4,7 @@ import { CoreSettings } from './core/index.js';
 import { DispatchType, } from '../types/fulfillments-types.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { stringFormat } from '../utils/fulfillments-utils.js';
+import { formatTime, getFutureDate, getLocale, getToday, isSameDay, } from '../utils/date-utils.js';
 const DispatchTypeContext = React.createContext(null);
 function useDispatchTypeContext() {
     const context = React.useContext(DispatchTypeContext);
@@ -80,13 +81,6 @@ var TimeSlotDisplayType;
     TimeSlotDisplayType["PREORDER_TOMORROW"] = "PREORDER_TOMORROW";
     TimeSlotDisplayType["SCHEDULED"] = "SCHEDULED";
 })(TimeSlotDisplayType || (TimeSlotDisplayType = {}));
-// Time format options
-const TIME_ONLY_FORMAT = {
-    hour: 'numeric',
-    minute: 'numeric',
-};
-// Helper to format a date as time only (e.g., "10:30 AM")
-const formatTime = (date) => date?.toLocaleString('en-US', TIME_ONLY_FORMAT) ?? '';
 const getTimeSlotDisplayType = (params) => {
     const { asapTime, asapTimeRange, isToday, isTomorrow } = params;
     if (asapTime)
@@ -112,15 +106,15 @@ const formatTimeSlotText = (params, templates) => {
         case TimeSlotDisplayType.ASAP_TIME_RANGE:
             return stringFormat(asapTimeRangeText, asapTimeRange?.minDuration ?? 0, asapTimeRange?.maxDuration ?? 0);
         case TimeSlotDisplayType.PREORDER_TODAY:
-            return stringFormat(preorderTodayText, startTimeStr, endTimeStr);
+            return stringFormat(preorderTodayText, startTimeStr);
         case TimeSlotDisplayType.PREORDER_TOMORROW:
             return stringFormat(preorderTomorrowText, startTimeStr, endTimeStr);
         case TimeSlotDisplayType.SCHEDULED:
         default:
-            return `${timeSlot?.startTime.toLocaleString('en-US', fullDateOptions)} - ${timeSlot?.endTime.toLocaleString('en-US', fullDateOptions)}`;
+            return `${timeSlot?.startTime.toLocaleString(getLocale(), fullDateOptions)} - ${timeSlot?.endTime.toLocaleString(getLocale(), fullDateOptions)}`;
     }
 };
-export const CurrentTimeSlot = React.forwardRef(({ asChild, children, className, deliveryTypeText, pickupTypeText, asapTimeText = '', asapTimeRangeText = '', preorderTodayText = '', preorderTomorrowText = '', ...rest }, ref) => {
+export const CurrentTimeSlot = React.forwardRef(({ asChild, children, className, prefixElement, deliveryTypeText, pickupTypeText, asapTimeText = '', asapTimeRangeText = '', preorderTodayText = '', preorderTomorrowText = '', ...rest }, ref) => {
     const fullDateOptions = {
         month: 'short',
         day: 'numeric',
@@ -128,17 +122,16 @@ export const CurrentTimeSlot = React.forwardRef(({ asChild, children, className,
         minute: 'numeric',
     };
     return (_jsx(CoreSettings.CurrentTimeSlot, { children: ({ timeSlot, hasDetails, asapTime, asapTimeRange }) => {
+            if (!hasDetails)
+                return null;
             const dispatchTypeText = timeSlot?.dispatchType === DispatchType.DELIVERY
                 ? deliveryTypeText
                 : pickupTypeText;
             // Determine if the time slot is today or tomorrow
-            const now = new Date();
-            const isToday = timeSlot?.startTime &&
-                timeSlot.startTime.toDateString() === now.toDateString();
-            const tomorrow = new Date(now);
-            tomorrow.setDate(tomorrow.getDate() + 1);
-            const isTomorrow = timeSlot?.startTime &&
-                timeSlot.startTime.toDateString() === tomorrow.toDateString();
+            const now = getToday();
+            const isToday = timeSlot?.startTime && isSameDay(timeSlot.startTime, now);
+            const tomorrow = getFutureDate(1);
+            const isTomorrow = timeSlot?.startTime && isSameDay(timeSlot.startTime, tomorrow);
             const timeSlotText = formatTimeSlotText({ asapTime, asapTimeRange, timeSlot, isToday, isTomorrow }, {
                 asapTimeText,
                 asapTimeRangeText,
@@ -146,14 +139,14 @@ export const CurrentTimeSlot = React.forwardRef(({ asChild, children, className,
                 preorderTomorrowText,
                 fullDateOptions,
             });
-            return hasDetails ? (_jsxs(AsChildSlot, { ref: ref, asChild: asChild, 
+            return (_jsxs(AsChildSlot, { ref: ref, asChild: asChild, 
                 // testId={TestIds.currentTimeSlot}
                 className: className, customElement: children, customElementProps: {
                     timeSlot,
                     hasDetails,
                     asapTime,
                     asapTimeRange,
-                }, content: timeSlot, ...rest, children: [dispatchTypeText, " ", timeSlotText] })) : undefined;
+                }, content: timeSlot, ...rest, children: [prefixElement, dispatchTypeText, " ", timeSlotText] }));
         } }));
 });
 CurrentTimeSlot.displayName = 'Settings.CurrentTimeSlot';
@@ -283,8 +276,8 @@ export const CurrentLocation = ({ children, className, asChild, }) => {
  * </Settings.MinOrderAmount>
  * ```
  */
-export const MinOrderAmount = ({ children, asChild, className, ...rest }) => {
-    return (_jsx(CoreSettings.MinOrderAmount, { children: ({ minOrderAmount, hasMinOrderAmount }) => (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: { minOrderAmount, hasMinOrderAmount }, content: minOrderAmount?.toString() ?? '', ...rest, children: minOrderAmount && _jsxs("div", { children: ["$", minOrderAmount] }) })) }));
+export const MinOrderAmount = ({ children, asChild, className, label, ...rest }) => {
+    return (_jsx(CoreSettings.MinOrderAmount, { children: ({ minOrderAmount, hasMinOrderAmount }) => (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: { minOrderAmount, hasMinOrderAmount }, content: minOrderAmount?.toString() ?? '', ...rest, children: minOrderAmount && (_jsxs("div", { children: [label && _jsxs("span", { children: [label, " "] }), "$", minOrderAmount] })) })) }));
 };
 /**
  * Headless component for accepting orders status
@@ -349,8 +342,8 @@ export const SelectedAddress = ({ children, asChild, className, ...rest }) => {
  * </Settings.DeliveryFee>
  * ```
  */
-export const DeliveryFee = ({ children, asChild, className, ...rest }) => {
-    return (_jsx(CoreSettings.DeliveryFee, { children: ({ deliveryFee, hasDeliveryFee }) => (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: { deliveryFee, hasDeliveryFee }, content: deliveryFee ?? '', ...rest, children: deliveryFee && _jsx("div", { children: deliveryFee }) })) }));
+export const DeliveryFee = ({ children, asChild, className, label, ...rest }) => {
+    return (_jsx(CoreSettings.DeliveryFee, { children: ({ deliveryFee, hasDeliveryFee }) => (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: { deliveryFee, hasDeliveryFee }, content: deliveryFee ?? '', ...rest, children: deliveryFee && (_jsxs("div", { children: [label && _jsxs("span", { children: [label, " "] }), deliveryFee] })) })) }));
 };
 /**
  * Headless component for free delivery threshold information
@@ -366,9 +359,9 @@ export const DeliveryFee = ({ children, asChild, className, ...rest }) => {
  * </Settings.FreeDeliveryThreshold>
  * ```
  */
-export const FreeDeliveryThreshold = ({ children, asChild, className, ...rest }) => {
+export const FreeDeliveryThreshold = ({ children, asChild, className, label, ...rest }) => {
     return (_jsx(CoreSettings.FreeDeliveryThreshold, { children: ({ freeDeliveryThreshold, hasFreeDeliveryThreshold }) => (_jsx(AsChildSlot, { asChild: asChild, className: className, customElement: children, customElementProps: {
                 freeDeliveryThreshold,
                 hasFreeDeliveryThreshold,
-            }, content: freeDeliveryThreshold ?? '', ...rest, children: freeDeliveryThreshold && _jsx("div", { children: freeDeliveryThreshold }) })) }));
+            }, content: freeDeliveryThreshold ?? '', ...rest, children: freeDeliveryThreshold && (_jsxs("div", { children: [label && _jsxs("span", { children: [label, " "] }), "$", freeDeliveryThreshold] })) })) }));
 };