ReturnDetail

A single return request: its lines, how the goods go back, and how it was settled. Pure: the caller passes the return it owns (via useReturn).

import { ReturnDetail } from "@evolve-storefront/feature-return/return-detail";

Renders inside ReturnProvider.

Preview

DefaultOpen in Storybook ↗

Usage

Awaiting the seller's decision; the buyer may still withdraw it.

const { data: returnEntry } = useReturn(returnId);
const withdraw = useCancelReturn();

<ReturnDetail
  return={returnEntry}
  onWithdraw={() => withdraw.mutate({ id: returnEntry.id })}
  isWithdrawing={withdraw.isPending}
/>;

Props

Prop	Type	Description
return	Return	The resolved return. The caller owns the query; the view only renders.
renderItem?	ReturnItemRenderer<Return["items"][number]>	Replace the item rows in the default layout. The item type comes from return, so an extended query's added fields are typed here with no cast.
onWithdraw?	(() => void)	Withdraws the return. Offered only while it is cancellable.
isWithdrawing?	boolean
headingLevel?	HeadingLevel	The level of the view's own headings, such as the rejection notice.
children?	ReactNode	Compose the parts for a bespoke layout, or omit for the standard one.

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

Change the layout

Pass children to ReturnDetail to arrange its parts yourself. Every part is exported from @evolve-storefront/feature-return/return-detail.

ReturnDetailLayoutThe standard arrangement of the detail parts, which ReturnDetail renders without children.

Prop	Type	Description
return	Return	The resolved return. The caller owns the query; the view only renders.
renderItem?	ReturnItemRenderer<Return["items"][number]>	Replace the item rows in the default layout. The item type comes from return, so an extended query's added fields are typed here with no cast.
onWithdraw?	(() => void)	Withdraws the return. Offered only while it is cancellable.
isWithdrawing?	boolean
headingLevel?	HeadingLevel	The level of the view's own headings, such as the rejection notice.

ReturnDetailCreditThe credit note that settled the return, against which invoice, and any fee withheld.

Prop	Type	Description
creditNote	ReturnCreditNote
fee?	Money | null	Withheld from the credit, such as a restocking fee.

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

ReturnDetailHeaderReturn detail header: RMA number, orders, requested date and by whom, status.

Prop	Type	Description
return	Return
actions?	ReactNode	Actions beside the status, such as ReturnDetailWithdraw.

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

ReturnDetailItemsThe lines of the return.

Prop	Type	Description
items	ReturnItem[]	The returned lines. Taking the items rather than the whole return is what carries an extended query's item type through to renderItem.
note?	string | null	The buyer's note, rendered below the list.
renderItem?	ReturnItemRenderer<ReturnItem>

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

ReturnDetailRejectionSays the seller refused the return, and why.

Prop	Type	Description
reason?	string | null	The seller's reason, when one was given.
headingLevel?	HeadingLevel

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

ReturnDetailShippingHow the goods go back: where a carrier collects them, a service-point drop-off, or, for an own shipment, where to send them and the label once the seller has approved.

Prop	Type	Description
shipping	ReturnShipping

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

ReturnDetailWithdrawWithdraws a return the seller has not received goods for yet.

Prop	Type	Description
onWithdraw	() => void	Withdraws the return, such as useCancelReturn().mutate.
isWithdrawing?	boolean

ReturnStatusBadgeStatus badge.

Tolerates a status it does not know, because TONE[status] looks total to tsc while a storefront's union lags the framework schema routinely. Without t.has, t(status) logs MISSING_MESSAGE and renders its own key path — a shopper reads Return.status.WRITTEN_OFF in the badge. The ?? is belt and braces: StatusBadge defaults tone itself, and this keeps the fallback from depending on that.

Prop	Type	Description
status	ReturnStatus
data-component?	undefined	A badge's identity and its published axes are not a caller's to rename. Typed away so a call site renaming one fails to compile rather than silently shadowing the selector a brand was told to use.
data-tone?	undefined
data-status?	undefined
resolution?	ReturnResolution | null	How a COMPLETED return was settled.

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

Loading and empty states

Render these while the data loads or when there is nothing to show, so the page does not jump when it arrives.

Loading

ReturnDetailSkeleton

Loading state for ReturnDetail — flex flex-col gap-8 outer section, and the item list mirrors ReturnDetailItems' flex flex-col gap-2.