From 917a1271bf72185d1f8e2f5bcb8121d991284891 Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Wed, 27 Dec 2023 17:32:56 +1100
Subject: [PATCH] feat: wip

---
 .../app/(dashboard)/settings/teams/page.tsx   |  55 +---------
 .../settings/teams/team-email-usage.tsx       | 103 ++++++++++++++++++
 .../email/templates/confirm-team-email.tsx    |   4 +-
 packages/lib/constants/teams.ts               |   9 +-
 .../team/delete-team-invitations.ts           |   2 +-
 .../server-only/team/delete-team-members.ts   |   2 +-
 .../server-only/team/update-team-member.ts    |   4 +-
 packages/ui/primitives/combobox.tsx           | 103 ++++++++++--------
 8 files changed, 170 insertions(+), 112 deletions(-)
 create mode 100644 apps/web/src/app/(dashboard)/settings/teams/team-email-usage.tsx

diff --git a/apps/web/src/app/(dashboard)/settings/teams/page.tsx b/apps/web/src/app/(dashboard)/settings/teams/page.tsx
index 282a516fe..756f652b8 100644
--- a/apps/web/src/app/(dashboard)/settings/teams/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/teams/page.tsx
@@ -3,40 +3,17 @@
 import { AnimatePresence, motion } from 'framer-motion';
 
 import { trpc } from '@documenso/trpc/react';
-import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import SettingsHeader from '~/components/(dashboard)/settings/layout/header';
 import CreateTeamDialog from '~/components/(teams)/dialogs/create-team-dialog';
 import UserTeamsPageDataTable from '~/components/(teams)/tables/user-teams-page-data-table';
 
+import TeamEmailUsage from './team-email-usage';
 import { TeamInvitations } from './team-invitations';
 
 export default function TeamsSettingsPage() {
-  const { toast } = useToast();
-
   const { data: teamEmail } = trpc.team.getTeamEmailByEmail.useQuery();
 
-  const { mutateAsync: deleteTeamEmail, isLoading: isDeletingTeamEmail } =
-    trpc.team.deleteTeamEmail.useMutation({
-      onSuccess: () => {
-        toast({
-          title: 'Success',
-          description: 'You have successfully revoked access.',
-          duration: 5000,
-        });
-      },
-      onError: () => {
-        toast({
-          title: 'Something went wrong',
-          variant: 'destructive',
-          duration: 10000,
-          description:
-            'We encountered an unknown error while attempting to revoke access. Please try again or contact support.',
-        });
-      },
-    });
-
   return (
     <div>
       <SettingsHeader title="Teams" subtitle="Manage all teams you are currently associated with.">
@@ -58,35 +35,7 @@ export default function TeamsSettingsPage() {
               opacity: 0,
             }}
           >
-            <div className="mt-8 flex flex-row items-center justify-between rounded-lg bg-gray-50/70 p-6">
-              <div className="text-sm">
-                <h3 className="text-base font-medium">Team email</h3>
-
-                <p className="text-muted-foreground">
-                  Your email is currently being used by team{' '}
-                  <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}
-                  ).
-                </p>
-
-                <p className="text-muted-foreground mt-1">
-                  They have permission on your behalf to:
-                </p>
-
-                <ul className="text-muted-foreground mt-0.5 list-inside list-disc">
-                  <li>Display your name and email in documents</li>
-                  <li>View all documents sent to your account</li>
-                </ul>
-              </div>
-
-              {/* Todo: Teams - Add 'are you sure'. */}
-              <Button
-                variant="destructive"
-                loading={isDeletingTeamEmail}
-                onClick={async () => deleteTeamEmail({ teamId: teamEmail.team.id })}
-              >
-                Revoke access
-              </Button>
-            </div>
+            <TeamEmailUsage teamEmail={teamEmail} />
           </motion.section>
         )}
       </AnimatePresence>
diff --git a/apps/web/src/app/(dashboard)/settings/teams/team-email-usage.tsx b/apps/web/src/app/(dashboard)/settings/teams/team-email-usage.tsx
new file mode 100644
index 000000000..072b06ba5
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/settings/teams/team-email-usage.tsx
@@ -0,0 +1,103 @@
+'use client';
+
+import { useState } from 'react';
+
+import type { TeamEmail } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+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 TeamEmailUsageProps = {
+  teamEmail: TeamEmail & { team: { name: string; url: string } };
+};
+
+export default function TeamEmailUsage({ teamEmail }: TeamEmailUsageProps) {
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const { mutateAsync: deleteTeamEmail, isLoading: isDeletingTeamEmail } =
+    trpc.team.deleteTeamEmail.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'You have successfully revoked access.',
+          duration: 5000,
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          variant: 'destructive',
+          duration: 10000,
+          description:
+            'We encountered an unknown error while attempting to revoke access. Please try again or contact support.',
+        });
+      },
+    });
+
+  return (
+    <div className="mt-8 flex flex-row items-center justify-between rounded-lg bg-gray-50/70 p-6">
+      <div className="text-sm">
+        <h3 className="text-base font-medium">Team email</h3>
+
+        <p className="text-muted-foreground">
+          Your email is currently being used by team{' '}
+          <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}
+          ).
+        </p>
+
+        <p className="text-muted-foreground mt-1">They have permission on your behalf to:</p>
+
+        <ul className="text-muted-foreground mt-0.5 list-inside list-disc">
+          <li>Display your name and email in documents</li>
+          <li>View all documents sent to your account</li>
+        </ul>
+      </div>
+
+      <Dialog open={open} onOpenChange={(value) => !isDeletingTeamEmail && setOpen(value)}>
+        <DialogTrigger asChild>
+          <Button variant="destructive">Revoke access</Button>
+        </DialogTrigger>
+
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Are you sure?</DialogTitle>
+
+            <DialogDescription className="mt-4">
+              You are about to revoke access for team{' '}
+              <span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}) to
+              use your email.
+            </DialogDescription>
+          </DialogHeader>
+
+          <fieldset disabled={isDeletingTeamEmail}>
+            <DialogFooter className="space-x-4">
+              <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+
+              <Button
+                type="submit"
+                variant="destructive"
+                loading={isDeletingTeamEmail}
+                onClick={async () => deleteTeamEmail({ teamId: teamEmail.teamId })}
+              >
+                Revoke
+              </Button>
+            </DialogFooter>
+          </fieldset>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/packages/email/templates/confirm-team-email.tsx b/packages/email/templates/confirm-team-email.tsx
index 2030332b6..3493044fc 100644
--- a/packages/email/templates/confirm-team-email.tsx
+++ b/packages/email/templates/confirm-team-email.tsx
@@ -84,7 +84,9 @@ export const ConfirmTeamEmailTemplate = ({
                   </Text>
 
                   <ul className="mb-0 mt-2">
-                    <li className="text-sm">View all documents sent to this email address</li>
+                    <li className="text-sm">
+                      View all documents sent to and from this email address
+                    </li>
                     <li className="mt-1 text-sm">
                       Allow document recipients to reply directly to this email address
                     </li>
diff --git a/packages/lib/constants/teams.ts b/packages/lib/constants/teams.ts
index eb83f95e3..58455d20f 100644
--- a/packages/lib/constants/teams.ts
+++ b/packages/lib/constants/teams.ts
@@ -8,15 +8,12 @@ export const TEAM_MEMBER_ROLE_MAP: Record<keyof typeof TeamMemberRole, string> =
 
 export const TEAM_MEMBER_ROLE_PERMISSIONS_MAP = {
   /**
-   * Includes updating team name, url, logo, emails.
-   *
-   * Todo: Teams - Clean this up, merge etc.
+   * Includes permissions to:
+   * - Manage team members
+   * - Manage team settings, changing name, url, etc.
    */
   MANAGE_TEAM: [TeamMemberRole.ADMIN, TeamMemberRole.MANAGER],
-  DELETE_INVITATIONS: [TeamMemberRole.ADMIN, TeamMemberRole.MANAGER],
-  DELETE_TEAM_MEMBERS: [TeamMemberRole.ADMIN, TeamMemberRole.MANAGER],
   DELETE_TEAM_TRANSFER_REQUEST: [TeamMemberRole.ADMIN],
-  UPDATE_TEAM_MEMBERS: [TeamMemberRole.ADMIN, TeamMemberRole.MANAGER],
 } satisfies Record<string, TeamMemberRole[]>;
 
 /**
diff --git a/packages/lib/server-only/team/delete-team-invitations.ts b/packages/lib/server-only/team/delete-team-invitations.ts
index 10551baa1..70c5d731f 100644
--- a/packages/lib/server-only/team/delete-team-invitations.ts
+++ b/packages/lib/server-only/team/delete-team-invitations.ts
@@ -30,7 +30,7 @@ export const deleteTeamMemberInvitations = async ({
         userId,
         teamId,
         role: {
-          in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['DELETE_INVITATIONS'],
+          in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
         },
       },
     });
diff --git a/packages/lib/server-only/team/delete-team-members.ts b/packages/lib/server-only/team/delete-team-members.ts
index 6c8196c42..97a8717f0 100644
--- a/packages/lib/server-only/team/delete-team-members.ts
+++ b/packages/lib/server-only/team/delete-team-members.ts
@@ -36,7 +36,7 @@ export const deleteTeamMembers = async ({
           some: {
             userId,
             role: {
-              in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['DELETE_TEAM_MEMBERS'],
+              in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
             },
           },
         },
diff --git a/packages/lib/server-only/team/update-team-member.ts b/packages/lib/server-only/team/update-team-member.ts
index 65e82ca26..c99d4a290 100644
--- a/packages/lib/server-only/team/update-team-member.ts
+++ b/packages/lib/server-only/team/update-team-member.ts
@@ -1,5 +1,5 @@
 import { prisma } from '@documenso/prisma';
-import { TeamMemberRole } from '@documenso/prisma/client';
+import type { TeamMemberRole } from '@documenso/prisma/client';
 
 import { TEAM_MEMBER_ROLE_PERMISSIONS_MAP } from '../../constants/teams';
 
@@ -27,7 +27,7 @@ export const updateTeamMember = async ({
           some: {
             userId,
             role: {
-              in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['UPDATE_TEAM_MEMBERS'],
+              in: TEAM_MEMBER_ROLE_PERMISSIONS_MAP['MANAGE_TEAM'],
             },
           },
         },
diff --git a/packages/ui/primitives/combobox.tsx b/packages/ui/primitives/combobox.tsx
index bf3705763..c1b4466ba 100644
--- a/packages/ui/primitives/combobox.tsx
+++ b/packages/ui/primitives/combobox.tsx
@@ -84,57 +84,64 @@ export function Combobox<T = OptionValue>({
     return selectedOptions.map((option) => option.label).join(', ');
   }, [selectedOptions, emptySelectionPlaceholder, loading]);
 
+  const showClearButton = enableClearAllButton && selectedValues.length > 0;
+
   return (
     <Popover open={open && !loading} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          disabled={loading}
-          aria-expanded={open}
-          className="relative w-[200px] px-3"
-        >
-          <AnimatePresence>
-            {loading ? (
-              <div className="absolute inset-0 flex items-center justify-center">
-                <Loader className="h-5 w-5 animate-spin text-gray-500 dark:text-gray-100" />
-              </div>
-            ) : (
-              <motion.div
-                className="flex w-full justify-between"
-                initial={{
-                  opacity: 0,
-                }}
-                animate={{
-                  opacity: 1,
-                }}
-                exit={{
-                  opacity: 0,
-                }}
-              >
-                <span className="truncate">{buttonLabel}</span>
-
-                <div className="ml-2 flex flex-row items-center">
-                  {enableClearAllButton && selectedValues.length > 0 && (
-                    // Todo: Teams - Can't have nested buttons.
-                    <button
-                      className="mr-1 flex h-4 w-4 items-center justify-center rounded-full bg-gray-300"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        onChange([]);
-                      }}
-                    >
-                      <XIcon className="text-muted-foreground h-3.5 w-3.5" />
-                    </button>
-                  )}
-
-                  <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+      <div className="relative">
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            disabled={loading}
+            aria-expanded={open}
+            className="relative w-[200px] px-3"
+          >
+            <AnimatePresence>
+              {loading ? (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Loader className="h-5 w-5 animate-spin text-gray-500 dark:text-gray-100" />
                 </div>
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </Button>
-      </PopoverTrigger>
+              ) : (
+                <motion.div
+                  className="flex w-full justify-between"
+                  initial={{
+                    opacity: 0,
+                  }}
+                  animate={{
+                    opacity: 1,
+                  }}
+                  exit={{
+                    opacity: 0,
+                  }}
+                >
+                  <span className="truncate">{buttonLabel}</span>
+
+                  <div
+                    className={cn('ml-2 flex flex-row items-center', {
+                      'ml-6': showClearButton,
+                    })}
+                  >
+                    <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </Button>
+        </PopoverTrigger>
+
+        {/* This is placed outside the trigger since we can't have nested buttons. */}
+        {showClearButton && (
+          <div className="absolute bottom-0 right-8 top-0 flex items-center justify-center">
+            <button
+              className="flex h-4 w-4 items-center justify-center rounded-full bg-gray-300"
+              onClick={() => onChange([])}
+            >
+              <XIcon className="text-muted-foreground h-3.5 w-3.5" />
+            </button>
+          </div>
+        )}
+      </div>
 
       <PopoverContent className="w-[200px] p-0">
         <Command>