Function OrgPage

packages/react/src/pages/org.tsx:136–438

(props: {
  domainsSection?: React.ReactNode;
  // Cloud injects the plan-upgrade call to action (a link to billing/plans).
  // When set and the org is at its seat limit, clicking "Invite member" opens
  // an upgrade prompt instead of the invite form. Self-host has no seat limit,
  // so it never reaches this and can omit it.
  upgradeAction?: React.ReactNode;
  // Cloud injects a destructive "delete organization" section here. It hangs
  // off the cloud-only `/auth/delete-organization` endpoint (WorkOS + billing
  // teardown), so self-host omits it. Rendered last, below members.
  dangerZoneSection?: React.ReactNode;
})

}

export function OrgPage(props: {
  domainsSection?: React.ReactNode;
  // Cloud injects the plan-upgrade call to action (a link to billing/plans).
  // When set and the org is at its seat limit, clicking "Invite member" opens
  // an upgrade prompt instead of the invite form. Self-host has no seat limit,
  // so it never reaches this and can omit it.
  upgradeAction?: React.ReactNode;
  // Cloud injects a destructive "delete organization" section here. It hangs
  // off the cloud-only `/auth/delete-organization` endpoint (WorkOS + billing
  // teardown), so self-host omits it. Rendered last, below members.
  dangerZoneSection?: React.ReactNode;
}) {
  useExecutorDocumentTitle("Organization");
  const auth = useAuth();
  const organizationName =
    auth.status === "authenticated" ? (auth.organization?.name ?? "Organization") : "Organization";
  const membersResult = useAtomValue(orgMembersAtom);
  const refreshMembers = useAtomRefresh(orgMembersAtom);
  const rolesResult = useAtomValue(orgRolesAtom);
  const doRemove = useAtomSet(removeMember, { mode: "promiseExit" });
  const doUpdateRole = useAtomSet(updateMemberRole, { mode: "promiseExit" });
  const doUpdateOrgName = useAtomSet(updateOrgName, { mode: "promiseExit" });
  const [inviteOpen, setInviteOpen] = useState(false);
  const [upgradeOpen, setUpgradeOpen] = useState(false);
  const [editName, setEditName] = useState(organizationName);
  const [savingName, setSavingName] = useState(false);
  const [search, setSearch] = useState("");

  const roles = AsyncResult.match(rolesResult, {
    onInitial: () => [] as readonly RoleData[],
    onFailure: () => [] as readonly RoleData[],
    onSuccess: ({ value }) => value.roles,
  });

  const seats = AsyncResult.match(membersResult, {
    onInitial: () => undefined,
    onFailure: () => undefined,
    onSuccess: ({ value }) => value.seats,
  });
  // At the plan's member-seat limit, "Invite member" opens an upgrade prompt
  // (when cloud provided one) instead of the invite form, so the admin gets a
  // clear next step rather than a refused invite.
  const atSeatLimit = !!seats && !seats.unlimited && seats.used >= seats.granted;
  const showUpgradeOnInvite = atSeatLimit && !!props.upgradeAction;

  const handleRemove = async (membershipId: string, name: string) => {
    const exit = await doRemove({
      params: { membershipId },
      reactivityKeys: orgMemberWriteKeys,
    });
    trackEvent("org_member_removed", { success: Exit.isSuccess(exit) });
    toast[Exit.isSuccess(exit) ? "success" : "error"](
      Exit.isSuccess(exit) ? `Removed ${name}` : "Failed to remove member",
    );
  };

  const handleChangeRole = async (membershipId: string, roleSlug: string, roleName: string) => {
    const exit = await doUpdateRole({