Return request

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

Staff start a return from an order, and edit the reasons customers pick. New return: the order's lines as a checklist, each with its variant, price and units already returned; tick what comes back (a line fully returned says nothing is left), pick how many when more than one is eligible, and why, as chips: a reason from the active ones, then its subreasons (any that apply, or one, as the reason allows); a note opens on demand; units not returned stay eligible, said. The return label reads as a sentence (the service with its price, or none, and where it goes) with Change; who pays it is the one choice beside it (the customer, taken off the refund; or the shop, charged to its account, not free), and the customer's phone is asked for when a collection needs it and the order has none. Beside it the estimated refund as the screen's figure, over units and the label, issued only after approval; missing reasons said. Creating it makes a request awaiting approval, with no refund. Reasons: a list (off ones marked) and an editor for the label customers see, offered or not (turned off hides it from new returns while returns already made keep its wording), subreasons in order (move, remove, add) and one or several to pick; saving keeps a revision; a duplicate label refused.

Use it for

Staff creating a return or claim from an order, per line with quantities, reasons and a label.
Editing the reasons customers pick from, with subreasons and history kept.

Not for

Working an existing return (return-case).
The returns queue (return-queue).

Anatomy

header: the tool's mark, Start a return for <order> with the customer, or Return reasons; the view switch
what comes back: each line ticked or not, its units (a choice of counts when more than one is eligible), reason chips, subreason chips under them, Add a note, what stays eligible
label: the service, its price and where it goes as a sentence with Change (service and destination menus while changing); who pays with its consequence; the phone when needed
estimate: the estimated refund, large, refunded after approval; units and the label; Create the return request; made: awaiting approval
reasons: list with New reason; editor with label, offered, subreasons, several, Save

States

nothing picked, a line part-returned, a line with nothing left, a reason missing, a service without a price, a phone needed
customer or shop paying, submitting, refused, made awaiting approval
a reason on or off, with or without subreasons, one or several, saved, refused
phone: one column
right to left: mirrored
reduced motion: through the tokens

Keyboard

Tab through each line's units (arrows step), reason and details, the label choices and Create; in Reasons, the list, the fields and the subreasons' move buttons

Motion

Nothing runs at rest.

Props

Prop	Type	Default	Description
`order` (required)	`{ id: string; customer: string; email: string; phone: string \| null; }`	—
`lines` (required)	`OrderLine[]`	—
`reasons`	`ReturnReason[]`	—	The reasons (controlled), edited in the Reasons view.
`defaultReasons`	`ReturnReason[]`	—
`onReasonsChange`	`((reasons: ReturnReason[]) => void)`	—
`onSaveReason` (required)	`(reason: ReturnReason) => Promise<ReturnReason>`	—	Saves one reason; resolve with it as saved, reject with why not.
`locations` (required)	`string[]`	—	Where returns can go.
`services` (required)	`LabelService[]`	—
`currency` (required)	`string`	—
`onSubmit` (required)	`(draft: ReturnRequestDraft) => Promise<{ id: string; }>`	—	Sends the request; resolve with the new return's id, reject with why nothing was made.
`defaultUnits`	`Record<string, number>`	—	Units to return at first, by line (a request reopened mid-way).
`defaultReasonsPicked`	`Record<string, { reasonId: string; subreasonIds: string[]; }>`	—
`defaultView`	`"reasons" \| "request"`	—
`product`	`string`	—
`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 { ReturnRequest } from "@beamline/return-request";

Get it

Return request 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

Return requestComplete system · $49

Staff start a return from an order, and edit the reasons customers pick.

Starting a return for an order

One of Callum's two remaining pairs of socks comes back because they're too small, so the other pair stays eligible. The tent arrived broken. The jacket was already returned. The estimate takes the label off the refund unless the shop pays. A collection needs his phone number, which the order doesn't have. The request is created awaiting approval, with no refund yet.

0 × 0full

States

A return with nothing picked yet, and the reasons customers pick from: a reason turned off keeps past returns' wording.