CompanyAddressPicker

Choose a delivery address from a large company book: the buyer's last address is preselected and their recent ones are one click away, while the whole book waits behind a search sheet with favorites and the site's filters.

import { CompanyAddressPicker } from "@evolve-storefront/feature-organization/company-address-picker";

Renders inside OrganizationProvider.

Preview

DefaultOpen in Storybook ↗

Usage

The buyer's last address is preselected. Searching finds the rest of the book; a star keeps one at hand, and choosing one puts it at the top of the recent list.

<CompanyAddressPicker
  value={address}
  onValueChange={setAddress}
  filters={[{ id: "dc", label: t("distribution-centers"), matches: isDistributionCenter }]}
/>;

Props

Prop	Type	Description
onValueChange	(address: Address) => void
value?	AddressFields | null	The chosen address, compared by its fields, so a cart's copy of it matches.
store?	CompanyAddressMemoryStore	Where recent and favorite addresses are kept. localStorage by default.
filters?	CompanyAddressFilter[]
recentCount?	number	How many recent addresses are offered without searching. Defaults to 3.
maxRows?	number	How many rows the search sheet renders at most. Defaults to 50.

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

Examples

More Than It ShowsA book larger than the sheet renders says so, and asks for a search.

<CompanyAddressPicker value={address} onValueChange={setAddress} maxRows={50} />;

Open in Storybook ↗