feat: copy signing link from avatar stack (#658)

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

@@ -6,8 +6,8 @@ import { Loader } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { FindResultSet } from '@documenso/lib/types/find-result-set';
+import type { FindResultSet } from '@documenso/lib/types/find-result-set';
-import { Document, Recipient, User } from '@documenso/prisma/client';
+import type { Document, Recipient, User } from '@documenso/prisma/client';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
 

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

@@ -0,0 +1,46 @@
+'use client';
+
+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 { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
+import type { Recipient } from '@documenso/prisma/client';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { StackAvatar } from './stack-avatar';
+
+export type AvatarWithRecipientProps = {
+  recipient: Recipient;
+};
+
+export function AvatarWithRecipient({ recipient }: AvatarWithRecipientProps) {
+  const [, copy] = useCopyToClipboard();
+  const { toast } = useToast();
+
+  const onRecipientClick = () => {
+    void copy(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/sign/${recipient.token}`).then(() => {
+      toast({
+        title: 'Copied to clipboard',
+        description: 'The signing link has been copied to your clipboard.',
+      });
+    });
+  };
+
+  return (
+    <div className="my-1 flex cursor-pointer items-center gap-2" onClick={onRecipientClick}>
+      <StackAvatar
+        first={true}
+        key={recipient.id}
+        type={getRecipientType(recipient)}
+        fallbackText={recipientAbbreviation(recipient)}
+      />
+      <span
+        className="text-muted-foreground text-sm hover:underline"
+        title="Click to copy signing link for sending to recipient"
+      >
+        {recipient.email}
+      </span>
+    </div>
+  );
+}

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

@@ -1,6 +1,6 @@
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
-import { Recipient } from '@documenso/prisma/client';
+import type { Recipient } from '@documenso/prisma/client';
 import {
   Tooltip,
   TooltipContent,
@@ -8,6 +8,7 @@ import {
   TooltipTrigger,
 } from '@documenso/ui/primitives/tooltip';
 
+import { AvatarWithRecipient } from './avatar-with-recipient';
 import { StackAvatar } from './stack-avatar';
 import { StackAvatars } from './stack-avatars';
 
@@ -85,15 +86,7 @@ export const StackAvatarsWithTooltip = ({
               <div>
                 <h1 className="text-base font-medium">Opened</h1>
                 {openedRecipients.map((recipient: Recipient) => (
-                  <div key={recipient.id} className="my-1 flex items-center gap-2">
+                  <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-                    <StackAvatar
-                      first={true}
-                      key={recipient.id}
-                      type={getRecipientType(recipient)}
-                      fallbackText={recipientAbbreviation(recipient)}
-                    />
-                    <span className="text-muted-foreground text-sm">{recipient.email}</span>
-                  </div>
                 ))}
               </div>
             )}
@@ -102,15 +95,7 @@ export const StackAvatarsWithTooltip = ({
               <div>
                 <h1 className="text-base font-medium">Uncompleted</h1>
                 {uncompletedRecipients.map((recipient: Recipient) => (
-                  <div key={recipient.id} className="my-1 flex items-center gap-2">
+                  <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-                    <StackAvatar
-                      first={true}
-                      key={recipient.id}
-                      type={getRecipientType(recipient)}
-                      fallbackText={recipientAbbreviation(recipient)}
-                    />
-                    <span className="text-muted-foreground text-sm">{recipient.email}</span>
-                  </div>
                 ))}
               </div>
             )}

packages/lib/server-only/document/find-documents.ts

@@ -2,10 +2,11 @@ import { DateTime } from 'luxon';
 import { P, match } from 'ts-pattern';
 
 import { prisma } from '@documenso/prisma';
-import { Document, Prisma, SigningStatus } from '@documenso/prisma/client';
+import type { Document, Prisma } from '@documenso/prisma/client';
+import { SigningStatus } from '@documenso/prisma/client';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 
-import { FindResultSet } from '../../types/find-result-set';
+import type { FindResultSet } from '../../types/find-result-set';
 
 export interface FindDocumentsOptions {
   userId: number;
@@ -160,19 +161,11 @@ export const findDocuments = async ({
     }),
   ]);
 
-  const maskedData = data.map((doc) => ({
-    ...doc,
-    Recipient: doc.Recipient.map((recipient) => ({
-      ...recipient,
-      token: recipient.email === user.email ? recipient.token : '',
-    })),
-  }));
-
   return {
-    data: maskedData,
+    data,
     count,
     currentPage: Math.max(page, 1),
     perPage,
     totalPages: Math.ceil(count / perPage),
-  } satisfies FindResultSet<typeof maskedData>;
+  } satisfies FindResultSet<typeof data>;
 };