feat: create sharing id for each recipient

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

@@ -1,16 +1,16 @@
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 
-import { CheckCircle2, Clock8, Share } from 'lucide-react';
+import { CheckCircle2, Clock8 } from 'lucide-react';
 import { match } from 'ts-pattern';
 
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { DocumentStatus, FieldType } from '@documenso/prisma/client';
-import { Button } from '@documenso/ui/primitives/button';
 
 import { DownloadButton } from './download-button';
+import { ShareButton } from './share-button';
 import { SigningCard } from './signing-card';
 
 export type CompletedSigningPageProps = {
@@ -88,11 +88,7 @@ export default async function CompletedSigningPage({
         ))}
 
       <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
-        {/* TODO: Hook this up */}
-        <Button variant="outline" className="flex-1">
-          <Share className="mr-2 h-5 w-5" />
-          Share
-        </Button>
+        <ShareButton documentId={document.id} recipientId={recipient.id} />
 
         <DownloadButton
           className="flex-1"

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

@@ -0,0 +1,41 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Share } from 'lucide-react';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type ShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
+  recipientId: number;
+  documentId: number;
+};
+
+export const ShareButton = ({ recipientId, documentId }: ShareButtonProps) => {
+  const { mutateAsync: createShareId } = trpc.share.create.useMutation();
+
+  const router = useRouter();
+
+  return (
+    <Button
+      variant="outline"
+      className="flex-1"
+      onClick={async () => {
+        // redirect to the share page
+        // create link once and dont allow a user to create the link
+        const response = await createShareId({
+          recipientId,
+          documentId,
+        });
+
+        return router.push(`/share/${response.link}`);
+      }}
+    >
+      <Share className="mr-2 h-5 w-5" />
+      Share
+    </Button>
+  );
+};