ReturnItemsPicker

The lines of an order to return, controlled. Each line offers at most its returnableQuantity; once a quantity is chosen it asks for a reason, a serial number per unit for a device, and photos, which a reason may require. Given the orderId, an exchangeable line also offers an exchange for another variant.

import { ReturnItemsPicker } from "@evolve-storefront/feature-return/return-items-picker";

Renders inside ReturnProvider.

Preview

DefaultOpen in Storybook ↗

Usage

Choosing a quantity opens the line's details; the printer asks for a serial number per unit.

const { data: lines = [] } = useReturnableLines(orderId);
const { data: reasons = [] } = useReturnReasons();
const [drafts, setDrafts] = useState<Record<string, ReturnLineDraft>>({});

<ReturnItemsPicker lines={lines} reasons={reasons} value={drafts} onValueChange={setDrafts} />;

Props

Prop	Type	Description
lines	ReturnableLine[]	The order's lines that can still be returned.
reasons	ReturnReasonOption[]
value	Record<string, ReturnLineDraft>	What the buyer has filled in, per order line id.
onValueChange	(value: Record<string, ReturnLineDraft>) => void
errors?	Record<string, string>	Errors keyed by lineFieldNames; the photo error is rendered here.
orderId?	string	The order the lines belong to. With it, an exchangeable line offers an exchange.

Any other props go to the root element, like on a plain HTML element.

Examples

ConsumableA consumable asks for no serial number; damage makes its photos required.

// Seed the drafts with the line the buyer picked on the order.
const [drafts, setDrafts] = useState({ [lineItemId]: { quantity: 1, serialNumbers: [], files: [] } });

Open in Storybook ↗