fix: tidy code and update endpoints

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

@@ -7,7 +7,11 @@ import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
 import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
 
 export type DataTableActionButtonProps = {
   row: Document & {
@@ -18,11 +22,16 @@ export type DataTableActionButtonProps = {
 
 export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
   const { data: session } = useSession();
+  const { toast } = useToast();
+  const [, copyToClipboard] = useCopyToClipboard();
 
   if (!session) {
     return null;
   }
 
+  const { mutateAsync: createOrGetShareLink, isLoading: isCreatingShareLink } =
+    trpc.shareLink.createOrGetShareLink.useMutation();
+
   const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
 
   const isOwner = row.User.id === session.user.id;
@@ -32,6 +41,20 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
   const isComplete = row.status === DocumentStatus.COMPLETED;
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
 
+  const onShareClick = async () => {
+    const { slug } = await createOrGetShareLink({
+      token: recipient?.token,
+      documentId: row.id,
+    });
+
+    await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null);
+
+    toast({
+      title: 'Copied to clipboard',
+      description: 'The sharing link has been copied to your clipboard.',
+    });
+  };
+
   return match({
     isOwner,
     isRecipient,
@@ -57,8 +80,8 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
       </Button>
     ))
     .otherwise(() => (
-      <Button className="w-24" disabled>
-        <Share className="-ml-1 mr-2 h-4 w-4" />
+      <Button className="w-24" loading={isCreatingShareLink} onClick={onShareClick}>
+        {!isCreatingShareLink && <Share className="-ml-1 mr-2 h-4 w-4" />}
         Share
       </Button>
     ));

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

@@ -7,6 +7,7 @@ import {
   Download,
   Edit,
   History,
+  Loader,
   MoreHorizontal,
   Pencil,
   Share,
@@ -18,7 +19,8 @@ import { useSession } from 'next-auth/react';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { Document, DocumentStatus, Recipient, User } from '@documenso/prisma/client';
 import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
-import { trpc } from '@documenso/trpc/client';
+import { trpc as trpcClient } from '@documenso/trpc/client';
+import { trpc as trpcReact } from '@documenso/trpc/react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -26,6 +28,9 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
 
 export type DataTableActionDropdownProps = {
   row: Document & {
@@ -36,11 +41,16 @@ export type DataTableActionDropdownProps = {
 
 export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
   const { data: session } = useSession();
+  const { toast } = useToast();
+  const [, copyToClipboard] = useCopyToClipboard();
 
   if (!session) {
     return null;
   }
 
+  const { mutateAsync: createOrGetShareLink, isLoading: isCreatingShareLink } =
+    trpcReact.shareLink.createOrGetShareLink.useMutation();
+
   const recipient = row.Recipient.find((recipient) => recipient.email === session.user.email);
 
   const isOwner = row.User.id === session.user.id;
@@ -50,15 +60,29 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
   const isComplete = row.status === DocumentStatus.COMPLETED;
   // const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
 
+  const onShareClick = async () => {
+    const { slug } = await createOrGetShareLink({
+      token: recipient?.token,
+      documentId: row.id,
+    });
+
+    await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null);
+
+    toast({
+      title: 'Copied to clipboard',
+      description: 'The sharing link has been copied to your clipboard.',
+    });
+  };
+
   const onDownloadClick = async () => {
     let document: DocumentWithData | null = null;
 
     if (!recipient) {
-      document = await trpc.document.getDocumentById.query({
+      document = await trpcClient.document.getDocumentById.query({
         id: row.id,
       });
     } else {
-      document = await trpc.document.getDocumentByToken.query({
+      document = await trpcClient.document.getDocumentByToken.query({
         token: recipient.token,
       });
     }
@@ -135,8 +159,12 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
           Resend
         </DropdownMenuItem>
 
-        <DropdownMenuItem disabled>
+        <DropdownMenuItem onClick={onShareClick}>
+          {isCreatingShareLink ? (
+            <Loader className="mr-2 h-4 w-4" />
+          ) : (
             <Share className="mr-2 h-4 w-4" />
+          )}
           Share
         </DropdownMenuItem>
       </DropdownMenuContent>

apps/web/src/app/(share)/share/[slug]/opengraph-image.tsx

@@ -1,5 +1,9 @@
 import { ImageResponse } from 'next/server';
 
+import { P, match } from 'ts-pattern';
+
+import { getRecipientOrSenderByShareLinkSlug } from '@documenso/lib/server-only/share/get-recipient-or-sender-by-share-link-slug';
+
 export const runtime = 'edge';
 
 const CARD_OFFSET_TOP = 152;
@@ -13,14 +17,31 @@ const size = {
 };
 
 type SharePageOpenGraphImageProps = {
-  params: { shareId: string };
+  params: { slug: string };
 };
 
-export default async function Image({ params: { shareId } }: SharePageOpenGraphImageProps) {
-  // Cannot use trpc here and prisma does not work in the browser so I cannot fetch the client
-  // const { data } = trpc.share.get.useQuery({ shareId });
+export default async function Image({ params: { slug } }: SharePageOpenGraphImageProps) {
+  const recipientOrSender = await getRecipientOrSenderByShareLinkSlug({ slug }).catch(() => null);
 
-  const signature = shareId;
+  if (!recipientOrSender) {
+    return null;
+  }
+
+  const signatureImage = match(recipientOrSender)
+    .with({ Signature: P.array(P._) }, (recipient) => {
+      return recipient.Signature?.[0]?.signatureImageAsBase64 || null;
+    })
+    .otherwise((sender) => {
+      return sender.signature || null;
+    });
+
+  const signatureName = match(recipientOrSender)
+    .with({ Signature: P.array(P._) }, (recipient) => {
+      return recipient.name || recipient.email;
+    })
+    .otherwise((sender) => {
+      return sender.name || sender.email;
+    });
 
   const [interSemiBold, interRegular, caveatRegular, shareFrameImage] = await Promise.all([
     fetch(new URL('./../../../../assets/inter-semibold.ttf', import.meta.url)).then(async (res) =>
@@ -43,19 +64,36 @@ export default async function Image({ params: { shareId } }: SharePageOpenGraphI
         {/* @ts-expect-error Lack of typing from ImageResponse */}
         <img src={shareFrameImage} alt="og-share-frame" tw="absolute inset-0 w-full h-full" />
 
-        <p
+        {signatureImage ? (
+          <div
             tw="absolute py-6 px-12 -mt-2 flex items-center justify-center text-center"
             style={{
-            fontFamily: 'Caveat',
-            fontSize: `${Math.max(Math.min((CARD_WIDTH * 1.5) / signature.length, 80), 36)}px`,
               top: `${CARD_OFFSET_TOP}px`,
               left: `${CARD_OFFSET_LEFT}px`,
               width: `${CARD_WIDTH}px`,
               height: `${CARD_HEIGHT}px`,
             }}
           >
-          {signature}
+            <img src={signatureImage} alt="signature" tw="w-full h-full" />
+          </div>
+        ) : (
+          <p
+            tw="absolute py-6 px-12 -mt-2 flex items-center justify-center text-center"
+            style={{
+              fontFamily: 'Caveat',
+              fontSize: `${Math.max(
+                Math.min((CARD_WIDTH * 1.5) / signatureName.length, 80),
+                36,
+              )}px`,
+              top: `${CARD_OFFSET_TOP}px`,
+              left: `${CARD_OFFSET_LEFT}px`,
+              width: `${CARD_WIDTH}px`,
+              height: `${CARD_HEIGHT}px`,
+            }}
+          >
+            {signatureName}
           </p>
+        )}
 
         <div
           tw="absolute absolute flex flex-col items-center justify-center pt-2.5 w-full"

apps/web/src/app/(share)/share/[slug]/page.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
-import { getSharingId } from '@documenso/lib/server-only/share/get-share-id';
+import { getShareLinkBySlug } from '@documenso/lib/server-only/share/get-share-link-by-slug';
 
 import Redirect from './redirect';
 
@@ -13,16 +13,16 @@ export const metadata: Metadata = {
 
 export type SharePageProps = {
   params: {
-    shareId?: string;
+    slug?: string;
   };
 };
 
-export default async function SharePage({ params: { shareId } }: SharePageProps) {
-  if (!shareId) {
+export default async function SharePage({ params: { slug } }: SharePageProps) {
+  if (!slug) {
     return notFound();
   }
 
-  const share = await getSharingId({ shareId });
+  const share = await getShareLinkBySlug({ slug }).catch(() => null);
 
   if (!share) {
     return notFound();

apps/web/src/app/(share)/share/[slug]/redirect.tsx

@@ -5,15 +5,15 @@ import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 
 export default function Redirect() {
-  const router = useRouter();
+  const { push } = useRouter();
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      router.push('/');
+      push('/');
     }, 3000);
 
     return () => clearTimeout(timer);
-  }, []);
+  }, [push]);
 
   return <div></div>;
 }

apps/web/src/app/(signing)/sign/[token]/complete/page.tsx

@@ -88,7 +88,7 @@ export default async function CompletedSigningPage({
         ))}
 
       <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
-        <ShareButton documentId={document.id} recipientId={recipient.id} />
+        <ShareButton documentId={document.id} token={recipient.token} />
 
         <DownloadButton
           className="flex-1"

apps/web/src/app/(signing)/sign/[token]/complete/share-button.tsx

@@ -10,12 +10,13 @@ import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 
 export type ShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
-  recipientId: number;
+  token: string;
   documentId: number;
 };
 
-export const ShareButton = ({ recipientId, documentId }: ShareButtonProps) => {
-  const { mutateAsync: createShareId, isLoading } = trpc.share.create.useMutation();
+export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
+  const { mutateAsync: createOrGetShareLink, isLoading } =
+    trpc.shareLink.createOrGetShareLink.useMutation();
 
   const router = useRouter();
 
@@ -23,19 +24,17 @@ export const ShareButton = ({ recipientId, documentId }: ShareButtonProps) => {
     <Button
       variant="outline"
       className="flex-1"
-      disabled={!recipientId || !documentId || isLoading}
+      disabled={!token || !documentId || isLoading}
       onClick={async () => {
         console.log('Signing Clicked');
 
-        const response = await createShareId({
-          recipientId,
+        const { slug } = await createOrGetShareLink({
+          token,
           documentId,
         });
 
-        console.log('response', response);
-
         // TODO: Router delaying...
-        return router.push(`/share/${response.link}`);
+        return router.push(`/share/${slug}`);
       }}
     >
       <Share className="mr-2 h-5 w-5" />

packages/lib/server-only/share/create-or-get-share-link.ts

@@ -0,0 +1,58 @@
+import { P, match } from 'ts-pattern';
+
+import { prisma } from '@documenso/prisma';
+
+import { alphaid } from '../../universal/id';
+
+export type CreateSharingIdOptions =
+  | {
+      documentId: number;
+      token: string;
+    }
+  | {
+      documentId: number;
+      userId: number;
+    };
+
+export const createOrGetShareLink = async ({ documentId, ...options }: CreateSharingIdOptions) => {
+  const email = await match(options)
+    .with({ token: P.string }, async ({ token }) => {
+      return await prisma.recipient
+        .findFirst({
+          where: {
+            documentId,
+            token,
+          },
+        })
+        .then((recipient) => recipient?.email);
+    })
+    .with({ userId: P.number }, async ({ userId }) => {
+      return await prisma.user
+        .findFirst({
+          where: {
+            id: userId,
+          },
+        })
+        .then((user) => user?.email);
+    })
+    .exhaustive();
+
+  if (!email) {
+    throw new Error('Unable to create share link for document with the given email');
+  }
+
+  return await prisma.documentShareLink.upsert({
+    where: {
+      documentId_email: {
+        email,
+        documentId,
+      },
+    },
+    create: {
+      email,
+      documentId,
+      slug: alphaid(14),
+    },
+    update: {},
+  });
+};

packages/lib/server-only/share/create-share-id.ts

@@ -1,20 +0,0 @@
-import { nanoid } from 'nanoid';
-
-import { prisma } from '@documenso/prisma';
-
-export interface CreateSharingIdOptions {
-  documentId: number;
-  recipientId: number;
-}
-
-export const createSharingId = async ({ documentId, recipientId }: CreateSharingIdOptions) => {
-  const result = await prisma.share.create({
-    data: {
-      recipientId,
-      documentId,
-      link: nanoid(),
-    },
-  });
-
-  return result;
-};

packages/lib/server-only/share/get-recipient-or-sender-by-share-link-slug.ts

@@ -0,0 +1,42 @@
+import { prisma } from '@documenso/prisma';
+
+export type GetRecipientOrSenderByShareLinkSlugOptions = {
+  slug: string;
+};
+
+export const getRecipientOrSenderByShareLinkSlug = async ({
+  slug,
+}: GetRecipientOrSenderByShareLinkSlugOptions) => {
+  const { documentId, email } = await prisma.documentShareLink.findFirstOrThrow({
+    where: {
+      slug,
+    },
+  });
+
+  const recipient = await prisma.recipient.findFirst({
+    where: {
+      documentId,
+      email,
+    },
+    include: {
+      Signature: true,
+    },
+  });
+
+  if (recipient) {
+    return recipient;
+  }
+
+  const sender = await prisma.user.findFirst({
+    where: {
+      Document: { some: { id: documentId } },
+      email,
+    },
+  });
+
+  if (sender) {
+    return sender;
+  }
+
+  throw new Error('Recipient or sender not found');
+};

packages/lib/server-only/share/get-share-id.ts

@@ -1,18 +0,0 @@
-import { prisma } from '@documenso/prisma';
-
-export interface GetSharingIdOptions {
-  shareId: string;
-}
-
-export const getSharingId = async ({ shareId }: GetSharingIdOptions) => {
-  const result = await prisma.share.findUnique({
-    where: {
-      link: shareId,
-    },
-    include: {
-      recipent: true,
-    },
-  });
-
-  return result;
-};

packages/lib/server-only/share/get-share-link-by-slug.ts

@@ -0,0 +1,13 @@
+import { prisma } from '@documenso/prisma';
+
+export type GetShareLinkBySlugOptions = {
+  slug: string;
+};
+
+export const getShareLinkBySlug = async ({ slug }: GetShareLinkBySlugOptions) => {
+  return await prisma.documentShareLink.findFirstOrThrow({
+    where: {
+      slug,
+    },
+  });
+};

packages/prisma/migrations/20230920060743_update_share_link_schema/migration.sql

@@ -0,0 +1,35 @@
+/*
+  Warnings:
+
+  - You are about to drop the `Share` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropForeignKey
+ALTER TABLE "Share" DROP CONSTRAINT "Share_documentId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Share" DROP CONSTRAINT "Share_recipientId_fkey";
+
+-- DropTable
+DROP TABLE "Share";
+
+-- CreateTable
+CREATE TABLE "DocumentShareLink" (
+    "id" SERIAL NOT NULL,
+    "email" TEXT NOT NULL,
+    "slug" TEXT NOT NULL,
+    "documentId" INTEGER NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "DocumentShareLink_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "DocumentShareLink_slug_key" ON "DocumentShareLink"("slug");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "DocumentShareLink_documentId_email_key" ON "DocumentShareLink"("documentId", "email");
+
+-- AddForeignKey
+ALTER TABLE "DocumentShareLink" ADD CONSTRAINT "DocumentShareLink_documentId_fkey" FOREIGN KEY ("documentId") REFERENCES "Document"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

packages/prisma/schema.prisma

@@ -108,7 +108,7 @@ model Document {
   status         DocumentStatus      @default(DRAFT)
   Recipient      Recipient[]
   Field          Field[]
-  Share     Share[]
+  ShareLink      DocumentShareLink[]
   documentDataId String
   documentData   DocumentData        @relation(fields: [documentDataId], references: [id], onDelete: Cascade)
   createdAt      DateTime            @default(now())
@@ -160,7 +160,6 @@ model Recipient {
   Document      Document      @relation(fields: [documentId], references: [id], onDelete: Cascade)
   Field         Field[]
   Signature     Signature[]
-  Share         Share[]
 
   @@unique([documentId, email])
 }
@@ -203,13 +202,15 @@ model Signature {
   Field     Field     @relation(fields: [fieldId], references: [id], onDelete: Restrict)
 }
 
-model Share {
+model DocumentShareLink {
   id         Int      @id @default(autoincrement())
-  recipientId Int
-  recipent    Recipient @relation(fields: [recipientId], references: [id])
-  link        String    @unique
+  email      String
+  slug       String   @unique
+  documentId Int
   createdAt  DateTime @default(now())
   updatedAt  DateTime @updatedAt
-  document    Document? @relation(fields: [documentId], references: [id])
-  documentId  Int?
+
+  document Document @relation(fields: [documentId], references: [id])
+
+  @@unique([documentId, email])
 }

packages/trpc/server/router.ts

@@ -2,7 +2,7 @@ import { authRouter } from './auth-router/router';
 import { documentRouter } from './document-router/router';
 import { fieldRouter } from './field-router/router';
 import { profileRouter } from './profile-router/router';
-import { shareRouter } from './share-router/router';
+import { shareLinkRouter } from './share-link-router/router';
 import { procedure, router } from './trpc';
 
 export const appRouter = router({
@@ -11,7 +11,7 @@ export const appRouter = router({
   profile: profileRouter,
   document: documentRouter,
   field: fieldRouter,
-  share: shareRouter,
+  shareLink: shareLinkRouter,
 });
 
 export type AppRouter = typeof appRouter;

packages/trpc/server/share-link-router/router.ts

@@ -0,0 +1,35 @@
+import { TRPCError } from '@trpc/server';
+
+import { createOrGetShareLink } from '@documenso/lib/server-only/share/create-or-get-share-link';
+
+import { procedure, router } from '../trpc';
+import { ZCreateOrGetShareLinkMutationSchema } from './schema';
+
+export const shareLinkRouter = router({
+  createOrGetShareLink: procedure
+    .input(ZCreateOrGetShareLinkMutationSchema)
+    .mutation(async ({ ctx, input }) => {
+      try {
+        const { documentId, token } = input;
+
+        if (token) {
+          return await createOrGetShareLink({ documentId, token });
+        }
+
+        if (!ctx.user?.id) {
+          throw new Error(
+            'You must either provide a token or be logged in to create a sharing link.',
+          );
+        }
+
+        return await createOrGetShareLink({ documentId, userId: ctx.user.id });
+      } catch (err) {
+        console.error(err);
+
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to create a sharing link.',
+        });
+      }
+    }),
+});

packages/trpc/server/share-link-router/schema.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export const ZCreateOrGetShareLinkMutationSchema = z.object({
+  documentId: z.number(),
+  token: z.string().optional(),
+});
+
+export type TCreateOrGetShareLinkMutationSchema = z.infer<
+  typeof ZCreateOrGetShareLinkMutationSchema
+>;

packages/trpc/server/share-router/router.ts

@@ -1,38 +0,0 @@
-import { TRPCError } from '@trpc/server';
-
-import { createSharingId } from '@documenso/lib/server-only/share/create-share-id';
-import { getSharingId } from '@documenso/lib/server-only/share/get-share-id';
-
-import { procedure, router } from '../trpc';
-import { ZShareLinkCreateSchema, ZShareLinkGetSchema } from './schema';
-
-export const shareRouter = router({
-  create: procedure.input(ZShareLinkCreateSchema).mutation(async ({ input }) => {
-    try {
-      const { documentId, recipientId } = input;
-
-      return await createSharingId({ documentId, recipientId });
-    } catch (err) {
-      console.error(err);
-
-      throw new TRPCError({
-        code: 'BAD_REQUEST',
-        message: 'We were unable to create a sharing link.',
-      });
-    }
-  }),
-  get: procedure.input(ZShareLinkGetSchema).query(async ({ input }) => {
-    try {
-      const { shareId } = input;
-
-      return await getSharingId({ shareId });
-    } catch (err) {
-      console.error(err);
-
-      throw new TRPCError({
-        code: 'BAD_REQUEST',
-        message: 'We were unable to create a sharing link.',
-      });
-    }
-  }),
-});

packages/trpc/server/share-router/schema.ts

@@ -1,13 +0,0 @@
-import { z } from 'zod';
-
-export const ZShareLinkCreateSchema = z.object({
-  documentId: z.number(),
-  recipientId: z.number(),
-});
-
-export const ZShareLinkGetSchema = z.object({
-  shareId: z.string(),
-});
-
-export type ZShareLinkCreateSchema = z.infer<typeof ZShareLinkCreateSchema>;
-export type ZShareLinkGetSchema = z.infer<typeof ZShareLinkGetSchema>;