Merge remote-tracking branch 'origin/feat/refresh' into feat/single-player-mode

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

@@ -1,7 +1,7 @@
 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';
@@ -10,10 +10,11 @@ import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-re
 import { DocumentStatus, FieldType } from '@documenso/prisma/client';
 import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
 import { SigningCard } from '@documenso/ui/components/signing-card';
-import { Button } from '@documenso/ui/primitives/button';
 
 import signingCelebration from '~/assets/signing-celebration.png';
 
+import { ShareButton } from './share-button';
+
 export type CompletedSigningPageProps = {
   params: {
     token?: string;
@@ -89,11 +90,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} token={recipient.token} />
 
         <DocumentDownloadButton
           className="flex-1"

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

@@ -0,0 +1,51 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import { Share } from 'lucide-react';
+
+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 ShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
+  token: string;
+  documentId: number;
+};
+
+export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
+  const { toast } = useToast();
+  const [, copyToClipboard] = useCopyToClipboard();
+
+  const { mutateAsync: createOrGetShareLink, isLoading } =
+    trpc.shareLink.createOrGetShareLink.useMutation();
+
+  const onShareClick = async () => {
+    const { slug } = await createOrGetShareLink({
+      token: token,
+      documentId,
+    });
+
+    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 (
+    <Button
+      variant="outline"
+      className="flex-1"
+      disabled={!token || !documentId}
+      loading={isLoading}
+      onClick={onShareClick}
+    >
+      {!isLoading && <Share className="mr-2 h-5 w-5" />}
+      Share
+    </Button>
+  );
+};

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

@@ -120,6 +120,7 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
                 className="dark:bg-muted dark:hover:bg-muted/80 w-full  bg-black/5 hover:bg-black/10"
                 variant="secondary"
                 size="lg"
+                onClick={() => router.back()}
               >
                 Cancel
               </Button>

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

@@ -38,7 +38,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     }).catch(() => null),
     getFieldsForToken({ token }),
     getRecipientByToken({ token }).catch(() => null),
-    viewedDocument({ token }),
+    viewedDocument({ token }).catch(() => null),
   ]);
 
   if (!document || !document.documentData || !recipient) {

apps/web/src/app/(signing)/sign/[token]/signature-field.tsx

@@ -130,7 +130,7 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
         <img
           src={signature.signatureImageAsBase64}
           alt={`Signature for ${recipient.name}`}
-          className="h-full w-full object-contain"
+          className="h-full w-full object-contain dark:invert"
         />
       )}