Skip to content
EvolveEvolveEvolve

ProductWarehouseStock

Exact stock per warehouse: "126 in stock" as a tag, then "in Nieuwegein", for the buyer's own with its delivery promise, then what the others add and how soon, then when an empty one expects more. data-kind carries default, other or expected.

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

Renders inside ProductListingProvider.

Preview

DefaultOpen in Storybook ↗

Usage

The buyer's own warehouse first with its delivery promise, then what another adds within five working days, then when an empty one expects more.

<ProductWarehouseStock
  stock={variant.stockByWarehouse}
  defaultWarehouse={businessUnit.warehouseKey}
  transferDays={5}
  promise={<ProductDetailDeliveryPromise promise={promise} />}
/>;

Props

PropTypeDescription
stockreadonly WarehouseStock[] | null | undefined

The variant's stockByWarehouse. Renders nothing while it is null or says nothing.

defaultWarehouse?string

The key of the warehouse that ships to the buyer, listed first.

promise?ReactNode

Under the default warehouse's line, such as ProductDetailDeliveryPromise.

transferDays?number

How many working days the other warehouses take to top up the default one.

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

Examples

Order MatrixA colour by storage grid with each cell's stock.
<ProductOrderMatrix
  variants={variants}
  rows="color"
  columns="storage"
  tiers={tiers}
  renderAction={(lineItems, label) => (
    <CartAddLinesButton lineItems={lineItems}>{label}</CartAddLinesButton>
  )}
/>;
Open in Storybook ↗
Order Matrix In SheetIn the buy box, "Order several variants at once" opens the matrix in a sheet.
<ProductOrderMatrixSheet>
  <ProductOrderMatrix variants={variants} rows="color" columns="storage" renderAction={renderAction} />
</ProductOrderMatrixSheet>;
Open in Storybook ↗
Quote RequestAbove 100 pieces, a quote request: a sheet with the quantity and a message.
<ProductQuoteRequest
  quantity={quantity}
  onValidSubmit={(input) => requestQuote.mutate({ sku, ...input })}
  isPending={requestQuote.isPending}
  isSubmitted={requestQuote.isSuccess}
/>;
Open in Storybook ↗
Pack SizeSold in packs of 6 with a minimum of two packs: the quantity starts at 12, steps by 6 and snaps a typed 15 to 18.
const quantityRule = await readQuantityRule(gqlClient, { slug, sku });


<ProductPackSize quantityRule={quantityRule} />
<ProductDetailQuantity
  kind={variant.kind}
  quantityRule={quantityRule}
  value={quantity}
  onValueChange={setQuantity}
/>;
Open in Storybook ↗