[TOOL-3630] Dashboard: Add cancel subscriptions option in delete account flow (#6429)

Author: MananTank

apps/dashboard/src/app/account/settings/AccountSettingsPage.tsx

@@ -36,6 +36,16 @@ export function AccountSettingsPage(props: {
           client={props.client}
           defaultTeamSlug={props.defaultTeamSlug}
           defaultTeamName={props.defaultTeamName}
+          cancelSubscriptions={async () => {
+            const res = await apiServerProxy({
+              method: "DELETE",
+              pathname: `/v1/teams/${props.defaultTeamSlug}/subscriptions`,
+            });
+
+            if (!res.ok) {
+              throw new Error(res.error);
+            }
+          }}
           onAccountDeleted={async () => {
             await doLogout();
             if (activeWallet) {

apps/dashboard/src/app/account/settings/AccountSettingsPageUI.stories.tsx

@@ -143,6 +143,9 @@ function Variants() {
         onAccountDeleted={() => {
           console.log("Account deleted");
         }}
+        cancelSubscriptions={async () => {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+        }}
       />
       <Toaster richColors />
     </div>

apps/dashboard/src/app/account/settings/AccountSettingsPageUI.tsx

@@ -38,7 +38,7 @@ 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, ExternalLinkIcon } from "lucide-react";
+import { CircleXIcon, EllipsisIcon, ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -64,6 +64,7 @@ export function AccountSettingsPageUI(props: {
   defaultTeamSlug: string;
   defaultTeamName: string;
   redirectToBillingPortal: BillingBillingPortalAction;
+  cancelSubscriptions: () => Promise<void>;
 }) {
   return (
     <div className="flex flex-col gap-8">
@@ -89,6 +90,7 @@ export function AccountSettingsPageUI(props: {
         defaultTeamSlug={props.defaultTeamSlug}
         defaultTeamName={props.defaultTeamName}
         redirectToBillingPortal={props.redirectToBillingPortal}
+        cancelSubscriptions={props.cancelSubscriptions}
       />
     </div>
   );
@@ -207,6 +209,7 @@ function DeleteAccountCard(props: {
   defaultTeamSlug: string;
   defaultTeamName: string;
   redirectToBillingPortal: BillingBillingPortalAction;
+  cancelSubscriptions: () => Promise<void>;
 }) {
   const title = "Delete Account";
   const description = (
@@ -230,6 +233,10 @@ function DeleteAccountCard(props: {
     },
   });
 
+  const cancelSubscriptions = useMutation({
+    mutationFn: props.cancelSubscriptions,
+  });
+
   function handleDelete() {
     deleteAccount.mutate();
   }
@@ -264,25 +271,47 @@ function DeleteAccountCard(props: {
                 <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>
+                    <div className="mb-4">
+                      <span className="block">
+                        Your default team "{props.defaultTeamName}" has active
+                        subscriptions. These subscriptions have to be cancelled
+                        before deleting account
+                      </span>
+                    </div>
+
+                    <div className="flex flex-col gap-3 lg:flex-row">
+                      <Button
+                        variant="default"
+                        size="sm"
+                        className="gap-2"
+                        onClick={() => {
+                          const promise = cancelSubscriptions.mutateAsync();
+                          toast.promise(promise, {
+                            success: "Subscriptions cancelled successfully",
+                            error: "Failed to cancel subscriptions",
+                          });
+                        }}
+                      >
+                        {cancelSubscriptions.isPending ? (
+                          <Spinner className="size-4" />
+                        ) : (
+                          <CircleXIcon className="size-4" />
+                        )}
+                        Cancel subscriptions
+                      </Button>
+
+                      <Button
+                        variant="outline"
+                        asChild
+                        size="sm"
+                        className="gap-2"
+                      >
+                        <Link href="/support/create-ticket" target="_blank">
+                          Contact Support
+                          <ExternalLinkIcon className="size-4" />
+                        </Link>
+                      </Button>
+                    </div>
                   </AlertDescription>
                 </Alert>
               </div>