ReturnRequestForm

The default return request form, on the evolve-feature-form pattern. The buyer picks lines and quantities; each line needs a reason, a serial number per unit for a device, and photos when its reason requires them. The goods go back by one of shippingMethods, a consumer chooses a refund method, and a fee the server would withhold shows before submitting. A consumer may exchange an exchangeable line for another variant; the estimate then says what comes back, and a refund method is only asked for when something does. The submit button is never disabled.

import { ReturnRequestForm } from "@evolve-storefront/feature-return/return-request-form";

Renders inside ReturnProvider.

Preview

DefaultOpen in Storybook ↗

Usage

Each chosen line asks for a reason, and a device for its serial number.

const lines = useReturnableLines(orderId);
const reasons = useReturnReasons();
const [items, setItems] = useState<ReturnItemInput[]>([]);
const estimate = useReturnEstimate(items);
const create = useCreateReturn();

<ReturnRequestForm
  orderId={orderId}
  lines={lines.data ?? []}
  reasons={reasons.data ?? []}
  pickupAddresses={company.addresses}
  estimate={estimate.data}
  onItemsChange={setItems}
  onValidSubmit={(submit) => create.mutate(submit)}
  isPending={create.isPending}
/>;

Props

Prop	Type	Description
orderId	string	The order the lines belong to.
lines	ReturnableLine[]	The order's lines that can still be returned.
reasons	ReturnReasonOption[]	The reasons a buyer may give, from useReturnReasons.
onValidSubmit	(submit: CreateReturnVariables) => void	The validated request, to hand to useCreateReturn.
validationBehavior?	"aria" | "native"	Default "aria": mark fields via ARIA rather than blocking native submit. The form is then noValidate, so an input's own constraint (type="email") never stops the submit with a browser tooltip that the field's error does not match.
pickupAddresses?	ReturnAddress[]	Where a carrier may collect. Without any, PICKUP is not offered.
shippingMethods?	ReturnShippingMethod[]	How the goods may go back, in the order offered. Defaults to PICKUP and OWN_SHIPMENT.
refundMethods?	ReturnRefundMethod[]	How a consumer's return may be paid back, from useReturnRefundMethods. When any are given the buyer must choose one; a business unit's return passes none.
estimate?	ReturnEstimate | null	What the chosen lines would withhold, from useReturnEstimate.
isEstimating?	boolean	Whether the estimate is being asked again, useReturnEstimate's isFetching; a submit waits for it.
onItemsChange?	((items: ReturnItemInput[]) => void)	The chosen lines, on every change, to ask useReturnEstimate about.
isPending?	boolean
error?	string | null
serverErrors?	FormValidationErrors
onCancel?	(() => void)
headingLevel?	HeadingLevel	The level of the fee notice's heading.

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