React RFQ Builder

Copy Page

Industrial buyers do not check out — they request a quote, for several parts at once, at quantities and prices they have already been budgeted for. This is that flow: search the catalog, build a multi-line request with quantities and optional target pricing, then attach contact details and send.

Installation

Props

RfqPart is { id, partNumber, name, description?, unitPrice?, moq?, leadTime? }. When moq is set, the quantity stepper clamps to it and adding an existing line increments by the MOQ rather than by one.

Wiring it up

The component is transport-agnostic — it hands you a plain object:

<RfqBuilder
catalog={catalog}
onSubmit={async (payload) => {
  await fetch("https://api.web3forms.com/submit", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      access_key: process.env.NEXT_PUBLIC_FORMS_KEY,
      subject: `RFQ — ${payload.contact.company}`,
      ...payload.contact,
      lines: payload.lines
        .map((l) => `${l.partNumber} ×${l.quantity}`)
        .join("\n"),
    }),
  });
}}
/>

The indicative total uses each line's target price when given and the catalog price otherwise. It is a sanity check for the buyer, not a quote — say so in your own copy, because the number they see is the number they will remember.

Add a Selection Guide upstream so undecided visitors arrive here already knowing which part to request.