Merge branch 'main' into feat/add-website-cta

apps/marketing/package.json

@@ -36,7 +36,7 @@
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.11.0",
     "recharts": "^2.7.2",
-    "sharp": "0.33.1",
+    "sharp": "^0.33.1",
     "typescript": "5.2.2",
     "zod": "^3.22.4"
   },

apps/web/package.json

@@ -43,7 +43,7 @@
     "react-icons": "^4.11.0",
     "react-rnd": "^10.4.1",
     "remeda": "^1.27.1",
-    "sharp": "0.33.1",
+    "sharp": "^0.33.1",
     "ts-pattern": "^5.0.5",
     "ua-parser-js": "^1.0.37",
     "uqr": "^0.1.2",

apps/web/src/app/(dashboard)/documents/data-table.tsx

@@ -76,14 +76,13 @@ export const DocumentsDataTable = ({
           {
             header: 'Recipient',
             accessorKey: 'recipient',
-            cell: ({ row }) => {
-              return <StackAvatarsWithTooltip recipients={row.original.Recipient} />;
-            },
+            cell: ({ row }) => <StackAvatarsWithTooltip recipients={row.original.Recipient} />,
           },
           {
             header: 'Status',
             accessorKey: 'status',
             cell: ({ row }) => <DocumentStatus status={row.getValue('status')} />,
+            size: 140,
           },
           {
             header: 'Actions',

apps/web/src/app/(dashboard)/templates/data-table-templates.tsx

@@ -25,7 +25,11 @@ type TemplateWithRecipient = Template & {
 };
 
 type TemplatesDataTableProps = {
-  templates: TemplateWithRecipient[];
+  templates: Array<
+    TemplateWithRecipient & {
+      team: { id: number; url: string } | null;
+    }
+  >;
   perPage: number;
   page: number;
   totalPages: number;

apps/web/src/app/(dashboard)/templates/data-table-title.tsx

@@ -1,23 +1,35 @@
+'use client';
+
 import Link from 'next/link';
 
 import { useSession } from 'next-auth/react';
 
-import { Template } from '@documenso/prisma/client';
+import { formatTemplatesPath } from '@documenso/lib/utils/teams';
+import type { Template } from '@documenso/prisma/client';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
 
 export type DataTableTitleProps = {
-  row: Template;
+  row: Template & {
+    team: { id: number; url: string } | null;
+  };
 };
 
 export const DataTableTitle = ({ row }: DataTableTitleProps) => {
   const { data: session } = useSession();
+  const team = useOptionalCurrentTeam();
 
   if (!session) {
     return null;
   }
 
+  const isCurrentTeamTemplate = team?.url && row.team?.url === team?.url;
+
+  const templatesPath = formatTemplatesPath(isCurrentTeamTemplate ? team?.url : undefined);
+
   return (
     <Link
-      href={`/templates/${row.id}`}
+      href={`${templatesPath}/${row.id}`}
       className="block max-w-[10rem] cursor-pointer truncate font-medium hover:underline md:max-w-[20rem]"
     >
       {row.title}

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

@@ -1,13 +1,12 @@
+'use client';
+
+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 {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@documenso/ui/primitives/tooltip';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
 
 import { AvatarWithRecipient } from './avatar-with-recipient';
 import { StackAvatar } from './stack-avatar';
@@ -24,6 +23,11 @@ export const StackAvatarsWithTooltip = ({
   position,
   children,
 }: StackAvatarsWithTooltipProps) => {
+  const [open, setOpen] = useState(false);
+
+  const isControlled = useRef(false);
+  const isMouseOverTimeout = useRef<NodeJS.Timeout | null>(null);
+
   const waitingRecipients = recipients.filter(
     (recipient) => getRecipientType(recipient) === 'waiting',
   );
@@ -40,66 +44,105 @@ export const StackAvatarsWithTooltip = ({
     (recipient) => getRecipientType(recipient) === 'unsigned',
   );
 
+  const onMouseEnter = () => {
+    if (isMouseOverTimeout.current) {
+      clearTimeout(isMouseOverTimeout.current);
+    }
+
+    if (isControlled.current) {
+      return;
+    }
+
+    isMouseOverTimeout.current = setTimeout(() => {
+      setOpen((o) => (!o ? true : o));
+    }, 200);
+  };
+
+  const onMouseLeave = () => {
+    if (isMouseOverTimeout.current) {
+      clearTimeout(isMouseOverTimeout.current);
+    }
+
+    if (isControlled.current) {
+      return;
+    }
+
+    setTimeout(() => {
+      setOpen((o) => (o ? false : o));
+    }, 200);
+  };
+
+  const onOpenChange = (newOpen: boolean) => {
+    isControlled.current = newOpen;
+
+    setOpen(newOpen);
+  };
+
   return (
-    <TooltipProvider>
-      <Tooltip delayDuration={200}>
-        <TooltipTrigger className="flex cursor-pointer">
-          {children || <StackAvatars recipients={recipients} />}
-        </TooltipTrigger>
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger
+        className="flex cursor-pointer"
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        {children || <StackAvatars recipients={recipients} />}
+      </PopoverTrigger>
 
-        <TooltipContent side={position}>
-          <div className="flex flex-col gap-y-5 p-1">
-            {completedRecipients.length > 0 && (
-              <div>
-                <h1 className="text-base font-medium">Completed</h1>
-                {completedRecipients.map((recipient: Recipient) => (
-                  <div key={recipient.id} className="my-1 flex items-center gap-2">
-                    <StackAvatar
-                      first={true}
-                      key={recipient.id}
-                      type={getRecipientType(recipient)}
-                      fallbackText={recipientAbbreviation(recipient)}
-                    />
-                    <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>
-                ))}
+      <PopoverContent
+        side={position}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        className="flex flex-col gap-y-5 py-2"
+      >
+        {completedRecipients.length > 0 && (
+          <div>
+            <h1 className="text-base font-medium">Completed</h1>
+            {completedRecipients.map((recipient: Recipient) => (
+              <div key={recipient.id} className="my-1 flex items-center gap-2">
+                <StackAvatar
+                  first={true}
+                  key={recipient.id}
+                  type={getRecipientType(recipient)}
+                  fallbackText={recipientAbbreviation(recipient)}
+                />
+                <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>
-            )}
-
-            {waitingRecipients.length > 0 && (
-              <div>
-                <h1 className="text-base font-medium">Waiting</h1>
-                {waitingRecipients.map((recipient: Recipient) => (
-                  <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-                ))}
-              </div>
-            )}
-
-            {openedRecipients.length > 0 && (
-              <div>
-                <h1 className="text-base font-medium">Opened</h1>
-                {openedRecipients.map((recipient: Recipient) => (
-                  <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-                ))}
-              </div>
-            )}
-
-            {uncompletedRecipients.length > 0 && (
-              <div>
-                <h1 className="text-base font-medium">Uncompleted</h1>
-                {uncompletedRecipients.map((recipient: Recipient) => (
-                  <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-                ))}
-              </div>
-            )}
+            ))}
           </div>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+        )}
+
+        {waitingRecipients.length > 0 && (
+          <div>
+            <h1 className="text-base font-medium">Waiting</h1>
+            {waitingRecipients.map((recipient: Recipient) => (
+              <AvatarWithRecipient key={recipient.id} recipient={recipient} />
+            ))}
+          </div>
+        )}
+
+        {openedRecipients.length > 0 && (
+          <div>
+            <h1 className="text-base font-medium">Opened</h1>
+            {openedRecipients.map((recipient: Recipient) => (
+              <AvatarWithRecipient key={recipient.id} recipient={recipient} />
+            ))}
+          </div>
+        )}
+
+        {uncompletedRecipients.length > 0 && (
+          <div>
+            <h1 className="text-base font-medium">Uncompleted</h1>
+            {uncompletedRecipients.map((recipient: Recipient) => (
+              <AvatarWithRecipient key={recipient.id} recipient={recipient} />
+            ))}
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
   );
 };

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
@@ -149,6 +149,13 @@ export const EnableAuthenticatorAppDialog = ({
     }
   };
 
+  useEffect(() => {
+    // Reset the form when the Dialog closes
+    if (!open) {
+      setupTwoFactorAuthenticationForm.reset();
+    }
+  }, [open, setupTwoFactorAuthenticationForm]);
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
@@ -92,6 +92,13 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
     }
   };
 
+  useEffect(() => {
+    // Reset the form when the Dialog closes
+    if (!open) {
+      viewRecoveryCodesForm.reset();
+    }
+  }, [open, viewRecoveryCodesForm]);
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">