Merge pull request #423 from documenso/feat/copy-or-tweet

feat: add dropdown to tweet or copy signing link

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

@@ -1,11 +1,20 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, useState } from 'react';
 
-import { Share } from 'lucide-react';
+import { Copy, Share, Twitter } from 'lucide-react';
 
+import { generateTwitterIntent } from '@documenso/lib/universal/generate-twitter-intent';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
@@ -19,14 +28,36 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
   const { toast } = useToast();
   const [, copyToClipboard] = useCopyToClipboard();
 
-  const { mutateAsync: createOrGetShareLink, isLoading } =
-    trpc.shareLink.createOrGetShareLink.useMutation();
+  const [isOpen, setIsOpen] = useState(false);
 
-  const onShareClick = async () => {
-    const { slug } = await createOrGetShareLink({
-      token: token,
-      documentId,
-    });
+  const {
+    mutateAsync: createOrGetShareLink,
+    data: shareLink,
+    isLoading,
+  } = trpc.shareLink.createOrGetShareLink.useMutation();
+
+  const onOpenChange = (nextOpen: boolean) => {
+    if (nextOpen) {
+      void createOrGetShareLink({
+        token,
+        documentId,
+      });
+    }
+
+    setIsOpen(nextOpen);
+  };
+
+  const onCopyClick = async () => {
+    let { slug = '' } = shareLink || {};
+
+    if (!slug) {
+      const result = await createOrGetShareLink({
+        token,
+        documentId,
+      });
+
+      slug = result.slug;
+    }
 
     await copyToClipboard(`${window.location.origin}/share/${slug}`).catch(() => null);
 
@@ -34,18 +65,82 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
       title: 'Copied to clipboard',
       description: 'The sharing link has been copied to your clipboard.',
     });
+
+    setIsOpen(false);
+  };
+
+  const onTweetClick = async () => {
+    let { slug = '' } = shareLink || {};
+
+    if (!slug) {
+      const result = await createOrGetShareLink({
+        token,
+        documentId,
+      });
+
+      slug = result.slug;
+    }
+
+    window.open(
+      generateTwitterIntent(
+        `I just ${token ? 'signed' : 'sent'} a document with @documenso. Check it out!`,
+        `${window.location.origin}/share/${slug}`,
+      ),
+      '_blank',
+    );
+
+    setIsOpen(false);
   };
 
   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>
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          disabled={!token || !documentId}
+          className="flex-1"
+          loading={isLoading}
+        >
+          {!isLoading && <Share className="mr-2 h-5 w-5" />}
+          Share
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Share</DialogTitle>
+
+          <DialogDescription className="mt-4">Share your signing experience!</DialogDescription>
+        </DialogHeader>
+
+        <div className="flex w-full flex-col">
+          <div className="rounded-md border p-4">
+            I just {token ? 'signed' : 'sent'} a document with{' '}
+            <span className="font-medium text-blue-400">@documenso</span>
+            . Check it out!
+            <span className="mt-2 block" />
+            <span className="font-medium text-blue-400">
+              {window.location.origin}/share/{shareLink?.slug || '...'}
+            </span>
+          </div>
+
+          <Button variant="outline" className="mt-4" onClick={onTweetClick}>
+            <Twitter className="mr-2 h-4 w-4" />
+            Tweet
+          </Button>
+
+          <div className="relative flex items-center justify-center gap-x-4 py-4 text-xs uppercase">
+            <div className="bg-border h-px flex-1" />
+            <span className="text-muted-foreground bg-transparent">Or</span>
+            <div className="bg-border h-px flex-1" />
+          </div>
+
+          <Button variant="outline" onClick={onCopyClick}>
+            <Copy className="mr-2 h-4 w-4" />
+            Copy Link
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 };

package-lock.json

@@ -19809,6 +19809,7 @@
         "@aws-sdk/signature-v4-crt": "^3.410.0",
         "@documenso/email": "*",
         "@documenso/prisma": "*",
+        "@documenso/signing": "*",
         "@next-auth/prisma-adapter": "1.0.7",
         "@pdf-lib/fontkit": "^1.1.1",
         "@scure/base": "^1.1.3",
@@ -19862,17 +19863,23 @@
     "packages/signing": {
       "name": "@documenso/signing",
       "version": "1.0.0",
-      "license": "MIT",
+      "license": "AGPLv3",
       "dependencies": {
         "@documenso/tsconfig": "*",
         "node-forge": "^1.3.1",
         "node-signpdf": "^2.0.0",
-        "pdf-lib": "^1.17.1"
+        "pdf-lib": "^1.17.1",
+        "ts-pattern": "^5.0.5"
       },
       "devDependencies": {
         "@types/node-forge": "^1.3.4"
       }
     },
+    "packages/signing/node_modules/ts-pattern": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.0.5.tgz",
+      "integrity": "sha512-tL0w8U/pgaacOmkb9fRlYzWEUDCfVjjv9dD4wHTgZ61MjhuMt46VNWTG747NqW6vRzoWIKABVhFSOJ82FvXrfA=="
+    },
     "packages/tailwind-config": {
       "name": "@documenso/tailwind-config",
       "version": "0.0.0",

packages/lib/universal/generate-twitter-intent.ts

@@ -0,0 +1,5 @@
+export const generateTwitterIntent = (text: string, shareUrl: string) => {
+  return `https://twitter.com/intent/tweet?text=${encodeURIComponent(
+    text,
+  )}%0A%0A${encodeURIComponent(shareUrl)}`;
+};