Merge branch 'main' into update-documents-avatar

apps/web/src/components/(dashboard)/avatar/avatar-with-recipient.tsx

@@ -4,6 +4,8 @@ import React from 'react';
 
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import type { Recipient } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
@@ -24,7 +26,7 @@ export function AvatarWithRecipient({ recipient }: AvatarWithRecipientProps) {
       return;
     }
 
-    void copy(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/sign/${recipient.token}`).then(() => {
+    void copy(`${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`).then(() => {
       toast({
         title: 'Copied to clipboard',
         description: 'The signing link has been copied to your clipboard.',
@@ -47,8 +49,17 @@ export function AvatarWithRecipient({ recipient }: AvatarWithRecipientProps) {
         type={getRecipientType(recipient)}
         fallbackText={recipientAbbreviation(recipient)}
       />
-
-      <span className="text-muted-foreground text-sm">{recipient.email}</span>
+      <div>
+        <div
+          className="text-muted-foreground text-sm"
+          title="Click to copy signing link for sending to recipient"
+        >
+          <p>{recipient.email} </p>
+          <p className="text-muted-foreground/70 text-xs">
+            {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
+          </p>
+        </div>
+      </div>
     </div>
   );
 }

apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from 'react';
 
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import type { Recipient } from '@documenso/prisma/client';
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
@@ -102,7 +103,12 @@ export const StackAvatarsWithTooltip = ({
                   type={getRecipientType(recipient)}
                   fallbackText={recipientAbbreviation(recipient)}
                 />
-                <span className="text-muted-foreground text-sm">{recipient.email}</span>
+                <div className="">
+                  <p className="text-muted-foreground text-sm">{recipient.email}</p>
+                  <p className="text-muted-foreground/70 text-xs">
+                    {RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName}
+                  </p>
+                </div>
               </div>
             ))}
           </div>

apps/web/src/components/(dashboard)/common/command-menu.tsx

@@ -197,20 +197,22 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
         )}
         {!currentPage && (
           <>
-            <CommandGroup heading="Documents">
+            <CommandGroup className="mx-2 p-0 pb-2" heading="Documents">
               <Commands push={push} pages={DOCUMENTS_PAGES} />
             </CommandGroup>
-            <CommandGroup heading="Templates">
+            <CommandGroup className="mx-2 p-0 pb-2" heading="Templates">
               <Commands push={push} pages={TEMPLATES_PAGES} />
             </CommandGroup>
-            <CommandGroup heading="Settings">
+            <CommandGroup className="mx-2 p-0 pb-2" heading="Settings">
               <Commands push={push} pages={SETTINGS_PAGES} />
             </CommandGroup>
-            <CommandGroup heading="Preferences">
-              <CommandItem onSelect={() => addPage('theme')}>Change theme</CommandItem>
+            <CommandGroup className="mx-2 p-0 pb-2" heading="Preferences">
+              <CommandItem className="-mx-2 -my-1 rounded-lg" onSelect={() => addPage('theme')}>
+                Change theme
+              </CommandItem>
             </CommandGroup>
             {searchResults.length > 0 && (
-              <CommandGroup heading="Your documents">
+              <CommandGroup className="mx-2 p-0 pb-2" heading="Your documents">
                 <Commands push={push} pages={searchResults} />
               </CommandGroup>
             )}
@@ -231,6 +233,7 @@ const Commands = ({
 }) => {
   return pages.map((page, idx) => (
     <CommandItem
+      className="-mx-2 -my-1 rounded-lg"
       key={page.path + idx}
       value={page.value ?? page.label}
       onSelect={() => push(page.path)}
@@ -255,7 +258,7 @@ const ThemeCommands = ({ setTheme }: { setTheme: (_theme: string) => void }) =>
     <CommandItem
       key={theme.theme}
       onSelect={() => setTheme(theme.theme)}
-      className="mx-2 first:mt-2 last:mb-2"
+      className="-my-1 mx-2 rounded-lg first:mt-2 last:mb-2"
     >
       <theme.icon className="mr-2" />
       {theme.label}

apps/web/src/components/(dashboard)/layout/banner.tsx

@@ -0,0 +1,29 @@
+import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
+import { SITE_SETTINGS_BANNER_ID } from '@documenso/lib/server-only/site-settings/schemas/banner';
+
+export const Banner = async () => {
+  const banner = await getSiteSettings().then((settings) =>
+    settings.find((setting) => setting.id === SITE_SETTINGS_BANNER_ID),
+  );
+
+  return (
+    <>
+      {banner && banner.enabled && (
+        <div className="mb-2" style={{ background: banner.data.bgColor }}>
+          <div
+            className="mx-auto flex h-auto max-w-screen-xl items-center justify-center px-4 py-3 text-sm font-medium"
+            style={{ color: banner.data.textColor }}
+          >
+            <div className="flex items-center">
+              <span dangerouslySetInnerHTML={{ __html: banner.data.content }} />
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+// Banner
+// Custom Text
+// Custom Text with Custom Icon

apps/web/src/components/(dashboard)/layout/desktop-nav.tsx

@@ -4,10 +4,11 @@ import type { HTMLAttributes } from 'react';
 import { useEffect, useState } from 'react';
 
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { useParams, usePathname } from 'next/navigation';
 
 import { Search } from 'lucide-react';
 
+import { getRootHref } from '@documenso/lib/utils/params';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -28,10 +29,13 @@ export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
 
 export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
   const pathname = usePathname();
+  const params = useParams();
 
   const [open, setOpen] = useState(false);
   const [modifierKey, setModifierKey] = useState(() => 'Ctrl');
 
+  const rootHref = getRootHref(params, { returnEmptyRootString: true });
+
   useEffect(() => {
     const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : 'unknown';
     const isMacOS = /Macintosh|Mac\s+OS\s+X/i.test(userAgent);
@@ -51,11 +55,13 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         {navigationLinks.map(({ href, label }) => (
           <Link
             key={href}
-            href={href}
+            href={`${rootHref}${href}`}
             className={cn(
-              'text-muted-foreground dark:text-muted focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
+              'text-muted-foreground dark:text-muted-foreground/60 focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
               {
-                'text-foreground dark:text-muted-foreground': pathname?.startsWith(href),
+                'text-foreground dark:text-muted-foreground': pathname?.startsWith(
+                  `${rootHref}${href}`,
+                ),
               },
             )}
           >

apps/web/src/components/(dashboard)/layout/header.tsx

@@ -1,23 +1,34 @@
 'use client';
 
-import type { HTMLAttributes } from 'react';
-import { useEffect, useState } from 'react';
+import { type HTMLAttributes, useEffect, useState } from 'react';
 
 import Link from 'next/link';
+import { useParams } from 'next/navigation';
 
+import { MenuIcon, SearchIcon } from 'lucide-react';
+
+import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { getRootHref } from '@documenso/lib/utils/params';
 import type { User } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 
 import { Logo } from '~/components/branding/logo';
 
+import { CommandMenu } from '../common/command-menu';
 import { DesktopNav } from './desktop-nav';
-import { ProfileDropdown } from './profile-dropdown';
+import { MenuSwitcher } from './menu-switcher';
+import { MobileNavigation } from './mobile-navigation';
 
 export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
   user: User;
+  teams: GetTeamsResponse;
 };
 
-export const Header = ({ className, user, ...props }: HeaderProps) => {
+export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
+  const params = useParams();
+
+  const [isCommandMenuOpen, setIsCommandMenuOpen] = useState(false);
+  const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
   const [scrollY, setScrollY] = useState(0);
 
   useEffect(() => {
@@ -41,8 +52,8 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
     >
       <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:justify-normal md:px-8">
         <Link
-          href="/"
-          className="focus-visible:ring-ring ring-offset-background rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+          href={`${getRootHref(params, { returnEmptyRootString: true })}/documents`}
+          className="focus-visible:ring-ring ring-offset-background hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 md:inline"
         >
           <Logo className="h-6 w-auto" />
         </Link>
@@ -50,11 +61,24 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
         <DesktopNav />
 
         <div className="flex gap-x-4 md:ml-8">
-          <ProfileDropdown user={user} />
+          <MenuSwitcher user={user} teams={teams} />
+        </div>
 
-          {/* <Button variant="outline" size="sm" className="h-10 w-10 p-0.5 md:hidden">
-            <Menu className="h-6 w-6" />
-          </Button> */}
+        <div className="flex flex-row items-center space-x-4 md:hidden">
+          <button onClick={() => setIsCommandMenuOpen(true)}>
+            <SearchIcon className="text-muted-foreground h-6 w-6" />
+          </button>
+
+          <button onClick={() => setIsHamburgerMenuOpen(true)}>
+            <MenuIcon className="text-muted-foreground h-6 w-6" />
+          </button>
+
+          <CommandMenu open={isCommandMenuOpen} onOpenChange={setIsCommandMenuOpen} />
+
+          <MobileNavigation
+            isMenuOpen={isHamburgerMenuOpen}
+            onMenuOpenChange={setIsHamburgerMenuOpen}
+          />
         </div>
       </div>
     </header>

apps/web/src/components/(dashboard)/layout/menu-switcher.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { CheckCircle2, ChevronsUpDown, Plus, Settings2 } from 'lucide-react';
+import { signOut } from 'next-auth/react';
+
+import { TEAM_MEMBER_ROLE_MAP, TEAM_URL_REGEX } from '@documenso/lib/constants/teams';
+import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
+import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import type { User } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+
+export type MenuSwitcherProps = {
+  user: User;
+  teams: GetTeamsResponse;
+};
+
+export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProps) => {
+  const pathname = usePathname();
+
+  const isUserAdmin = isAdmin(user);
+
+  const { data: teamsQueryResult } = trpc.team.getTeams.useQuery(undefined, {
+    initialData: initialTeamsData,
+  });
+
+  const teams = teamsQueryResult && teamsQueryResult.length > 0 ? teamsQueryResult : null;
+
+  const isPathTeamUrl = (teamUrl: string) => {
+    if (!pathname || !pathname.startsWith(`/t/`)) {
+      return false;
+    }
+
+    return pathname.split('/')[2] === teamUrl;
+  };
+
+  const selectedTeam = teams?.find((team) => isPathTeamUrl(team.url));
+
+  const formatAvatarFallback = (teamName?: string) => {
+    if (teamName !== undefined) {
+      return teamName.slice(0, 1).toUpperCase();
+    }
+
+    return user.name ? extractInitials(user.name) : user.email.slice(0, 1).toUpperCase();
+  };
+
+  const formatSecondaryAvatarText = (team?: typeof selectedTeam) => {
+    if (!team) {
+      return 'Personal Account';
+    }
+
+    if (team.ownerUserId === user.id) {
+      return 'Owner';
+    }
+
+    return TEAM_MEMBER_ROLE_MAP[team.currentTeamMember.role];
+  };
+
+  /**
+   * Formats the redirect URL so we can switch between documents and templates page
+   * seemlessly between teams and personal accounts.
+   */
+  const formatRedirectUrlOnSwitch = (teamUrl?: string) => {
+    const baseUrl = teamUrl ? `/t/${teamUrl}/` : '/';
+
+    const currentPathname = (pathname ?? '/').replace(TEAM_URL_REGEX, '');
+
+    if (currentPathname === '/templates') {
+      return `${baseUrl}templates`;
+    }
+
+    return baseUrl;
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          data-testid="menu-switcher"
+          variant="none"
+          className="relative flex h-12 flex-row items-center px-2 py-2 ring-0 focus-visible:border-0 focus-visible:ring-0"
+        >
+          <AvatarWithText
+            avatarFallback={formatAvatarFallback(selectedTeam?.name)}
+            primaryText={selectedTeam ? selectedTeam.name : user.name}
+            secondaryText={formatSecondaryAvatarText(selectedTeam)}
+            rightSideComponent={
+              <ChevronsUpDown className="text-muted-foreground ml-auto h-4 w-4" />
+            }
+          />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        className={cn('z-[60] ml-2 w-full md:ml-0', teams ? 'min-w-[20rem]' : 'min-w-[12rem]')}
+        align="end"
+        forceMount
+      >
+        {teams ? (
+          <>
+            <DropdownMenuLabel>Personal</DropdownMenuLabel>
+
+            <DropdownMenuItem asChild>
+              <Link href={formatRedirectUrlOnSwitch()}>
+                <AvatarWithText
+                  avatarFallback={formatAvatarFallback()}
+                  primaryText={user.name}
+                  secondaryText={formatSecondaryAvatarText()}
+                  rightSideComponent={
+                    !pathname?.startsWith(`/t/`) && (
+                      <CheckCircle2 className="ml-auto fill-black text-white dark:fill-white dark:text-black" />
+                    )
+                  }
+                />
+              </Link>
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator className="mt-2" />
+
+            <DropdownMenuLabel>
+              <div className="flex flex-row items-center justify-between">
+                <p>Teams</p>
+
+                <div className="flex flex-row space-x-2">
+                  <DropdownMenuItem asChild>
+                    <Button
+                      title="Manage teams"
+                      variant="ghost"
+                      className="text-muted-foreground flex h-5 w-5 items-center justify-center p-0"
+                      asChild
+                    >
+                      <Link href="/settings/teams">
+                        <Settings2 className="h-4 w-4" />
+                      </Link>
+                    </Button>
+                  </DropdownMenuItem>
+
+                  <DropdownMenuItem asChild>
+                    <Button
+                      title="Create team"
+                      variant="ghost"
+                      className="text-muted-foreground flex h-5 w-5 items-center justify-center p-0"
+                      asChild
+                    >
+                      <Link href="/settings/teams?action=add-team">
+                        <Plus className="h-4 w-4" />
+                      </Link>
+                    </Button>
+                  </DropdownMenuItem>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+
+            <div className="custom-scrollbar max-h-[40vh] overflow-auto">
+              {teams.map((team) => (
+                <DropdownMenuItem asChild key={team.id}>
+                  <Link href={formatRedirectUrlOnSwitch(team.url)}>
+                    <AvatarWithText
+                      avatarFallback={formatAvatarFallback(team.name)}
+                      primaryText={team.name}
+                      secondaryText={formatSecondaryAvatarText(team)}
+                      rightSideComponent={
+                        isPathTeamUrl(team.url) && (
+                          <CheckCircle2 className="ml-auto fill-black text-white dark:fill-white dark:text-black" />
+                        )
+                      }
+                    />
+                  </Link>
+                </DropdownMenuItem>
+              ))}
+            </div>
+          </>
+        ) : (
+          <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+            <Link
+              href="/settings/teams?action=add-team"
+              className="flex items-center justify-between"
+            >
+              Create team
+              <Plus className="ml-2 h-4 w-4" />
+            </Link>
+          </DropdownMenuItem>
+        )}
+
+        <DropdownMenuSeparator />
+
+        {isUserAdmin && (
+          <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+            <Link href="/admin">Admin panel</Link>
+          </DropdownMenuItem>
+        )}
+
+        <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+          <Link href="/settings/profile">User settings</Link>
+        </DropdownMenuItem>
+
+        {selectedTeam &&
+          canExecuteTeamAction('MANAGE_TEAM', selectedTeam.currentTeamMember.role) && (
+            <DropdownMenuItem className="text-muted-foreground px-4 py-2" asChild>
+              <Link href={`/t/${selectedTeam.url}/settings/`}>Team settings</Link>
+            </DropdownMenuItem>
+          )}
+
+        <DropdownMenuItem
+          className="text-destructive/90 hover:!text-destructive px-4 py-2"
+          onSelect={async () =>
+            signOut({
+              callbackUrl: '/',
+            })
+          }
+        >
+          Sign Out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

apps/web/src/components/(dashboard)/layout/mobile-navigation.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+
+import { signOut } from 'next-auth/react';
+
+import LogoImage from '@documenso/assets/logo.png';
+import { getRootHref } from '@documenso/lib/utils/params';
+import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
+import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
+
+export type MobileNavigationProps = {
+  isMenuOpen: boolean;
+  onMenuOpenChange?: (_value: boolean) => void;
+};
+
+export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigationProps) => {
+  const params = useParams();
+
+  const handleMenuItemClick = () => {
+    onMenuOpenChange?.(false);
+  };
+
+  const rootHref = getRootHref(params, { returnEmptyRootString: true });
+
+  const menuNavigationLinks = [
+    {
+      href: `${rootHref}/documents`,
+      text: 'Documents',
+    },
+    {
+      href: `${rootHref}/templates`,
+      text: 'Templates',
+    },
+    {
+      href: '/settings/teams',
+      text: 'Teams',
+    },
+    {
+      href: '/settings/profile',
+      text: 'Settings',
+    },
+  ];
+
+  return (
+    <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
+      <SheetContent className="flex w-full max-w-[400px] flex-col">
+        <Link href="/" onClick={handleMenuItemClick}>
+          <Image
+            src={LogoImage}
+            alt="Documenso Logo"
+            className="dark:invert"
+            width={170}
+            height={25}
+          />
+        </Link>
+
+        <div className="mt-8 flex w-full flex-col items-start gap-y-4">
+          {menuNavigationLinks.map(({ href, text }) => (
+            <Link
+              key={href}
+              className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+              href={href}
+              onClick={() => handleMenuItemClick()}
+            >
+              {text}
+            </Link>
+          ))}
+
+          <button
+            className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+            onClick={async () =>
+              signOut({
+                callbackUrl: '/',
+              })
+            }
+          >
+            Sign Out
+          </button>
+        </div>
+
+        <div className="mt-auto flex w-full flex-col space-y-4 self-end">
+          <div className="w-fit">
+            <ThemeSwitcher />
+          </div>
+
+          <p className="text-muted-foreground text-sm">
+            © {new Date().getFullYear()} Documenso, Inc. All rights reserved.
+          </p>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};

apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx

@@ -1,169 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-
-import {
-  CreditCard,
-  FileSpreadsheet,
-  Lock,
-  LogOut,
-  User as LucideUser,
-  Monitor,
-  Moon,
-  Palette,
-  Sun,
-  UserCog,
-} from 'lucide-react';
-import { signOut } from 'next-auth/react';
-import { useTheme } from 'next-themes';
-import { LuGithub } from 'react-icons/lu';
-
-import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
-import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
-import { recipientInitials } from '@documenso/lib/utils/recipient-formatter';
-import type { User } from '@documenso/prisma/client';
-import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from '@documenso/ui/primitives/dropdown-menu';
-
-export type ProfileDropdownProps = {
-  user: User;
-};
-
-export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
-  const { getFlag } = useFeatureFlags();
-  const { theme, setTheme } = useTheme();
-  const isUserAdmin = isAdmin(user);
-
-  const isBillingEnabled = getFlag('app_billing');
-
-  const avatarFallback = user.name
-    ? recipientInitials(user.name)
-    : user.email.slice(0, 1).toUpperCase();
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          title="Profile Dropdown"
-          className="relative h-10 w-10 rounded-full"
-        >
-          <Avatar className="h-10 w-10">
-            <AvatarFallback>{avatarFallback}</AvatarFallback>
-          </Avatar>
-        </Button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent className="z-[60] w-56" align="end" forceMount>
-        <DropdownMenuLabel>Account</DropdownMenuLabel>
-
-        {isUserAdmin && (
-          <>
-            <DropdownMenuItem asChild>
-              <Link href="/admin" className="cursor-pointer">
-                <UserCog className="mr-2 h-4 w-4" />
-                Admin
-              </Link>
-            </DropdownMenuItem>
-
-            <DropdownMenuSeparator />
-          </>
-        )}
-
-        <DropdownMenuItem asChild>
-          <Link href="/settings/profile" className="cursor-pointer">
-            <LucideUser className="mr-2 h-4 w-4" />
-            Profile
-          </Link>
-        </DropdownMenuItem>
-
-        <DropdownMenuItem asChild>
-          <Link href="/settings/security" className="cursor-pointer">
-            <Lock className="mr-2 h-4 w-4" />
-            Security
-          </Link>
-        </DropdownMenuItem>
-
-        {isBillingEnabled && (
-          <DropdownMenuItem asChild>
-            <Link href="/settings/billing" className="cursor-pointer">
-              <CreditCard className="mr-2 h-4 w-4" />
-              Billing
-            </Link>
-          </DropdownMenuItem>
-        )}
-
-        <DropdownMenuSeparator />
-        <DropdownMenuItem asChild>
-          <Link href="/templates" className="cursor-pointer">
-            <FileSpreadsheet className="mr-2 h-4 w-4" />
-            Templates
-          </Link>
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-
-        <DropdownMenuSub>
-          <DropdownMenuSubTrigger>
-            <Palette className="mr-2 h-4 w-4" />
-            Themes
-          </DropdownMenuSubTrigger>
-          <DropdownMenuPortal>
-            <DropdownMenuSubContent className="z-[60]">
-              <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
-                <DropdownMenuRadioItem value="light">
-                  <Sun className="mr-2 h-4 w-4" /> Light
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="dark">
-                  <Moon className="mr-2 h-4 w-4" />
-                  Dark
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="system">
-                  <Monitor className="mr-2 h-4 w-4" />
-                  System
-                </DropdownMenuRadioItem>
-              </DropdownMenuRadioGroup>
-            </DropdownMenuSubContent>
-          </DropdownMenuPortal>
-        </DropdownMenuSub>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem asChild>
-          <Link
-            href="https://github.com/documenso/documenso"
-            className="cursor-pointer"
-            target="_blank"
-          >
-            <LuGithub className="mr-2 h-4 w-4" />
-            Star on Github
-          </Link>
-        </DropdownMenuItem>
-
-        <DropdownMenuSeparator />
-
-        <DropdownMenuItem
-          onSelect={() =>
-            void signOut({
-              callbackUrl: '/',
-            })
-          }
-        >
-          <LogOut className="mr-2 h-4 w-4" />
-          Sign Out
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};

apps/web/src/components/(dashboard)/period-selector/period-selector.tsx

@@ -21,9 +21,9 @@ export const PeriodSelector = () => {
   const router = useRouter();
 
   const period = useMemo(() => {
-    const p = searchParams?.get('period') ?? '';
+    const p = searchParams?.get('period') ?? 'all';
 
-    return isPeriodSelectorValue(p) ? p : '';
+    return isPeriodSelectorValue(p) ? p : 'all';
   }, [searchParams]);
 
   const onPeriodChange = (newPeriod: string) => {
@@ -35,7 +35,7 @@ export const PeriodSelector = () => {
 
     params.set('period', newPeriod);
 
-    if (newPeriod === '') {
+    if (newPeriod === '' || newPeriod === 'all') {
       params.delete('period');
     }
 
@@ -49,7 +49,7 @@ export const PeriodSelector = () => {
       </SelectTrigger>
 
       <SelectContent position="popper">
-        <SelectItem value="">All Time</SelectItem>
+        <SelectItem value="all">All Time</SelectItem>
         <SelectItem value="7d">Last 7 days</SelectItem>
         <SelectItem value="14d">Last 14 days</SelectItem>
         <SelectItem value="30d">Last 30 days</SelectItem>

apps/web/src/components/(dashboard)/period-selector/types.ts

@@ -1,4 +1,4 @@
-export type PeriodSelectorValue = '' | '7d' | '14d' | '30d';
+import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
 
 export const isPeriodSelectorValue = (value: unknown): value is PeriodSelectorValue => {
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions

apps/web/src/components/(dashboard)/settings/layout/activity-back.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export default function ActivityPageBackButton() {
+  const router = useRouter();
+  return (
+    <div>
+      <Button
+        className="flex-shrink-0"
+        variant="secondary"
+        onClick={() => {
+          void router.back();
+        }}
+      >
+        Back
+      </Button>
+    </div>
+  );
+}

apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { CreditCard, Lock, User } from 'lucide-react';
+import { Braces, CreditCard, Lock, User, Users, Webhook } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -35,6 +35,19 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
+      <Link href="/settings/teams">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/teams') && 'bg-secondary',
+          )}
+        >
+          <Users className="mr-2 h-5 w-5" />
+          Teams
+        </Button>
+      </Link>
+
       <Link href="/settings/security">
         <Button
           variant="ghost"
@@ -48,6 +61,32 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
+      <Link href="/settings/tokens">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/tokens') && 'bg-secondary',
+          )}
+        >
+          <Braces className="mr-2 h-5 w-5" />
+          API Tokens
+        </Button>
+      </Link>
+
+      <Link href="/settings/webhooks">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/webhooks') && 'bg-secondary',
+          )}
+        >
+          <Webhook className="mr-2 h-5 w-5" />
+          Webhooks
+        </Button>
+      </Link>
+
       {isBillingEnabled && (
         <Link href="/settings/billing">
           <Button

apps/web/src/components/(dashboard)/settings/layout/header.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export type SettingsHeaderProps = {
+  title: string;
+  subtitle: string;
+  children?: React.ReactNode;
+  className?: string;
+};
+
+export const SettingsHeader = ({ children, title, subtitle, className }: SettingsHeaderProps) => {
+  return (
+    <>
+      <div className={cn('flex flex-row items-center justify-between', className)}>
+        <div>
+          <h3 className="text-lg font-medium">{title}</h3>
+
+          <p className="text-muted-foreground text-sm md:mt-2">{subtitle}</p>
+        </div>
+
+        {children}
+      </div>
+
+      <hr className="my-4" />
+    </>
+  );
+};

apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { CreditCard, Lock, User } from 'lucide-react';
+import { Braces, CreditCard, Lock, User, Users, Webhook } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -38,6 +38,19 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
+      <Link href="/settings/teams">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/teams') && 'bg-secondary',
+          )}
+        >
+          <Users className="mr-2 h-5 w-5" />
+          Teams
+        </Button>
+      </Link>
+
       <Link href="/settings/security">
         <Button
           variant="ghost"
@@ -51,6 +64,32 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
+      <Link href="/settings/tokens">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/tokens') && 'bg-secondary',
+          )}
+        >
+          <Braces className="mr-2 h-5 w-5" />
+          API Tokens
+        </Button>
+      </Link>
+
+      <Link href="/settings/webhooks">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/webhooks') && 'bg-secondary',
+          )}
+        >
+          <Webhook className="mr-2 h-5 w-5" />
+          Webhooks
+        </Button>
+      </Link>
+
       {isBillingEnabled && (
         <Link href="/settings/billing">
           <Button

apps/web/src/components/(dashboard)/settings/token/contants.ts

@@ -0,0 +1,7 @@
+export const EXPIRATION_DATES = {
+  ONE_WEEK: '7 days',
+  ONE_MONTH: '1 month',
+  THREE_MONTHS: '3 months',
+  SIX_MONTHS: '6 months',
+  ONE_YEAR: '12 months',
+} as const;

apps/web/src/components/(dashboard)/settings/token/delete-token-dialog.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { ApiToken } 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 {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DeleteTokenDialogProps = {
+  teamId?: number;
+  token: Pick<ApiToken, 'id' | 'name'>;
+  onDelete?: () => void;
+  children?: React.ReactNode;
+};
+
+export default function DeleteTokenDialog({
+  teamId,
+  token,
+  onDelete,
+  children,
+}: DeleteTokenDialogProps) {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const deleteMessage = `delete ${token.name}`;
+
+  const ZDeleteTokenDialogSchema = z.object({
+    tokenName: z.literal(deleteMessage, {
+      errorMap: () => ({ message: `You must enter '${deleteMessage}' to proceed` }),
+    }),
+  });
+
+  type TDeleteTokenByIdMutationSchema = z.infer<typeof ZDeleteTokenDialogSchema>;
+
+  const { mutateAsync: deleteTokenMutation } = trpc.apiToken.deleteTokenById.useMutation({
+    onSuccess() {
+      onDelete?.();
+    },
+  });
+
+  const form = useForm<TDeleteTokenByIdMutationSchema>({
+    resolver: zodResolver(ZDeleteTokenDialogSchema),
+    values: {
+      tokenName: '',
+    },
+  });
+
+  const onSubmit = async () => {
+    try {
+      await deleteTokenMutation({
+        id: token.id,
+        teamId,
+      });
+
+      toast({
+        title: 'Token deleted',
+        description: 'The token was deleted successfully.',
+        duration: 5000,
+      });
+
+      setIsOpen(false);
+
+      router.refresh();
+    } catch (error) {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        duration: 5000,
+        description:
+          'We encountered an unknown error while attempting to delete this token. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      form.reset();
+    }
+  }, [isOpen, form]);
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(value) => !form.formState.isSubmitting && setIsOpen(value)}
+    >
+      <DialogTrigger asChild={true}>
+        {children ?? (
+          <Button className="mr-4" variant="destructive">
+            Delete
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Are you sure you want to delete this token?</DialogTitle>
+
+          <DialogDescription>
+            Please note that this action is irreversible. Once confirmed, your token will be
+            permanently deleted.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="tokenName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      Confirm by typing:{' '}
+                      <span className="font-sm text-destructive font-semibold">
+                        {deleteMessage}
+                      </span>
+                    </FormLabel>
+
+                    <FormControl>
+                      <Input className="bg-background" type="text" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <div className="flex w-full flex-nowrap gap-4">
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    className="flex-1"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    Cancel
+                  </Button>
+
+                  <Button
+                    type="submit"
+                    variant="destructive"
+                    className="flex-1"
+                    disabled={!form.formState.isValid}
+                    loading={form.formState.isSubmitting}
+                  >
+                    I'm sure! Delete it
+                  </Button>
+                </div>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/(dashboard)/settings/webhooks/create-webhook-dialog.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateWebhookMutationSchema } from '@documenso/trpc/server/webhook-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+import { TriggerMultiSelectCombobox } from './trigger-multiselect-combobox';
+
+const ZCreateWebhookFormSchema = ZCreateWebhookMutationSchema.omit({ teamId: true });
+
+type TCreateWebhookFormSchema = z.infer<typeof ZCreateWebhookFormSchema>;
+
+export type CreateWebhookDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const CreateWebhookDialog = ({ trigger, ...props }: CreateWebhookDialogProps) => {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const team = useOptionalCurrentTeam();
+
+  const [open, setOpen] = useState(false);
+
+  const form = useForm<TCreateWebhookFormSchema>({
+    resolver: zodResolver(ZCreateWebhookFormSchema),
+    values: {
+      webhookUrl: '',
+      eventTriggers: [],
+      secret: '',
+      enabled: true,
+    },
+  });
+
+  const { mutateAsync: createWebhook } = trpc.webhook.createWebhook.useMutation();
+
+  const onSubmit = async ({
+    enabled,
+    eventTriggers,
+    secret,
+    webhookUrl,
+  }: TCreateWebhookFormSchema) => {
+    try {
+      await createWebhook({
+        enabled,
+        eventTriggers,
+        secret,
+        webhookUrl,
+        teamId: team?.id,
+      });
+
+      setOpen(false);
+
+      toast({
+        title: 'Webhook created',
+        description: 'The webhook was successfully created.',
+      });
+
+      form.reset();
+
+      router.refresh();
+    } catch (err) {
+      toast({
+        title: 'Error',
+        description: 'An error occurred while creating the webhook. Please try again.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+      {...props}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? <Button className="flex-shrink-0">Create Webhook</Button>}
+      </DialogTrigger>
+
+      <DialogContent className="max-w-lg" position="center">
+        <DialogHeader>
+          <DialogTitle>Create webhook</DialogTitle>
+          <DialogDescription>On this page, you can create a new webhook.</DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <div className="flex flex-col-reverse gap-4 md:flex-row">
+                <FormField
+                  control={form.control}
+                  name="webhookUrl"
+                  render={({ field }) => (
+                    <FormItem className="flex-1">
+                      <FormLabel required>Webhook URL</FormLabel>
+                      <FormControl>
+                        <Input className="bg-background" {...field} />
+                      </FormControl>
+
+                      <FormDescription>
+                        The URL for Documenso to send webhook events to.
+                      </FormDescription>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="enabled"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Enabled</FormLabel>
+
+                      <div>
+                        <FormControl>
+                          <Switch
+                            className="bg-background"
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                      </div>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <FormField
+                control={form.control}
+                name="eventTriggers"
+                render={({ field: { onChange, value } }) => (
+                  <FormItem className="flex flex-col gap-2">
+                    <FormLabel required>Triggers</FormLabel>
+                    <FormControl>
+                      <TriggerMultiSelectCombobox
+                        listValues={value}
+                        onChange={(values: string[]) => {
+                          onChange(values);
+                        }}
+                      />
+                    </FormControl>
+
+                    <FormDescription>
+                      The events that will trigger a webhook to be sent to your URL.
+                    </FormDescription>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="secret"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Secret</FormLabel>
+                    <FormControl>
+                      <PasswordInput
+                        className="bg-background"
+                        {...field}
+                        value={field.value ?? ''}
+                      />
+                    </FormControl>
+
+                    <FormDescription>
+                      A secret that will be sent to your URL so you can verify that the request has
+                      been sent by Documenso.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <div className="flex w-full flex-nowrap gap-4">
+                  <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                    Cancel
+                  </Button>
+                  <Button type="submit" loading={form.formState.isSubmitting}>
+                    Create
+                  </Button>
+                </div>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/web/src/components/(dashboard)/settings/webhooks/delete-webhook-dialog.tsx

@@ -0,0 +1,172 @@
+'use effect';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { Webhook } 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 {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+export type DeleteWebhookDialogProps = {
+  webhook: Pick<Webhook, 'id' | 'webhookUrl'>;
+  onDelete?: () => void;
+  children: React.ReactNode;
+};
+
+export const DeleteWebhookDialog = ({ webhook, children }: DeleteWebhookDialogProps) => {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const team = useOptionalCurrentTeam();
+
+  const [open, setOpen] = useState(false);
+
+  const deleteMessage = `delete ${webhook.webhookUrl}`;
+
+  const ZDeleteWebhookFormSchema = z.object({
+    webhookUrl: z.literal(deleteMessage, {
+      errorMap: () => ({ message: `You must enter '${deleteMessage}' to proceed` }),
+    }),
+  });
+
+  type TDeleteWebhookFormSchema = z.infer<typeof ZDeleteWebhookFormSchema>;
+
+  const { mutateAsync: deleteWebhook } = trpc.webhook.deleteWebhook.useMutation();
+
+  const form = useForm<TDeleteWebhookFormSchema>({
+    resolver: zodResolver(ZDeleteWebhookFormSchema),
+    values: {
+      webhookUrl: '',
+    },
+  });
+
+  const onSubmit = async () => {
+    try {
+      await deleteWebhook({ id: webhook.id, teamId: team?.id });
+
+      toast({
+        title: 'Webhook deleted',
+        duration: 5000,
+        description: 'The webhook has been successfully deleted.',
+      });
+
+      setOpen(false);
+
+      router.refresh();
+    } catch (error) {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        duration: 5000,
+        description:
+          'We encountered an unknown error while attempting to delete it. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {children ?? (
+          <Button className="mr-4" variant="destructive">
+            Delete
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete Webhook</DialogTitle>
+
+          <DialogDescription>
+            Please note that this action is irreversible. Once confirmed, your webhook will be
+            permanently deleted.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="webhookUrl"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      Confirm by typing:{' '}
+                      <span className="font-sm text-destructive font-semibold">
+                        {deleteMessage}
+                      </span>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" type="text" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <div className="flex w-full flex-nowrap gap-4">
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    className="flex-1"
+                    onClick={() => setOpen(false)}
+                  >
+                    Cancel
+                  </Button>
+
+                  <Button
+                    type="submit"
+                    variant="destructive"
+                    className="flex-1"
+                    disabled={!form.formState.isValid}
+                    loading={form.formState.isSubmitting}
+                  >
+                    I'm sure! Delete it
+                  </Button>
+                </div>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/web/src/components/(dashboard)/settings/webhooks/trigger-multiselect-combobox.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+
+import { WebhookTriggerEvents } from '@prisma/client/';
+import { Check, ChevronsUpDown } from 'lucide-react';
+
+import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from '@documenso/ui/primitives/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+
+import { truncateTitle } from '~/helpers/truncate-title';
+
+type TriggerMultiSelectComboboxProps = {
+  listValues: string[];
+  onChange: (_values: string[]) => void;
+};
+
+export const TriggerMultiSelectCombobox = ({
+  listValues,
+  onChange,
+}: TriggerMultiSelectComboboxProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+  const triggerEvents = Object.values(WebhookTriggerEvents);
+
+  useEffect(() => {
+    setSelectedValues(listValues);
+  }, [listValues]);
+
+  const allEvents = [...new Set([...triggerEvents, ...selectedValues])];
+
+  const handleSelect = (currentValue: string) => {
+    let newSelectedValues;
+
+    if (selectedValues.includes(currentValue)) {
+      newSelectedValues = selectedValues.filter((value) => value !== currentValue);
+    } else {
+      newSelectedValues = [...selectedValues, currentValue];
+    }
+
+    setSelectedValues(newSelectedValues);
+    onChange(newSelectedValues);
+    setIsOpen(false);
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={isOpen}
+          className="w-[200px] justify-between"
+        >
+          {selectedValues.length > 0 ? selectedValues.length + ' selected...' : 'Select values...'}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="z-9999 w-full max-w-[280px] p-0">
+        <Command>
+          <CommandInput
+            placeholder={truncateTitle(
+              selectedValues.map((v) => toFriendlyWebhookEventName(v)).join(', '),
+              15,
+            )}
+          />
+          <CommandEmpty>No value found.</CommandEmpty>
+          <CommandGroup>
+            {allEvents.map((value: string, i: number) => (
+              <CommandItem key={i} onSelect={() => handleSelect(value)}>
+                <Check
+                  className={cn(
+                    'mr-2 h-4 w-4',
+                    selectedValues.includes(value) ? 'opacity-100' : 'opacity-0',
+                  )}
+                />
+                {toFriendlyWebhookEventName(value)}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};

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

@@ -0,0 +1,188 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Plus } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateTeamEmailVerificationMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type AddTeamEmailDialogProps = {
+  teamId: number;
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZCreateTeamEmailFormSchema = ZCreateTeamEmailVerificationMutationSchema.pick({
+  name: true,
+  email: true,
+});
+
+type TCreateTeamEmailFormSchema = z.infer<typeof ZCreateTeamEmailFormSchema>;
+
+export const AddTeamEmailDialog = ({ teamId, trigger, ...props }: AddTeamEmailDialogProps) => {
+  const router = useRouter();
+
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const form = useForm<TCreateTeamEmailFormSchema>({
+    resolver: zodResolver(ZCreateTeamEmailFormSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+    },
+  });
+
+  const { mutateAsync: createTeamEmailVerification, isLoading } =
+    trpc.team.createTeamEmailVerification.useMutation();
+
+  const onFormSubmit = async ({ name, email }: TCreateTeamEmailFormSchema) => {
+    try {
+      await createTeamEmailVerification({
+        teamId,
+        name,
+        email,
+      });
+
+      toast({
+        title: 'Success',
+        description: 'We have sent a confirmation email for verification.',
+        duration: 5000,
+      });
+
+      router.refresh();
+
+      setOpen(false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        form.setError('email', {
+          type: 'manual',
+          message: 'This email is already being used by another team.',
+        });
+
+        return;
+      }
+
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to add this email. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button variant="outline" loading={isLoading} className="bg-background">
+            <Plus className="-ml-1 mr-1 h-5 w-5" />
+            Add email
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Add team email</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            A verification email will be sent to the provided email.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>Name</FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" placeholder="eg. Legal" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-background"
+                        placeholder="example@example.com"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  Add
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,178 @@
+import { useMemo, useState } from 'react';
+
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Loader, TagIcon } from 'lucide-react';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type CreateTeamCheckoutDialogProps = {
+  pendingTeamId: number | null;
+  onClose: () => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const MotionCard = motion(Card);
+
+export const CreateTeamCheckoutDialog = ({
+  pendingTeamId,
+  onClose,
+  ...props
+}: CreateTeamCheckoutDialogProps) => {
+  const { toast } = useToast();
+
+  const [interval, setInterval] = useState<'monthly' | 'yearly'>('monthly');
+
+  const { data, isLoading } = trpc.team.getTeamPrices.useQuery();
+
+  const { mutateAsync: createCheckout, isLoading: isCreatingCheckout } =
+    trpc.team.createTeamPendingCheckout.useMutation({
+      onSuccess: (checkoutUrl) => {
+        window.open(checkoutUrl, '_blank');
+        onClose();
+      },
+      onError: () =>
+        toast({
+          title: 'Something went wrong',
+          description:
+            'We were unable to create a checkout session. Please try again, or contact support',
+          variant: 'destructive',
+        }),
+    });
+
+  const selectedPrice = useMemo(() => {
+    if (!data) {
+      return null;
+    }
+
+    return data[interval];
+  }, [data, interval]);
+
+  const handleOnOpenChange = (open: boolean) => {
+    if (pendingTeamId === null) {
+      return;
+    }
+
+    if (!open) {
+      onClose();
+    }
+  };
+
+  if (pendingTeamId === null) {
+    return null;
+  }
+
+  return (
+    <Dialog {...props} open={pendingTeamId !== null} onOpenChange={handleOnOpenChange}>
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Team checkout</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            Payment is required to finalise the creation of your team.
+          </DialogDescription>
+        </DialogHeader>
+
+        {(isLoading || !data) && (
+          <div className="flex h-20 items-center justify-center text-sm">
+            {isLoading ? (
+              <Loader className="text-documenso h-6 w-6 animate-spin" />
+            ) : (
+              <p>Something went wrong</p>
+            )}
+          </div>
+        )}
+
+        {data && selectedPrice && !isLoading && (
+          <div>
+            <Tabs
+              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+              onValueChange={(value) => setInterval(value as 'monthly' | 'yearly')}
+              value={interval}
+              className="mb-4"
+            >
+              <TabsList className="w-full">
+                {[data.monthly, data.yearly].map((price) => (
+                  <TabsTrigger key={price.priceId} className="w-full" value={price.interval}>
+                    {price.friendlyInterval}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+
+            <AnimatePresence mode="wait">
+              <MotionCard
+                key={selectedPrice.priceId}
+                initial={{ opacity: 0, y: 15 }}
+                animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
+                exit={{ opacity: 0, transition: { duration: 0.15 } }}
+              >
+                <CardContent className="flex h-full flex-col p-6">
+                  {selectedPrice.interval === 'monthly' ? (
+                    <div className="text-muted-foreground text-lg font-medium">
+                      $50 USD <span className="text-xs">per month</span>
+                    </div>
+                  ) : (
+                    <div className="text-muted-foreground flex items-center justify-between text-lg font-medium">
+                      <span>
+                        $480 USD <span className="text-xs">per year</span>
+                      </span>
+                      <div className="bg-primary text-primary-foreground ml-2 inline-flex flex-row items-center justify-center rounded px-2 py-1 text-xs">
+                        <TagIcon className="mr-1 h-4 w-4" />
+                        20% off
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="text-muted-foreground mt-1.5 text-sm">
+                    <p>This price includes minimum 5 seats.</p>
+
+                    <p className="mt-1">
+                      Adding and removing seats will adjust your invoice accordingly.
+                    </p>
+                  </div>
+                </CardContent>
+              </MotionCard>
+            </AnimatePresence>
+
+            <DialogFooter className="mt-4">
+              <Button
+                type="button"
+                variant="secondary"
+                disabled={isCreatingCheckout}
+                onClick={() => onClose()}
+              >
+                Cancel
+              </Button>
+
+              <Button
+                type="submit"
+                disabled={selectedPrice.interval === 'yearly'}
+                loading={isCreatingCheckout}
+                onClick={async () =>
+                  createCheckout({
+                    interval: selectedPrice.interval,
+                    pendingTeamId,
+                  })
+                }
+              >
+                {selectedPrice.interval === 'monthly' ? 'Checkout' : 'Coming soon'}
+              </Button>
+            </DialogFooter>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,223 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateTeamMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type CreateTeamDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZCreateTeamFormSchema = ZCreateTeamMutationSchema.pick({
+  teamName: true,
+  teamUrl: true,
+});
+
+type TCreateTeamFormSchema = z.infer<typeof ZCreateTeamFormSchema>;
+
+export const CreateTeamDialog = ({ trigger, ...props }: CreateTeamDialogProps) => {
+  const { toast } = useToast();
+
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const [open, setOpen] = useState(false);
+
+  const actionSearchParam = searchParams?.get('action');
+
+  const form = useForm({
+    resolver: zodResolver(ZCreateTeamFormSchema),
+    defaultValues: {
+      teamName: '',
+      teamUrl: '',
+    },
+  });
+
+  const { mutateAsync: createTeam } = trpc.team.createTeam.useMutation();
+
+  const onFormSubmit = async ({ teamName, teamUrl }: TCreateTeamFormSchema) => {
+    try {
+      const response = await createTeam({
+        teamName,
+        teamUrl,
+      });
+
+      setOpen(false);
+
+      if (response.paymentRequired) {
+        router.push(`/settings/teams?tab=pending&checkout=${response.pendingTeamId}`);
+        return;
+      }
+
+      toast({
+        title: 'Success',
+        description: 'Your team has been created.',
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        form.setError('teamUrl', {
+          type: 'manual',
+          message: 'This URL is already in use.',
+        });
+
+        return;
+      }
+
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to create a team. Please try again later.',
+      });
+    }
+  };
+
+  const mapTextToUrl = (text: string) => {
+    return text.toLowerCase().replace(/\s+/g, '-');
+  };
+
+  useEffect(() => {
+    if (actionSearchParam === 'add-team') {
+      setOpen(true);
+      updateSearchParams({ action: null });
+    }
+  }, [actionSearchParam, open, setOpen, updateSearchParams]);
+
+  useEffect(() => {
+    form.reset();
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button className="flex-shrink-0" variant="secondary">
+            Create team
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Create team</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            Create a team to collaborate with your team members.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="teamName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>Team Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-background"
+                        {...field}
+                        onChange={(event) => {
+                          const oldGeneratedUrl = mapTextToUrl(field.value);
+                          const newGeneratedUrl = mapTextToUrl(event.target.value);
+
+                          const urlField = form.getValues('teamUrl');
+                          if (urlField === oldGeneratedUrl) {
+                            form.setValue('teamUrl', newGeneratedUrl);
+                          }
+
+                          field.onChange(event);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="teamUrl"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>Team URL</FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} />
+                    </FormControl>
+                    {!form.formState.errors.teamUrl && (
+                      <span className="text-foreground/50 text-xs font-normal">
+                        {field.value
+                          ? `${WEBAPP_BASE_URL}/t/${field.value}`
+                          : 'A unique URL to identify your team'}
+                      </span>
+                    )}
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button
+                  type="submit"
+                  data-testid="dialog-create-team-button"
+                  loading={form.formState.isSubmitting}
+                >
+                  Create Team
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,160 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError } from '@documenso/lib/errors/app-error';
+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 {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import type { Toast } from '@documenso/ui/primitives/use-toast';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DeleteTeamDialogProps = {
+  teamId: number;
+  teamName: string;
+  trigger?: React.ReactNode;
+};
+
+export const DeleteTeamDialog = ({ trigger, teamId, teamName }: DeleteTeamDialogProps) => {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const deleteMessage = `delete ${teamName}`;
+
+  const ZDeleteTeamFormSchema = z.object({
+    teamName: z.literal(deleteMessage, {
+      errorMap: () => ({ message: `You must enter '${deleteMessage}' to proceed` }),
+    }),
+  });
+
+  const form = useForm({
+    resolver: zodResolver(ZDeleteTeamFormSchema),
+    defaultValues: {
+      teamName: '',
+    },
+  });
+
+  const { mutateAsync: deleteTeam } = trpc.team.deleteTeam.useMutation();
+
+  const onFormSubmit = async () => {
+    try {
+      await deleteTeam({ teamId });
+
+      toast({
+        title: 'Success',
+        description: 'Your team has been successfully deleted.',
+        duration: 5000,
+      });
+
+      setOpen(false);
+
+      router.push('/settings/teams');
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      let toastError: Toast = {
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        duration: 10000,
+        description:
+          'We encountered an unknown error while attempting to delete this team. Please try again later.',
+      };
+
+      if (error.code === 'resource_missing') {
+        toastError = {
+          title: 'Unable to delete team',
+          variant: 'destructive',
+          duration: 15000,
+          description:
+            'Something went wrong while updating the team billing subscription, please contact support.',
+        };
+      }
+
+      toast(toastError);
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? <Button variant="destructive">Delete team</Button>}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Delete team</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            Are you sure? This is irreversable.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="teamName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      Confirm by typing <span className="text-destructive">{deleteMessage}</span>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button type="submit" variant="destructive" loading={form.formState.isSubmitting}>
+                  Delete
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,107 @@
+'use client';
+
+import { useState } from 'react';
+
+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 DeleteTeamMemberDialogProps = {
+  teamId: number;
+  teamName: string;
+  teamMemberId: number;
+  teamMemberName: string;
+  teamMemberEmail: string;
+  trigger?: React.ReactNode;
+};
+
+export const DeleteTeamMemberDialog = ({
+  trigger,
+  teamId,
+  teamName,
+  teamMemberId,
+  teamMemberName,
+  teamMemberEmail,
+}: DeleteTeamMemberDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const { mutateAsync: deleteTeamMembers, isLoading: isDeletingTeamMember } =
+    trpc.team.deleteTeamMembers.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'You have successfully removed this user from the team.',
+          duration: 5000,
+        });
+
+        setOpen(false);
+      },
+      onError: () => {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          duration: 10000,
+          description:
+            'We encountered an unknown error while attempting to remove this user. Please try again later.',
+        });
+      },
+    });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isDeletingTeamMember && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? <Button variant="secondary">Delete team member</Button>}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Are you sure?</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            You are about to remove the following user from{' '}
+            <span className="font-semibold">{teamName}</span>.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="neutral" padding="tight">
+          <AvatarWithText
+            avatarClass="h-12 w-12"
+            avatarFallback={teamMemberName.slice(0, 1).toUpperCase()}
+            primaryText={<span className="font-semibold">{teamMemberName}</span>}
+            secondaryText={teamMemberEmail}
+          />
+        </Alert>
+
+        <fieldset disabled={isDeletingTeamMember}>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isDeletingTeamMember}
+              onClick={async () => deleteTeamMembers({ teamId, teamMemberIds: [teamMemberId] })}
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,244 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Mail, PlusCircle, Trash } from 'lucide-react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { TeamMemberRole } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateTeamMemberInvitesMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type InviteTeamMembersDialogProps = {
+  currentUserTeamRole: TeamMemberRole;
+  teamId: number;
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZInviteTeamMembersFormSchema = z
+  .object({
+    invitations: ZCreateTeamMemberInvitesMutationSchema.shape.invitations,
+  })
+  .refine(
+    (schema) => {
+      const emails = schema.invitations.map((invitation) => invitation.email.toLowerCase());
+
+      return new Set(emails).size === emails.length;
+    },
+    // Dirty hack to handle errors when .root is populated for an array type
+    { message: 'Members must have unique emails', path: ['members__root'] },
+  );
+
+type TInviteTeamMembersFormSchema = z.infer<typeof ZInviteTeamMembersFormSchema>;
+
+export const InviteTeamMembersDialog = ({
+  currentUserTeamRole,
+  teamId,
+  trigger,
+  ...props
+}: InviteTeamMembersDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const form = useForm<TInviteTeamMembersFormSchema>({
+    resolver: zodResolver(ZInviteTeamMembersFormSchema),
+    defaultValues: {
+      invitations: [
+        {
+          email: '',
+          role: TeamMemberRole.MEMBER,
+        },
+      ],
+    },
+  });
+
+  const {
+    append: appendTeamMemberInvite,
+    fields: teamMemberInvites,
+    remove: removeTeamMemberInvite,
+  } = useFieldArray({
+    control: form.control,
+    name: 'invitations',
+  });
+
+  const { mutateAsync: createTeamMemberInvites } = trpc.team.createTeamMemberInvites.useMutation();
+
+  const onAddTeamMemberInvite = () => {
+    appendTeamMemberInvite({
+      email: '',
+      role: TeamMemberRole.MEMBER,
+    });
+  };
+
+  const onFormSubmit = async ({ invitations }: TInviteTeamMembersFormSchema) => {
+    try {
+      await createTeamMemberInvites({
+        teamId,
+        invitations,
+      });
+
+      toast({
+        title: 'Success',
+        description: 'Team invitations have been sent.',
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to invite team members. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? <Button variant="secondary">Invite member</Button>}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Invite team members</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            An email containing an invitation will be sent to each member.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              {teamMemberInvites.map((teamMemberInvite, index) => (
+                <div className="flex w-full flex-row space-x-4" key={teamMemberInvite.id}>
+                  <FormField
+                    control={form.control}
+                    name={`invitations.${index}.email`}
+                    render={({ field }) => (
+                      <FormItem className="w-full">
+                        {index === 0 && <FormLabel required>Email address</FormLabel>}
+                        <FormControl>
+                          <Input className="bg-background" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name={`invitations.${index}.role`}
+                    render={({ field }) => (
+                      <FormItem className="w-full">
+                        {index === 0 && <FormLabel required>Role</FormLabel>}
+                        <FormControl>
+                          <Select {...field} onValueChange={field.onChange}>
+                            <SelectTrigger className="text-muted-foreground max-w-[200px]">
+                              <SelectValue />
+                            </SelectTrigger>
+
+                            <SelectContent position="popper">
+                              {TEAM_MEMBER_ROLE_HIERARCHY[currentUserTeamRole].map((role) => (
+                                <SelectItem key={role} value={role}>
+                                  {TEAM_MEMBER_ROLE_MAP[role] ?? role}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <button
+                    type="button"
+                    className={cn(
+                      'justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
+                      index === 0 ? 'mt-8' : 'mt-0',
+                    )}
+                    disabled={teamMemberInvites.length === 1}
+                    onClick={() => removeTeamMemberInvite(index)}
+                  >
+                    <Trash className="h-5 w-5" />
+                  </button>
+                </div>
+              ))}
+
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                className="w-fit"
+                onClick={() => onAddTeamMemberInvite()}
+              >
+                <PlusCircle className="mr-2 h-4 w-4" />
+                Add more
+              </Button>
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  {!form.formState.isSubmitting && <Mail className="mr-2 h-4 w-4" />}
+                  Invite
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,98 @@
+'use client';
+
+import { useState } from 'react';
+
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import type { TeamMemberRole } 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 LeaveTeamDialogProps = {
+  teamId: number;
+  teamName: string;
+  role: TeamMemberRole;
+  trigger?: React.ReactNode;
+};
+
+export const LeaveTeamDialog = ({ trigger, teamId, teamName, role }: LeaveTeamDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const { mutateAsync: leaveTeam, isLoading: isLeavingTeam } = trpc.team.leaveTeam.useMutation({
+    onSuccess: () => {
+      toast({
+        title: 'Success',
+        description: 'You have successfully left this team.',
+        duration: 5000,
+      });
+
+      setOpen(false);
+    },
+    onError: () => {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        duration: 10000,
+        description:
+          'We encountered an unknown error while attempting to leave this team. Please try again later.',
+      });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLeavingTeam && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? <Button variant="destructive">Leave team</Button>}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Are you sure?</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            You are about to leave the following team.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="neutral" padding="tight">
+          <AvatarWithText
+            avatarClass="h-12 w-12"
+            avatarFallback={teamName.slice(0, 1).toUpperCase()}
+            primaryText={teamName}
+            secondaryText={TEAM_MEMBER_ROLE_MAP[role]}
+          />
+        </Alert>
+
+        <fieldset disabled={isLeavingTeam}>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isLeavingTeam}
+              onClick={async () => leaveTeam({ teamId })}
+            >
+              Leave
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,293 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TransferTeamDialogProps = {
+  teamId: number;
+  teamName: string;
+  ownerUserId: number;
+  trigger?: React.ReactNode;
+};
+
+export const TransferTeamDialog = ({
+  trigger,
+  teamId,
+  teamName,
+  ownerUserId,
+}: TransferTeamDialogProps) => {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const { mutateAsync: requestTeamOwnershipTransfer } =
+    trpc.team.requestTeamOwnershipTransfer.useMutation();
+
+  const {
+    data,
+    refetch: refetchTeamMembers,
+    isLoading: loadingTeamMembers,
+    isLoadingError: loadingTeamMembersError,
+  } = trpc.team.getTeamMembers.useQuery({
+    teamId,
+  });
+
+  const confirmTransferMessage = `transfer ${teamName}`;
+
+  const ZTransferTeamFormSchema = z.object({
+    teamName: z.literal(confirmTransferMessage, {
+      errorMap: () => ({ message: `You must enter '${confirmTransferMessage}' to proceed` }),
+    }),
+    newOwnerUserId: z.string(),
+    clearPaymentMethods: z.boolean(),
+  });
+
+  const form = useForm<z.infer<typeof ZTransferTeamFormSchema>>({
+    resolver: zodResolver(ZTransferTeamFormSchema),
+    defaultValues: {
+      teamName: '',
+      clearPaymentMethods: false,
+    },
+  });
+
+  const onFormSubmit = async ({
+    newOwnerUserId,
+    clearPaymentMethods,
+  }: z.infer<typeof ZTransferTeamFormSchema>) => {
+    try {
+      await requestTeamOwnershipTransfer({
+        teamId,
+        newOwnerUserId: Number.parseInt(newOwnerUserId),
+        clearPaymentMethods,
+      });
+
+      router.refresh();
+
+      toast({
+        title: 'Success',
+        description: 'An email requesting the transfer of this team has been sent.',
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch (err) {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        duration: 10000,
+        description:
+          'We encountered an unknown error while attempting to request a transfer of this team. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  useEffect(() => {
+    if (open && loadingTeamMembersError) {
+      void refetchTeamMembers();
+    }
+  }, [open, loadingTeamMembersError, refetchTeamMembers]);
+
+  const teamMembers = data
+    ? data.filter((teamMember) => teamMember.userId !== ownerUserId)
+    : undefined;
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="outline" className="bg-background">
+            Transfer team
+          </Button>
+        )}
+      </DialogTrigger>
+
+      {teamMembers && teamMembers.length > 0 ? (
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>Transfer team</DialogTitle>
+
+            <DialogDescription className="mt-4">
+              Transfer ownership of this team to a selected team member.
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onFormSubmit)}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="newOwnerUserId"
+                  render={({ field }) => (
+                    <FormItem className="w-full">
+                      <FormLabel required>New team owner</FormLabel>
+                      <FormControl>
+                        <Select {...field} onValueChange={field.onChange}>
+                          <SelectTrigger className="text-muted-foreground">
+                            <SelectValue />
+                          </SelectTrigger>
+
+                          <SelectContent position="popper">
+                            {teamMembers.map((teamMember) => (
+                              <SelectItem
+                                key={teamMember.userId}
+                                value={teamMember.userId.toString()}
+                              >
+                                {teamMember.user.name} ({teamMember.user.email})
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="teamName"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        Confirm by typing{' '}
+                        <span className="text-destructive">{confirmTransferMessage}</span>
+                      </FormLabel>
+                      <FormControl>
+                        <Input className="bg-background" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* Temporary removed.  */}
+                {/* {IS_BILLING_ENABLED && (
+                  <FormField
+                    control={form.control}
+                    name="clearPaymentMethods"
+                    render={({ field }) => (
+                      <FormItem>
+                        <div className="flex flex-row items-center">
+                          <Checkbox
+                            id="clearPaymentMethods"
+                            className="h-5 w-5 rounded-full"
+                            checkClassName="dark:text-white text-primary"
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+
+                          <label
+                            className="text-muted-foreground ml-2 text-sm"
+                            htmlFor="clearPaymentMethods"
+                          >
+                            Clear current payment methods
+                          </label>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                )} */}
+
+                <Alert variant="neutral">
+                  <AlertDescription>
+                    <ul className="list-outside list-disc space-y-2 pl-4">
+                      {IS_BILLING_ENABLED() && (
+                        // Temporary removed.
+                        // <li>
+                        //   {form.getValues('clearPaymentMethods')
+                        //     ? 'You will not be billed for any upcoming invoices'
+                        //     : 'We will continue to bill current payment methods if required'}
+                        // </li>
+
+                        <li>
+                          Any payment methods attached to this team will remain attached to this
+                          team. Please contact us if you need to update this information.
+                        </li>
+                      )}
+                      <li>
+                        The selected team member will receive an email which they must accept before
+                        the team is transferred
+                      </li>
+                    </ul>
+                  </AlertDescription>
+                </Alert>
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                    Cancel
+                  </Button>
+
+                  <Button type="submit" variant="destructive" loading={form.formState.isSubmitting}>
+                    Request transfer
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      ) : (
+        <DialogContent
+          position="center"
+          className="text-muted-foreground flex items-center justify-center py-16 text-sm"
+        >
+          {loadingTeamMembers ? (
+            <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+          ) : (
+            <p className="text-center text-sm">
+              {loadingTeamMembersError
+                ? 'An error occurred while loading team members. Please try again later.'
+                : 'You must have at least one other team member to transfer ownership.'}
+            </p>
+          )}
+        </DialogContent>
+      )}
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,165 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+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 {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type UpdateTeamEmailDialogProps = {
+  teamEmail: TeamEmail;
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZUpdateTeamEmailFormSchema = z.object({
+  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+});
+
+type TUpdateTeamEmailFormSchema = z.infer<typeof ZUpdateTeamEmailFormSchema>;
+
+export const UpdateTeamEmailDialog = ({
+  teamEmail,
+  trigger,
+  ...props
+}: UpdateTeamEmailDialogProps) => {
+  const router = useRouter();
+
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const form = useForm<TUpdateTeamEmailFormSchema>({
+    resolver: zodResolver(ZUpdateTeamEmailFormSchema),
+    defaultValues: {
+      name: teamEmail.name,
+    },
+  });
+
+  const { mutateAsync: updateTeamEmail } = trpc.team.updateTeamEmail.useMutation();
+
+  const onFormSubmit = async ({ name }: TUpdateTeamEmailFormSchema) => {
+    try {
+      await updateTeamEmail({
+        teamId: teamEmail.teamId,
+        data: {
+          name,
+        },
+      });
+
+      toast({
+        title: 'Success',
+        description: 'Team email was updated.',
+        duration: 5000,
+      });
+
+      router.refresh();
+
+      setOpen(false);
+    } catch (err) {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting update the team email. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? (
+          <Button variant="outline" className="bg-background">
+            Update team email
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Update team email</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            To change the email you must remove and add a new email address.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>Name</FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" placeholder="eg. Legal" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormItem>
+                <FormLabel required>Email</FormLabel>
+                <FormControl>
+                  <Input className="bg-background" value={teamEmail.email} disabled={true} />
+                </FormControl>
+              </FormItem>
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  Update
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,185 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { isTeamRoleWithinUserHierarchy } from '@documenso/lib/utils/teams';
+import { TeamMemberRole } 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 {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type UpdateTeamMemberDialogProps = {
+  currentUserTeamRole: TeamMemberRole;
+  trigger?: React.ReactNode;
+  teamId: number;
+  teamMemberId: number;
+  teamMemberName: string;
+  teamMemberRole: TeamMemberRole;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZUpdateTeamMemberFormSchema = z.object({
+  role: z.nativeEnum(TeamMemberRole),
+});
+
+type ZUpdateTeamMemberSchema = z.infer<typeof ZUpdateTeamMemberFormSchema>;
+
+export const UpdateTeamMemberDialog = ({
+  currentUserTeamRole,
+  trigger,
+  teamId,
+  teamMemberId,
+  teamMemberName,
+  teamMemberRole,
+  ...props
+}: UpdateTeamMemberDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { toast } = useToast();
+
+  const form = useForm<ZUpdateTeamMemberSchema>({
+    resolver: zodResolver(ZUpdateTeamMemberFormSchema),
+    defaultValues: {
+      role: teamMemberRole,
+    },
+  });
+
+  const { mutateAsync: updateTeamMember } = trpc.team.updateTeamMember.useMutation();
+
+  const onFormSubmit = async ({ role }: ZUpdateTeamMemberSchema) => {
+    try {
+      await updateTeamMember({
+        teamId,
+        teamMemberId,
+        data: {
+          role,
+        },
+      });
+
+      toast({
+        title: 'Success',
+        description: `You have updated ${teamMemberName}.`,
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to update this team member. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    form.reset();
+
+    if (!isTeamRoleWithinUserHierarchy(currentUserTeamRole, teamMemberRole)) {
+      setOpen(false);
+
+      toast({
+        title: 'You cannot modify a team member who has a higher role than you.',
+        variant: 'destructive',
+      });
+    }
+  }, [open, currentUserTeamRole, teamMemberRole, form, toast]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? <Button variant="secondary">Update team member</Button>}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Update team member</DialogTitle>
+
+          <DialogDescription className="mt-4">
+            You are currently updating <span className="font-bold">{teamMemberName}.</span>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+              <FormField
+                control={form.control}
+                name="role"
+                render={({ field }) => (
+                  <FormItem className="w-full">
+                    <FormLabel required>Role</FormLabel>
+                    <FormControl>
+                      <Select {...field} onValueChange={field.onChange}>
+                        <SelectTrigger className="text-muted-foreground">
+                          <SelectValue />
+                        </SelectTrigger>
+
+                        <SelectContent className="w-full" position="popper">
+                          {TEAM_MEMBER_ROLE_HIERARCHY[currentUserTeamRole].map((role) => (
+                            <SelectItem key={role} value={role}>
+                              {TEAM_MEMBER_ROLE_MAP[role] ?? role}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter className="mt-4">
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  Cancel
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  Update
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/web/src/components/(teams)/forms/update-team-form.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZUpdateTeamMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type UpdateTeamDialogProps = {
+  teamId: number;
+  teamName: string;
+  teamUrl: string;
+};
+
+const ZUpdateTeamFormSchema = ZUpdateTeamMutationSchema.shape.data.pick({
+  name: true,
+  url: true,
+});
+
+type TUpdateTeamFormSchema = z.infer<typeof ZUpdateTeamFormSchema>;
+
+export const UpdateTeamForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const form = useForm({
+    resolver: zodResolver(ZUpdateTeamFormSchema),
+    defaultValues: {
+      name: teamName,
+      url: teamUrl,
+    },
+  });
+
+  const { mutateAsync: updateTeam } = trpc.team.updateTeam.useMutation();
+
+  const onFormSubmit = async ({ name, url }: TUpdateTeamFormSchema) => {
+    try {
+      await updateTeam({
+        data: {
+          name,
+          url,
+        },
+        teamId,
+      });
+
+      toast({
+        title: 'Success',
+        description: 'Your team has been successfully updated.',
+        duration: 5000,
+      });
+
+      form.reset({
+        name,
+        url,
+      });
+
+      if (url !== teamUrl) {
+        router.push(`${WEBAPP_BASE_URL}/t/${url}/settings`);
+      }
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        form.setError('url', {
+          type: 'manual',
+          message: 'This URL is already in use.',
+        });
+
+        return;
+      }
+
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to update your team. Please try again later.',
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel required>Team Name</FormLabel>
+                <FormControl>
+                  <Input className="bg-background" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="url"
+            render={({ field }) => (
+              <FormItem className="mt-4">
+                <FormLabel required>Team URL</FormLabel>
+                <FormControl>
+                  <Input className="bg-background" {...field} />
+                </FormControl>
+                {!form.formState.errors.url && (
+                  <span className="text-foreground/50 text-xs font-normal">
+                    {field.value
+                      ? `${WEBAPP_BASE_URL}/t/${field.value}`
+                      : 'A unique URL to identify your team'}
+                  </span>
+                )}
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex flex-row justify-end space-x-4">
+            <AnimatePresence>
+              {form.formState.isDirty && (
+                <motion.div
+                  initial={{
+                    opacity: 0,
+                  }}
+                  animate={{
+                    opacity: 1,
+                  }}
+                  exit={{
+                    opacity: 0,
+                  }}
+                >
+                  <Button type="button" variant="secondary" onClick={() => form.reset()}>
+                    Reset
+                  </Button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            <Button
+              type="submit"
+              className="transition-opacity"
+              disabled={!form.formState.isDirty}
+              loading={form.formState.isSubmitting}
+            >
+              Update team
+            </Button>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/web/src/components/(teams)/settings/layout/desktop-nav.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+
+import Link from 'next/link';
+import { useParams, usePathname } from 'next/navigation';
+
+import { Braces, CreditCard, Settings, Users, Webhook } from 'lucide-react';
+
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
+
+export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
+  const pathname = usePathname();
+  const params = useParams();
+
+  const teamUrl = typeof params?.teamUrl === 'string' ? params?.teamUrl : '';
+
+  const settingsPath = `/t/${teamUrl}/settings`;
+  const membersPath = `/t/${teamUrl}/settings/members`;
+  const tokensPath = `/t/${teamUrl}/settings/tokens`;
+  const webhooksPath = `/t/${teamUrl}/settings/webhooks`;
+  const billingPath = `/t/${teamUrl}/settings/billing`;
+
+  return (
+    <div className={cn('flex flex-col gap-y-2', className)} {...props}>
+      <Link href={settingsPath}>
+        <Button
+          variant="ghost"
+          className={cn('w-full justify-start', pathname === settingsPath && 'bg-secondary')}
+        >
+          <Settings className="mr-2 h-5 w-5" />
+          General
+        </Button>
+      </Link>
+
+      <Link href={membersPath}>
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith(membersPath) && 'bg-secondary',
+          )}
+        >
+          <Users className="mr-2 h-5 w-5" />
+          Members
+        </Button>
+      </Link>
+
+      <Link href={tokensPath}>
+        <Button
+          variant="ghost"
+          className={cn('w-full justify-start', pathname?.startsWith(tokensPath) && 'bg-secondary')}
+        >
+          <Braces className="mr-2 h-5 w-5" />
+          API Tokens
+        </Button>
+      </Link>
+
+      <Link href={webhooksPath}>
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith(webhooksPath) && 'bg-secondary',
+          )}
+        >
+          <Webhook className="mr-2 h-5 w-5" />
+          Webhooks
+        </Button>
+      </Link>
+
+      {IS_BILLING_ENABLED() && (
+        <Link href={billingPath}>
+          <Button
+            variant="ghost"
+            className={cn(
+              'w-full justify-start',
+              pathname?.startsWith(billingPath) && 'bg-secondary',
+            )}
+          >
+            <CreditCard className="mr-2 h-5 w-5" />
+            Billing
+          </Button>
+        </Link>
+      )}
+    </div>
+  );
+};

apps/web/src/components/(teams)/settings/layout/mobile-nav.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+
+import Link from 'next/link';
+import { useParams, usePathname } from 'next/navigation';
+
+import { Braces, CreditCard, Key, User, Webhook } from 'lucide-react';
+
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type MobileNavProps = HTMLAttributes<HTMLDivElement>;
+
+export const MobileNav = ({ className, ...props }: MobileNavProps) => {
+  const pathname = usePathname();
+  const params = useParams();
+
+  const teamUrl = typeof params?.teamUrl === 'string' ? params?.teamUrl : '';
+
+  const settingsPath = `/t/${teamUrl}/settings`;
+  const membersPath = `/t/${teamUrl}/settings/members`;
+  const tokensPath = `/t/${teamUrl}/settings/tokens`;
+  const webhooksPath = `/t/${teamUrl}/settings/webhooks`;
+  const billingPath = `/t/${teamUrl}/settings/billing`;
+
+  return (
+    <div
+      className={cn('flex flex-wrap items-center justify-start gap-x-2 gap-y-4', className)}
+      {...props}
+    >
+      <Link href={settingsPath}>
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith(settingsPath) &&
+              pathname.split('/').length === 4 &&
+              'bg-secondary',
+          )}
+        >
+          <User className="mr-2 h-5 w-5" />
+          General
+        </Button>
+      </Link>
+
+      <Link href={membersPath}>
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith(membersPath) && 'bg-secondary',
+          )}
+        >
+          <Key className="mr-2 h-5 w-5" />
+          Members
+        </Button>
+      </Link>
+
+      <Link href={tokensPath}>
+        <Button
+          variant="ghost"
+          className={cn('w-full justify-start', pathname?.startsWith(tokensPath) && 'bg-secondary')}
+        >
+          <Braces className="mr-2 h-5 w-5" />
+          API Tokens
+        </Button>
+      </Link>
+
+      <Link href={webhooksPath}>
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith(webhooksPath) && 'bg-secondary',
+          )}
+        >
+          <Webhook className="mr-2 h-5 w-5" />
+          Webhooks
+        </Button>
+      </Link>
+
+      {IS_BILLING_ENABLED() && (
+        <Link href={billingPath}>
+          <Button
+            variant="ghost"
+            className={cn(
+              'w-full justify-start',
+              pathname?.startsWith(billingPath) && 'bg-secondary',
+            )}
+          >
+            <CreditCard className="mr-2 h-5 w-5" />
+            Billing
+          </Button>
+        </Link>
+      )}
+    </div>
+  );
+};

apps/web/src/components/(teams)/tables/current-user-teams-data-table.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+import { LeaveTeamDialog } from '../dialogs/leave-team-dialog';
+
+export const CurrentUserTeamsDataTable = () => {
+  const searchParams = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const { data, isLoading, isInitialLoading, isLoadingError } = trpc.team.findTeams.useQuery(
+    {
+      term: parsedSearchParams.query,
+      page: parsedSearchParams.page,
+      perPage: parsedSearchParams.perPage,
+    },
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Team',
+          accessorKey: 'name',
+          cell: ({ row }) => (
+            <Link href={`/t/${row.original.url}`} scroll={false}>
+              <AvatarWithText
+                avatarClass="h-12 w-12"
+                avatarFallback={row.original.name.slice(0, 1).toUpperCase()}
+                primaryText={
+                  <span className="text-foreground/80 font-semibold">{row.original.name}</span>
+                }
+                secondaryText={`${WEBAPP_BASE_URL}/t/${row.original.url}`}
+              />
+            </Link>
+          ),
+        },
+        {
+          header: 'Role',
+          accessorKey: 'role',
+          cell: ({ row }) =>
+            row.original.ownerUserId === row.original.currentTeamMember.userId
+              ? 'Owner'
+              : TEAM_MEMBER_ROLE_MAP[row.original.currentTeamMember.role],
+        },
+        {
+          header: 'Member Since',
+          accessorKey: 'createdAt',
+          cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+        },
+        {
+          id: 'actions',
+          cell: ({ row }) => (
+            <div className="flex justify-end space-x-2">
+              {canExecuteTeamAction('MANAGE_TEAM', row.original.currentTeamMember.role) && (
+                <Button variant="outline" asChild>
+                  <Link href={`/t/${row.original.url}/settings`}>Manage</Link>
+                </Button>
+              )}
+
+              <LeaveTeamDialog
+                teamId={row.original.id}
+                teamName={row.original.name}
+                role={row.original.currentTeamMember.role}
+                trigger={
+                  <Button
+                    variant="destructive"
+                    disabled={row.original.ownerUserId === row.original.currentTeamMember.userId}
+                    onSelect={(e) => e.preventDefault()}
+                  >
+                    Leave
+                  </Button>
+                }
+              />
+            </div>
+          ),
+        },
+      ]}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      onPaginationChange={onPaginationChange}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading && isInitialLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell className="w-1/3 py-4 pr-4">
+              <div className="flex w-full flex-row items-center">
+                <Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
+
+                <div className="ml-2 flex flex-grow flex-col">
+                  <Skeleton className="h-4 w-1/2 max-w-[8rem]" />
+                  <Skeleton className="mt-1 h-4 w-2/3 max-w-[12rem]" />
+                </div>
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <div className="flex flex-row justify-end space-x-2">
+                <Skeleton className="h-10 w-20 rounded" />
+                <Skeleton className="h-10 w-16 rounded" />
+              </div>
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+    </DataTable>
+  );
+};

apps/web/src/components/(teams)/tables/pending-user-teams-data-table-actions.tsx

@@ -0,0 +1,53 @@
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type PendingUserTeamsDataTableActionsProps = {
+  className?: string;
+  pendingTeamId: number;
+  onPayClick: (pendingTeamId: number) => void;
+};
+
+export const PendingUserTeamsDataTableActions = ({
+  className,
+  pendingTeamId,
+  onPayClick,
+}: PendingUserTeamsDataTableActionsProps) => {
+  const { toast } = useToast();
+
+  const { mutateAsync: deleteTeamPending, isLoading: deletingTeam } =
+    trpc.team.deleteTeamPending.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Pending team deleted.',
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          description:
+            'We encountered an unknown error while attempting to delete the pending team. Please try again later.',
+          duration: 10000,
+          variant: 'destructive',
+        });
+      },
+    });
+
+  return (
+    <fieldset disabled={deletingTeam} className={cn('flex justify-end space-x-2', className)}>
+      <Button variant="outline" onClick={() => onPayClick(pendingTeamId)}>
+        Pay
+      </Button>
+
+      <Button
+        variant="destructive"
+        loading={deletingTeam}
+        onClick={async () => deleteTeamPending({ pendingTeamId: pendingTeamId })}
+      >
+        Remove
+      </Button>
+    </fieldset>
+  );
+};

apps/web/src/components/(teams)/tables/pending-user-teams-data-table.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useSearchParams } from 'next/navigation';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { trpc } from '@documenso/trpc/react';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+import { CreateTeamCheckoutDialog } from '../dialogs/create-team-checkout-dialog';
+import { PendingUserTeamsDataTableActions } from './pending-user-teams-data-table-actions';
+
+export const PendingUserTeamsDataTable = () => {
+  const searchParams = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const [checkoutPendingTeamId, setCheckoutPendingTeamId] = useState<number | null>(null);
+
+  const { data, isLoading, isInitialLoading, isLoadingError } = trpc.team.findTeamsPending.useQuery(
+    {
+      term: parsedSearchParams.query,
+      page: parsedSearchParams.page,
+      perPage: parsedSearchParams.perPage,
+    },
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  useEffect(() => {
+    const searchParamCheckout = searchParams?.get('checkout');
+
+    if (searchParamCheckout && !isNaN(parseInt(searchParamCheckout))) {
+      setCheckoutPendingTeamId(parseInt(searchParamCheckout));
+      updateSearchParams({ checkout: null });
+    }
+  }, [searchParams, updateSearchParams]);
+
+  return (
+    <>
+      <DataTable
+        columns={[
+          {
+            header: 'Team',
+            accessorKey: 'name',
+            cell: ({ row }) => (
+              <AvatarWithText
+                avatarClass="h-12 w-12"
+                avatarFallback={row.original.name.slice(0, 1).toUpperCase()}
+                primaryText={
+                  <span className="text-foreground/80 font-semibold">{row.original.name}</span>
+                }
+                secondaryText={`${WEBAPP_BASE_URL}/t/${row.original.url}`}
+              />
+            ),
+          },
+          {
+            header: 'Created on',
+            accessorKey: 'createdAt',
+            cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+          },
+          {
+            id: 'actions',
+            cell: ({ row }) => (
+              <PendingUserTeamsDataTableActions
+                className="justify-end"
+                pendingTeamId={row.original.id}
+                onPayClick={setCheckoutPendingTeamId}
+              />
+            ),
+          },
+        ]}
+        data={results.data}
+        perPage={results.perPage}
+        currentPage={results.currentPage}
+        totalPages={results.totalPages}
+        onPaginationChange={onPaginationChange}
+        error={{
+          enable: isLoadingError,
+        }}
+        skeleton={{
+          enable: isLoading && isInitialLoading,
+          rows: 3,
+          component: (
+            <>
+              <TableCell className="w-1/3 py-4 pr-4">
+                <div className="flex w-full flex-row items-center">
+                  <Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
+
+                  <div className="ml-2 flex flex-grow flex-col">
+                    <Skeleton className="h-4 w-1/2 max-w-[8rem]" />
+                    <Skeleton className="mt-1 h-4 w-2/3 max-w-[12rem]" />
+                  </div>
+                </div>
+              </TableCell>
+              <TableCell>
+                <Skeleton className="h-4 w-12 rounded-full" />
+              </TableCell>
+              <TableCell>
+                <div className="flex flex-row justify-end space-x-2">
+                  <Skeleton className="h-10 w-16 rounded" />
+                  <Skeleton className="h-10 w-20 rounded" />
+                </div>
+              </TableCell>
+            </>
+          ),
+        }}
+      >
+        {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+      </DataTable>
+
+      <CreateTeamCheckoutDialog
+        pendingTeamId={checkoutPendingTeamId}
+        onClose={() => setCheckoutPendingTeamId(null)}
+      />
+    </>
+  );
+};

apps/web/src/components/(teams)/tables/team-billing-invoices-data-table.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import Link from 'next/link';
+
+import { File } from 'lucide-react';
+import { DateTime } from 'luxon';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+export type TeamBillingInvoicesDataTableProps = {
+  teamId: number;
+};
+
+export const TeamBillingInvoicesDataTable = ({ teamId }: TeamBillingInvoicesDataTableProps) => {
+  const { data, isLoading, isInitialLoading, isLoadingError } = trpc.team.findTeamInvoices.useQuery(
+    {
+      teamId,
+    },
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  const formatCurrency = (currency: string, amount: number) => {
+    const formatter = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency,
+    });
+
+    return formatter.format(amount);
+  };
+
+  const results = {
+    data: data?.data ?? [],
+    perPage: 100,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Invoice',
+          accessorKey: 'created',
+          cell: ({ row }) => (
+            <div className="flex max-w-xs items-center gap-2">
+              <File className="h-6 w-6" />
+
+              <div className="flex flex-col text-sm">
+                <span className="text-foreground/80 font-semibold">
+                  {DateTime.fromSeconds(row.original.created).toFormat('MMMM yyyy')}
+                </span>
+                <span className="text-muted-foreground">
+                  {row.original.quantity} {row.original.quantity > 1 ? 'Seats' : 'Seat'}
+                </span>
+              </div>
+            </div>
+          ),
+        },
+        {
+          header: 'Status',
+          accessorKey: 'status',
+          cell: ({ row }) => {
+            const { status, paid } = row.original;
+
+            if (!status) {
+              return paid ? 'Paid' : 'Unpaid';
+            }
+
+            return status.charAt(0).toUpperCase() + status.slice(1);
+          },
+        },
+        {
+          header: 'Amount',
+          accessorKey: 'total',
+          cell: ({ row }) => formatCurrency(row.original.currency, row.original.total / 100),
+        },
+        {
+          id: 'actions',
+          cell: ({ row }) => (
+            <div className="flex justify-end space-x-2">
+              <Button
+                variant="outline"
+                asChild
+                disabled={typeof row.original.hostedInvoicePdf !== 'string'}
+              >
+                <Link href={row.original.hostedInvoicePdf ?? ''} target="_blank">
+                  View
+                </Link>
+              </Button>
+
+              <Button
+                variant="outline"
+                asChild
+                disabled={typeof row.original.hostedInvoicePdf !== 'string'}
+              >
+                <Link href={row.original.invoicePdf ?? ''} target="_blank">
+                  Download
+                </Link>
+              </Button>
+            </div>
+          ),
+        },
+      ]}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading && isInitialLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell className="w-1/3 py-4 pr-4">
+              <div className="flex w-full flex-row items-center">
+                <Skeleton className="h-7 w-7 flex-shrink-0 rounded" />
+
+                <div className="ml-2 flex flex-grow flex-col">
+                  <Skeleton className="h-4 w-1/2 max-w-[8rem]" />
+                  <Skeleton className="mt-1 h-4 w-2/3 max-w-[12rem]" />
+                </div>
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <div className="flex flex-row justify-end space-x-2">
+                <Skeleton className="h-10 w-20 rounded" />
+                <Skeleton className="h-10 w-16 rounded" />
+              </div>
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+    </DataTable>
+  );
+};

apps/web/src/components/(teams)/tables/team-member-invites-data-table.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+import { History, MoreHorizontal, Trash2 } from 'lucide-react';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { trpc } from '@documenso/trpc/react';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+export type TeamMemberInvitesDataTableProps = {
+  teamId: number;
+};
+
+export const TeamMemberInvitesDataTable = ({ teamId }: TeamMemberInvitesDataTableProps) => {
+  const searchParams = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const { toast } = useToast();
+
+  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const { data, isLoading, isInitialLoading, isLoadingError } =
+    trpc.team.findTeamMemberInvites.useQuery(
+      {
+        teamId,
+        term: parsedSearchParams.query,
+        page: parsedSearchParams.page,
+        perPage: parsedSearchParams.perPage,
+      },
+      {
+        keepPreviousData: true,
+      },
+    );
+
+  const { mutateAsync: resendTeamMemberInvitation } =
+    trpc.team.resendTeamMemberInvitation.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Invitation has been resent',
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          description: 'Unable to resend invitation. Please try again.',
+          variant: 'destructive',
+        });
+      },
+    });
+
+  const { mutateAsync: deleteTeamMemberInvitations } =
+    trpc.team.deleteTeamMemberInvitations.useMutation({
+      onSuccess: () => {
+        toast({
+          title: 'Success',
+          description: 'Invitation has been deleted',
+        });
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          description: 'Unable to delete invitation. Please try again.',
+          variant: 'destructive',
+        });
+      },
+    });
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Team Member',
+          cell: ({ row }) => {
+            return (
+              <AvatarWithText
+                avatarClass="h-12 w-12"
+                avatarFallback={row.original.email.slice(0, 1).toUpperCase()}
+                primaryText={
+                  <span className="text-foreground/80 font-semibold">{row.original.email}</span>
+                }
+              />
+            );
+          },
+        },
+        {
+          header: 'Role',
+          accessorKey: 'role',
+          cell: ({ row }) => TEAM_MEMBER_ROLE_MAP[row.original.role] ?? row.original.role,
+        },
+        {
+          header: 'Invited At',
+          accessorKey: 'createdAt',
+          cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+        },
+        {
+          header: 'Actions',
+          cell: ({ row }) => (
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent className="w-52" align="start" forceMount>
+                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+
+                <DropdownMenuItem
+                  onClick={async () =>
+                    resendTeamMemberInvitation({
+                      teamId,
+                      invitationId: row.original.id,
+                    })
+                  }
+                >
+                  <History className="mr-2 h-4 w-4" />
+                  Resend
+                </DropdownMenuItem>
+
+                <DropdownMenuItem
+                  onClick={async () =>
+                    deleteTeamMemberInvitations({
+                      teamId,
+                      invitationIds: [row.original.id],
+                    })
+                  }
+                >
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Remove
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ),
+        },
+      ]}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      onPaginationChange={onPaginationChange}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading && isInitialLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell className="w-1/2 py-4 pr-4">
+              <div className="flex w-full flex-row items-center">
+                <Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
+                <Skeleton className="ml-2 h-4 w-1/3 max-w-[10rem]" />
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-6 rounded-full" />
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+    </DataTable>
+  );
+};

apps/web/src/components/(teams)/tables/team-members-data-table.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+import { Edit, MoreHorizontal, Trash2 } from 'lucide-react';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { isTeamRoleWithinUserHierarchy } from '@documenso/lib/utils/teams';
+import type { TeamMemberRole } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+import { DeleteTeamMemberDialog } from '../dialogs/delete-team-member-dialog';
+import { UpdateTeamMemberDialog } from '../dialogs/update-team-member-dialog';
+
+export type TeamMembersDataTableProps = {
+  currentUserTeamRole: TeamMemberRole;
+  teamOwnerUserId: number;
+  teamId: number;
+  teamName: string;
+};
+
+export const TeamMembersDataTable = ({
+  currentUserTeamRole,
+  teamOwnerUserId,
+  teamId,
+  teamName,
+}: TeamMembersDataTableProps) => {
+  const searchParams = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+    Object.fromEntries(searchParams ?? []),
+  );
+
+  const { data, isLoading, isInitialLoading, isLoadingError } = trpc.team.findTeamMembers.useQuery(
+    {
+      teamId,
+      term: parsedSearchParams.query,
+      page: parsedSearchParams.page,
+      perPage: parsedSearchParams.perPage,
+    },
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  const onPaginationChange = (page: number, perPage: number) => {
+    updateSearchParams({
+      page,
+      perPage,
+    });
+  };
+
+  const results = data ?? {
+    data: [],
+    perPage: 10,
+    currentPage: 1,
+    totalPages: 1,
+  };
+
+  return (
+    <DataTable
+      columns={[
+        {
+          header: 'Team Member',
+          cell: ({ row }) => {
+            const avatarFallbackText = row.original.user.name
+              ? extractInitials(row.original.user.name)
+              : row.original.user.email.slice(0, 1).toUpperCase();
+
+            return (
+              <AvatarWithText
+                avatarClass="h-12 w-12"
+                avatarFallback={avatarFallbackText}
+                primaryText={
+                  <span className="text-foreground/80 font-semibold">{row.original.user.name}</span>
+                }
+                secondaryText={row.original.user.email}
+              />
+            );
+          },
+        },
+        {
+          header: 'Role',
+          accessorKey: 'role',
+          cell: ({ row }) =>
+            teamOwnerUserId === row.original.userId
+              ? 'Owner'
+              : TEAM_MEMBER_ROLE_MAP[row.original.role],
+        },
+        {
+          header: 'Member Since',
+          accessorKey: 'createdAt',
+          cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+        },
+        {
+          header: 'Actions',
+          cell: ({ row }) => (
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <MoreHorizontal className="text-muted-foreground h-5 w-5" />
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent className="w-52" align="start" forceMount>
+                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+
+                <UpdateTeamMemberDialog
+                  currentUserTeamRole={currentUserTeamRole}
+                  teamId={row.original.teamId}
+                  teamMemberId={row.original.id}
+                  teamMemberName={row.original.user.name ?? ''}
+                  teamMemberRole={row.original.role}
+                  trigger={
+                    <DropdownMenuItem
+                      disabled={
+                        teamOwnerUserId === row.original.userId ||
+                        !isTeamRoleWithinUserHierarchy(currentUserTeamRole, row.original.role)
+                      }
+                      onSelect={(e) => e.preventDefault()}
+                      title="Update team member role"
+                    >
+                      <Edit className="mr-2 h-4 w-4" />
+                      Update role
+                    </DropdownMenuItem>
+                  }
+                />
+
+                <DeleteTeamMemberDialog
+                  teamId={teamId}
+                  teamName={teamName}
+                  teamMemberId={row.original.id}
+                  teamMemberName={row.original.user.name ?? ''}
+                  teamMemberEmail={row.original.user.email}
+                  trigger={
+                    <DropdownMenuItem
+                      onSelect={(e) => e.preventDefault()}
+                      disabled={
+                        teamOwnerUserId === row.original.userId ||
+                        !isTeamRoleWithinUserHierarchy(currentUserTeamRole, row.original.role)
+                      }
+                      title="Remove team member"
+                    >
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      Remove
+                    </DropdownMenuItem>
+                  }
+                />
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ),
+        },
+      ]}
+      data={results.data}
+      perPage={results.perPage}
+      currentPage={results.currentPage}
+      totalPages={results.totalPages}
+      onPaginationChange={onPaginationChange}
+      error={{
+        enable: isLoadingError,
+      }}
+      skeleton={{
+        enable: isLoading && isInitialLoading,
+        rows: 3,
+        component: (
+          <>
+            <TableCell className="w-1/2 py-4 pr-4">
+              <div className="flex w-full flex-row items-center">
+                <Skeleton className="h-12 w-12 flex-shrink-0 rounded-full" />
+
+                <div className="ml-2 flex flex-grow flex-col">
+                  <Skeleton className="h-4 w-1/3 max-w-[8rem]" />
+                  <Skeleton className="mt-1 h-4 w-1/2 max-w-[12rem]" />
+                </div>
+              </div>
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-12 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-20 rounded-full" />
+            </TableCell>
+            <TableCell>
+              <Skeleton className="h-4 w-6 rounded-full" />
+            </TableCell>
+          </>
+        ),
+      }}
+    >
+      {(table) => <DataTablePagination additionalInformation="VisibleCount" table={table} />}
+    </DataTable>
+  );
+};

apps/web/src/components/(teams)/tables/teams-member-page-data-table.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import type { TeamMemberRole } from '@documenso/prisma/client';
+import { Input } from '@documenso/ui/primitives/input';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+
+import { TeamMemberInvitesDataTable } from '~/components/(teams)/tables/team-member-invites-data-table';
+import { TeamMembersDataTable } from '~/components/(teams)/tables/team-members-data-table';
+
+export type TeamsMemberPageDataTableProps = {
+  currentUserTeamRole: TeamMemberRole;
+  teamId: number;
+  teamName: string;
+  teamOwnerUserId: number;
+};
+
+export const TeamsMemberPageDataTable = ({
+  currentUserTeamRole,
+  teamId,
+  teamName,
+  teamOwnerUserId,
+}: TeamsMemberPageDataTableProps) => {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
+
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+
+  const currentTab = searchParams?.get('tab') === 'invites' ? 'invites' : 'members';
+
+  /**
+   * Handle debouncing the search query.
+   */
+  useEffect(() => {
+    if (!pathname) {
+      return;
+    }
+
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('query', debouncedSearchQuery);
+
+    if (debouncedSearchQuery === '') {
+      params.delete('query');
+    }
+
+    router.push(`${pathname}?${params.toString()}`);
+  }, [debouncedSearchQuery, pathname, router, searchParams]);
+
+  return (
+    <div>
+      <div className="my-4 flex flex-row items-center justify-between space-x-4">
+        <Input
+          defaultValue={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Search"
+        />
+
+        <Tabs value={currentTab} className="flex-shrink-0 overflow-x-auto">
+          <TabsList>
+            <TabsTrigger className="min-w-[60px]" value="members" asChild>
+              <Link href={pathname ?? '/'}>Active</Link>
+            </TabsTrigger>
+
+            <TabsTrigger className="min-w-[60px]" value="invites" asChild>
+              <Link href={`${pathname}?tab=invites`}>Pending</Link>
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      {currentTab === 'invites' ? (
+        <TeamMemberInvitesDataTable key="invites" teamId={teamId} />
+      ) : (
+        <TeamMembersDataTable
+          key="members"
+          currentUserTeamRole={currentUserTeamRole}
+          teamId={teamId}
+          teamName={teamName}
+          teamOwnerUserId={teamOwnerUserId}
+        />
+      )}
+    </div>
+  );
+};

apps/web/src/components/(teams)/tables/user-settings-teams-page-data-table.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Link from 'next/link';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
+import { trpc } from '@documenso/trpc/react';
+import { Input } from '@documenso/ui/primitives/input';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+
+import { CurrentUserTeamsDataTable } from './current-user-teams-data-table';
+import { PendingUserTeamsDataTable } from './pending-user-teams-data-table';
+
+export const UserSettingsTeamsPageDataTable = () => {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const [searchQuery, setSearchQuery] = useState(() => searchParams?.get('query') ?? '');
+
+  const debouncedSearchQuery = useDebouncedValue(searchQuery, 500);
+
+  const currentTab = searchParams?.get('tab') === 'pending' ? 'pending' : 'active';
+
+  const { data } = trpc.team.findTeamsPending.useQuery(
+    {},
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  /**
+   * Handle debouncing the search query.
+   */
+  useEffect(() => {
+    if (!pathname) {
+      return;
+    }
+
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set('query', debouncedSearchQuery);
+
+    if (debouncedSearchQuery === '') {
+      params.delete('query');
+    }
+
+    router.push(`${pathname}?${params.toString()}`);
+  }, [debouncedSearchQuery, pathname, router, searchParams]);
+
+  return (
+    <div>
+      <div className="my-4 flex flex-row items-center justify-between space-x-4">
+        <Input
+          defaultValue={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Search"
+        />
+
+        <Tabs value={currentTab} className="flex-shrink-0 overflow-x-auto">
+          <TabsList>
+            <TabsTrigger className="min-w-[60px]" value="active" asChild>
+              <Link href={pathname ?? '/'}>Active</Link>
+            </TabsTrigger>
+
+            <TabsTrigger className="min-w-[60px]" value="pending" asChild>
+              <Link href={`${pathname}?tab=pending`}>
+                Pending
+                {data && data.count > 0 && (
+                  <span className="ml-1 hidden opacity-50 md:inline-block">{data.count}</span>
+                )}
+              </Link>
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      {currentTab === 'pending' ? <PendingUserTeamsDataTable /> : <CurrentUserTeamsDataTable />}
+    </div>
+  );
+};

apps/web/src/components/(teams)/team-billing-portal-button.tsx

@@ -0,0 +1,39 @@
+'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 TeamBillingPortalButtonProps = {
+  buttonProps?: React.ComponentProps<typeof Button>;
+  teamId: number;
+};
+
+export const TeamBillingPortalButton = ({ buttonProps, teamId }: TeamBillingPortalButtonProps) => {
+  const { toast } = useToast();
+
+  const { mutateAsync: createBillingPortal, isLoading } =
+    trpc.team.createBillingPortal.useMutation();
+
+  const handleCreatePortal = async () => {
+    try {
+      const sessionUrl = await createBillingPortal({ teamId });
+
+      window.open(sessionUrl, '_blank');
+    } catch (err) {
+      toast({
+        title: 'Something went wrong',
+        description:
+          'We are unable to proceed to the billing portal at this time. Please try again, or contact support.',
+        variant: 'destructive',
+        duration: 10000,
+      });
+    }
+  };
+
+  return (
+    <Button {...buttonProps} onClick={async () => handleCreatePortal()} loading={isLoading}>
+      Manage subscription
+    </Button>
+  );
+};

apps/web/src/components/document/document-history-sheet-changes.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import React from 'react';
+
+import { Badge } from '@documenso/ui/primitives/badge';
+
+export type DocumentHistorySheetChangesProps = {
+  values: {
+    key: string | React.ReactNode;
+    value: string | React.ReactNode;
+  }[];
+};
+
+export const DocumentHistorySheetChanges = ({ values }: DocumentHistorySheetChangesProps) => {
+  return (
+    <Badge
+      className="text-muted-foreground mt-3 block w-full space-y-0.5 text-xs"
+      variant="neutral"
+    >
+      {values.map(({ key, value }, i) => (
+        <p key={typeof key === 'string' ? key : i}>
+          <span>{key}: </span>
+          <span className="font-normal">{value}</span>
+        </p>
+      ))}
+    </Badge>
+  );
+};

apps/web/src/components/document/document-history-sheet.tsx

@@ -0,0 +1,318 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { ArrowRightIcon, Loader } from 'lucide-react';
+import { match } from 'ts-pattern';
+import { UAParser } from 'ua-parser-js';
+
+import { DOCUMENT_AUDIT_LOG_EMAIL_FORMAT } from '@documenso/lib/constants/document-audit-logs';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import { formatDocumentAuditLogActionString } from '@documenso/lib/utils/document-audit-logs';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Badge } from '@documenso/ui/primitives/badge';
+import { Button } from '@documenso/ui/primitives/button';
+import { Sheet, SheetContent, SheetTrigger } from '@documenso/ui/primitives/sheet';
+
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+import { DocumentHistorySheetChanges } from './document-history-sheet-changes';
+
+export type DocumentHistorySheetProps = {
+  documentId: number;
+  userId: number;
+  isMenuOpen?: boolean;
+  onMenuOpenChange?: (_value: boolean) => void;
+  children?: React.ReactNode;
+};
+
+export const DocumentHistorySheet = ({
+  documentId,
+  userId,
+  isMenuOpen,
+  onMenuOpenChange,
+  children,
+}: DocumentHistorySheetProps) => {
+  const [isUserDetailsVisible, setIsUserDetailsVisible] = useState(false);
+
+  const {
+    data,
+    isLoading,
+    isLoadingError,
+    refetch,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = trpc.document.findDocumentAuditLogs.useInfiniteQuery(
+    {
+      documentId,
+    },
+    {
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+      keepPreviousData: true,
+    },
+  );
+
+  const documentAuditLogs = useMemo(() => (data?.pages ?? []).flatMap((page) => page.data), [data]);
+
+  const extractBrowser = (userAgent?: string | null) => {
+    if (!userAgent) {
+      return 'Unknown';
+    }
+
+    const parser = new UAParser(userAgent);
+
+    parser.setUA(userAgent);
+
+    const result = parser.getResult();
+
+    return result.browser.name;
+  };
+
+  /**
+   * Applies the following formatting for a given text:
+   * - Uppercase first lower, lowercase rest
+   * - Replace _ with spaces
+   *
+   * @param text The text to format
+   * @returns The formatted text
+   */
+  const formatGenericText = (text: string) => {
+    return (text.charAt(0).toUpperCase() + text.slice(1).toLowerCase()).replaceAll('_', ' ');
+  };
+
+  return (
+    <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
+      {children && <SheetTrigger asChild>{children}</SheetTrigger>}
+
+      <SheetContent
+        sheetClass="backdrop-blur-none"
+        className="flex w-full max-w-[500px] flex-col overflow-y-auto p-0"
+      >
+        <div className="text-foreground px-6 pt-6">
+          <h1 className="text-lg font-medium">Document history</h1>
+          <button
+            className="text-muted-foreground text-sm"
+            onClick={() => setIsUserDetailsVisible(!isUserDetailsVisible)}
+          >
+            {isUserDetailsVisible ? 'Hide' : 'Show'} additional information
+          </button>
+        </div>
+
+        {isLoading && (
+          <div className="flex h-full items-center justify-center">
+            <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+          </div>
+        )}
+
+        {isLoadingError && (
+          <div className="flex h-full flex-col items-center justify-center">
+            <p className="text-foreground/80 text-sm">Unable to load document history</p>
+            <button
+              onClick={async () => refetch()}
+              className="text-foreground/70 hover:text-muted-foreground mt-2 text-sm"
+            >
+              Click here to retry
+            </button>
+          </div>
+        )}
+
+        {data && (
+          <ul
+            className={cn('divide-y border-t', {
+              'mb-4 border-b': !hasNextPage,
+            })}
+          >
+            {documentAuditLogs.map((auditLog) => (
+              <li className="px-4 py-2.5" key={auditLog.id}>
+                <div className="flex flex-row items-center">
+                  <Avatar className="mr-2 h-9 w-9">
+                    <AvatarFallback className="text-xs text-gray-400">
+                      {(auditLog?.email ?? auditLog?.name ?? '?').slice(0, 1).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+
+                  <div>
+                    <p className="text-foreground text-xs font-bold">
+                      {formatDocumentAuditLogActionString(auditLog, userId)}
+                    </p>
+                    <p className="text-foreground/50 text-xs">
+                      <LocaleDate date={auditLog.createdAt} format="d MMM, yyyy HH:MM a" />
+                    </p>
+                  </div>
+                </div>
+
+                {match(auditLog)
+                  .with(
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_CREATED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_COMPLETED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_DELETED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_SENT },
+                    () => null,
+                  )
+                  .with(
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_CREATED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_DELETED },
+                    ({ data }) => {
+                      const values = [
+                        {
+                          key: 'Email',
+                          value: data.recipientEmail,
+                        },
+                        {
+                          key: 'Role',
+                          value: formatGenericText(data.recipientRole),
+                        },
+                      ];
+
+                      // Insert the name to the start of the array if available.
+                      if (data.recipientName) {
+                        values.unshift({
+                          key: 'Name',
+                          value: data.recipientName,
+                        });
+                      }
+
+                      return <DocumentHistorySheetChanges values={values} />;
+                    },
+                  )
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_UPDATED }, ({ data }) => {
+                    if (data.changes.length === 0) {
+                      return null;
+                    }
+
+                    return (
+                      <DocumentHistorySheetChanges
+                        values={data.changes.map(({ type, from, to }) => ({
+                          key: formatGenericText(type),
+                          value: (
+                            <span className="inline-flex flex-row items-center">
+                              <span>{type === 'ROLE' ? formatGenericText(from) : from}</span>
+                              <ArrowRightIcon className="h-4 w-4" />
+                              <span>{type === 'ROLE' ? formatGenericText(to) : to}</span>
+                            </span>
+                          ),
+                        }))}
+                      />
+                    );
+                  })
+                  .with(
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_CREATED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_DELETED },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_UPDATED },
+                    ({ data }) => (
+                      <DocumentHistorySheetChanges
+                        values={[
+                          {
+                            key: 'Field',
+                            value: formatGenericText(data.fieldType),
+                          },
+                          {
+                            key: 'Recipient',
+                            value: formatGenericText(data.fieldRecipientEmail),
+                          },
+                        ]}
+                      />
+                    ),
+                  )
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_META_UPDATED }, ({ data }) => {
+                    if (data.changes.length === 0) {
+                      return null;
+                    }
+
+                    return (
+                      <DocumentHistorySheetChanges
+                        values={data.changes.map((change) => ({
+                          key: formatGenericText(change.type),
+                          value: change.type === 'PASSWORD' ? '*********' : change.to,
+                        }))}
+                      />
+                    );
+                  })
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_TITLE_UPDATED }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Old',
+                          value: data.from,
+                        },
+                        {
+                          key: 'New',
+                          value: data.to,
+                        },
+                      ]}
+                    />
+                  ))
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_INSERTED }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Field inserted',
+                          value: formatGenericText(data.field.type),
+                        },
+                      ]}
+                    />
+                  ))
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_UNINSERTED }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Field uninserted',
+                          value: formatGenericText(data.field),
+                        },
+                      ]}
+                    />
+                  ))
+                  .with({ type: DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT }, ({ data }) => (
+                    <DocumentHistorySheetChanges
+                      values={[
+                        {
+                          key: 'Type',
+                          value: DOCUMENT_AUDIT_LOG_EMAIL_FORMAT[data.emailType].description,
+                        },
+                        {
+                          key: 'Sent to',
+                          value: data.recipientEmail,
+                        },
+                      ]}
+                    />
+                  ))
+                  .exhaustive()}
+
+                {isUserDetailsVisible && (
+                  <>
+                    <div className="mb-1 mt-2 flex flex-row space-x-2">
+                      <Badge variant="neutral" className="text-muted-foreground">
+                        IP: {auditLog.ipAddress ?? 'Unknown'}
+                      </Badge>
+
+                      <Badge variant="neutral" className="text-muted-foreground">
+                        Browser: {extractBrowser(auditLog.userAgent)}
+                      </Badge>
+                    </div>
+                  </>
+                )}
+              </li>
+            ))}
+
+            {hasNextPage && (
+              <div className="flex items-center justify-center py-4">
+                <Button
+                  variant="outline"
+                  loading={isFetchingNextPage}
+                  onClick={async () => fetchNextPage()}
+                >
+                  Show more
+                </Button>
+              </div>
+            )}
+          </ul>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+};

apps/web/src/components/formatter/document-status.tsx

@@ -13,7 +13,7 @@ type FriendlyStatus = {
   color: string;
 };
 
-const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus> = {
+export const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus> = {
   PENDING: {
     label: 'Pending',
     icon: Clock,

apps/web/src/components/formatter/locale-date.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { HTMLAttributes } from 'react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import type { DateTimeFormatOptions } from 'luxon';
 import { DateTime } from 'luxon';
@@ -10,7 +10,7 @@ import { useLocale } from '@documenso/lib/client-only/providers/locale';
 
 export type LocaleDateProps = HTMLAttributes<HTMLSpanElement> & {
   date: string | number | Date;
-  format?: DateTimeFormatOptions;
+  format?: DateTimeFormatOptions | string;
 };
 
 /**
@@ -22,13 +22,24 @@ export type LocaleDateProps = HTMLAttributes<HTMLSpanElement> & {
 export const LocaleDate = ({ className, date, format, ...props }: LocaleDateProps) => {
   const { locale } = useLocale();
 
+  const formatDateTime = useCallback(
+    (date: DateTime) => {
+      if (typeof format === 'string') {
+        return date.toFormat(format);
+      }
+
+      return date.toLocaleString(format);
+    },
+    [format],
+  );
+
   const [localeDate, setLocaleDate] = useState(() =>
-    DateTime.fromJSDate(new Date(date)).setLocale(locale).toLocaleString(format),
+    formatDateTime(DateTime.fromJSDate(new Date(date)).setLocale(locale)),
   );
 
   useEffect(() => {
-    setLocaleDate(DateTime.fromJSDate(new Date(date)).toLocaleString(format));
-  }, [date, format]);
+    setLocaleDate(formatDateTime(DateTime.fromJSDate(new Date(date))));
+  }, [date, format, formatDateTime]);
 
   return (
     <span className={className} {...props}>

apps/web/src/components/forms/2fa/authenticator-app.tsx

@@ -19,37 +19,22 @@ export const AuthenticatorApp = ({ isTwoFactorEnabled }: AuthenticatorAppProps)
 
   return (
     <>
-      <div className="mt-4 flex flex-col justify-between gap-4 rounded-lg border p-4 md:flex-row md:items-center md:gap-8">
-        <div className="flex-1">
-          <p>Authenticator app</p>
-
-          <p className="text-muted-foreground mt-2 max-w-[50ch] text-sm">
-            Create one-time passwords that serve as a secondary authentication method for confirming
-            your identity when requested during the sign-in process.
-          </p>
-        </div>
-
-        <div>
-          {isTwoFactorEnabled ? (
-            <Button variant="destructive" onClick={() => setModalState('disable')} size="sm">
-              Disable 2FA
-            </Button>
-          ) : (
-            <Button onClick={() => setModalState('enable')} size="sm">
-              Enable 2FA
-            </Button>
-          )}
-        </div>
+      <div className="flex-shrink-0">
+        {isTwoFactorEnabled ? (
+          <Button variant="destructive" onClick={() => setModalState('disable')}>
+            Disable 2FA
+          </Button>
+        ) : (
+          <Button onClick={() => setModalState('enable')}>Enable 2FA</Button>
+        )}
       </div>
 
       <EnableAuthenticatorAppDialog
-        key={isEnableDialogOpen ? 'open' : 'closed'}
         open={isEnableDialogOpen}
         onOpenChange={(open) => !open && setModalState(null)}
       />
 
       <DisableAuthenticatorAppDialog
-        key={isDisableDialogOpen ? 'open' : 'closed'}
         open={isDisableDialogOpen}
         onOpenChange={(open) => !open && setModalState(null)}
       />

apps/web/src/components/forms/2fa/disable-authenticator-app-dialog.tsx

@@ -11,6 +11,7 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
@@ -145,8 +146,8 @@ export const DisableAuthenticatorAppDialog = ({
               />
             </fieldset>
 
-            <div className="flex w-full items-center justify-between">
-              <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
                 Cancel
               </Button>
 
@@ -157,7 +158,7 @@ export const DisableAuthenticatorAppDialog = ({
               >
                 Disable 2FA
               </Button>
-            </div>
+            </DialogFooter>
           </form>
         </Form>
       </DialogContent>

apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx

@@ -1,20 +1,19 @@
 import { useMemo } from 'react';
 
-import { useRouter } from 'next/navigation';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { flushSync } from 'react-dom';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 import { renderSVG } from 'uqr';
 import { z } from 'zod';
 
+import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
@@ -53,14 +52,16 @@ export const EnableAuthenticatorAppDialog = ({
   open,
   onOpenChange,
 }: EnableAuthenticatorAppDialogProps) => {
-  const router = useRouter();
   const { toast } = useToast();
 
   const { mutateAsync: setupTwoFactorAuthentication, data: setupTwoFactorAuthenticationData } =
     trpc.twoFactorAuthentication.setup.useMutation();
 
-  const { mutateAsync: enableTwoFactorAuthentication, data: enableTwoFactorAuthenticationData } =
-    trpc.twoFactorAuthentication.enable.useMutation();
+  const {
+    mutateAsync: enableTwoFactorAuthentication,
+    data: enableTwoFactorAuthenticationData,
+    isLoading: isEnableTwoFactorAuthenticationDataLoading,
+  } = trpc.twoFactorAuthentication.enable.useMutation();
 
   const setupTwoFactorAuthenticationForm = useForm<TSetupTwoFactorAuthenticationForm>({
     defaultValues: {
@@ -114,6 +115,19 @@ export const EnableAuthenticatorAppDialog = ({
     }
   };
 
+  const downloadRecoveryCodes = () => {
+    if (enableTwoFactorAuthenticationData && enableTwoFactorAuthenticationData.recoveryCodes) {
+      const blob = new Blob([enableTwoFactorAuthenticationData.recoveryCodes.join('\n')], {
+        type: 'text/plain',
+      });
+
+      downloadFile({
+        filename: 'documenso-2FA-recovery-codes.txt',
+        data: blob,
+      });
+    }
+  };
+
   const onEnableTwoFactorAuthenticationFormSubmit = async ({
     token,
   }: TEnableTwoFactorAuthenticationForm) => {
@@ -135,14 +149,6 @@ export const EnableAuthenticatorAppDialog = ({
     }
   };
 
-  const onCompleteClick = () => {
-    flushSync(() => {
-      onOpenChange(false);
-    });
-
-    router.refresh();
-  };
-
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
@@ -190,15 +196,15 @@ export const EnableAuthenticatorAppDialog = ({
                     )}
                   />
 
-                  <div className="flex w-full items-center justify-between">
-                    <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+                  <DialogFooter>
+                    <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
                       Cancel
                     </Button>
 
                     <Button type="submit" loading={isSetupTwoFactorAuthenticationSubmitting}>
                       Continue
                     </Button>
-                  </div>
+                  </DialogFooter>
                 </form>
               </Form>
             );
@@ -251,15 +257,15 @@ export const EnableAuthenticatorAppDialog = ({
                   )}
                 />
 
-                <div className="flex w-full items-center justify-between">
-                  <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
                     Cancel
                   </Button>
 
                   <Button type="submit" loading={isEnableTwoFactorAuthenticationSubmitting}>
                     Enable 2FA
                   </Button>
-                </div>
+                </DialogFooter>
               </form>
             </Form>
           ))
@@ -269,9 +275,16 @@ export const EnableAuthenticatorAppDialog = ({
                 <RecoveryCodeList recoveryCodes={enableTwoFactorAuthenticationData.recoveryCodes} />
               )}
 
-              <div className="mt-4 flex w-full flex-row-reverse items-center justify-between">
-                <Button type="button" onClick={() => onCompleteClick()}>
-                  Complete
+              <div className="mt-4 flex flex-row-reverse items-center gap-2">
+                <Button onClick={() => onOpenChange(false)}>Complete</Button>
+
+                <Button
+                  variant="secondary"
+                  onClick={downloadRecoveryCodes}
+                  disabled={!enableTwoFactorAuthenticationData?.recoveryCodes}
+                  loading={isEnableTwoFactorAuthenticationDataLoading}
+                >
+                  Download
                 </Button>
               </div>
             </div>

apps/web/src/components/forms/2fa/recovery-codes.tsx

@@ -7,7 +7,6 @@ import { Button } from '@documenso/ui/primitives/button';
 import { ViewRecoveryCodesDialog } from './view-recovery-codes-dialog';
 
 type RecoveryCodesProps = {
-  // backupCodes: string[] | null;
   isTwoFactorEnabled: boolean;
 };
 
@@ -16,22 +15,13 @@ export const RecoveryCodes = ({ isTwoFactorEnabled }: RecoveryCodesProps) => {
 
   return (
     <>
-      <div className="mt-4 flex flex-col justify-between gap-4 rounded-lg border p-4 md:flex-row md:items-center md:gap-8">
-        <div className="flex-1">
-          <p>Recovery Codes</p>
-
-          <p className="text-muted-foreground mt-2 max-w-[50ch] text-sm">
-            Recovery codes are used to access your account in the event that you lose access to your
-            authenticator app.
-          </p>
-        </div>
-
-        <div>
-          <Button onClick={() => setIsOpen(true)} disabled={!isTwoFactorEnabled} size="sm">
-            View Codes
-          </Button>
-        </div>
-      </div>
+      <Button
+        className="flex-shrink-0"
+        onClick={() => setIsOpen(true)}
+        disabled={!isTwoFactorEnabled}
+      >
+        View Codes
+      </Button>
 
       <ViewRecoveryCodesDialog
         key={isOpen ? 'open' : 'closed'}

apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx

@@ -5,12 +5,14 @@ import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 
+import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
@@ -41,8 +43,11 @@ export type ViewRecoveryCodesDialogProps = {
 export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCodesDialogProps) => {
   const { toast } = useToast();
 
-  const { mutateAsync: viewRecoveryCodes, data: viewRecoveryCodesData } =
-    trpc.twoFactorAuthentication.viewRecoveryCodes.useMutation();
+  const {
+    mutateAsync: viewRecoveryCodes,
+    data: viewRecoveryCodesData,
+    isLoading: isViewRecoveryCodesDataLoading,
+  } = trpc.twoFactorAuthentication.viewRecoveryCodes.useMutation();
 
   const viewRecoveryCodesForm = useForm<TViewRecoveryCodesForm>({
     defaultValues: {
@@ -61,6 +66,19 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
     return 'view';
   }, [viewRecoveryCodesData, isViewRecoveryCodesSubmitting]);
 
+  const downloadRecoveryCodes = () => {
+    if (viewRecoveryCodesData && viewRecoveryCodesData.recoveryCodes) {
+      const blob = new Blob([viewRecoveryCodesData.recoveryCodes.join('\n')], {
+        type: 'text/plain',
+      });
+
+      downloadFile({
+        filename: 'documenso-2FA-recovery-codes.txt',
+        data: blob,
+      });
+    }
+  };
+
   const onViewRecoveryCodesFormSubmit = async ({ password }: TViewRecoveryCodesForm) => {
     try {
       await viewRecoveryCodes({ password });
@@ -119,15 +137,15 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
                     )}
                   />
 
-                  <div className="flex w-full items-center justify-between">
-                    <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+                  <DialogFooter>
+                    <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
                       Cancel
                     </Button>
 
                     <Button type="submit" loading={isViewRecoveryCodesSubmitting}>
                       Continue
                     </Button>
-                  </div>
+                  </DialogFooter>
                 </form>
               </Form>
             );
@@ -138,8 +156,17 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
                 <RecoveryCodeList recoveryCodes={viewRecoveryCodesData.recoveryCodes} />
               )}
 
-              <div className="mt-4 flex flex-row-reverse items-center justify-between">
+              <div className="mt-4 flex flex-row-reverse items-center gap-2">
                 <Button onClick={() => onOpenChange(false)}>Complete</Button>
+
+                <Button
+                  variant="secondary"
+                  disabled={!viewRecoveryCodesData?.recoveryCodes}
+                  loading={isViewRecoveryCodesDataLoading}
+                  onClick={downloadRecoveryCodes}
+                >
+                  Download
+                </Button>
               </div>
             </div>
           ))

apps/web/src/components/forms/password.tsx

@@ -7,6 +7,7 @@ import { z } from 'zod';
 import type { User } from '@documenso/prisma/client';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
+import { ZCurrentPasswordSchema, ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -22,18 +23,9 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZPasswordFormSchema = z
   .object({
-    currentPassword: z
-      .string()
-      .min(6, { message: 'Password should contain at least 6 characters' })
-      .max(72, { message: 'Password should not contain more than 72 characters' }),
-    password: z
-      .string()
-      .min(6, { message: 'Password should contain at least 6 characters' })
-      .max(72, { message: 'Password should not contain more than 72 characters' }),
-    repeatedPassword: z
-      .string()
-      .min(6, { message: 'Password should contain at least 6 characters' })
-      .max(72, { message: 'Password should not contain more than 72 characters' }),
+    currentPassword: ZCurrentPasswordSchema,
+    password: ZPasswordSchema,
+    repeatedPassword: ZPasswordSchema,
   })
   .refine((data) => data.password === data.repeatedPassword, {
     message: 'Passwords do not match',
@@ -145,7 +137,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
           />
         </fieldset>
 
-        <div className="mt-4">
+        <div className="ml-auto mt-4">
           <Button type="submit" loading={isSubmitting}>
             {isSubmitting ? 'Updating password...' : 'Update password'}
           </Button>

apps/web/src/components/forms/profile.tsx

@@ -29,6 +29,11 @@ export const ZProfileFormSchema = z.object({
   signature: z.string().min(1, 'Signature Pad cannot be empty'),
 });
 
+export const ZTwoFactorAuthTokenSchema = z.object({
+  token: z.string(),
+});
+
+export type TTwoFactorAuthTokenSchema = z.infer<typeof ZTwoFactorAuthTokenSchema>;
 export type TProfileFormSchema = z.infer<typeof ZProfileFormSchema>;
 
 export type ProfileFormProps = {
@@ -50,8 +55,11 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
   });
 
   const isSubmitting = form.formState.isSubmitting;
+  const hasTwoFactorAuthentication = user.twoFactorEnabled;
 
   const { mutateAsync: updateProfile } = trpc.profile.updateProfile.useMutation();
+  const { mutateAsync: deleteAccount, isLoading: isDeletingAccount } =
+    trpc.profile.deleteAccount.useMutation();
 
   const onFormSubmit = async ({ name, signature }: TProfileFormSchema) => {
     try {
@@ -121,10 +129,8 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
                 <FormControl>
                   <SignaturePad
                     className="h-44 w-full"
-                    containerClassName={cn(
-                      'rounded-lg border bg-background',
-                      isSubmitting ? 'pointer-events-none opacity-50' : null,
-                    )}
+                    disabled={isSubmitting}
+                    containerClassName={cn('rounded-lg border bg-background')}
                     defaultValue={user.signature ?? undefined}
                     onChange={(v) => onChange(v ?? '')}
                   />
@@ -135,7 +141,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
           />
         </fieldset>
 
-        <Button type="submit" loading={isSubmitting}>
+        <Button type="submit" loading={isSubmitting} className="self-end">
           {isSubmitting ? 'Updating profile...' : 'Update profile'}
         </Button>
       </form>

apps/web/src/components/forms/public-profile-claim-dialog.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import React, { useState } from 'react';
+
+import Image from 'next/image';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import profileClaimTeaserImage from '@documenso/assets/images/profile-claim-teaser.png';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { User } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { UserProfileSkeleton } from '../ui/user-profile-skeleton';
+
+export const ZClaimPublicProfileFormSchema = z.object({
+  url: z
+    .string()
+    .trim()
+    .toLowerCase()
+    .min(1, { message: 'Please enter a valid username.' })
+    .regex(/^[a-z0-9-]+$/, {
+      message: 'Username can only container alphanumeric characters and dashes.',
+    }),
+});
+
+export type TClaimPublicProfileFormSchema = z.infer<typeof ZClaimPublicProfileFormSchema>;
+
+export type ClaimPublicProfileDialogFormProps = {
+  open: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onClaimed?: () => void;
+  user: User;
+};
+
+export const ClaimPublicProfileDialogForm = ({
+  open,
+  onOpenChange,
+  onClaimed,
+  user,
+}: ClaimPublicProfileDialogFormProps) => {
+  const { toast } = useToast();
+
+  const [claimed, setClaimed] = useState(false);
+
+  const baseUrl = new URL(NEXT_PUBLIC_WEBAPP_URL() ?? 'http://localhost:3000');
+
+  const form = useForm<TClaimPublicProfileFormSchema>({
+    values: {
+      url: user.url || '',
+    },
+    resolver: zodResolver(ZClaimPublicProfileFormSchema),
+  });
+
+  const { mutateAsync: updatePublicProfile } = trpc.profile.updatePublicProfile.useMutation();
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const onFormSubmit = async ({ url }: TClaimPublicProfileFormSchema) => {
+    try {
+      await updatePublicProfile({
+        url,
+      });
+
+      setClaimed(true);
+      onClaimed?.();
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.PROFILE_URL_TAKEN) {
+        form.setError('url', {
+          type: 'manual',
+          message: 'This username is already taken',
+        });
+      } else if (error.code === AppErrorCode.PREMIUM_PROFILE_URL) {
+        form.setError('url', {
+          type: 'manual',
+          message: error.message,
+        });
+      } else if (error.code !== AppErrorCode.UNKNOWN_ERROR) {
+        toast({
+          title: 'An error occurred',
+          description: error.userMessage ?? error.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            'We encountered an unknown error while attempting to save your details. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent position="center" className="max-w-lg overflow-hidden">
+        {!claimed && (
+          <>
+            <DialogHeader>
+              <DialogTitle className="font-semi-bold text-center text-xl">
+                Introducing public profiles!
+              </DialogTitle>
+
+              <DialogDescription className="text-center">
+                Reserve your Documenso public profile username
+              </DialogDescription>
+            </DialogHeader>
+
+            <Image src={profileClaimTeaserImage} alt="profile claim teaser" />
+
+            <Form {...form}>
+              <form
+                className={cn(
+                  'to-background -mt-32 flex w-full flex-col bg-gradient-to-b from-transparent to-15% pt-16 md:-mt-44',
+                )}
+                onSubmit={form.handleSubmit(onFormSubmit)}
+              >
+                <fieldset className="-mt-6 flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+                  <FormField
+                    control={form.control}
+                    name="url"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Public profile username</FormLabel>
+
+                        <FormControl>
+                          <Input type="text" className="mb-2 mt-2" {...field} />
+                        </FormControl>
+
+                        <FormMessage />
+
+                        <div className="bg-muted/50 text-muted-foreground mt-2 inline-block truncate rounded-md px-2 py-1 text-sm">
+                          {baseUrl.host}/u/{field.value || '<username>'}
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                </fieldset>
+
+                <div className="mt-4 text-center">
+                  <Button type="submit" loading={isSubmitting}>
+                    Claim your username
+                  </Button>
+                </div>
+              </form>
+            </Form>
+          </>
+        )}
+
+        {claimed && (
+          <>
+            <DialogHeader>
+              <DialogTitle className="font-semi-bold text-center text-xl">All set!</DialogTitle>
+
+              <DialogDescription className="text-center">
+                We will let you know as soon as this features is launched
+              </DialogDescription>
+            </DialogHeader>
+
+            <UserProfileSkeleton className="mt-4" user={user} rows={1} />
+
+            <div className="to-background -mt-12 flex w-full flex-col items-center bg-gradient-to-b from-transparent to-15% px-4 pt-8 md:-mt-12">
+              <Button className="w-full" onClick={() => onOpenChange?.(false)}>
+                Can't wait!
+              </Button>
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/web/src/components/forms/reset-password.tsx

@@ -8,6 +8,7 @@ import { z } from 'zod';
 
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
+import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -23,8 +24,8 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZResetPasswordFormSchema = z
   .object({
-    password: z.string().min(6).max(72),
-    repeatedPassword: z.string().min(6).max(72),
+    password: ZPasswordSchema,
+    repeatedPassword: ZPasswordSchema,
   })
   .refine((data) => data.password === data.repeatedPassword, {
     path: ['repeatedPassword'],

apps/web/src/components/forms/send-confirmation-email.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZSendConfirmationEmailFormSchema = z.object({
+  email: z.string().email().min(1),
+});
+
+export type TSendConfirmationEmailFormSchema = z.infer<typeof ZSendConfirmationEmailFormSchema>;
+
+export type SendConfirmationEmailFormProps = {
+  className?: string;
+};
+
+export const SendConfirmationEmailForm = ({ className }: SendConfirmationEmailFormProps) => {
+  const { toast } = useToast();
+
+  const form = useForm<TSendConfirmationEmailFormSchema>({
+    values: {
+      email: '',
+    },
+    resolver: zodResolver(ZSendConfirmationEmailFormSchema),
+  });
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const { mutateAsync: sendConfirmationEmail } = trpc.profile.sendConfirmationEmail.useMutation();
+
+  const onFormSubmit = async ({ email }: TSendConfirmationEmailFormSchema) => {
+    try {
+      await sendConfirmationEmail({ email });
+
+      toast({
+        title: 'Confirmation email sent',
+        description:
+          'A confirmation email has been sent, and it should arrive in your inbox shortly.',
+        duration: 5000,
+      });
+
+      form.reset();
+    } catch (err) {
+      toast({
+        title: 'An error occurred while sending your confirmation email',
+        description: 'Please try again and make sure you enter the correct email address.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        className={cn('mt-6 flex w-full flex-col gap-y-4', className)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
+      >
+        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email address</FormLabel>
+                <FormControl>
+                  <Input type="email" {...field} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          <FormMessage />
+
+          <Button size="lg" type="submit" disabled={isSubmitting} loading={isSubmitting}>
+            Send confirmation email
+          </Button>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/web/src/components/forms/signin.tsx

@@ -2,6 +2,9 @@
 
 import { useState } from 'react';
 
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
@@ -9,9 +12,16 @@ import { FcGoogle } from 'react-icons/fc';
 import { z } from 'zod';
 
 import { ErrorCode, isErrorCode } from '@documenso/lib/next-auth/error-codes';
+import { ZCurrentPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@documenso/ui/primitives/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
 import {
   Form,
   FormControl,
@@ -31,6 +41,8 @@ const ERROR_MESSAGES: Partial<Record<keyof typeof ErrorCode, string>> = {
     'This account appears to be using a social login method, please sign in using that method',
   [ErrorCode.INCORRECT_TWO_FACTOR_CODE]: 'The two-factor authentication code provided is incorrect',
   [ErrorCode.INCORRECT_TWO_FACTOR_BACKUP_CODE]: 'The backup code provided is incorrect',
+  [ErrorCode.UNVERIFIED_EMAIL]:
+    'This account has not been verified. Please verify your account before signing in.',
 };
 
 const TwoFactorEnabledErrorCode = ErrorCode.TWO_FACTOR_MISSING_CREDENTIALS;
@@ -39,7 +51,7 @@ const LOGIN_REDIRECT_PATH = '/documents';
 
 export const ZSignInFormSchema = z.object({
   email: z.string().email().min(1),
-  password: z.string().min(6).max(72),
+  password: ZCurrentPasswordSchema,
   totpCode: z.string().trim().optional(),
   backupCode: z.string().trim().optional(),
 });
@@ -48,13 +60,15 @@ export type TSignInFormSchema = z.infer<typeof ZSignInFormSchema>;
 
 export type SignInFormProps = {
   className?: string;
+  initialEmail?: string;
   isGoogleSSOEnabled?: boolean;
 };
 
-export const SignInForm = ({ className, isGoogleSSOEnabled }: SignInFormProps) => {
+export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: SignInFormProps) => {
   const { toast } = useToast();
   const [isTwoFactorAuthenticationDialogOpen, setIsTwoFactorAuthenticationDialogOpen] =
     useState(false);
+  const router = useRouter();
 
   const [twoFactorAuthenticationMethod, setTwoFactorAuthenticationMethod] = useState<
     'totp' | 'backup'
@@ -62,7 +76,7 @@ export const SignInForm = ({ className, isGoogleSSOEnabled }: SignInFormProps) =
 
   const form = useForm<TSignInFormSchema>({
     values: {
-      email: '',
+      email: initialEmail ?? '',
       password: '',
       totpCode: '',
       backupCode: '',
@@ -110,7 +124,6 @@ export const SignInForm = ({ className, isGoogleSSOEnabled }: SignInFormProps) =
 
       const result = await signIn('credentials', {
         ...credentials,
-
         callbackUrl: LOGIN_REDIRECT_PATH,
         redirect: false,
       });
@@ -123,6 +136,17 @@ export const SignInForm = ({ className, isGoogleSSOEnabled }: SignInFormProps) =
 
         const errorMessage = ERROR_MESSAGES[result.error];
 
+        if (result.error === ErrorCode.UNVERIFIED_EMAIL) {
+          router.push(`/unverified-account`);
+
+          toast({
+            title: 'Unable to sign in',
+            description: errorMessage ?? 'An unknown error occurred',
+          });
+
+          return;
+        }
+
         toast({
           variant: 'destructive',
           title: 'Unable to sign in',
@@ -172,9 +196,11 @@ export const SignInForm = ({ className, isGoogleSSOEnabled }: SignInFormProps) =
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Email</FormLabel>
+
                 <FormControl>
                   <Input type="email" {...field} />
                 </FormControl>
+
                 <FormMessage />
               </FormItem>
             )}
@@ -186,9 +212,19 @@ export const SignInForm = ({ className, isGoogleSSOEnabled }: SignInFormProps) =
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Password</FormLabel>
+
                 <FormControl>
                   <PasswordInput {...field} />
                 </FormControl>
+
+                <p className="mt-2 text-right">
+                  <Link
+                    href="/forgot-password"
+                    className="text-muted-foreground text-sm duration-200 hover:opacity-70"
+                  >
+                    Forgot your password?
+                  </Link>
+                </p>
                 <FormMessage />
               </FormItem>
             )}
@@ -269,21 +305,23 @@ export const SignInForm = ({ className, isGoogleSSOEnabled }: SignInFormProps) =
                   )}
                 />
               )}
+
+              <DialogFooter className="mt-4">
+                <Button
+                  type="button"
+                  variant="secondary"
+                  onClick={onToggleTwoFactorAuthenticationMethodClick}
+                >
+                  {twoFactorAuthenticationMethod === 'totp'
+                    ? 'Use Backup Code'
+                    : 'Use Authenticator'}
+                </Button>
+
+                <Button type="submit" loading={isSubmitting}>
+                  {isSubmitting ? 'Signing in...' : 'Sign In'}
+                </Button>
+              </DialogFooter>
             </fieldset>
-
-            <div className="mt-4 flex items-center justify-between">
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={onToggleTwoFactorAuthenticationMethodClick}
-              >
-                {twoFactorAuthenticationMethod === 'totp' ? 'Use Backup Code' : 'Use Authenticator'}
-              </Button>
-
-              <Button type="submit" loading={isSubmitting}>
-                {isSubmitting ? 'Signing in...' : 'Sign In'}
-              </Button>
-            </div>
           </form>
         </DialogContent>
       </Dialog>

apps/web/src/components/forms/signup.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
@@ -9,6 +11,7 @@ import { z } from 'zod';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
+import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -26,31 +29,40 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const SIGN_UP_REDIRECT_PATH = '/documents';
 
-export const ZSignUpFormSchema = z.object({
-  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
-  email: z.string().email().min(1),
-  password: z
-    .string()
-    .min(6, { message: 'Password should contain at least 6 characters' })
-    .max(72, { message: 'Password should not contain more than 72 characters' }),
-  signature: z.string().min(1, { message: 'We need your signature to sign documents' }),
-});
+export const ZSignUpFormSchema = z
+  .object({
+    name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+    email: z.string().email().min(1),
+    password: ZPasswordSchema,
+    signature: z.string().min(1, { message: 'We need your signature to sign documents' }),
+  })
+  .refine(
+    (data) => {
+      const { name, email, password } = data;
+      return !password.includes(name) && !password.includes(email.split('@')[0]);
+    },
+    {
+      message: 'Password should not be common or based on personal information',
+    },
+  );
 
 export type TSignUpFormSchema = z.infer<typeof ZSignUpFormSchema>;
 
 export type SignUpFormProps = {
   className?: string;
+  initialEmail?: string;
   isGoogleSSOEnabled?: boolean;
 };
 
-export const SignUpForm = ({ className, isGoogleSSOEnabled }: SignUpFormProps) => {
+export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: SignUpFormProps) => {
   const { toast } = useToast();
   const analytics = useAnalytics();
+  const router = useRouter();
 
   const form = useForm<TSignUpFormSchema>({
     values: {
       name: '',
-      email: '',
+      email: initialEmail ?? '',
       password: '',
       signature: '',
     },
@@ -65,10 +77,13 @@ export const SignUpForm = ({ className, isGoogleSSOEnabled }: SignUpFormProps) =
     try {
       await signup({ name, email, password, signature });
 
-      await signIn('credentials', {
-        email,
-        password,
-        callbackUrl: SIGN_UP_REDIRECT_PATH,
+      router.push(`/unverified-account`);
+
+      toast({
+        title: 'Registration Successful',
+        description:
+          'You have successfully registered. Please verify your account by clicking on the link you received in the email.',
+        duration: 5000,
       });
 
       analytics.capture('App: User Sign Up', {
@@ -164,6 +179,7 @@ export const SignUpForm = ({ className, isGoogleSSOEnabled }: SignUpFormProps) =
                 <FormControl>
                   <SignaturePad
                     className="h-36 w-full"
+                    disabled={isSubmitting}
                     containerClassName="mt-2 rounded-lg border bg-background"
                     onChange={(v) => onChange(v ?? '')}
                   />

apps/web/src/components/forms/token.tsx

@@ -0,0 +1,257 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc } from '@documenso/trpc/react';
+import type { TCreateTokenMutationSchema } from '@documenso/trpc/server/api-token-router/schema';
+import { ZCreateTokenMutationSchema } from '@documenso/trpc/server/api-token-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { EXPIRATION_DATES } from '../(dashboard)/settings/token/contants';
+
+const ZCreateTokenFormSchema = ZCreateTokenMutationSchema.extend({
+  enabled: z.boolean(),
+});
+
+type TCreateTokenFormSchema = z.infer<typeof ZCreateTokenFormSchema>;
+
+export type ApiTokenFormProps = {
+  className?: string;
+  teamId?: number;
+};
+
+export const ApiTokenForm = ({ className, teamId }: ApiTokenFormProps) => {
+  const router = useRouter();
+
+  const [, copy] = useCopyToClipboard();
+  const { toast } = useToast();
+
+  const [newlyCreatedToken, setNewlyCreatedToken] = useState('');
+  const [noExpirationDate, setNoExpirationDate] = useState(false);
+
+  const { mutateAsync: createTokenMutation } = trpc.apiToken.createToken.useMutation({
+    onSuccess(data) {
+      setNewlyCreatedToken(data.token);
+    },
+  });
+
+  const form = useForm<TCreateTokenFormSchema>({
+    resolver: zodResolver(ZCreateTokenFormSchema),
+    defaultValues: {
+      tokenName: '',
+      expirationDate: '',
+      enabled: false,
+    },
+  });
+
+  const copyToken = async (token: string) => {
+    try {
+      const copied = await copy(token);
+
+      if (!copied) {
+        throw new Error('Unable to copy the token');
+      }
+
+      toast({
+        title: 'Token copied to clipboard',
+        description: 'The token was copied to your clipboard.',
+      });
+    } catch (error) {
+      toast({
+        title: 'Unable to copy token',
+        description: 'We were unable to copy the token to your clipboard. Please try again.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onSubmit = async ({ tokenName, expirationDate }: TCreateTokenMutationSchema) => {
+    try {
+      await createTokenMutation({
+        teamId,
+        tokenName,
+        expirationDate: noExpirationDate ? null : expirationDate,
+      });
+
+      toast({
+        title: 'Token created',
+        description: 'A new token was created successfully.',
+        duration: 5000,
+      });
+
+      form.reset();
+
+      router.refresh();
+    } catch (error) {
+      if (error instanceof TRPCClientError && error.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: error.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          duration: 5000,
+          description:
+            'We encountered an unknown error while attempting create the new token. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <div className={cn(className)}>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <fieldset className="mt-6 flex w-full flex-col gap-4">
+            <FormField
+              control={form.control}
+              name="tokenName"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel className="text-muted-foreground">Token name</FormLabel>
+
+                  <div className="flex items-center gap-x-4">
+                    <FormControl className="flex-1">
+                      <Input type="text" {...field} />
+                    </FormControl>
+                  </div>
+
+                  <FormDescription className="text-xs italic">
+                    Please enter a meaningful name for your token. This will help you identify it
+                    later.
+                  </FormDescription>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex flex-col gap-4 md:flex-row">
+              <FormField
+                control={form.control}
+                name="expirationDate"
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormLabel className="text-muted-foreground">Token expiration date</FormLabel>
+
+                    <div className="flex items-center gap-x-4">
+                      <FormControl className="flex-1">
+                        <Select onValueChange={field.onChange} disabled={noExpirationDate}>
+                          <SelectTrigger className="w-full">
+                            <SelectValue placeholder="Choose..." />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {Object.entries(EXPIRATION_DATES).map(([key, date]) => (
+                              <SelectItem key={key} value={key}>
+                                {date}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                    </div>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="enabled"
+                render={({ field }) => (
+                  <FormItem className="">
+                    <FormLabel className="text-muted-foreground mt-2">Never expire</FormLabel>
+                    <FormControl>
+                      <div className="block md:py-1.5">
+                        <Switch
+                          className="bg-background"
+                          checked={field.value}
+                          onCheckedChange={(val) => {
+                            setNoExpirationDate((prev) => !prev);
+                            field.onChange(val);
+                          }}
+                        />
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <Button
+              type="submit"
+              className="hidden md:inline-flex"
+              disabled={!form.formState.isDirty}
+              loading={form.formState.isSubmitting}
+            >
+              Create token
+            </Button>
+
+            <div className="md:hidden">
+              <Button
+                type="submit"
+                disabled={!form.formState.isDirty}
+                loading={form.formState.isSubmitting}
+              >
+                Create token
+              </Button>
+            </div>
+          </fieldset>
+        </form>
+      </Form>
+
+      {newlyCreatedToken && (
+        <Card className="mt-8" gradient>
+          <CardContent className="p-4">
+            <p className="text-muted-foreground mt-2 text-sm">
+              Your token was created successfully! Make sure to copy it because you won't be able to
+              see it again!
+            </p>
+
+            <p className="bg-muted-foreground/10 my-4 rounded-md px-2.5 py-1 font-mono text-sm">
+              {newlyCreatedToken}
+            </p>
+
+            <Button variant="outline" onClick={() => void copyToken(newlyCreatedToken)}>
+              Copy token
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+};

apps/web/src/components/forms/v2/signup.tsx

@@ -0,0 +1,460 @@
+'use client';
+
+import { useState } from 'react';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { AnimatePresence, motion } from 'framer-motion';
+import { signIn } from 'next-auth/react';
+import { useForm } from 'react-hook-form';
+import { FcGoogle } from 'react-icons/fc';
+import { z } from 'zod';
+
+import communityCardsImage from '@documenso/assets/images/community-cards.png';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc } from '@documenso/trpc/react';
+import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { UserProfileSkeleton } from '~/components/ui/user-profile-skeleton';
+import { UserProfileTimur } from '~/components/ui/user-profile-timur';
+
+const SIGN_UP_REDIRECT_PATH = '/documents';
+
+type SignUpStep = 'BASIC_DETAILS' | 'CLAIM_USERNAME';
+
+export const ZSignUpFormV2Schema = z
+  .object({
+    name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+    email: z.string().email().min(1),
+    password: ZPasswordSchema,
+    signature: z.string().min(1, { message: 'We need your signature to sign documents' }),
+    url: z
+      .string()
+      .trim()
+      .toLowerCase()
+      .min(1, { message: 'We need a username to create your profile' })
+      .regex(/^[a-z0-9-]+$/, {
+        message: 'Username can only container alphanumeric characters and dashes.',
+      }),
+  })
+  .refine(
+    (data) => {
+      const { name, email, password } = data;
+      return !password.includes(name) && !password.includes(email.split('@')[0]);
+    },
+    {
+      message: 'Password should not be common or based on personal information',
+    },
+  );
+
+export type TSignUpFormV2Schema = z.infer<typeof ZSignUpFormV2Schema>;
+
+export type SignUpFormV2Props = {
+  className?: string;
+  initialEmail?: string;
+  isGoogleSSOEnabled?: boolean;
+};
+
+export const SignUpFormV2 = ({
+  className,
+  initialEmail,
+  isGoogleSSOEnabled,
+}: SignUpFormV2Props) => {
+  const { toast } = useToast();
+  const analytics = useAnalytics();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [step, setStep] = useState<SignUpStep>('BASIC_DETAILS');
+
+  const utmSrc = searchParams?.get('utm_source') ?? null;
+
+  const baseUrl = new URL(NEXT_PUBLIC_WEBAPP_URL() ?? 'http://localhost:3000');
+
+  const form = useForm<TSignUpFormV2Schema>({
+    values: {
+      name: '',
+      email: initialEmail ?? '',
+      password: '',
+      signature: '',
+      url: '',
+    },
+    mode: 'onBlur',
+    resolver: zodResolver(ZSignUpFormV2Schema),
+  });
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const name = form.watch('name');
+  const url = form.watch('url');
+
+  // To continue we need to make sure name, email, password and signature are valid
+  const canContinue =
+    form.formState.dirtyFields.name &&
+    form.formState.errors.name === undefined &&
+    form.formState.dirtyFields.email &&
+    form.formState.errors.email === undefined &&
+    form.formState.dirtyFields.password &&
+    form.formState.errors.password === undefined &&
+    form.formState.dirtyFields.signature &&
+    form.formState.errors.signature === undefined;
+
+  const { mutateAsync: signup } = trpc.auth.signup.useMutation();
+
+  const onFormSubmit = async ({ name, email, password, signature, url }: TSignUpFormV2Schema) => {
+    try {
+      await signup({ name, email, password, signature, url });
+
+      router.push(`/unverified-account`);
+
+      toast({
+        title: 'Registration Successful',
+        description:
+          'You have successfully registered. Please verify your account by clicking on the link you received in the email.',
+        duration: 5000,
+      });
+
+      analytics.capture('App: User Sign Up', {
+        email,
+        timestamp: new Date().toISOString(),
+        custom_campaign_params: { src: utmSrc },
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.PROFILE_URL_TAKEN) {
+        form.setError('url', {
+          type: 'manual',
+          message: 'This username has already been taken',
+        });
+      } else if (error.code === AppErrorCode.PREMIUM_PROFILE_URL) {
+        form.setError('url', {
+          type: 'manual',
+          message: error.message,
+        });
+      } else if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: err.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          description:
+            'We encountered an unknown error while attempting to sign you up. Please try again later.',
+          variant: 'destructive',
+        });
+      }
+    }
+  };
+
+  const onSignUpWithGoogleClick = async () => {
+    try {
+      await signIn('google', { callbackUrl: SIGN_UP_REDIRECT_PATH });
+    } catch (err) {
+      toast({
+        title: 'An unknown error occurred',
+        description:
+          'We encountered an unknown error while attempting to sign you Up. Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div className={cn('flex justify-center gap-x-12', className)}>
+      <div className="border-border relative hidden flex-1 overflow-hidden rounded-xl border xl:flex">
+        <div className="absolute -inset-8 -z-[2] backdrop-blur">
+          <Image
+            src={communityCardsImage}
+            fill={true}
+            alt="community-cards"
+            className="dark:brightness-95 dark:contrast-[70%] dark:invert"
+          />
+        </div>
+
+        <div className="bg-background/50 absolute -inset-8 -z-[1] backdrop-blur-[2px]" />
+
+        <div className="relative flex h-full w-full flex-col items-center justify-evenly">
+          <div className="bg-background rounded-2xl border px-4 py-1 text-sm font-medium">
+            User profiles are coming soon!
+          </div>
+
+          <AnimatePresence>
+            {step === 'BASIC_DETAILS' ? (
+              <motion.div className="w-full max-w-md" layoutId="user-profile">
+                <UserProfileTimur
+                  rows={2}
+                  className="bg-background border-border rounded-2xl border shadow-md"
+                />
+              </motion.div>
+            ) : (
+              <motion.div className="w-full max-w-md" layoutId="user-profile">
+                <UserProfileSkeleton
+                  user={{ name, url }}
+                  rows={2}
+                  className="bg-background border-border rounded-2xl border shadow-md"
+                />
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          <div />
+        </div>
+      </div>
+
+      <div className="border-border dark:bg-background relative z-10 flex min-h-[min(800px,80vh)] w-full max-w-lg flex-col rounded-xl border bg-neutral-100 p-6">
+        {step === 'BASIC_DETAILS' && (
+          <div className="h-20">
+            <h1 className="text-xl font-semibold md:text-2xl">Create a new account</h1>
+
+            <p className="text-muted-foreground mt-2 text-xs md:text-sm">
+              Create your account and start using state-of-the-art document signing. Open and
+              beautiful signing is within your grasp.
+            </p>
+          </div>
+        )}
+
+        {step === 'CLAIM_USERNAME' && (
+          <div className="h-20">
+            <h1 className="text-xl font-semibold md:text-2xl">Claim your username now</h1>
+
+            <p className="text-muted-foreground mt-2 text-xs md:text-sm">
+              You will get notified & be able to set up your documenso public profile when we launch
+              the feature.
+            </p>
+          </div>
+        )}
+
+        <hr className="-mx-6 my-4" />
+
+        <Form {...form}>
+          <form
+            className="flex w-full flex-1 flex-col gap-y-4"
+            onSubmit={form.handleSubmit(onFormSubmit)}
+          >
+            {step === 'BASIC_DETAILS' && (
+              <fieldset
+                className={cn(
+                  'flex h-[500px] w-full flex-col gap-y-4',
+                  isGoogleSSOEnabled && 'h-[600px]',
+                )}
+                disabled={isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Full Name</FormLabel>
+                      <FormControl>
+                        <Input type="text" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Email Address</FormLabel>
+                      <FormControl>
+                        <Input type="email" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="password"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Password</FormLabel>
+
+                      <FormControl>
+                        <PasswordInput {...field} />
+                      </FormControl>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="signature"
+                  render={({ field: { onChange } }) => (
+                    <FormItem>
+                      <FormLabel>Sign Here</FormLabel>
+                      <FormControl>
+                        <SignaturePad
+                          className="h-36 w-full"
+                          disabled={isSubmitting}
+                          containerClassName="mt-2 rounded-lg border bg-background"
+                          onChange={(v) => onChange(v ?? '')}
+                        />
+                      </FormControl>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {isGoogleSSOEnabled && (
+                  <>
+                    <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
+                      <div className="bg-border h-px flex-1" />
+                      <span className="text-muted-foreground bg-transparent">Or</span>
+                      <div className="bg-border h-px flex-1" />
+                    </div>
+
+                    <Button
+                      type="button"
+                      size="lg"
+                      variant={'outline'}
+                      className="bg-background text-muted-foreground border"
+                      disabled={isSubmitting}
+                      onClick={onSignUpWithGoogleClick}
+                    >
+                      <FcGoogle className="mr-2 h-5 w-5" />
+                      Sign Up with Google
+                    </Button>
+                  </>
+                )}
+
+                <p className="text-muted-foreground mt-4 text-sm">
+                  Already have an account?{' '}
+                  <Link href="/signin" className="text-documenso-700 duration-200 hover:opacity-70">
+                    Sign in instead
+                  </Link>
+                </p>
+              </fieldset>
+            )}
+
+            {step === 'CLAIM_USERNAME' && (
+              <fieldset
+                className={cn(
+                  'flex h-[500px] w-full flex-col gap-y-4',
+                  isGoogleSSOEnabled && 'h-[600px]',
+                )}
+                disabled={isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="url"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Public profile username</FormLabel>
+
+                      <FormControl>
+                        <Input type="text" className="mb-2 mt-2 lowercase" {...field} />
+                      </FormControl>
+
+                      <FormMessage />
+
+                      <div className="bg-muted/50 border-border text-muted-foreground mt-2 inline-block max-w-[16rem] truncate rounded-md border px-2 py-1 text-sm lowercase">
+                        {baseUrl.host}/u/{field.value || '<username>'}
+                      </div>
+                    </FormItem>
+                  )}
+                />
+              </fieldset>
+            )}
+
+            <div className="mt-6">
+              {step === 'BASIC_DETAILS' && (
+                <p className="text-muted-foreground text-sm">
+                  <span className="font-medium">Basic details</span> 1/2
+                </p>
+              )}
+
+              {step === 'CLAIM_USERNAME' && (
+                <p className="text-muted-foreground text-sm">
+                  <span className="font-medium">Claim username</span> 2/2
+                </p>
+              )}
+
+              <div className="bg-foreground/40 relative mt-4 h-1.5 rounded-full">
+                <motion.div
+                  layout="size"
+                  layoutId="document-flow-container-step"
+                  className="bg-documenso absolute inset-y-0 left-0 rounded-full"
+                  style={{
+                    width: step === 'BASIC_DETAILS' ? '50%' : '100%',
+                  }}
+                />
+              </div>
+            </div>
+
+            <div className="flex items-center gap-x-4">
+              {/* Go back button, disabled if step is basic details */}
+              <Button
+                type="button"
+                size="lg"
+                variant="secondary"
+                className="flex-1"
+                disabled={step === 'BASIC_DETAILS' || form.formState.isSubmitting}
+                onClick={() => setStep('BASIC_DETAILS')}
+              >
+                Back
+              </Button>
+
+              {/* Continue button */}
+              {step === 'BASIC_DETAILS' && (
+                <Button
+                  type="button"
+                  size="lg"
+                  className="flex-1 disabled:cursor-not-allowed"
+                  disabled={!canContinue}
+                  loading={form.formState.isSubmitting}
+                  onClick={() => setStep('CLAIM_USERNAME')}
+                >
+                  Next
+                </Button>
+              )}
+
+              {/* Sign up button */}
+              {step === 'CLAIM_USERNAME' && (
+                <Button
+                  loading={form.formState.isSubmitting}
+                  disabled={!form.formState.isValid}
+                  type="submit"
+                  size="lg"
+                  className="flex-1"
+                >
+                  Complete
+                </Button>
+              )}
+            </div>
+          </form>
+        </Form>
+      </div>
+    </div>
+  );
+};

apps/web/src/components/ui/user-profile-skeleton.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { File, User2 } from 'lucide-react';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import type { User } from '@documenso/prisma/client';
+import { VerifiedIcon } from '@documenso/ui/icons/verified';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type UserProfileSkeletonProps = {
+  className?: string;
+  user: Pick<User, 'name' | 'url'>;
+  rows?: number;
+};
+
+export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSkeletonProps) => {
+  const baseUrl = new URL(NEXT_PUBLIC_WEBAPP_URL() ?? 'http://localhost:3000');
+
+  return (
+    <div
+      className={cn(
+        'dark:bg-background flex flex-col items-center rounded-xl bg-neutral-100 p-4',
+        className,
+      )}
+    >
+      <div className="border-border bg-background text-muted-foreground inline-block max-w-full truncate rounded-md border px-2.5 py-1.5 text-sm">
+        {baseUrl.host}/u/{user.url}
+      </div>
+
+      <div className="mt-4">
+        <div className="bg-primary/10 rounded-full p-1.5">
+          <div className="bg-background flex h-20 w-20 items-center justify-center rounded-full border-2">
+            <User2 className="h-12 w-12 text-[hsl(228,10%,90%)]" />
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-6">
+        <div className="flex items-center justify-center gap-x-2">
+          <h2 className="max-w-[12rem] truncate text-2xl font-semibold">{user.name}</h2>
+
+          <VerifiedIcon className="text-primary h-8 w-8" />
+        </div>
+
+        <div className="dark:bg-foreground/30 mx-auto mt-4 h-2 w-52 rounded-full bg-neutral-300" />
+        <div className="dark:bg-foreground/20 mx-auto mt-2 h-2 w-36 rounded-full bg-neutral-200" />
+      </div>
+
+      <div className="mt-8 w-full">
+        <div className="dark:divide-foreground/30 dark:border-foreground/30 divide-y-2 divide-neutral-200 overflow-hidden rounded-lg border-2 border-neutral-200">
+          <div className="text-muted-foreground dark:bg-foreground/20 bg-neutral-50 p-4 font-medium">
+            Documents
+          </div>
+
+          {Array(rows)
+            .fill(0)
+            .map((_, index) => (
+              <div
+                key={index}
+                className="bg-background flex items-center justify-between gap-x-6 p-4"
+              >
+                <div className="flex items-center gap-x-2">
+                  <File className="text-muted-foreground/80 h-8 w-8" strokeWidth={1.5} />
+
+                  <div className="space-y-2">
+                    <div className="dark:bg-foreground/30 h-1.5 w-24 rounded-full bg-neutral-300 md:w-36" />
+                    <div className="dark:bg-foreground/20 h-1.5 w-16 rounded-full bg-neutral-200 md:w-24" />
+                  </div>
+                </div>
+
+                <div className="flex-shrink-0">
+                  <Button type="button" size="sm" className="pointer-events-none w-32">
+                    Sign
+                  </Button>
+                </div>
+              </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/web/src/components/ui/user-profile-timur.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import Image from 'next/image';
+
+import { File } from 'lucide-react';
+
+import timurImage from '@documenso/assets/images/timur.png';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { VerifiedIcon } from '@documenso/ui/icons/verified';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type UserProfileTimurProps = {
+  className?: string;
+  rows?: number;
+};
+
+export const UserProfileTimur = ({ className, rows = 2 }: UserProfileTimurProps) => {
+  const baseUrl = new URL(NEXT_PUBLIC_WEBAPP_URL() ?? 'http://localhost:3000');
+
+  return (
+    <div
+      className={cn(
+        'dark:bg-background flex flex-col items-center rounded-xl bg-neutral-100 p-4',
+        className,
+      )}
+    >
+      <div className="border-border bg-background text-muted-foreground inline-block max-w-full truncate rounded-md border px-2.5 py-1.5 text-sm">
+        {baseUrl.host}/u/timur
+      </div>
+
+      <div className="mt-4">
+        <Image
+          src={timurImage}
+          className="h-20 w-20 rounded-full"
+          alt="image of timur ercan founder of documenso"
+        />
+      </div>
+
+      <div className="mt-6">
+        <div className="flex items-center justify-center gap-x-2">
+          <h2 className="text-2xl font-semibold">Timur Ercan</h2>
+
+          <VerifiedIcon className="text-primary h-8 w-8" />
+        </div>
+
+        <p className="text-muted-foreground mt-4 max-w-[40ch] text-center text-sm">Hey I’m Timur</p>
+
+        <p className="text-muted-foreground mt-1 max-w-[40ch] text-center text-sm">
+          Pick any of the following agreements below and start signing to get started
+        </p>
+      </div>
+
+      <div className="mt-8 w-full">
+        <div className="dark:divide-foreground/30 dark:border-foreground/30 divide-y-2 divide-neutral-200 overflow-hidden rounded-lg border-2 border-neutral-200">
+          <div className="text-muted-foreground dark:bg-foreground/20 bg-neutral-50 p-4 font-medium">
+            Documents
+          </div>
+
+          {Array(rows)
+            .fill(0)
+            .map((_, index) => (
+              <div
+                key={index}
+                className="bg-background flex items-center justify-between gap-x-6 p-4"
+              >
+                <div className="flex items-center gap-x-2">
+                  <File className="text-muted-foreground/80 h-8 w-8" strokeWidth={1.5} />
+
+                  <div className="space-y-2">
+                    <div className="dark:bg-foreground/30 h-1.5 w-24 rounded-full bg-neutral-300 md:w-36" />
+                    <div className="dark:bg-foreground/20 h-1.5 w-16 rounded-full bg-neutral-200 md:w-24" />
+                  </div>
+                </div>
+
+                <div className="flex-shrink-0">
+                  <Button type="button" size="sm" className="pointer-events-none w-32">
+                    Sign
+                  </Button>
+                </div>
+              </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};