Function CreateOrgPage

apps/cloud/src/web/pages/create-org.tsx:43–154

()

};

export const CreateOrgPage = () => {
  const auth = useAuth();
  const navigate = useNavigate();
  const invitationsResult = useAtomValue(pendingInvitationsAtom);
  const doAccept = useAtomSet(acceptInvitation, { mode: "promiseExit" });

  const [acceptingId, setAcceptingId] = useState<string | null>(null);
  const [errorByInvitationId, setErrorByInvitationId] = useState<Record<string, string>>({});

  const handleAccept = async (invitation: PendingInvitation) => {
    setAcceptingId(invitation.id);
    setErrorByInvitationId((prev) => {
      if (!(invitation.id in prev)) return prev;
      const next = { ...prev };
      delete next[invitation.id];
      return next;
    });
    const exit = await doAccept({
      payload: { invitationId: invitation.id },
      reactivityKeys: authWriteKeys,
    });
    setAcceptingId(null);
    trackEvent("org_invitation_accepted", { success: Exit.isSuccess(exit) });
    if (!Exit.isSuccess(exit)) {
      setErrorByInvitationId((prev) => ({
        ...prev,
        [invitation.id]: "Couldn't accept this invitation. Try again or ask the inviter to resend.",
      }));
    }
  };

  const suggestedName =
    auth.status === "authenticated" && auth.user.name != null && auth.user.name.trim() !== ""
      ? `${auth.user.name}'s Organization`
      : "";

  const form = useCreateOrganizationForm({
    defaultName: suggestedName,
    onSuccess: () => {
      void navigate({ to: "/setup-mcp" });
    },
  });

  // Almost no new user has a pending invitation, so we never show a loading
  // placeholder for them — the create form renders immediately and stays put.
  // Invitations (when they exist) just appear above it once the fetch resolves;
  // a refetch (the create-org submit invalidates the auth-keyed atom) keeps the
  // last value, so nothing flickers.
  const invitations = AsyncResult.match(invitationsResult, {
    onInitial: () => [] as readonly PendingInvitation[],
    onFailure: () => [] as readonly PendingInvitation[],
    onSuccess: ({ value }) => value.invitations,
  });

  const count = invitations.length;
  const sole = count === 1 ? invitations[0]! : null;

  return (