AccountProfile

Pure presentation of the shopper's profile — the stable extension seam. It never fetches; the caller passes the customer it owns and it seeds context. mode="business" adds the read-only company block. Editing lives in ProfileForm — this view is read-only.

import { AccountProfile } from "@evolve-storefront/feature-account/account-profile";

Renders inside AccountProvider.

Preview

ConsumerOpen in Storybook ↗

Usage

Consumer: personal details only.

const { data: customer, isPending } = useAccount();
if (isPending) return <AccountProfileSkeleton />;
if (!customer) return notFound();

<AccountProfile customer={customer} />;

Props

Prop	Type	Description
customer	Customer	The resolved customer. The caller owns the query; the view only renders.
headingLevel?	HeadingLevel	Document level for this view's headings. Defaults to 1 — the profile is a whole page. Pass 2 when composing it under your own page title; the subtree shifts down with it.
children?	ReactNode	Compose the pieces (AccountProfilePersonal / AccountProfileCompany) for a bespoke layout, or omit for the standard composition (personal details, plus the read-only company block in business mode).
mode?	AccountMode	business adds the read-only company block. A prop, not a read of AccountProvider: the provider is a client context, and reading it here would make this root a client component and drag both sections with it.

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

Change the layout

Pass children to AccountProfile to arrange its parts yourself. Every part is exported from @evolve-storefront/feature-account/account-profile.

<AccountProfile customer={customer}>
  <Heading level={2}>{t("personal-title")}</Heading>
  <AccountProfilePersonal customer={customer} />
  <Heading level={2}>{t("company-title")}</Heading>
  <AccountProfileCompany customer={customer} />
</AccountProfile>;

AccountProfileLayoutThe standard arrangement — what AccountProfile renders when given no children.

Prop	Type	Description
customer	Customer
headingLevel	HeadingLevel
mode?	AccountMode	business adds the read-only company block. Defaults to consumer.

AccountProfileCompanyRead-only company details block for business buyers (company details are display-only unless a project enables editing).

There is no registration-number row. The field described the company rather than the person, and the framework removed it from Customer rather than moving it — a company's registration number is not a property of whoever is at the keyboard.

Prop	Type	Description
customer	Customer

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

AccountProfilePersonalRead-only personal details: name, salutation, email.

Prop	Type	Description
customer	Customer

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

AccountProfileSkeleton

Loading state for AccountProfile.

Examples

BusinessBusiness: personal details + the read-only company block.

// A prop rather than a read of AccountProvider, so the view stays server-renderable.
<AccountProfile customer={customer} mode="business" />;

Open in Storybook ↗

LoadingSkeleton and real view adjacent — the only cheap check that the placeholder mirrors the DOM it replaces.

const { data: customer, isPending } = useAccount();
// Gate on isPending: a signed-out query stays pending, never settles empty.
if (isPending) return <AccountProfileSkeleton />;

Open in Storybook ↗