feature-account setup

Styles

Import them once, in the stylesheet where you load Tailwind:

@import "@evolve-storefront/feature-account/styles.css";

Translations

The package ships its texts in @evolve-storefront/feature-account/messages. evolve messages merges them into your message files and never overwrites a text you changed.

AccountProvider

Single provider for the account feature. Supplies the injected auth/session/mode seam that the data hooks and the (optional) account shell read. mode: "business" switches on the read-only company block, company-owned addresses and the permission-gated menu — configuration, not a fork.

import { AccountProvider } from "@evolve-storefront/feature-account/provider";

Prop	Type	Description
children	ReactNode
mode?	AccountMode
isAuthenticated?	boolean
businessUnitId?	string
permissions?	string[]
capabilities?	AccountCapabilities
ensureSession?	(() => void | Promise<void>)
onTokenChange?	(() => void)

Prefetching on the server

Fetch the data in a Server Component so the page renders with it instead of a skeleton.

customerAddressesQueryOptionsOne page of the customer's address book, optionally narrowed by a search term.

import { customerAddressesQueryOptions } from "@evolve-storefront/feature-account/queries";

A page, not the book. Customer.addresses takes page / pageSize / searchTerm precisely because a person's book can be as large as a company's, so a caller rendering one page has to say so — the shape used to be a plain list and quietly became a page, which is the kind of change that shows up as five missing addresses rather than as an error.

keepPreviousData, so paging and typing a search term keep the current page on screen instead of emptying the list on every keystroke.

function customerAddressesQueryOptions(
  args: { gqlClient: ClientFetcher; page?: number | undefined; pageSize?: number | undefined; searchTerm?: string | null | undefined; enabled?: boolean | undefined; },
): OmitKeyof<UseQueryOptions<AddressResult | null, Error, AddressResult | null, readonly ["account", "addresses", number, number | "default", string]>, "queryFn"> …

Option	Type	Description
gqlClient	ClientFetcher
page?	number
pageSize?	number
searchTerm?	string | null
enabled?	boolean

customerQueryOptionsThe signed-in customer: profile, default addresses, preferences.

import { customerQueryOptions } from "@evolve-storefront/feature-account/queries";

function customerQueryOptions(
  args: { gqlClient: ClientFetcher; enabled?: boolean | undefined; },
): OmitKeyof<UseQueryOptions<Customer | null, Error, Customer | null, readonly ["account", "customer"]>, "queryFn"> & { queryFn?: QueryFunction<Customer | null, re…

Option	Type	Description
gqlClient	ClientFetcher
enabled?	boolean