Skip to content
EvolveEvolveEvolve

feature-account

@evolve-storefront/feature-account · v1.0.0 · Storybook ↗

The signed-in shopper's account: view and edit personal details, change email and password, and manage saved addresses, for consumers and business buyers alike. The package ships the data hooks and ready-made components; your app composes them into its own pages.

Get started

  1. Install the package with the peer dependencies it needs. It comes from the Evolve registry, which needs a one-time sign-in.

    pnpm add @evolve-storefront/feature-account @labdigital/graphql-fetcher @tanstack/react-query graphql next next-intl react
    Requirements6
    @labdigital/graphql-fetcher>=3
    @tanstack/react-query>=5
    graphql>=16
    next>=16.2.11 <17
    next-intl>=4
    react>=19

  2. Import its styles in the stylesheet where you load Tailwind. Without them the components render unstyled.

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

  3. Wrap your app in AccountProvider. Setup lists its props.

  4. Add its translations to your message files with evolve messages.

Then render it on a page:

"use client";


import { AccountProfile, AccountProfileSkeleton } from "@evolve-storefront/feature-account/account-profile";
import { useAccount } from "@evolve-storefront/feature-account/hooks";
import { AccountProvider } from "@evolve-storefront/feature-account/provider";


export function ProfilePage({ isAuthenticated }: { isAuthenticated: boolean }) {
  return (
    <AccountProvider mode="consumer" isAuthenticated={isAuthenticated}>
      <Profile />
    </AccountProvider>
  );
}


function Profile() {
  const { data: customer, isPending } = useAccount();
  // The query waits for the session, so it stays pending rather than settling empty.
  if (isPending) return <AccountProfileSkeleton />;
  return customer ? <AccountProfile customer={customer} /> : null;
}

Components

What you place on your pages. Each one has a preview, its props, and how to change its layout.

AccountShellOptional, thin account layout: a permission-gated section menu + logout beside the section content.
AccountQuickLinksThe dashboard's cards to the main account pages.
AccountProfilePure presentation of the shopper's profile — the stable extension seam.
AddressBookPure presentation of the saved-address list.
AddressDialogThe address book's add/edit dialog: commerce-ui's dialog with this feature's write bound to it, plus an optional name such as "Work" and a box that makes the address the default delivery address.
DeleteAddressButtonDelete an address with a confirmation dialog.
SetDefaultAddressButtonMark an address as the default shipping and/or billing address.
NewsletterSwitchThe shopper's newsletter opt-in as a switch that saves on toggle.
ProfileFormEdit personal details on the evolve-feature-form pattern: a RAC Form validated by ProfileFormSchema, clean until the first submit then live, submit never disabled.
ChangeEmailFormChange the sign-in email; re-authenticated via current password.
ChangePasswordFormChange the password: current + new (twice), re-authenticated.

Hooks

17 hooks to read and change the data yourself, for when you build your own UI. The example above only needs useAccount. All hooks

More in this package

  • Setup and server: what the package needs in your project.
  • Advanced: contexts, graphql documents, data and cache helpers, schemas, types.