feat: create/delete teams

Author: arcoraven

apps/dashboard/src/@/actions/createTeam.ts

@@ -0,0 +1,58 @@
+"use server";
+
+import { randomBytes } from "node:crypto";
+import type { Team } from "@/api/team";
+import { format } from "date-fns";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+
+export async function createTeam(options: {
+  name?: string;
+  slug?: string;
+}): Promise<
+  | {
+      ok: true;
+      data: Team;
+    }
+  | {
+      ok: false;
+      errorMessage: string;
+    }
+> {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return {
+      ok: false,
+      errorMessage: "You are not authorized to perform this action",
+    };
+  }
+
+  const res = await fetch(`${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      name: options.name ?? `Your Projects ${format(new Date(), "MMM d yyyy")}`,
+      slug: options.slug ?? randomBytes(20).toString("hex"),
+      billingEmail: null,
+      image: null,
+    }),
+  });
+
+  if (!res.ok) {
+    return {
+      ok: false,
+      errorMessage: await res.text(),
+    };
+  }
+
+  const json = await res.json();
+
+  return {
+    ok: true,
+    data: json.result,
+  };
+}

apps/dashboard/src/@/actions/deleteTeam.ts

@@ -0,0 +1,25 @@
+"use server";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+
+export async function deleteTeam(options: {
+  teamId: string;
+}): Promise<void> {
+  const token = await getAuthToken();
+  if (!token) {
+    throw new Error("You are not authorized to perform this action");
+  }
+
+  const res = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${options.teamId}`,
+    {
+      method: "DELETE",
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (!res.ok) {
+    throw new Error(await res.text());
+  }
+}

apps/dashboard/src/@/api/team.ts

@@ -67,6 +67,7 @@ export async function getTeams() {
   return null;
 }
 
+/** @deprecated */
 export async function getDefaultTeam() {
   const token = await getAuthToken();
   if (!token) {

apps/dashboard/src/app/(app)/account/components/AccountHeader.tsx

@@ -1,12 +1,14 @@
 "use client";
 
+import { createTeam } from "@/actions/createTeam";
 import type { Project } from "@/api/projects";
 import type { Team } from "@/api/team";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { LazyCreateProjectDialog } from "components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
 import { useCallback, useState } from "react";
+import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
 import { useActiveWallet, useDisconnect } from "thirdweb/react";
 import { doLogout } from "../../login/auth-actions";
@@ -57,6 +59,14 @@ export function AccountHeader(props: {
         team,
         isOpen: true,
       }),
+    createTeam: async () => {
+      const result = await createTeam({});
+      if (!result.ok) {
+        toast.error("Failed to create team");
+        return;
+      }
+      router.push(`/team/${result.data.slug}`);
+    },
     account: props.account,
     client: props.client,
     accountAddress: props.accountAddress,

apps/dashboard/src/app/(app)/account/components/AccountHeaderUI.stories.tsx

@@ -59,6 +59,7 @@ function Variants(props: {
               accountAddress={accountAddressStub}
               connectButton={<ConnectButtonStub />}
               createProject={() => {}}
+              createTeam={() => {}}
               account={{
                 id: "foo",
                 email: "[email protected]",

apps/dashboard/src/app/(app)/account/components/AccountHeaderUI.tsx

@@ -21,6 +21,7 @@ export type AccountHeaderCompProps = {
   connectButton: React.ReactNode;
   teamsAndProjects: Array<{ team: Team; projects: Project[] }>;
   createProject: (team: Team) => void;
+  createTeam: () => void;
   account: Pick<Account, "email" | "id" | "image">;
   client: ThirdwebClient;
   accountAddress: string;
@@ -64,6 +65,7 @@ export function AccountHeaderDesktopUI(props: AccountHeaderCompProps) {
               teamsAndProjects={props.teamsAndProjects}
               focus="team-selection"
               createProject={props.createProject}
+              createTeam={props.createTeam}
               account={props.account}
               client={props.client}
             />
@@ -117,6 +119,7 @@ export function AccountHeaderMobileUI(props: AccountHeaderCompProps) {
               upgradeTeamLink={undefined}
               account={props.account}
               client={props.client}
+              createTeam={props.createTeam}
             />
           )}
         </div>

apps/dashboard/src/app/(app)/account/overview/AccountTeamsUI.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { createTeam } from "@/actions/createTeam";
 import type { Team } from "@/api/team";
 import type { TeamAccountRole } from "@/api/team-members";
 import { GradientAvatar } from "@/components/blocks/Avatars/GradientAvatar";
@@ -10,10 +11,11 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { ToolTipLabel } from "@/components/ui/tooltip";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { EllipsisIcon, PlusIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
+import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
 import { TeamPlanBadge } from "../../components/TeamPlanBadge";
 import { getValidTeamPlan } from "../../team/components/TeamHeader/getValidTeamPlan";
@@ -26,6 +28,7 @@ export function AccountTeamsUI(props: {
   }[];
   client: ThirdwebClient;
 }) {
+  const router = useDashboardRouter();
   const [teamSearchValue, setTeamSearchValue] = useState("");
   const teamsToShow = !teamSearchValue
     ? props.teamsWithRole
@@ -35,6 +38,15 @@ export function AccountTeamsUI(props: {
           .includes(teamSearchValue.toLowerCase());
       });
 
+  const createTeamAndRedirect = async () => {
+    const result = await createTeam({});
+    if (!result.ok) {
+      toast.error("Failed to create team");
+      return;
+    }
+    router.push(`/team/${result.data.slug}`);
+  };
+
   return (
     <div>
       <div className="flex flex-col items-start gap-4 lg:flex-row lg:justify-between">
@@ -45,12 +57,10 @@ export function AccountTeamsUI(props: {
           </p>
         </div>
 
-        <ToolTipLabel label="Coming Soon">
-          <Button disabled className="gap-2 max-sm:w-full">
-            <PlusIcon className="size-4" />
-            Create Team
-          </Button>
-        </ToolTipLabel>
+        <Button className="gap-2 max-sm:w-full" onClick={createTeamAndRedirect}>
+          <PlusIcon className="size-4" />
+          Create Team
+        </Button>
       </div>
 
       <div className="h-4" />

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx

@@ -62,8 +62,8 @@ function ComponentVariants() {
               await new Promise((resolve) => setTimeout(resolve, 1000));
             }}
           />
-          <DeleteTeamCard enabled={true} teamName="foo" />
-          <DeleteTeamCard enabled={false} teamName="foo" />
+          <DeleteTeamCard canDelete={true} teamId="1" teamName="foo" />
+          <DeleteTeamCard canDelete={false} teamId="2" teamName="foo" />
         </div>
       </div>
     </div>

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { deleteTeam } from "@/actions/deleteTeam";
 import type { Team } from "@/api/team";
 import type { VerifiedDomainResponse } from "@/api/verified-domain";
 import { DangerSettingCard } from "@/components/blocks/DangerSettingCard";
@@ -35,7 +36,6 @@ export function TeamGeneralSettingsPageUI(props: {
   client: ThirdwebClient;
   leaveTeam: () => Promise<void>;
 }) {
-  const hasPermissionToDelete = false; // TODO
   return (
     <div className="flex flex-col gap-8">
       <TeamNameFormControl
@@ -60,8 +60,9 @@ export function TeamGeneralSettingsPageUI(props: {
 
       <LeaveTeamCard teamName={props.team.name} leaveTeam={props.leaveTeam} />
       <DeleteTeamCard
-        enabled={hasPermissionToDelete}
+        teamId={props.team.id}
         teamName={props.team.name}
+        canDelete={props.isOwnerAccount}
       />
     </div>
   );
@@ -293,42 +294,40 @@ export function LeaveTeamCard(props: {
 }
 
 export function DeleteTeamCard(props: {
-  enabled: boolean;
+  canDelete: boolean;
+  teamId: string;
   teamName: string;
 }) {
   const router = useDashboardRouter();
   const title = "Delete Team";
   const description =
     "Permanently remove your team and all of its contents from the thirdweb platform. This action is not reversible - please continue with caution.";
 
-  // TODO
-  const deleteTeam = useMutation({
+  const deleteTeamAndRedirect = useMutation({
     mutationFn: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 3000));
-      console.log("Deleting team");
-      throw new Error("Not implemented");
+      await deleteTeam({ teamId: props.teamId });
     },
     onSuccess: () => {
       router.push("/team");
     },
   });
 
   function handleDelete() {
-    const promise = deleteTeam.mutateAsync();
+    const promise = deleteTeamAndRedirect.mutateAsync();
     toast.promise(promise, {
       success: "Team deleted successfully",
       error: "Failed to delete team",
     });
   }
 
-  if (props.enabled) {
+  if (props.canDelete) {
     return (
       <DangerSettingCard
         title={title}
         description={description}
         buttonLabel={title}
         buttonOnClick={handleDelete}
-        isPending={deleteTeam.isPending}
+        isPending={deleteTeamAndRedirect.isPending}
         confirmationDialog={{
           title: `Are you sure you want to delete team "${props.teamName}" ?`,
           description: description,

apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamAndProjectSelectorPopoverButton.tsx

@@ -22,6 +22,7 @@ type TeamSwitcherProps = {
   teamsAndProjects: Array<{ team: Team; projects: Project[] }>;
   focus: "project-selection" | "team-selection";
   createProject: (team: Team) => void;
+  createTeam: () => void;
   account: Pick<Account, "email" | "id"> | undefined;
   client: ThirdwebClient;
 };
@@ -100,6 +101,10 @@ export function TeamAndProjectSelectorPopoverButton(props: TeamSwitcherProps) {
               }
               account={props.account}
               client={props.client}
+              createTeam={() => {
+                setOpen(false);
+                props.createTeam();
+              }}
             />
 
             {/* Right */}

apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.stories.tsx

@@ -155,6 +155,7 @@ function Variant(props: {
         logout={() => {}}
         connectButton={<ConnectButtonStub />}
         createProject={() => {}}
+        createTeam={() => {}}
         client={storybookThirdwebClient}
         getInboxNotifications={getInboxNotificationsStub}
         markNotificationAsRead={markNotificationAsReadStub}

apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx

@@ -29,6 +29,7 @@ export type TeamHeaderCompProps = {
   logout: () => void;
   connectButton: React.ReactNode;
   createProject: (team: Team) => void;
+  createTeam: () => void;
   client: ThirdwebClient;
   accountAddress: string;
   getInboxNotifications: () => Promise<NotificationMetadata[]>;
@@ -75,6 +76,7 @@ export function TeamHeaderDesktopUI(props: TeamHeaderCompProps) {
             teamsAndProjects={props.teamsAndProjects}
             focus="team-selection"
             createProject={props.createProject}
+            createTeam={props.createTeam}
             account={props.account}
             client={props.client}
           />
@@ -102,6 +104,7 @@ export function TeamHeaderDesktopUI(props: TeamHeaderCompProps) {
                 teamsAndProjects={props.teamsAndProjects}
                 focus="project-selection"
                 createProject={props.createProject}
+                createTeam={props.createTeam}
                 account={props.account}
                 client={props.client}
               />
@@ -170,6 +173,9 @@ export function TeamHeaderMobileUI(props: TeamHeaderCompProps) {
             upgradeTeamLink={`/team/${currentTeam.slug}/settings`}
             account={props.account}
             client={props.client}
+            createTeam={() => {
+              alert("createTeam");
+            }}
           />
         </div>
 

apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamSelectionUI.tsx

@@ -2,7 +2,6 @@ import type { Project } from "@/api/projects";
 import type { Team } from "@/api/team";
 import { GradientAvatar } from "@/components/blocks/Avatars/GradientAvatar";
 import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
@@ -25,6 +24,7 @@ export function TeamSelectionUI(props: {
   account: Pick<Account, "email" | "id" | "image"> | undefined;
   client: ThirdwebClient;
   isOnProjectPage: boolean;
+  createTeam: () => void;
 }) {
   const { setHoveredTeam, currentTeam, teamsAndProjects } = props;
   const pathname = usePathname();
@@ -127,15 +127,12 @@ export function TeamSelectionUI(props: {
 
             <li className="py-0.5">
               <Button
-                className="w-full justify-start gap-2 px-2 disabled:pointer-events-auto disabled:cursor-not-allowed disabled:opacity-100"
+                className="w-full justify-start gap-2 px-2"
                 variant="ghost"
-                disabled
+                onClick={props.createTeam}
               >
                 <CirclePlusIcon className="size-4 text-link-foreground" />
                 Create Team
-                <Badge className="ml-auto" variant="secondary">
-                  Soon™️
-                </Badge>
               </Button>
             </li>
           </ul>