ProductPriceTiers

Unit prices by quantity and what each tier saves against the first, with the tier the current quantity falls in marked. Below it, how many more units reach the next tier, or that the best price is reached. Nothing with fewer than two tiers.

import { ProductPriceTiers } 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
tiers	readonly PriceTier[]	Unit prices excluding VAT by quantity, as readBusinessPrices or toPriceTiers returns them.
quantity	number	The quantity in the buy box, which decides the highlighted tier.
onQuantityChange?	((quantity: number) => void)	Shows the button that raises the quantity to the next tier.
unit?	string | null	What one is sold as, such as "box", in place of "piece".

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 ↗