chore: team stuff (#1228)

- Added functionality to decline team invitations
- Added email notifications for when team is deleted
- Added email notifications for team members joining and leaving

apps/web/src/app/(dashboard)/settings/teams/decline-team-invitation-button.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DeclineTeamInvitationButtonProps = {
+  teamId: number;
+};
+
+export const DeclineTeamInvitationButton = ({ teamId }: DeclineTeamInvitationButtonProps) => {
+  const { toast } = useToast();
+
+  const {
+    mutateAsync: declineTeamInvitation,
+    isLoading,
+    isSuccess,
+  } = trpc.team.declineTeamInvitation.useMutation({
+    onSuccess: () => {
+      toast({
+        title: 'Success',
+        description: 'Declined team invitation',
+        duration: 5000,
+      });
+    },
+    onError: () => {
+      toast({
+        title: 'Something went wrong',
+        variant: 'destructive',
+        duration: 10000,
+        description: 'Unable to decline this team invitation at this time.',
+      });
+    },
+  });
+
+  return (
+    <Button
+      onClick={async () => declineTeamInvitation({ teamId })}
+      loading={isLoading}
+      disabled={isLoading || isSuccess}
+      variant="ghost"
+    >
+      Decline
+    </Button>
+  );
+};

apps/web/src/app/(dashboard)/settings/teams/team-invitations.tsx

@@ -19,6 +19,7 @@ import {
 } from '@documenso/ui/primitives/dialog';
 
 import { AcceptTeamInvitationButton } from './accept-team-invitation-button';
+import { DeclineTeamInvitationButton } from './decline-team-invitation-button';
 
 export const TeamInvitations = () => {
   const { data, isInitialLoading } = trpc.team.getTeamInvitations.useQuery();
@@ -68,7 +69,8 @@ export const TeamInvitations = () => {
                           }
                           secondaryText={formatTeamUrl(invitation.team.url)}
                           rightSideComponent={
-                            <div className="ml-auto">
+                            <div className="ml-auto space-x-2">
+                              <DeclineTeamInvitationButton teamId={invitation.team.id} />
                               <AcceptTeamInvitationButton teamId={invitation.team.id} />
                             </div>
                           }

apps/web/src/app/(teams)/t/[teamUrl]/settings/team-email-dropdown.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
-
 import { Edit, Loader, Mail, MoreHorizontal, X } from 'lucide-react';
 
 import type { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
@@ -14,6 +12,7 @@ import {
 } from '@documenso/ui/primitives/dropdown-menu';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { RemoveTeamEmailDialog } from '~/components/(teams)/dialogs/remove-team-email-dialog';
 import { UpdateTeamEmailDialog } from '~/components/(teams)/dialogs/update-team-email-dialog';
 
 export type TeamsSettingsPageProps = {
@@ -21,8 +20,6 @@ export type TeamsSettingsPageProps = {
 };
 
 export const TeamEmailDropdown = ({ team }: TeamsSettingsPageProps) => {
-  const router = useRouter();
-
   const { toast } = useToast();
 
   const { mutateAsync: resendEmailVerification, isLoading: isResendingEmailVerification } =
@@ -44,56 +41,6 @@ export const TeamEmailDropdown = ({ team }: TeamsSettingsPageProps) => {
       },
     });
 
-  const { mutateAsync: deleteTeamEmail, isLoading: isDeletingTeamEmail } =
-    trpc.team.deleteTeamEmail.useMutation({
-      onSuccess: () => {
-        toast({
-          title: 'Success',
-          description: 'Team email has been removed',
-          duration: 5000,
-        });
-      },
-      onError: () => {
-        toast({
-          title: 'Something went wrong',
-          variant: 'destructive',
-          duration: 10000,
-          description: 'Unable to remove team email at this time. Please try again.',
-        });
-      },
-    });
-
-  const { mutateAsync: deleteTeamEmailVerification, isLoading: isDeletingTeamEmailVerification } =
-    trpc.team.deleteTeamEmailVerification.useMutation({
-      onSuccess: () => {
-        toast({
-          title: 'Success',
-          description: 'Email verification has been removed',
-          duration: 5000,
-        });
-      },
-      onError: () => {
-        toast({
-          title: 'Something went wrong',
-          variant: 'destructive',
-          duration: 10000,
-          description: 'Unable to remove email verification at this time. Please try again.',
-        });
-      },
-    });
-
-  const onRemove = async () => {
-    if (team.teamEmail) {
-      await deleteTeamEmail({ teamId: team.id });
-    }
-
-    if (team.emailVerification) {
-      await deleteTeamEmailVerification({ teamId: team.id });
-    }
-
-    router.refresh();
-  };
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
@@ -130,13 +77,16 @@ export const TeamEmailDropdown = ({ team }: TeamsSettingsPageProps) => {
           />
         )}
 
-        <DropdownMenuItem
-          disabled={isDeletingTeamEmail || isDeletingTeamEmailVerification}
-          onClick={async () => onRemove()}
-        >
-          <X className="mr-2 h-4 w-4" />
-          Remove
-        </DropdownMenuItem>
+        <RemoveTeamEmailDialog
+          team={team}
+          teamName={team.name}
+          trigger={
+            <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+              <X className="mr-2 h-4 w-4" />
+              Remove
+            </DropdownMenuItem>
+          }
+        />
       </DropdownMenuContent>
     </DropdownMenu>
   );

apps/web/src/app/(unauthenticated)/team/decline/[token]/page.tsx

@@ -0,0 +1,120 @@
+import Link from 'next/link';
+
+import { DateTime } from 'luxon';
+
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { encryptSecondaryData } from '@documenso/lib/server-only/crypto/encrypt';
+import { declineTeamInvitation } from '@documenso/lib/server-only/team/decline-team-invitation';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+import { prisma } from '@documenso/prisma';
+import { TeamMemberInviteStatus } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+
+type DeclineInvitationPageProps = {
+  params: {
+    token: string;
+  };
+};
+
+export default async function DeclineInvitationPage({
+  params: { token },
+}: DeclineInvitationPageProps) {
+  const session = await getServerComponentSession();
+
+  const teamMemberInvite = await prisma.teamMemberInvite.findUnique({
+    where: {
+      token,
+    },
+  });
+
+  if (!teamMemberInvite) {
+    return (
+      <div className="w-screen max-w-lg px-4">
+        <div className="w-full">
+          <h1 className="text-4xl font-semibold">Invalid token</h1>
+
+          <p className="text-muted-foreground mb-4 mt-2 text-sm">
+            This token is invalid or has expired. No action is needed.
+          </p>
+
+          <Button asChild>
+            <Link href="/">Return</Link>
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  const team = await getTeamById({ teamId: teamMemberInvite.teamId });
+
+  const user = await prisma.user.findFirst({
+    where: {
+      email: {
+        equals: teamMemberInvite.email,
+        mode: 'insensitive',
+      },
+    },
+  });
+
+  if (user) {
+    await declineTeamInvitation({ userId: user.id, teamId: team.id });
+  }
+
+  if (!user && teamMemberInvite.status !== TeamMemberInviteStatus.DECLINED) {
+    await prisma.teamMemberInvite.update({
+      where: {
+        id: teamMemberInvite.id,
+      },
+      data: {
+        status: TeamMemberInviteStatus.DECLINED,
+      },
+    });
+  }
+
+  const email = encryptSecondaryData({
+    data: teamMemberInvite.email,
+    expiresAt: DateTime.now().plus({ days: 1 }).toMillis(),
+  });
+
+  if (!user) {
+    return (
+      <div>
+        <h1 className="text-4xl font-semibold">Team invitation</h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          You have been invited by <strong>{team.name}</strong> to join their team.
+        </p>
+
+        <p className="text-muted-foreground mb-4 mt-1 text-sm">
+          To decline this invitation you must create an account.
+        </p>
+
+        <Button asChild>
+          <Link href={`/signup?email=${encodeURIComponent(email)}`}>Create account</Link>
+        </Button>
+      </div>
+    );
+  }
+
+  const isSessionUserTheInvitedUser = user?.id === session.user?.id;
+
+  return (
+    <div className="w-screen max-w-lg px-4">
+      <h1 className="text-4xl font-semibold">Invitation declined</h1>
+
+      <p className="text-muted-foreground mb-4 mt-2 text-sm">
+        You have declined the invitation from <strong>{team.name}</strong> to join their team.
+      </p>
+
+      {isSessionUserTheInvitedUser ? (
+        <Button asChild>
+          <Link href="/">Return to Dashboard</Link>
+        </Button>
+      ) : (
+        <Button asChild>
+          <Link href="/">Return to Home</Link>
+        </Button>
+      )}
+    </div>
+  );
+}

apps/web/src/components/(teams)/dialogs/delete-team-dialog.tsx

@@ -113,10 +113,11 @@ export const DeleteTeamDialog = ({ trigger, teamId, teamName }: DeleteTeamDialog
 
       <DialogContent position="center">
         <DialogHeader>
-          <DialogTitle>Delete team</DialogTitle>
+          <DialogTitle>Are you sure you wish to delete this team?</DialogTitle>
 
           <DialogDescription className="mt-4">
-            Are you sure? This is irreversable.
+            Please note that you will lose access to all documents associated with this team & all
+            the members will be removed and notified
           </DialogDescription>
         </DialogHeader>
 

apps/web/src/components/(teams)/dialogs/remove-team-email-dialog.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { Prisma } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { Alert } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type RemoveTeamEmailDialogProps = {
+  trigger?: React.ReactNode;
+  teamName: string;
+  team: Prisma.TeamGetPayload<{
+    include: {
+      teamEmail: true;
+      emailVerification: {
+        select: {
+          expiresAt: true;
+          name: true;
+          email: true;
+        };
+      };
+    };
+  }>;
+};
+
+export const RemoveTeamEmailDialog = ({ trigger, teamName, team }: RemoveTeamEmailDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const { mutateAsync: deleteTeamEmail, isLoading: isDeletingTeamEmail } =
+    trpc.team.deleteTeamEmail.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Team email has been removed',
+          duration: 5000,
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          variant: 'destructive',
+          duration: 10000,
+          description: 'Unable to remove team email at this time. Please try again.',
+        });
+      },
+    });
+
+  const { mutateAsync: deleteTeamEmailVerification, isLoading: isDeletingTeamEmailVerification } =
+    trpc.team.deleteTeamEmailVerification.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Email verification has been removed',
+          duration: 5000,
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          variant: 'destructive',
+          duration: 10000,
+          description: 'Unable to remove email verification at this time. Please try again.',
+        });
+      },
+    });
+
+  const onRemove = async () => {
+    if (team.teamEmail) {
+      await deleteTeamEmail({ teamId: team.id });
+    }
+
+    if (team.emailVerification) {
+      await deleteTeamEmailVerification({ teamId: team.id });
+    }
+
+    router.refresh();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? <Button variant="destructive">Remove team email</Button>}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Are you sure?</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            You are about to delete the following team email from{' '}
+            <span className="font-semibold">{teamName}</span>.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="neutral" padding="tight">
+          <AvatarWithText
+            avatarClass="h-12 w-12"
+            avatarSrc={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${team.avatarImageId}`}
+            avatarFallback={extractInitials(
+              (team.teamEmail?.name || team.emailVerification?.name) ?? '',
+            )}
+            primaryText={
+              <span className="text-foreground/80 text-sm font-semibold">
+                {team.teamEmail?.name || team.emailVerification?.name}
+              </span>
+            }
+            secondaryText={
+              <span className="text-sm">
+                {team.teamEmail?.email || team.emailVerification?.email}
+              </span>
+            }
+          />
+        </Alert>
+
+        <fieldset disabled={isDeletingTeamEmail || isDeletingTeamEmailVerification}>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isDeletingTeamEmail || isDeletingTeamEmailVerification}
+              onClick={async () => onRemove()}
+            >
+              Remove
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};