Skip to content
EvolveEvolveEvolve

feature-organization

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

For business accounts: a company administrator manages the people in the company (associates, their roles and access), the company's addresses, and which company is active. 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-organization @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-organization/styles.css";

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

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

Then render it on a page:

"use client";


import {
  AssociateRow,
  AssociatesTable,
  AssociatesTableSkeleton,
} from "@evolve-storefront/feature-organization/associates-table";
import { useBusinessUnit } from "@evolve-storefront/feature-organization/hooks";
import { OrganizationProvider } from "@evolve-storefront/feature-organization/provider";


type Props = { businessUnitId: string; currentAssociateId: string; capabilities: string[] };


export function AssociatesPage(props: Props) {
  return (
    <OrganizationProvider isAuthenticated {...props}>
      <Associates currentAssociateId={props.currentAssociateId} />
    </OrganizationProvider>
  );
}


function Associates({ currentAssociateId }: { currentAssociateId: string }) {
  const { data: unit, isPending } = useBusinessUnit();
  // The query waits for the session, so it stays pending rather than settling empty.
  if (isPending) return <AssociatesTableSkeleton />;


  return (
    <AssociatesTable
      associates={unit?.associates.items}
      renderItem={(associate) => (
        <AssociateRow associate={associate} isCurrentUser={associate.id === currentAssociateId} />
      )}
    />
  );
}

Components

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

CompanySwitcherSwitch the active company.
AssociatesTablePure presentation of the company's members.
InviteAssociateFormInvite a colleague by email and one or more roles on the evolve-feature-form pattern: validation clean until the first submit, then live; the submit is never disabled.
EditRolesFormChange an associate's role on the evolve-feature-form pattern: a RAC Form whose validationErrors drive display, clean until the first submit then live, and a submit button that is never disabled.
RemoveAssociateButtonA button that opens the removal confirmation, for a surface whose trigger *is* a button — a detail page, a toolbar.
CompanyAddressPickerChoose a delivery address from a large company book: the buyer's last address is preselected and their recent ones are one click away, while the whole book waits behind a search sheet with favorites and the site's filters.
CompanyAddressBookPure presentation of the company's (shipping) addresses.
CompanyIdentityWho is buying, and for which company: the buyer and their roles, then the company's billing address, every VAT number with its country, the EORI number and where the confirmation goes, read-only.
CompanyDetailsThe company itself: its name and registration numbers in one card, its billing address in a second card of the same shape.
CompanyAddressDialogThe company address book's add/edit dialog: commerce-ui's AddressDialog with this feature's write (useCompanyAddressForm) bound to it, plus an optional name such as "Warehouse", which companyAddressTitle shows on the cards.
DeleteCompanyAddressButtonA button that opens the delete confirmation, for a surface whose trigger *is* a button.
CompanySetupChecklistWhat is left of setting up the company: inviting colleagues, approval rules and addresses, each shown only to a reader with the capability it needs.
ApprovalRuleFormCreate or edit an approval rule: its name and description, whose orders, which orders as clauses, and who approves, step by step.
ApprovalRuleListA business unit's approval rules as a table: name and description, which orders, whose orders, who approves, an on/off switch that saves at once, and an edit link.
PendingApprovalsTodoA TodoList item for the orders waiting on the reader's decision.
ApprovalQueueThe approval queue: status tabs with their counts, the number of results, an actions slot, and the flows as a list or, through children, a table.

Hooks

17 hooks to read and change the data yourself, for when you build your own UI. The example above only needs useBusinessUnit. 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, other functions and constants, types.