Order detail

A React block (a whole screen) in Beamline's Shop app.

One shop order with payment and fulfilment as two separate lanes. The header says where each stands (paid, partly paid, awaiting, refunded; not fulfilled, partly, shipped, delivered), the amount still owed when it isn't zero, and a Cancel that, once something has shipped, says why it can't be used. The items show what's fulfilled and allocated; allocating by hand from a location opens bundles into their parts with availability beside each, and returns each part's result, a short part left not allocated with a location that has enough. The money is a ledger with a running balance (received, pending, refunded, outstanding): a payment link sent is never counted as money, a failed capture shows the provider's words on its row and retries the same request, Mark as paid records who and how; a refund stops at what can be refunded, offers store credit only to customers with an account, previews what the payment will read and carries one key so a retry can't refund twice. Fulfilments are short tracks (awaiting, shipped, delivered or picked up) with only their next step; creating one by location filters the methods to it and names the hidden ones, says a dearer method doesn't change what the customer paid, and shows each line's stock change there (or that it's short or unknown). The customer's order emails are changed apart from the account they sign in with; moving the order to another account is a transfer that waits for approval, the owner unchanged until then.

Use it for

A shop's back office looking at one order: its money and its goods as two things, each with the next action it allows.
Any order with partial payments and partial shipments (B2B orders, marketplace orders).

Not for

The list of all orders with quick actions (orders-admin).
Changes after an order is placed: edits, exchanges, returns (order-changes).

Anatomy

header: order and date, customer; Payment and Fulfilment lanes; what's owed; why Cancel can't be used; the order menu
items: each line with variant and sku, fulfilled and allocated, quantity and price; Allocate items and its form (location, parts with availability, results)
fulfilments: each track (location, method, tracking, items, steps, next step, Cancel fulfilment); Create a fulfilment and its form
money: total, received, pending, refunded, outstanding; the ledger rows with status, error and Try again; Refund and Mark as paid and their forms
customer: name, account email (or guest; why it can't change here a hint), where order emails go; the pending transfer; change contact or request a transfer

States

paid
partly paid
awaiting payment
partly refunded
refunded
outstanding
link not money
capture failed
retry refused
manual payment
refund over the limit
credit for guests unavailable
fulfilment created
method hidden for the location
stock short
stock unknown
shipped
delivered
picked up
fulfilment cancelled
allocated
part short with a better location
transfer pending
cancel blocked
cancelled

Keyboard

Tab through the menu, Allocate, each track's next step, Create, the ledger's Try again, Refund, Mark as paid and the customer's actions; dialogs trap focus and Escape closes them

Props

Prop	Type	Default	Description
`order` (required)	`ShopOrder`	—
`locations` (required)	`StockLocation[]`	—
`methods` (required)	`ShippingMethod[]`	—
`onRetryPayment`	`((paymentId: string) => void \| Promise<unknown>)`	—
`onMarkPaid`	`((amount: number, note: string) => void \| Promise<unknown>)`	—
`onRefund`	`((r: RefundRequest) => void \| Promise<unknown>)`	—
`onCreateFulfillment`	`((f: NewFulfillment) => void \| Promise<unknown>)`	—
`onAdvanceFulfillment`	`((id: string, to: FulfillmentStatus, tracking?: string \| undefined) => void \| Promise<u…`	—
`onCancelFulfillment`	`((id: string) => void \| Promise<unknown>)`	—
`onAllocate`	`((locationId: string, lineIds: string[]) => Promise<AllocationResult[]>)`	—	Reserves stock for the order's unallocated items; returns each part's result.
`onContactChange`	`((email: string) => void \| Promise<unknown>)`	—
`onTransferRequest`	`((email: string) => void \| Promise<unknown>)`	—
`onCancelOrder`	`(() => void \| Promise<unknown>)`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { OrderDetail } from "@beamline/order-detail";

Get it

Order detail is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Order detailComplete system · $49

One shop order with payment and fulfilment as two separate lanes.

An order part-shipped

Partly paid with €55.90 outstanding: the payment link isn't money and the second charge failed (its first retry times out). One tyre has shipped, so the order can't be cancelled; the light set still needs allocating, its front light short in Lisbon.

0 × 0full

Paid and delivered

Everything paid and delivered: a refund stops at what can be refunded and previews what the payment will read. A transfer to another account waits for Marta's approval.

0 × 0full

States

A guest's new order, paid and not yet fulfilled: a refund can't go to store credit, and the order can still be cancelled from its menu.

0 × 0full

About Order detail

← Orders admin Order board →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.

Order detail

Use it for

Not for

Anatomy

States

Keyboard

Props

Built from

Dependencies

Import

Get it

More in Shop