AccountQuickLinks

The dashboard's cards to the main account pages. Each site passes its own pages, usually the same list as AccountShell, and in business mode an item is gated on permissions and anyPermissions exactly as in the shell.

import { AccountQuickLinks } from "@evolve-storefront/feature-account/account-quick-links";

Renders inside AccountProvider.

Preview

ConsumerOpen in Storybook ↗

Usage

A consumer: the invoices card is gated, so it is not there.

// The shell's list, with a line and an icon role per card.
const pages: AccountQuickLink[] = [
  { key: "orders", label: t("orders"), href: "/account/orders", icon: "orders", description: t("orders-lead") },
  { key: "addresses", label: t("addresses"), href: "/account/addresses", icon: "addressBook" },
];

<AccountQuickLinks
  items={pages}
  renderLink={(item, props) => <Link href={item.href} {...props} />}
/>;

Props

Prop	Type	Description
items	readonly AccountQuickLink[]
headingLevel?	HeadingLevel	Level of each card's title. Defaults to 3, cards in a dashboard section.
renderLink?	((item: AccountQuickLink, props: { className: string; children: ReactNode; }) => ReactNode)	Render a card's link with the app's router; a plain <a href> without it.
renderItem?	AccountQuickLinkRenderer

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

Examples

Business With InvoicesA business buyer who may view invoices gets that card too.

<AccountProvider mode="business" isAuthenticated permissions={buyer.permissions}>
  <AccountQuickLinks items={pages} />
</AccountProvider>;

Open in Storybook ↗

Custom CardrenderItem replaces the shipped card; the list keeps its place and order.

<AccountQuickLinks
  items={pages}
  renderItem={(item) => <BrandTile href={item.href}>{item.label}</BrandTile>}
/>;

Open in Storybook ↗