From 3dbafe965322f0b150c8e65096a435fee1990492 Mon Sep 17 00:00:00 2001
From: Manan Tank <manantankm@gmail.com>
Date: Tue, 25 Feb 2025 23:57:44 +0530
Subject: [PATCH] [TOOL-3525] Dashboard: Add Delete Account in account settings
 page

---
 apps/dashboard/src/@/api/team.ts              |  17 +++
 .../@/components/blocks/DangerSettingCard.tsx |  40 +++--
 .../account/settings/AccountSettingsPage.tsx  |  29 +++-
 .../AccountSettingsPageUI.stories.tsx         |  47 ++++++
 .../settings/AccountSettingsPageUI.tsx        | 142 +++++++++++++++---
 .../src/app/account/settings/page.tsx         |  18 ++-
 apps/dashboard/src/app/team/page.tsx          |   7 +-
 apps/dashboard/src/middleware.ts              |   6 +-
 8 files changed, 257 insertions(+), 49 deletions(-)

diff --git a/apps/dashboard/src/@/api/team.ts b/apps/dashboard/src/@/api/team.ts
index ef51d5ca776..d4516c6c78c 100644
--- a/apps/dashboard/src/@/api/team.ts
+++ b/apps/dashboard/src/@/api/team.ts
@@ -57,6 +57,23 @@ export async function getTeams() {
   return null;
 }
 
+export async function getDefaultTeam() {
+  const token = await getAuthToken();
+  if (!token) {
+    return null;
+  }
+
+  const res = await fetch(`${API_SERVER_URL}/v1/teams/~`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  if (res.ok) {
+    return (await res.json())?.result as Team;
+  }
+  return null;
+}
+
 type TeamNebulaWaitList = {
   onWaitlist: boolean;
   createdAt: null | string;
diff --git a/apps/dashboard/src/@/components/blocks/DangerSettingCard.tsx b/apps/dashboard/src/@/components/blocks/DangerSettingCard.tsx
index 6b76e427854..003a4214eaa 100644
--- a/apps/dashboard/src/@/components/blocks/DangerSettingCard.tsx
+++ b/apps/dashboard/src/@/components/blocks/DangerSettingCard.tsx
@@ -10,7 +10,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { useState } from "react";
 import { cn } from "../../lib/utils";
+import { DynamicHeight } from "../ui/DynamicHeight";
 
 export function DangerSettingCard(props: {
   title: string;
@@ -24,9 +26,14 @@ export function DangerSettingCard(props: {
   confirmationDialog: {
     title: string;
     description: React.ReactNode;
+    children?: React.ReactNode;
+    onClose?: () => void;
   };
   children?: React.ReactNode;
 }) {
+  const [isConfirmationDialogOpen, setIsConfirmationDialogOpen] =
+    useState(false);
+
   return (
     <div
       className={cn(
@@ -50,7 +57,15 @@ export function DangerSettingCard(props: {
           props.footerClassName,
         )}
       >
-        <Dialog>
+        <Dialog
+          open={isConfirmationDialogOpen}
+          onOpenChange={(v) => {
+            setIsConfirmationDialogOpen(v);
+            if (!v) {
+              props.confirmationDialog.onClose?.();
+            }
+          }}
+        >
           <DialogTrigger asChild>
             <Button
               variant="destructive"
@@ -66,17 +81,20 @@ export function DangerSettingCard(props: {
             className="z-[10001] overflow-hidden p-0"
             dialogOverlayClassName="z-[10000]"
           >
-            <div className="p-6">
-              <DialogHeader className="pr-10">
-                <DialogTitle className="leading-snug">
-                  {props.confirmationDialog.title}
-                </DialogTitle>
+            <DynamicHeight>
+              <div className="p-6">
+                <DialogHeader className="pr-10">
+                  <DialogTitle className="leading-snug">
+                    {props.confirmationDialog.title}
+                  </DialogTitle>
 
-                <DialogDescription>
-                  {props.confirmationDialog.description}
-                </DialogDescription>
-              </DialogHeader>
-            </div>
+                  <DialogDescription>
+                    {props.confirmationDialog.description}
+                  </DialogDescription>
+                </DialogHeader>
+                {props.confirmationDialog.children}
+              </div>
+            </DynamicHeight>
 
             <div className="flex justify-end gap-4 border-t bg-card p-6 lg:gap-2">
               <DialogClose asChild>
diff --git a/apps/dashboard/src/app/account/settings/AccountSettingsPage.tsx b/apps/dashboard/src/app/account/settings/AccountSettingsPage.tsx
index fe8c93d7514..1d0bde85d69 100644
--- a/apps/dashboard/src/app/account/settings/AccountSettingsPage.tsx
+++ b/apps/dashboard/src/app/account/settings/AccountSettingsPage.tsx
@@ -1,16 +1,21 @@
 "use client";
 
+import { redirectToBillingPortal } from "@/actions/billing";
 import { confirmEmailWithOTP } from "@/actions/confirmEmail";
+import { apiServerProxy } from "@/actions/proxies";
 import { updateAccount } from "@/actions/updateAccount";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import type { ThirdwebClient } from "thirdweb";
 import { upload } from "thirdweb/storage";
+import { doLogout } from "../../login/auth-actions";
 import { AccountSettingsPageUI } from "./AccountSettingsPageUI";
 
 export function AccountSettingsPage(props: {
   account: Account;
   client: ThirdwebClient;
+  defaultTeamSlug: string;
+  defaultTeamName: string;
 }) {
   const router = useDashboardRouter();
   return (
@@ -25,8 +30,30 @@ export function AccountSettingsPage(props: {
 
       <div className="container max-w-[950px] grow pt-8 pb-20">
         <AccountSettingsPageUI
-          hideDeleteAccount
           client={props.client}
+          defaultTeamSlug={props.defaultTeamSlug}
+          defaultTeamName={props.defaultTeamName}
+          onAccountDeleted={async () => {
+            await doLogout();
+            router.replace("/login");
+          }}
+          deleteAccount={async () => {
+            // TODO - test this once the API is functional
+            try {
+              const res = await apiServerProxy({
+                method: "DELETE",
+                pathname: "/v1/account",
+              });
+
+              return {
+                status: res.status,
+              };
+            } catch (error) {
+              console.error(error);
+              return { status: 500 };
+            }
+          }}
+          redirectToBillingPortal={redirectToBillingPortal}
           updateAccountAvatar={async (file) => {
             let uri: string | undefined = undefined;
 
diff --git a/apps/dashboard/src/app/account/settings/AccountSettingsPageUI.stories.tsx b/apps/dashboard/src/app/account/settings/AccountSettingsPageUI.stories.tsx
index 8c6cf1df2df..382f2dbcdc2 100644
--- a/apps/dashboard/src/app/account/settings/AccountSettingsPageUI.stories.tsx
+++ b/apps/dashboard/src/app/account/settings/AccountSettingsPageUI.stories.tsx
@@ -1,4 +1,12 @@
 import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
@@ -40,6 +48,13 @@ function Variants() {
   const [isVerifiedEmail, setIsVerifiedEmail] = useState(true);
   const [sendEmailFails, setSendEmailFails] = useState(false);
   const [emailConfirmationFails, setEmailConfirmationFails] = useState(false);
+  const [deleteAccountStatusResponse, setDeleteAccountStatusResponse] =
+    useState<400 | 402 | 500 | 200>(200);
+
+  const deleteAccountStub = async () => {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    return { status: deleteAccountStatusResponse };
+  };
 
   return (
     <div className="container flex max-w-[1132px] flex-col gap-10 py-10">
@@ -67,9 +82,37 @@ function Variants() {
           />
           Email Confirmation Fails
         </CheckboxWithLabel>
+
+        <div className="mt-3 flex flex-col gap-2">
+          <Label>Delete Account Response</Label>
+          <Select
+            value={String(deleteAccountStatusResponse)}
+            onValueChange={(value) =>
+              setDeleteAccountStatusResponse(
+                Number(value) as 400 | 402 | 500 | 200,
+              )
+            }
+          >
+            <SelectTrigger className="min-w-[320px]">
+              <SelectValue placeholder="Select status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="200">200 - Success</SelectItem>
+              <SelectItem value="400">400 - Active Subscriptions</SelectItem>
+              <SelectItem value="402">402 - Unpaid Invoices</SelectItem>
+              <SelectItem value="500">500 - Unknown Error</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
       </div>
 
       <AccountSettingsPageUI
+        defaultTeamSlug="foo"
+        defaultTeamName="Foo"
+        redirectToBillingPortal={async () => {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+          return { status: 200 };
+        }}
         account={{
           name: "John Doe",
           email: "johndoe@gmail.com",
@@ -96,6 +139,10 @@ function Variants() {
             throw new Error("Email already exists");
           }
         }}
+        deleteAccount={deleteAccountStub}
+        onAccountDeleted={() => {
+          console.log("Account deleted");
+        }}
       />
       <Toaster richColors />
     </div>
diff --git a/apps/dashboard/src/app/account/settings/AccountSettingsPageUI.tsx b/apps/dashboard/src/app/account/settings/AccountSettingsPageUI.tsx
index 08255f6abdb..4508dfca1be 100644
--- a/apps/dashboard/src/app/account/settings/AccountSettingsPageUI.tsx
+++ b/apps/dashboard/src/app/account/settings/AccountSettingsPageUI.tsx
@@ -1,8 +1,11 @@
 "use client";
 
+import type { BillingBillingPortalAction } from "@/actions/billing";
+import { BillingPortalButton } from "@/components/billing";
 import { DangerSettingCard } from "@/components/blocks/DangerSettingCard";
 import { SettingsCard } from "@/components/blocks/SettingsCard";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -29,14 +32,14 @@ import {
   InputOTPGroup,
   InputOTPSlot,
 } from "@/components/ui/input-otp";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { cn } from "@/lib/utils";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation } from "@tanstack/react-query";
 import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
-import { EllipsisIcon } from "lucide-react";
+import { EllipsisIcon, ExternalLinkIcon } from "lucide-react";
+import Link from "next/link";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -51,12 +54,16 @@ type MinimalAccount = Pick<
 
 export function AccountSettingsPageUI(props: {
   account: MinimalAccount;
-  hideDeleteAccount?: boolean;
   sendEmail: (email: string) => Promise<void>;
   updateName: (name: string) => Promise<void>;
   updateEmailWithOTP: (otp: string) => Promise<void>;
   updateAccountAvatar: (avatar: File | undefined) => Promise<void>;
   client: ThirdwebClient;
+  deleteAccount: DeleteAccount;
+  onAccountDeleted: () => void;
+  defaultTeamSlug: string;
+  defaultTeamName: string;
+  redirectToBillingPortal: BillingBillingPortalAction;
 }) {
   return (
     <div className="flex flex-col gap-8">
@@ -76,7 +83,13 @@ export function AccountSettingsPageUI(props: {
         updateEmailWithOTP={props.updateEmailWithOTP}
       />
 
-      {!props.hideDeleteAccount && <DeleteAccountCard />}
+      <DeleteAccountCard
+        deleteAccount={props.deleteAccount}
+        onAccountDeleted={props.onAccountDeleted}
+        defaultTeamSlug={props.defaultTeamSlug}
+        defaultTeamName={props.defaultTeamName}
+        redirectToBillingPortal={props.redirectToBillingPortal}
+      />
     </div>
   );
 }
@@ -182,30 +195,43 @@ function AccountNameFormControl(props: {
   );
 }
 
-function DeleteAccountCard() {
-  const router = useDashboardRouter();
+type DeleteAccount = () => Promise<{
+  status: number;
+}>;
+
+// TODO: when user can create multiple teams - the error status messaging needs to be updated
+
+function DeleteAccountCard(props: {
+  deleteAccount: DeleteAccount;
+  onAccountDeleted: () => void;
+  defaultTeamSlug: string;
+  defaultTeamName: string;
+  redirectToBillingPortal: BillingBillingPortalAction;
+}) {
   const title = "Delete Account";
-  const description =
-    "Permanently remove your Personal Account and all of its contents from the thirdweb platform. This action is not reversible, please continue with caution.";
+  const description = (
+    <>
+      Permanently delete your thirdweb account, the default team "
+      {props.defaultTeamName}" and all associated data
+      <br />
+      This action is not reversible
+    </>
+  );
 
-  // TODO
   const deleteAccount = useMutation({
-    mutationFn: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 3000));
-      console.log("Deleting account");
-      throw new Error("Not implemented");
-    },
-    onSuccess: () => {
-      router.push("/team");
+    mutationFn: props.deleteAccount,
+    onSuccess: (data) => {
+      if (data.status === 200) {
+        props.onAccountDeleted();
+        toast.success("Account deleted successfully");
+      } else {
+        toast.error("Failed to delete account");
+      }
     },
   });
 
   function handleDelete() {
-    const promises = deleteAccount.mutateAsync();
-    toast.promise(promises, {
-      success: "Account deleted successfully",
-      error: "Failed to delete account",
-    });
+    deleteAccount.mutate();
   }
 
   return (
@@ -216,9 +242,77 @@ function DeleteAccountCard() {
       buttonOnClick={handleDelete}
       isPending={deleteAccount.isPending}
       confirmationDialog={{
-        title: "Are you sure you want to delete your account?",
-        description:
-          "This action is not reversible and will delete all of your data.",
+        title: "Delete Account",
+        description: (
+          <span className="block space-y-2">
+            <span className="block">
+              Permanently delete your thirdweb account, the default team "
+              {props.defaultTeamName}" and all associated data
+            </span>
+            <span className="block font-medium">
+              This action is not reversible
+            </span>
+          </span>
+        ),
+        onClose: () => {
+          deleteAccount.reset();
+        },
+        children: (
+          <>
+            {deleteAccount.data?.status === 400 && (
+              <div className="mt-4">
+                <Alert variant="destructive">
+                  <AlertTitle>Failed to delete account</AlertTitle>
+                  <AlertDescription>
+                    <span className="mb-1 block">
+                      Your default team "{props.defaultTeamName}" has active
+                      subscriptions. These subscriptions have to be cancelled
+                      first before deleting account
+                    </span>
+                    <span className="mb-4 block">
+                      Reach out to support to help you cancel them
+                    </span>
+                    <Button
+                      variant="default"
+                      asChild
+                      size="sm"
+                      className="gap-2"
+                    >
+                      <Link href="/support/create-ticket">
+                        Contact Support
+                        <ExternalLinkIcon className="size-4" />
+                      </Link>
+                    </Button>
+                  </AlertDescription>
+                </Alert>
+              </div>
+            )}
+
+            {deleteAccount.data?.status === 402 && (
+              <div className="mt-4">
+                <Alert variant="destructive">
+                  <AlertTitle>Failed to delete account</AlertTitle>
+                  <AlertDescription>
+                    <span className="mb-4 block">
+                      Your default team "{props.defaultTeamName}" has unpaid
+                      invoices. These invoices have to be paid before deleting
+                      account
+                    </span>
+                    <BillingPortalButton
+                      size="sm"
+                      teamSlug={props.defaultTeamSlug}
+                      variant="default"
+                      redirectPath="/team"
+                      redirectToBillingPortal={props.redirectToBillingPortal}
+                    >
+                      Manage Billing
+                    </BillingPortalButton>
+                  </AlertDescription>
+                </Alert>
+              </div>
+            )}
+          </>
+        ),
       }}
     />
   );
diff --git a/apps/dashboard/src/app/account/settings/page.tsx b/apps/dashboard/src/app/account/settings/page.tsx
index 4b9927f1bb0..26d76ce7173 100644
--- a/apps/dashboard/src/app/account/settings/page.tsx
+++ b/apps/dashboard/src/app/account/settings/page.tsx
@@ -1,3 +1,4 @@
+import { getDefaultTeam } from "@/api/team";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { getAuthToken } from "../../api/lib/getAuthToken";
 import { loginRedirect } from "../../login/loginRedirect";
@@ -6,14 +7,23 @@ import { getValidAccount } from "./getAccount";
 
 export default async function Page() {
   const pagePath = "/account";
-  const account = await getValidAccount(pagePath);
-  const token = await getAuthToken();
 
-  if (!token) {
+  const [defaultTeam, account, token] = await Promise.all([
+    getDefaultTeam(),
+    getValidAccount(pagePath),
+    getAuthToken(),
+  ]);
+
+  if (!token || !defaultTeam) {
     loginRedirect(pagePath);
   }
 
   return (
-    <AccountSettingsPage account={account} client={getThirdwebClient(token)} />
+    <AccountSettingsPage
+      account={account}
+      client={getThirdwebClient(token)}
+      defaultTeamSlug={defaultTeam.slug}
+      defaultTeamName={defaultTeam.name}
+    />
   );
 }
diff --git a/apps/dashboard/src/app/team/page.tsx b/apps/dashboard/src/app/team/page.tsx
index f7c21e7d292..604ef025e47 100644
--- a/apps/dashboard/src/app/team/page.tsx
+++ b/apps/dashboard/src/app/team/page.tsx
@@ -1,11 +1,8 @@
-import { getTeams } from "@/api/team";
+import { getDefaultTeam } from "@/api/team";
 import { notFound, redirect } from "next/navigation";
 
 export default async function TeamRootPage() {
-  // get all teams, then go to the first team
-  const teams = await getTeams();
-
-  const firstTeam = teams?.[0];
+  const firstTeam = await getDefaultTeam();
   if (!firstTeam) {
     notFound();
   }
diff --git a/apps/dashboard/src/middleware.ts b/apps/dashboard/src/middleware.ts
index cb702403f7b..55f71eaab4c 100644
--- a/apps/dashboard/src/middleware.ts
+++ b/apps/dashboard/src/middleware.ts
@@ -1,4 +1,4 @@
-import { getTeams } from "@/api/team";
+import { getDefaultTeam } from "@/api/team";
 import { isLoginRequired } from "@/constants/auth";
 import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
 import { type NextRequest, NextResponse } from "next/server";
@@ -165,9 +165,7 @@ export async function middleware(request: NextRequest) {
 
   // redirect /team/~/... to /team/<first_team_slug>/...
   if (paths[0] === "team" && paths[1] === "~") {
-    // TODO - need an API to get the first team to avoid fetching all teams
-    const teams = await getTeams();
-    const firstTeam = teams?.[0];
+    const firstTeam = await getDefaultTeam();
     if (firstTeam) {
       const modifiedPaths = [...paths];
       modifiedPaths[1] = firstTeam.slug;