feat: create sharing id for each recipient

apps/web/src/app/(share)/api/share/route.tsx

@@ -1,51 +0,0 @@
-import { ImageResponse } from 'next/server';
-
-export const config = {
-  runtime: 'edge',
-};
-
-export async function GET() {
-  const [imageData, fontData] = await Promise.all([
-    fetch(new URL('../../../../assets/background-pattern.png', import.meta.url)).then((res) =>
-      res.arrayBuffer(),
-    ),
-    fetch(new URL('../../../assets/Caveat-Regular.ttf', import.meta.url)).then((res) =>
-      res.arrayBuffer(),
-    ),
-  ]);
-
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          height: '100%',
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          background: `url('data:image/png;base64,${Buffer.from(
-            imageData as unknown as string,
-          ).toString('base64')}')`,
-          backgroundSize: '1200px 850px',
-          backgroundPositionY: '0%',
-        }}
-      >
-        <div tw="p-16 border-solid border-2 border-sky-500">
-          <div tw=" text-[#64748B99]">Duncan</div>
-        </div>
-      </div>
-    ),
-    {
-      width: 1200,
-      height: 630,
-      fonts: [
-        {
-          name: 'Caveat',
-          data: fontData,
-          style: 'italic',
-        },
-      ],
-    },
-  );
-}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export type SharePageProps = {
+  params: {
+    shortId?: string;
+  };
+};
+
+export default async function SharePage({ params: { shortId } }: SharePageProps) {
+  console.log(shortId);
+
+  return (
+    <div>
+      <h1>Share Page</h1>
+    </div>
+  );
+}

apps/web/src/app/(share)/share/page.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-export default async function SharePage() {
-  return (
-    <div>
-      <h1>Share Page</h1>
-    </div>
-  );
-}

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 = {
@@ -82,11 +82,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>
+  );
+};