Skip to content
EvolveEvolveEvolve

CompanyIdentity

Who is buying, and for which company: the buyer and their roles, then the company's billing address, every VAT number with its country, the EORI number and where the confirmation goes, read-only. A fact the company lacks is left out. Facts the site keeps itself go in details.

import { CompanyIdentity } from "@evolve-storefront/feature-organization/company-identity";

Renders inside OrganizationProvider.

Preview

DefaultOpen in Storybook ↗

Usage

The buyer in two companies, with the site's own customer number and payment terms.

const { data: businessUnit } = useBusinessUnit();


<CompanyIdentity
  businessUnit={businessUnit}
  details={[{ label: t("customer-number"), value: customer.customerNumber }]}
  action={<CompanySwitcher companies={companies} confirm onSwitched={() => router.refresh()} />}
  manageHref="/account/company"
  renderLink={({ href, ...props }) => <Link href={href} {...props} />}
/>;

Props

PropTypeDescription
businessUnitPick<BusinessUnit, "name" | "vatNumber" | "vatNumbers" | "eoriNumber" | "billingAddress" | "currentAssociate">

The active company, from useBusinessUnit().

details?readonly CompanyIdentityDetail[]

Facts the site keeps itself, such as a customer number or payment terms.

action?ReactNode

Beside the buyer: usually <CompanySwitcher confirm /> for a buyer in several companies.

manageHref?string

Where the company profile is managed. The link is left out without it.

renderLink?((props: { href: string; className: string; children: ReactNode; }) => ReactNode)

Render the manage link with the app's router; a plain <a href> without it.

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

Examples

Several Vat NumbersA company registered for VAT in several member states, with an EORI number.
const { data: businessUnit } = useBusinessUnit();


// vatNumbers and eoriNumber are read with the company.
<CompanyIdentity businessUnit={businessUnit} />;
Open in Storybook ↗
Nothing On FileA company with nothing on file shows its name alone: no empty rows, no link.
<CompanyIdentity businessUnit={businessUnit} />;
Open in Storybook ↗