CompanySetupChecklist

What is left of setting up the company: inviting colleagues, approval rules and addresses, each shown only to a reader with the capability it needs. Pure view: the caller passes the three pages. Renders nothing while one is loading, once every step is done, and when dismissed.

import { CompanySetupChecklist } from "@evolve-storefront/feature-organization/company-setup-checklist";

Renders inside OrganizationProvider.

Preview

DefaultOpen in Storybook ↗

Usage

A new company: every step still open.

const { data: unit } = useBusinessUnit();
const { data: rules } = useApprovalRules();
const { data: addresses } = useBusinessUnitAddresses();

<CompanySetupChecklist
  associates={unit?.associates}
  approvalRules={rules}
  addresses={addresses}
  renderLink={(step, children) => <Link href={SETUP_HREFS[step]}>{children}</Link>}
  isDismissed={dismissed}
  onDismiss={() => setDismissed(true)}
/>;

Props

Prop	Type	Description
renderLink	(step: CompanySetupStepKey, children: ReactNode) => ReactNode	Link a step's action to the page that does it; routing is the app's.
addresses?	CompanySetupCount | null	useBusinessUnitAddresses().data.
associates?	CompanySetupCount | null	useBusinessUnit().data?.associates.
approvalRules?	CompanySetupCount | null	useApprovalRules().data.
isDismissed?	boolean	The reader hid the checklist; the app keeps that choice.
onDismiss?	(() => void)	Offers a button to hide the checklist; without it there is none.
headingLevel?	HeadingLevel	Level of the checklist's title. Defaults to 2.

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

Examples

Partly DoneA colleague has joined, so that step is done and offers no action.

<CompanySetupChecklist associates={unit?.associates} approvalRules={rules} addresses={addresses} renderLink={renderLink} />;

Open in Storybook ↗

Without Approval RulesA reader who may not set approval rules is not shown that step.

<CompanySetupChecklist associates={unit?.associates} addresses={addresses} renderLink={renderLink} />;

Open in Storybook ↗