Commerce & Orders

Pickup Scheduler

A pickup-time selector for restaurant and food ordering flows. Customers choose ASAP or schedule a slot later, with automatic opening-hours checks, live capacity from backend APIs, and pickup data attached to the order payload before confirmation.

Flow positionBetween Cart and confirmation

Selects fulfillment time before Order Summary, payment, or direct submission.

ModesASAP · Scheduled

Supports immediate pickup and time-slot booking in one screen.

Hours awareOpening window · Cutoff filtering

Respects closed days and filters slots outside open/cutoff windows.

What it does

Four things worth knowing

Reads opening hours on mount

Fetches app opening hours at runtime and blocks ordering UI with a Closed Today state when the day is closed or in special closed dates.

ASAP + scheduled pickup modes

Customers choose between immediate pickup and Schedule for Later. Scheduled mode fetches date-based slots with selected slot duration.

Live slots with opening-window filtering

Availability requests include slotDuration and only keep slots after now, after opening, and before close minus cutoff minutes.

Confirm attaches pickup payload fields

On confirm it forwards pickup fields (pickupMode, pickupDate, pickupTime, pickupEndTime, fulfillmentType) via navigation or legacy onSubmitOrder.

Builder setup

Find it, drop it, connect screens

Where to find itAdd it to your time selection screen

Component picker → Commerce & Orders → Pickup Scheduler.
Drop it onto a screen between Cart and Order Summary.
Wire orderConfirmScreenId, ordersScreenId, and optional backScreenId in Actions.

Before you publishThree things to check

Set slotDurationMinutes to 10, 15, or 30 minutes based on kitchen throughput.
Configure opening hours in the Opening Hours component; Pickup Scheduler reads those values automatically.
Ensure runtime provides appId and secureApiCall for live availability and reservation.

Category: Commerce & OrdersComponent: BuilderPickupSchedulerRegistry key: pickup-schedulerOpening hours source: opening-hours

Props

Content, toggles, navigation, and runtime

Prop	Type	Default	Description
`title`, `subtitle`, `asapLabel`, `scheduledLabel`, `confirmButtonText`	string	Registry defaults	Main text for heading, mode cards, and primary action copy.
`slotDurationMinutes`	select (10/15/30)	`15`	Controls Review slot spacing and backend availability query interval.
`showAsapOption`, `showCapacityBar`, `showEstimatedTime`, `showConfirmButton`	boolean	`true`	Feature visibility toggles for mode card details and CTA area.
`orderConfirmScreenId`, `ordersScreenId`, `backScreenId`	screen-select	none	Navigation destinations for confirm, fallback, and optional explicit back route.
`appId`, `secureApiCall`, `isReview`, `navigationParams`, `cartItems`, `onGoBack`, `onScreenNavigate`, `onSubmitOrder`, `onPickupSelected`	runtime	Injected by AppPlayer	Runtime context for API access, Review behavior, navigation, submission callbacks, and pending order enrichment.

Toggles & colours

Make it yours

All style props accept normal colour tokens and sizing values from Builder. Keep registry defaults aligned with runtime UI states.

Prop	Default	What it controls
`primaryColor`, `backgroundColor`, `cardBackgroundColor`	Registry defaults	Core accent and surface colours for cards and container.
`titleColor`, `metaColor`, `dividerColor`	Registry defaults	Heading, metadata, and section separation styling.
`slotSelectedBgColor`, `slotFullBgColor`	Registry defaults	Selected slot and unavailable/full slot background states.
`capacityBarColor`	Registry default	Capacity progress bar colour for spots-left indicators.
`borderRadius`, `fontFamily`	Registry defaults	Shape and typography styling throughout the scheduler.

Tips

Common mistakes to avoid

Closed Today state is opening-hours driven

If the weekday is closed or today is in special closed dates, the scheduler intentionally blocks ordering. Update hours through Opening Hours to change this.

Slot duration affects Review, API, and display

Changing slotDurationMinutes changes generated Review slots, the backend query interval, and the rendered start/end times.

Forward pending-order fields consistently

When cart data is passed as pending order params, keep pickup fields and fulfillment payload shape aligned with Order Summary and submit logic.

Review can look empty late in day

Review slot generation still filters past times. If testing after the Review window, it can appear empty even though the component is working correctly.