Merge branch 'main' into feat/disable-access-unverified-users

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

@@ -52,24 +52,22 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
       {...props}
     >
       <div className="flex items-baseline gap-x-6">
-        {navigationLinks
-          .filter(({ href }) => href !== '/templates' || rootHref === '') // Remove templates for team pages.
-          .map(({ href, label }) => (
-            <Link
-              key={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-foreground dark:text-muted-foreground': pathname?.startsWith(
-                    `${rootHref}${href}`,
-                  ),
-                },
-              )}
-            >
-              {label}
-            </Link>
-          ))}
+        {navigationLinks.map(({ href, label }) => (
+          <Link
+            key={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-foreground dark:text-muted-foreground': pathname?.startsWith(
+                  `${rootHref}${href}`,
+                ),
+              },
+            )}
+          >
+            {label}
+          </Link>
+        ))}
       </div>
 
       <CommandMenu open={open} onOpenChange={setOpen} />

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

@@ -7,6 +7,7 @@ import { useParams } from 'next/navigation';
 
 import { MenuIcon, SearchIcon } from 'lucide-react';
 
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 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';
@@ -18,6 +19,7 @@ import { CommandMenu } from '../common/command-menu';
 import { DesktopNav } from './desktop-nav';
 import { MenuSwitcher } from './menu-switcher';
 import { MobileNavigation } from './mobile-navigation';
+import { ProfileDropdown } from './profile-dropdown';
 
 export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
   user: User;
@@ -27,6 +29,10 @@ export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
 export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
   const params = useParams();
 
+  const { getFlag } = useFeatureFlags();
+
+  const isTeamsEnabled = getFlag('app_teams');
+
   const [isCommandMenuOpen, setIsCommandMenuOpen] = useState(false);
   const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
   const [scrollY, setScrollY] = useState(0);
@@ -41,6 +47,34 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
     return () => window.removeEventListener('scroll', onScroll);
   }, []);
 
+  if (!isTeamsEnabled) {
+    return (
+      <header
+        className={cn(
+          'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-[60] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
+          scrollY > 5 && 'border-b-border',
+          className,
+        )}
+        {...props}
+      >
+        <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"
+          >
+            <Logo className="h-6 w-auto" />
+          </Link>
+
+          <DesktopNav />
+
+          <div className="flex gap-x-4 md:ml-8">
+            <ProfileDropdown user={user} />
+          </div>
+        </div>
+      </header>
+    );
+  }
+
   return (
     <header
       className={cn(
@@ -66,11 +100,11 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
 
         <div className="flex flex-row items-center space-x-4 md:hidden">
           <button onClick={() => setIsCommandMenuOpen(true)}>
-            <SearchIcon className="h-6 w-6" />
+            <SearchIcon className="text-muted-foreground h-6 w-6" />
           </button>
 
           <button onClick={() => setIsHamburgerMenuOpen(true)}>
-            <MenuIcon className="h-6 w-6" />
+            <MenuIcon className="text-muted-foreground h-6 w-6" />
           </button>
 
           <CommandMenu open={isCommandMenuOpen} onOpenChange={setIsCommandMenuOpen} />

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

@@ -6,7 +6,7 @@ import { usePathname } from 'next/navigation';
 import { CheckCircle2, ChevronsUpDown, Plus, Settings2 } from 'lucide-react';
 import { signOut } from 'next-auth/react';
 
-import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+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';
@@ -71,6 +71,22 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
     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>
@@ -100,7 +116,7 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
             <DropdownMenuLabel>Personal</DropdownMenuLabel>
 
             <DropdownMenuItem asChild>
-              <Link href="/">
+              <Link href={formatRedirectUrlOnSwitch()}>
                 <AvatarWithText
                   avatarFallback={formatAvatarFallback()}
                   primaryText={user.name}
@@ -152,7 +168,7 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
 
             {teams.map((team) => (
               <DropdownMenuItem asChild key={team.id}>
-                <Link href={`/t/${team.url}`}>
+                <Link href={formatRedirectUrlOnSwitch(team.url)}>
                   <AvatarWithText
                     avatarFallback={formatAvatarFallback(team.name)}
                     primaryText={team.name}

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

@@ -42,12 +42,12 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
       href: '/settings/profile',
       text: 'Settings',
     },
-  ].filter(({ text, href }) => text !== 'Templates' || href === '/templates'); // Filter out templates for teams.
+  ];
 
   return (
     <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
       <SheetContent className="flex w-full max-w-[400px] flex-col">
-        <Link href="/" className="z-10" onClick={handleMenuItemClick}>
+        <Link href="/" onClick={handleMenuItemClick}>
           <Image
             src={LogoImage}
             alt="Documenso Logo"

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

@@ -0,0 +1,169 @@
+'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 { extractInitials } 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
+    ? extractInitials(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)/settings/layout/desktop-nav.tsx

@@ -19,6 +19,7 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
   const { getFlag } = useFeatureFlags();
 
   const isBillingEnabled = getFlag('app_billing');
+  const isTeamsEnabled = getFlag('app_teams');
 
   return (
     <div className={cn('flex flex-col gap-y-2', className)} {...props}>
@@ -35,18 +36,20 @@ 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>
+      {isTeamsEnabled && (
+        <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

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

@@ -19,6 +19,7 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
   const { getFlag } = useFeatureFlags();
 
   const isBillingEnabled = getFlag('app_billing');
+  const isTeamsEnabled = getFlag('app_teams');
 
   return (
     <div
@@ -38,18 +39,20 @@ 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>
+      {isTeamsEnabled && (
+        <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

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

@@ -158,6 +158,7 @@ export const CreateTeamCheckoutDialog = ({
 
               <Button
                 type="submit"
+                disabled={selectedPrice.interval === 'yearly'}
                 loading={isCreatingCheckout}
                 onClick={async () =>
                   createCheckout({
@@ -166,7 +167,7 @@ export const CreateTeamCheckoutDialog = ({
                   })
                 }
               >
-                Checkout
+                {selectedPrice.interval === 'monthly' ? 'Checkout' : 'Coming soon'}
               </Button>
             </DialogFooter>
           </div>

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

@@ -30,13 +30,11 @@ export const AuthenticatorApp = ({ isTwoFactorEnabled }: AuthenticatorAppProps)
       </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)}
       />