ProductQuoteRequest

Above threshold pieces, an offer to ask for a quote, which opens a sheet with the quantity and a message. Validates on submit, then live; the button is never disabled. Below the threshold it renders nothing.

import { ProductQuoteRequest } from "@evolve-storefront/feature-product/product-business";

Renders inside ProductListingProvider.

Preview

DefaultOpen in Storybook ↗

Usage

The contract price excluding VAT leads; incl. VAT and the struck list price follow.

<ProductContractPrice
  price={variant.price}
  listPrice={variant.listPrice}
  company={businessUnit.name}
/>;

Props

Prop	Type	Description
quantity	number	The quantity in the buy box; the offer shows above threshold.
onValidSubmit	(input: { quantity: number; message: string; }) => void	Called with a valid request; the site sends it, such as with feature-quote.
threshold?	number	The quantity above which a quote beats the list price. 100 by default.
isPending?	boolean
isSubmitted?	boolean	The request went through: the form gives way to a confirmation.
error?	string | null	A form-level message, such as a failed request.

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

Examples

At List PriceA contract price at list price strikes nothing through.

<ProductContractPrice price={variant.price} listPrice={variant.listPrice} />;

Open in Storybook ↗

IdentifiersSKU, MPN and EAN under the title, each copied with its own button.

<ProductIdentifiers sku={variant.sku} mpn={variant.mpn} ean={variant.ean} />;

Open in Storybook ↗

Price TiersEach tier's saving against the first, the current tier marked, and a nudge that raises the quantity to the next one.

<ProductPriceTiers tiers={tiers} quantity={quantity} onQuantityChange={setQuantity} />;

Open in Storybook ↗

Best Price TierAt the top tier there is no next one to reach, so it says the best price is reached.

<ProductPriceTiers tiers={tiers} quantity={60} onQuantityChange={setQuantity} />;

Open in Storybook ↗