Function DangerZoneSection

apps/cloud/src/routes/app/org.tsx:79–204

()

// removes the workspace and all of its data for every member, cancels billing,
// and logs the caller out.
function DangerZoneSection() {
  const auth = useAuth();
  const membersResult = useAtomValue(orgMembersAtom);
  const doDelete = useAtomSet(deleteOrganization, { mode: "promiseExit" });
  const [open, setOpen] = useState(false);
  const [confirmText, setConfirmText] = useState("");
  const [deleting, setDeleting] = useState(false);

  const organizationName = auth.status === "authenticated" ? auth.organization?.name : undefined;

  // Only admins may delete. Derive the caller's role from the members list
  // (already loaded for this page); render nothing while it loads or for
  // members, so a delete control never flashes for someone who can't use it.
  const isAdmin = AsyncResult.match(membersResult, {
    onInitial: () => false,
    onFailure: () => false,
    onSuccess: ({ value }) =>
      value.members.some((m) => m.isCurrentUser && m.status === "active" && m.role === "admin"),
  });

  if (!isAdmin || !organizationName) return null;

  const confirmed = confirmText.trim() === organizationName.trim();

  const handleDelete = async () => {
    if (!confirmed || deleting) return;
    setDeleting(true);
    const exit = await doDelete({
      payload: { confirmName: confirmText.trim() },
      reactivityKeys: authWriteKeys,
    });
    trackEvent("org_deleted", { success: Exit.isSuccess(exit) });
    if (Exit.isSuccess(exit)) {
      // The org (and the caller's session) are gone. A full navigation resets
      // all app state and lets the auth gate rehydrate to another membership or
      // the create-org screen.
      toast.success(`Deleted ${organizationName}`);
      window.location.href = "/";
      return;
    }
    setDeleting(false);
    toast.error("Failed to delete organization");
  };

  return (
    <section className="mb-2 border-t border-border pt-8">
      <div className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3">
        <div className="min-w-0">
          <h2 className="text-sm font-medium text-destructive">Delete organization</h2>
          <p className="mt-0.5 text-sm text-muted-foreground">
            Permanently delete this organization and all of its data for every member. This cannot
            be undone.
          </p>
        </div>
        <Button
          size="sm"
          variant="destructive"
          className="ml-4 shrink-0"