CompanyDetails

The company itself: its name and registration numbers in one card, its billing address in a second card of the same shape. A number the project does not record is left out rather than shown empty. This is the business unit's own record; AccountProfileCompany in feature-account is the signed-in person's company.

import { CompanyDetails } from "@evolve-storefront/feature-organization/company-details";

Renders inside OrganizationProvider.

Preview

DefaultOpen in Storybook ↗

Usage

Name, Chamber of Commerce number and VAT number beside the billing address.

const { data: businessUnit, isPending } = useBusinessUnit();

if (isPending) return <CompanyDetailsSkeleton />;
if (!businessUnit) return null;
return <CompanyDetails businessUnit={businessUnit} />;

Props

Prop	Type	Description
businessUnit	Pick<BusinessUnit, "name" | "vatNumber" | "billingAddress" | "cocNumber">	The business unit, from useBusinessUnit().
headingLevel?	HeadingLevel	Level of the two card titles. Defaults to 2.

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

Loading and empty states

Render these while the data loads or when there is nothing to show, so the page does not jump when it arrives.

Loading

CompanyDetailsSkeleton

Placeholder for CompanyDetails: the same two cards, so nothing reflows on load.

Examples

Without Registration NumbersA project that records no registration numbers shows the name alone, with no empty rows.

<CompanyDetails businessUnit={businessUnit} />;

Open in Storybook ↗

LoadingThe same two cards while useBusinessUnit() is pending.

if (isPending) return <CompanyDetailsSkeleton />;

Open in Storybook ↗