Skip to content

ProductContractPrice

A business buyer's price: the contract price excluding VAT as the main number, then the price including VAT and the list price it is set against.

import { ProductContractPrice } 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

PropTypeDescription
price{ net: Money; gross: Money; } | null | undefined

The variant's price for this business unit. Renders nothing when absent.

listPrice?{ net: Money; } | null

Struck through, excluding VAT, when above the contract price.

company?string | null

The business unit the price was agreed with.

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 ↗