feature-organization setup

Styles

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

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

Translations

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

OrganizationProvider

Single provider for the organization feature — the injected business/session seam. Business-only: set businessUnitId to activate it. Managing users and approvals is gated on the injected capabilities.

import { OrganizationProvider } from "@evolve-storefront/feature-organization/provider";

Prop	Type	Description
children	ReactNode
businessUnitId?	string
storeKey?	string
currentAssociateId?	string
capabilities?	string[]
isAuthenticated?	boolean
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.

businessUnitAddressesQueryOptionsOne page of the company's address book, optionally narrowed by a search term.

import { businessUnitAddressesQueryOptions } from "@evolve-storefront/feature-organization/queries";

A page, not the book. BusinessUnit.addresses takes page / pageSize / searchTerm precisely because a company's set cannot be handed over whole, so a caller rendering one page has to say so.

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

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

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

businessUnitQueryOptionsThe active company: name, associates, roles, billing address.

import { businessUnitQueryOptions } from "@evolve-storefront/feature-organization/queries";

function businessUnitQueryOptions(
  args: { gqlClient: ClientFetcher; businessUnitId: string; enabled?: boolean | undefined; },
): OmitKeyof<UseQueryOptions<BusinessUnit | null, Error, BusinessUnit | null, readonly ["organization", "business-unit", string]>, "queryFn"> & { queryFn?: QueryFu…

Option	Type	Description
gqlClient	ClientFetcher
businessUnitId	string
enabled?	boolean

businessUnitsQueryOptionsThe companies the signed-in user can act within (for the switcher).

import { businessUnitsQueryOptions } from "@evolve-storefront/feature-organization/queries";

function businessUnitsQueryOptions(
  args: { gqlClient: ClientFetcher; enabled?: boolean | undefined; },
): OmitKeyof<UseQueryOptions<BusinessUnitSummary[], Error, BusinessUnitSummary[], readonly ["organization", "business-units"]>, "queryFn"> & { queryFn?: QueryFunct…

Option	Type	Description
gqlClient	ClientFetcher
enabled?	boolean

currentCapabilitiesQueryOptionsThe capabilities the signed-in associate holds in one company: the union across their roles, each once.

import { currentCapabilitiesQueryOptions } from "@evolve-storefront/feature-organization/queries";

One options object for a server prefetch and a client read alike; when the query may run (a session, a known company) is the caller's, passed as enabled.

function currentCapabilitiesQueryOptions(
  args: { gqlClient: ClientFetcher; businessUnitId: string; enabled?: boolean | undefined; },
): OmitKeyof<UseQueryOptions<string[], Error, string[], readonly ["organization", "current-capabilities", string]>, "queryFn"> & { queryFn?: QueryFunction<string[]…

Option	Type	Description
gqlClient	ClientFetcher
businessUnitId	string
enabled?	boolean

approvalQueueQueryOptionsOne page of the approval queue, optionally for one status, with the count of every status for the tabs.

import { approvalQueueQueryOptions } from "@evolve-storefront/feature-organization/approval/queries";

function approvalQueueQueryOptions(
  args: { gqlClient: ClientFetcher; businessUnitId: string; status?: ApprovalStatus | undefined; page?: number | undefined; pageSize?: number | undefined; enabled?: boolean | undefined; },
): OmitKeyof<UseQueryOptions<OrderApprovalPage | null, Error, OrderApprovalPage | null, readonly ["organization", "approval", string, "queue", number, ApprovalStat…

Option	Type	Description
gqlClient	ClientFetcher
businessUnitId	string
status?	ApprovalStatus
page?	number
pageSize?	number
enabled?	boolean

approvalRuleQueryOptionsOne approval rule, for its edit page.

import { approvalRuleQueryOptions } from "@evolve-storefront/feature-organization/approval/queries";

function approvalRuleQueryOptions(
  args: { gqlClient: ClientFetcher; businessUnitId: string; id: string; enabled?: boolean | undefined; },
): OmitKeyof<UseQueryOptions<ApprovalRule | null, Error, ApprovalRule | null, readonly ["organization", "approval", string, "rules", "detail", string]>, "queryFn">…

Option	Type	Description
gqlClient	ClientFetcher
businessUnitId	string
id	string
enabled?	boolean

approvalRulesQueryOptionsOne page of the business unit's approval rules, optionally only active or inactive ones.

import { approvalRulesQueryOptions } from "@evolve-storefront/feature-organization/approval/queries";

function approvalRulesQueryOptions(
  args: { gqlClient: ClientFetcher; businessUnitId: string; status?: ApprovalRuleStatus | undefined; page?: number | undefined; pageSize?: number | undefined; enabled?: boolean | undefined; },
): OmitKeyof<UseQueryOptions<{ items: ApprovalRule[]; pagination: Pagination; } | null, Error, { items: ApprovalRule[]; pagination: Pagination; } | null, readonly …

Option	Type	Description
gqlClient	ClientFetcher
businessUnitId	string
status?	ApprovalRuleStatus
page?	number
pageSize?	number
enabled?	boolean