Commerce
Order List
Customer-facing food order history cards for restaurant and commerce flows. Each card can show the order title, restaurant name, order number, placed time, fulfillment type, payment status, order status, and total amount. Tapping an order opens a linked detail screen or the built-in detail modal.
Readable customer order rows with fixed MVP spacing, image, status, and meta lines.
Use a detail screen when linked, or fall back to the built-in bottom-sheet detail modal.
Available on all plans. Backend and status-filter controls are locked for this MVP.
Four things worth knowing
Customer-facing order history
Order List renders a readable list of food orders after checkout, with enough detail for customers to recognize each order quickly.
Core order metadata
Each card can show item-based title, restaurant name, order number, placed time, fulfillment type, payment status label, status badge, and total amount.
Fixed MVP data mode
The component is currently fixed to local/runtime order data. Backend fetch and status-filter controls are intentionally locked and hidden.
Detail screen or modal
If detailScreenId is set, card tap calls onScreenNavigate(detailScreenId, params) with the full order payload. Otherwise it opens the built-in bottom-sheet detail modal.
Find it, drop it, connect details if needed
Where to find itAdd it to an orders screen
- Component picker → Commerce → Order List.
- Drop it onto an orders, account history, or post-checkout screen.
- Set
headerTextandemptyTextfor the screen copy.
Before you publishThree things to check
- Optionally connect
detailScreenIdif order taps should open a dedicated screen. - Preview with placed orders from the cart/order flow so cards show real runtime data.
- Confirm locked fields like Status Filter, Spacing, and visibility toggles are not exposed.
Content and navigation
| Prop | Type | Default | Description |
|---|---|---|---|
headerText | string | ’Your Orders’ | Title shown above the order list. |
emptyText | string | ’Your orders will show up here after checkout.‘ | Message shown when there are no orders. |
detailScreenId | screen-select | ” | Optional target screen for order taps. |
Make it yours
Editable styling controls are focused on text, cards, status colors, and empty-state presentation. Runtime uses fixed values for hidden MVP layout and visibility fields.
| Prop | Default | What it controls |
|---|---|---|
borderRadius | 14 | Order card corner radius. |
titleFontSize | 16 | Main order title size. |
backgroundColor | #FFFFFF | Outer list background. |
cardBackgroundColor | #FFFFFF | Individual order card background. |
titleColor | #1A1A1A | Order title text color. |
metaColor | #6B7280 | Restaurant, number, placed time, and fulfillment metadata color. |
priceColor | #EA580C | Total amount color. |
statusColor | #FFFFFF | Status badge text color. |
statusBackgroundColor | #EA580C | Status badge background color. |
borderColor | #E8E8E8 | Card border color. |
headerTextColor | #1A1A1A | List heading text color. |
emptyTextColor | #9CA3AF | Empty-state message color. |
emptyIconColor | #D1D5DB | Empty-state icon color. |
fontFamily | Urbanist-Medium | Typography family used throughout the component. |
Common mistakes to avoid
Do not expose locked MVP fields
statusFilter, useBackendData, image/status/item-count/fulfillment/placed-time toggles, spacing, and other fixed layout fields must stay hidden.
Legacy values are scrubbed
Old saved values for locked fields are automatically ignored and removed in the editor so old screens cannot keep exposing them.
Use a detail screen only when needed
If no custom order detail layout is needed, leave detailScreenId empty and use the built-in modal.
Keep code locations in sync
If requirements change, update builderComponentRegistry.ts, BuilderOrderList.tsx, and ComponentPropertyEditor.tsx, then rebuild the deploy bundle.