chore: remove share button from top level, texts (#653)

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

@@ -2,12 +2,15 @@
 
 import Link from 'next/link';
 
-import { Edit, Pencil, Share } from 'lucide-react';
+import { Download, Edit, Pencil } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
-import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
-import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
+import type { Document, Recipient, User } from '@documenso/prisma/client';
+import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
 
 export type DataTableActionButtonProps = {
@@ -33,6 +36,41 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
   const isComplete = row.status === DocumentStatus.COMPLETED;
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
 
+  const onDownloadClick = async () => {
+    let document: DocumentWithData | null = null;
+
+    if (!recipient) {
+      document = await trpcClient.document.getDocumentById.query({
+        id: row.id,
+      });
+    } else {
+      document = await trpcClient.document.getDocumentByToken.query({
+        token: recipient.token,
+      });
+    }
+
+    const documentData = document?.documentData;
+
+    if (!documentData) {
+      return;
+    }
+
+    const documentBytes = await getFile(documentData);
+
+    const blob = new Blob([documentBytes], {
+      type: 'application/pdf',
+    });
+
+    const link = window.document.createElement('a');
+
+    link.href = window.URL.createObjectURL(blob);
+    link.download = row.title || 'document.pdf';
+
+    link.click();
+
+    window.URL.revokeObjectURL(link.href);
+  };
+
   return match({
     isOwner,
     isRecipient,
@@ -42,7 +80,7 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
     isSigned,
   })
     .with({ isOwner: true, isDraft: true }, () => (
-      <Button className="w-24" asChild>
+      <Button className="w-32" asChild>
         <Link href={`/documents/${row.id}`}>
           <Edit className="-ml-1 mr-2 h-4 w-4" />
           Edit
@@ -50,23 +88,24 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
       </Button>
     ))
     .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
-      <Button className="w-24" asChild>
+      <Button className="w-32" asChild>
         <Link href={`/sign/${recipient?.token}`}>
           <Pencil className="-ml-1 mr-2 h-4 w-4" />
           Sign
         </Link>
       </Button>
     ))
-    .otherwise(() => (
+    .with({ isPending: true, isSigned: true }, () => (
-      <DocumentShareButton
+      <Button className="w-32" disabled={true}>
-        documentId={row.id}
+        <Pencil className="-ml-1 mr-2 inline h-4 w-4" />
-        token={recipient?.token}
+        Sign
-        trigger={({ loading }) => (
+      </Button>
-          <Button className="w-24" loading={loading}>
+    ))
-            {!loading && <Share className="-ml-1 mr-2 h-4 w-4" />}
+    .with({ isComplete: true }, () => (
-            Share
+      <Button className="w-32" onClick={onDownloadClick}>
-          </Button>
+        <Download className="-ml-1 mr-2 inline h-4 w-4" />
-        )}
+        Download
-      />
+      </Button>
-    ));
+    ))
+    .otherwise(() => <div></div>);
 };

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

@@ -147,12 +147,12 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
 
         <DocumentShareButton
           documentId={row.id}
-          token={recipient?.token}
+          token={isOwner ? undefined : recipient?.token}
           trigger={({ loading, disabled }) => (
             <DropdownMenuItem disabled={disabled || isDraft} onSelect={(e) => e.preventDefault()}>
               <div className="flex items-center">
                 {loading ? <Loader className="mr-2 h-4 w-4" /> : <Share className="mr-2 h-4 w-4" />}
-                Share
+                Share Signing Card
               </div>
             </DropdownMenuItem>
           )}

apps/web/src/app/(dashboard)/documents/page.tsx

@@ -80,7 +80,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
               ].map((value) => (
                 <TabsTrigger
                   key={value}
-                  className="hover:text-primary min-w-[60px]"
+                  className="hover:text-foreground min-w-[60px]"
                   value={value}
                   asChild
                 >

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

@@ -3,15 +3,14 @@ import { NextResponse } from 'next/server';
 
 import { P, match } from 'ts-pattern';
 
-import { Logo } from '~/components/branding/logo';
+import type { ShareHandlerAPIResponse } from '~/pages/api/share';
-import { ShareHandlerAPIResponse } from '~/pages/api/share';
 
 export const runtime = 'edge';
 
-const CARD_OFFSET_TOP = 152;
+const CARD_OFFSET_TOP = 173;
-const CARD_OFFSET_LEFT = 350;
+const CARD_OFFSET_LEFT = 307;
-const CARD_WIDTH = 500;
+const CARD_WIDTH = 590;
-const CARD_HEIGHT = 250;
+const CARD_HEIGHT = 337;
 
 const IMAGE_SIZE = {
   width: 1200,
@@ -33,7 +32,7 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
     fetch(new URL('@documenso/assets/fonts/caveat-regular.ttf', import.meta.url)).then(
       async (res) => res.arrayBuffer(),
     ),
-    fetch(new URL('@documenso/assets/static/og-share-frame.png', import.meta.url)).then(
+    fetch(new URL('@documenso/assets/static/og-share-frame2.png', import.meta.url)).then(
       async (res) => res.arrayBuffer(),
     ),
   ]);
@@ -72,11 +71,6 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
         {/* @ts-expect-error Lack of typing from ImageResponse */}
         <img src={shareFrameImage} alt="og-share-frame" tw="absolute inset-0 w-full h-full" />
 
-        <div tw="absolute top-20 flex w-full items-center justify-center">
-          {/* @ts-expect-error Lack of typing from ImageResponse */}
-          <Logo tw="h-8 w-60" />
-        </div>
-
         {signatureImage ? (
           <div
             tw="absolute py-6 px-12 flex items-center justify-center text-center"
@@ -109,21 +103,21 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
         )}
 
         <div
-          tw="absolute flex flex-col items-center justify-center pt-12 w-full"
+          tw="absolute flex w-full"
           style={{
-            top: `${CARD_OFFSET_TOP + CARD_HEIGHT}px`,
+            top: `${CARD_OFFSET_TOP - 78}px`,
+            left: `${CARD_OFFSET_LEFT}px`,
           }}
         >
           <h2
-            tw="text-3xl text-slate-500"
+            tw="text-xl"
             style={{
+              color: '#828282',
               fontFamily: 'Inter',
-              fontWeight: 600,
+              fontWeight: 700,
             }}
           >
-            {isRecipient
+            {isRecipient ? 'Document Signed!' : 'Document Sent!'}
-              ? 'I just signed with Documenso and you can too!'
-              : 'I just sent a document with Documenso and you can too!'}
           </h2>
         </div>
       </div>

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

@@ -11,7 +11,7 @@ type SharePageProps = {
 export function generateMetadata({ params: { slug } }: SharePageProps) {
   return {
     title: 'Documenso - Share',
-    description: 'I just signed a document with Documenso!',
+    description: 'I just signed a document in style with Documenso!',
     openGraph: {
       title: 'Documenso - Join the open source signing revolution',
       description: 'I just signed with Documenso!',

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

@@ -13,20 +13,6 @@ export const getRecipientOrSenderByShareLinkSlug = async ({
     },
   });
 
-  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 } },
@@ -43,5 +29,19 @@ export const getRecipientOrSenderByShareLinkSlug = async ({
     return sender;
   }
 
+  const recipient = await prisma.recipient.findFirst({
+    where: {
+      documentId,
+      email,
+    },
+    include: {
+      Signature: true,
+    },
+  });
+
+  if (recipient) {
+    return recipient;
+  }
+
   throw new Error('Recipient or sender not found');
 };

packages/ui/components/document/document-share-button.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import React, { HTMLAttributes, useState } from 'react';
+import type { HTMLAttributes } from 'react';
+import React, { useState } from 'react';
 
-import { Copy, Share } from 'lucide-react';
+import { Copy, Sparkles } from 'lucide-react';
 import { FaXTwitter } from 'react-icons/fa6';
 
 import { useCopyShareLink } from '@documenso/lib/client-only/hooks/use-copy-share-link';
@@ -48,9 +49,11 @@ export const DocumentShareButton = ({
   const {
     mutateAsync: createOrGetShareLink,
     data: shareLink,
-    isLoading,
+    isLoading: isCreatingOrGettingShareLink,
   } = trpc.shareLink.createOrGetShareLink.useMutation();
 
+  const isLoading = isCreatingOrGettingShareLink || isCopyingShareLink;
+
   const onOpenChange = (nextOpen: boolean) => {
     if (nextOpen) {
       void createOrGetShareLink({
@@ -95,7 +98,7 @@ export const DocumentShareButton = ({
 
     window.open(
       generateTwitterIntent(
-        `I just ${token ? 'signed' : 'sent'} a document with @documenso. Check it out!`,
+        `I just ${token ? 'signed' : 'sent'} a document in style with @documenso. Check it out!`,
         `${process.env.NEXT_PUBLIC_WEBAPP_URL}/share/${slug}`,
       ),
       '_blank',
@@ -108,31 +111,34 @@ export const DocumentShareButton = ({
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
         {trigger?.({
-          disabled: !token || !documentId,
+          disabled: !documentId,
-          loading: isLoading || isCopyingShareLink,
+          loading: isLoading,
         }) || (
           <Button
             variant="outline"
             disabled={!token || !documentId}
-            className={cn('flex-1', className)}
+            className={cn('flex-1 text-[11px]', className)}
-            loading={isLoading || isCopyingShareLink}
+            loading={isLoading}
           >
-            {!isLoading && !isCopyingShareLink && <Share className="mr-2 h-5 w-5" />}
+            {!isLoading && <Sparkles className="mr-2 h-5 w-5" />}
-            Share
+            Share Signature Card
           </Button>
         )}
       </DialogTrigger>
 
       <DialogContent position="end">
         <DialogHeader>
-          <DialogTitle>Share</DialogTitle>
+          <DialogTitle>Share your signing experience!</DialogTitle>
 
-          <DialogDescription className="mt-4">Share your signing experience!</DialogDescription>
+          <DialogDescription className="mt-4">
+            Don't worry, the document you signed or sent wont be shared; only your signing
+            experience is. Share your signing card and showcase your signature!
+          </DialogDescription>
         </DialogHeader>
 
         <div className="flex w-full flex-col">
           <div className="rounded-md border p-4">
-            I just {token ? 'signed' : 'sent'} a document with{' '}
+            I just {token ? 'signed' : 'sent'} a document in style with{' '}
             <span className="font-medium text-blue-400">@documenso</span>
             . Check it out!
             <span className="mt-2 block" />
@@ -144,9 +150,12 @@ export const DocumentShareButton = ({
               {process.env.NEXT_PUBLIC_WEBAPP_URL}/share/{shareLink?.slug || '...'}
             </span>
             <div
-              className={cn('bg-muted/40 mt-4 aspect-video overflow-hidden rounded-lg border', {
+              className={cn(
-                'animate-pulse': !shareLink?.slug,
+                'bg-muted/40 mt-4 aspect-[1200/630] overflow-hidden rounded-lg border',
-              })}
+                {
+                  'animate-pulse': !shareLink?.slug,
+                },
+              )}
             >
               {shareLink?.slug && (
                 <img
@@ -158,21 +167,17 @@ export const DocumentShareButton = ({
             </div>
           </div>
 
-          <Button variant="outline" className="mt-4" onClick={onTweetClick}>
+          <div className="mt-6 flex items-center gap-4">
-            <FaXTwitter className="mr-2 h-4 w-4" />
+            <Button variant="outline" className="flex-1" onClick={onTweetClick}>
-            Tweet
+              <FaXTwitter className="mr-2 h-4 w-4" />
-          </Button>
+              Tweet
+            </Button>
 
-          <div className="relative flex items-center justify-center gap-x-4 py-4 text-xs uppercase">
+            <Button variant="outline" className="flex-1" onClick={onCopyClick}>
-            <div className="bg-border h-px flex-1" />
+              <Copy className="mr-2 h-4 w-4" />
-            <span className="text-muted-foreground bg-transparent">Or</span>
+              Copy Link
-            <div className="bg-border h-px flex-1" />
+            </Button>
           </div>
-
-          <Button variant="outline" onClick={onCopyClick}>
-            <Copy className="mr-2 h-4 w-4" />
-            Copy Link
-          </Button>
         </div>
       </DialogContent>
     </Dialog>