# Return case A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Shop](https://beamline.io/components/apps/shop) app. Live demo: https://beamline.io/components/return-case One return as one place where every act is its own. The return, its order (linked out) and the customer on three cards; the stage said on its tone. Items each with two facts, came back and can be restocked, unknown until checked; checking opens under the item with the next and previous a step away, a no needing a reason and photos. Per item, leave its amount out of this refund (resets, still expected back) or reject it (final; blocked on the last item or a paid return fee, said on the choice). The shipment: carrier, tracking or none yet, the label (failed with Try again, voided), delivered apart from marked received; an exchange drafted is not shipped. The refund worked out from parts (items, shipping, tax) into a suggestion, Apply copying it to the amount, which stays as edited (a moved suggestion said) and is dragged or typed over what can be refunded; method; restock apart; the payment's answer (sent, pending, settled) and the restock's listed apart. The bar offers what the stage allows: approve picked or all with the scope said, mark received, validate all reviewed as replacing the checks set, release the exchange, mark done. Cancel (reopenable) and Reject (final) in the menu with a reason, an optional email and what happens to the label and held stock; a past status email sent again as it was, queued apart from delivered. A history of who did what, with notes that stay. ## Use it for - A returns or claims case where receipt, inspection, refund, exchange and rejection are separate acts with separate outcomes. - Where an amount is suggested from parts and then edited before issuing, and payment settles later. ## Not for - A queue of many returns ([return-queue](https://beamline.io/components/return-queue)). - Starting a return from an order ([return-request](https://beamline.io/components/return-request)). ## Anatomy - header: the tool's mark, Return , the stage, the menu (send a status email again, reopen, cancel, reject) - cards: return (resolution, requested), order (number, placed, total), customer (email, earlier returns) - items: per item its facts, decisions and menu; the check panel or the reject panel under it - shipment: carrier, tracking, label, received; label failure with Try again; exchange and held stock - refund: parts and suggestion with Apply; amount, its track and grip, method, restock, Refund; outcomes - history: Add a note opening the box (that notes stay is its placeholder), events newest first - bar: the acts the stage allows ## States - requested (no tracking), approved (label failed), received mid-check, refund pending, done, cancelled with stock held, rejected - an item not checked, back and restockable, back and not restockable, not back, left out, rejected - reject blocked on the last item or a paid fee - an act refused: said where it was asked, nothing changed - phone: one column, the bar wraps - right to left: mirrored - reduced motion: through the tokens ## Keyboard - Tab through the menu, items and their menus, the panels, the refund (arrows move the grip), the history and the bar ## Motion Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `value` | `ReturnCaseData` | — | The case (controlled). | | `defaultValue` | `ReturnCaseData` | — | Initial selection when uncontrolled; omitted by default. | | `onValueChange` | `((value: ReturnCaseData) => void)` | — | Reports the selected value after a change; no callback by default. | | `onAction` (required) | `(action: ReturnAction) => Promise` | — | Does one act; resolve with the case as it now stands, reject with the reason nothing changed. | | `currency` (required) | `string` | — | ISO 4217 code amounts are in. | | `locations` (required) | `string[]` | — | Where restocked items can go. | | `product` | `string` | — | The returns tool's name, for the mark. | | `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` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Alert](https://beamline.io/components/alert.md) - [Avatar](https://beamline.io/components/avatar.md) - [Button](https://beamline.io/components/button.md) - [Checkbox](https://beamline.io/components/checkbox.md) - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) - [File drop zone](https://beamline.io/components/file-dropzone.md) - [Label](https://beamline.io/components/label.md) - [Number field](https://beamline.io/components/number-field.md) - [Radio group](https://beamline.io/components/radio-group.md) - [Select](https://beamline.io/components/select.md) - [Spinner](https://beamline.io/components/spinner.md) - [Switch](https://beamline.io/components/switch.md) - [Textarea](https://beamline.io/components/textarea.md) - [Value grip](https://beamline.io/components/value-grip.md) ## Dependencies `lucide-react` ## Import ```tsx import { ReturnCase } from "@beamline/return-case"; ``` ## Get it Return case is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Shop - [Product editor](https://beamline.io/components/product-editor): A product being made in a shop's back office, every value read as text at rest. The variant grid, grouped by the first option, lists each combination… - [Category manager](https://beamline.io/components/category-manager): A shop's product categories, nested and ranked. Each category moves up, down or into another from its menu, and every move gets its own receipt (saving… - [Inventory item](https://beamline.io/components/inventory-item): One stock item in a shop's back office, apart from the variants that sell it (how many each uses per unit). Stock per location as stocked, reserved and… - [Plan comparison](https://beamline.io/components/plan-comparison): Plans side by side against every feature: prices that roll between monthly and yearly, the current and recommended plan marked, a header that stays in… - [Step form](https://beamline.io/components/step-form): The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the… - [Orders admin](https://beamline.io/components/orders-admin): A shop's order desk: today's orders and revenue, quick filters for what needs doing (to fulfil, unpaid, returns), a virtualised orders grid, and the… - [Order detail](https://beamline.io/components/order-detail): One shop order with payment and fulfilment as two separate lanes. The header says where each stands (paid, partly paid, awaiting, refunded; not… - [Order board](https://beamline.io/components/order-board): A shop's orders as cards in its columns, on the shared kanban with drag and keyboard moves. Each card: number, estimate or work order, customer, vehicle… - [Order composer](https://beamline.io/components/order-composer): 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… - [Draft orders](https://beamline.io/components/draft-orders): A draft order made for a customer in a shop's back office that reads like the order it will become. The lines lead: each with its variant and SKU or… - [Order changes](https://beamline.io/components/order-changes): What happens to a shop order after it's placed. Edit: the order as it stands beside the requested version, each line marked new, changed (old → new… - [Special orders](https://beamline.io/components/special-orders): Customers' special orders as demand to buy for, per outlet: To order apart from Ordered; each product's demand, what is reserved, incoming and on order… - [Order history and fills](https://beamline.io/components/order-history): Every order the account placed and every fill it got, for a period: totals for volume, fees, fill rate and maker share; orders with their status and how… - [Order ledger](https://beamline.io/components/order-ledger): Purchase orders as money. Each order's spend is drawn against its approved total (paid, billed, pending, what is left, and any overrun past the end… - [Ticket orders](https://beamline.io/components/ticket-orders): A customer's orders inside a support ticket, each action's effect said before it's done: orders and drafts kept apart, a paid draft shown once as its… - [Record search](https://beamline.io/components/record-search): One search across connected records (customers, vehicles, orders) by name, phone, plate, VIN or order number. What the words look like is said (info)… - [Return queue](https://beamline.io/components/return-queue): A queue of return cases. Search by return, order or customer, exactly (the default) or loosely; status tabs with counts, Requires attention first; a date… - [Return request](https://beamline.io/components/return-request): 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… - [Purchase orders](https://beamline.io/components/purchase-orders): A salon's purchase orders, received: the orders down the side, the chosen one beside them. Each line still due reads as a strip of received, this… - [Print quote](https://beamline.io/components/print-quote): A print shop's quoting in three places. Quote: a group of garments that share one imprint and one quantity break, the group's pieces counted together and… - [Service estimate](https://beamline.io/components/service-estimate): An estimate for one vehicle. Services added from the catalogue (one not listed for this vehicle said on warning, fit unknown said); each with its lines… - [Job card](https://beamline.io/components/job-card): A technician's repair order, phone-first. The vehicle, the customer and when it's due in words (due at, due in, overdue by how long); an offline copy… - [Parts tracker](https://beamline.io/components/parts-tracker): Parts across a shop's work orders: each with its number, the order and vehicle, supplier, quantity and cost (not known said), and where it is: ordered… - [Visit board](https://beamline.io/components/visit-board): The staff board for a walk-in queue: visits move from waiting through called and serving to done today. Arrival (here or on the way), the place in the… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).