Order composer

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

An order made inside a support ticket: products found by name, each variant with its stock drawn and said (in stock, none, oversold, not known) and the shop's oversell rule kept, added by its stable id; a copy of an order starting as a free replacement that is said and can be switched to charging; shipping and a note with the total; and a draft created awaiting payment, nothing charged and no invoice sent until Send the invoice, prices that changed since they were added said first.

Use it for

Agents creating or duplicating an order for a customer from a ticket.

Not for

Acting on an existing order (ticket-orders).

Anatomy

header: the mark, New order for or Copy of … for the customer
picker: Product (searchable), stock as of, the variants (title, price, SKU, stock bar and word), Quantity, Add, the oversell rule
draft: Items (the quantity leading as a figure that edits in place, product, each or free / was, amount, remove on attention), Pricing (Free replacement · Charge for it, a switch) for a copy, the sum with Shipping as a menu and the total as the figure, Add a note on demand, Create draft order; created: the draft's number, changed prices, Send the invoice

States

empty draft
a copy as a free replacement
no stock; oversold; stock not known; past stock refused or on backorder
creating; created; prices changed; create failed
invoice sending; sent; failed

Keyboard

the variants are a radio group
Tab through quantity, Add, the draft's lines and pricing

Motion

The chosen variant's ring fades in; nothing moves at rest.

Props

Prop	Type	Default	Description
`products`	`Product[]`	—	Products with variants: stable id, title, SKU, price, stock (null not known, negative oversold).
`customer`	`{ name; email }`	—	Who it's for.
`duplicateOf`	`{ number; lines }`	—	A copy of an order: its lines start here as a free replacement.
`oversell`	`boolean`	—	Whether the shop sells past stock.
`onCreate`	`(d: OrderDraft) => Promise<{ number; priceChanged? }>`	—	Create a draft awaiting payment; resolve with its number and any prices that changed since.
`onSendInvoice`	`(number) => Promise<unknown>`	—	Send the draft's invoice, a separate step.
`currency` (required)	`string`	—
`stockAsOf`	`string`	—
`shippingPrices`	`{ standard: number; express: number; }`	—
`defaultProductId`	`string`	—	The product picked at first, to show its variants.
`timeZone`	`string`	—
`product`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { OrderComposer } from "@beamline/order-composer";

Get it

Order composer 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 composerComplete system · $49

An order made inside a support ticket.

Replacing an order

A copy of #1031 for Maya, starting as a free replacement (said, and switchable to Charge for it). The slippers' variants show their stock: M is out, L is oversold by 2, the shop doesn't sell past stock. Add Oat · M instead, then create the draft: nothing is charged and no invoice goes out until you send it.

0 × 0full

A new order

From nothing: find a product, pick a variant (a small candle's stock isn't known), add it. Created with the candle in it, the price that changed since is said before the invoice goes.