Merge branch 'feat/refresh' into feat/update-email-templates

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

@@ -1,4 +1,4 @@
-import { ImageResponse } from 'next/server';
+import { ImageResponse, NextResponse } from 'next/server';
 
 import { P, match } from 'ts-pattern';
 
@@ -21,7 +21,7 @@ type SharePageOpenGraphImageProps = {
   params: { slug: string };
 };
 
-export default async function Image({ params: { slug } }: SharePageOpenGraphImageProps) {
+export async function GET(_request: Request, { params: { slug } }: SharePageOpenGraphImageProps) {
   const [interSemiBold, interRegular, caveatRegular, shareFrameImage] = await Promise.all([
     getAssetBuffer('/fonts/inter-semibold.ttf'),
     getAssetBuffer('/fonts/inter-regular.ttf'),
@@ -32,7 +32,7 @@ export default async function Image({ params: { slug } }: SharePageOpenGraphImag
   const recipientOrSender = await getRecipientOrSenderByShareLinkSlug({ slug }).catch(() => null);
 
   if (!recipientOrSender) {
-    return null;
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
   }
 
   const isRecipient = 'Signature' in recipientOrSender;

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

@@ -1,11 +1,39 @@
 import { Metadata } from 'next';
+import { headers } from 'next/headers';
+import { redirect } from 'next/navigation';
 
-import { Redirect } from './redirect';
+import { APP_BASE_URL } from '@documenso/lib/constants/app';
 
-export const metadata: Metadata = {
-  title: 'Documenso - Share',
+type SharePageProps = {
+  params: { slug: string };
 };
 
-export default function SharePage() {
-  return <Redirect />;
+export function generateMetadata({ params: { slug } }: SharePageProps) {
+  return {
+    title: 'Documenso - Share',
+    description: 'I just signed a document with Documenso!',
+    openGraph: {
+      title: 'Documenso - Join the open source signing revolution',
+      description: 'I just signed with Documenso!',
+      type: 'website',
+      images: [`${APP_BASE_URL}/share/${slug}/opengraph`],
+    },
+    twitter: {
+      site: '@documenso',
+      card: 'summary_large_image',
+      images: [`${APP_BASE_URL}/share/${slug}/opengraph`],
+      description: 'I just signed with Documenso!',
+    },
+  } satisfies Metadata;
+}
+
+export default function SharePage() {
+  const userAgent = headers().get('User-Agent') ?? '';
+
+  // https://stackoverflow.com/questions/47026171/how-to-detect-bots-for-open-graph-with-user-agent
+  if (/bot|facebookexternalhit|WhatsApp|google|bing|duckduckbot|MetaInspector/i.test(userAgent)) {
+    return null;
+  }
+
+  redirect(process.env.NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001');
 }

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

@@ -1,11 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-
-export const Redirect = () => {
-  useEffect(() => {
-    window.location.href = process.env.NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001';
-  }, []);
-
-  return null;
-};

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

@@ -9,7 +9,7 @@ import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-f
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 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 { SigningCard3D } from '@documenso/ui/components/signing-card';
 
 import signingCelebration from '~/assets/signing-celebration.png';
 
@@ -53,11 +53,11 @@ export default async function CompletedSigningPage({
     recipient.email;
 
   return (
-    <div className="flex flex-col items-center pt-24">
+    <div className="flex flex-col items-center pt-24 lg:pt-36 xl:pt-44">
       {/* Card with recipient */}
-      <SigningCard name={recipientName} signingCelebrationImage={signingCelebration} />
+      <SigningCard3D name={recipientName} signingCelebrationImage={signingCelebration} />
 
-      <div className="mt-6">
+      <div className="relative mt-6 flex w-full flex-col items-center">
         {match(document.status)
           .with(DocumentStatus.COMPLETED, () => (
             <div className="text-documenso-700 flex items-center text-center">
@@ -71,41 +71,44 @@ export default async function CompletedSigningPage({
               <span className="text-sm">Waiting for others to sign</span>
             </div>
           ))}
+
+        <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
+          You have signed "{document.title}"
+        </h2>
+
+        {match(document.status)
+          .with(DocumentStatus.COMPLETED, () => (
+            <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+              Everyone has signed! You will receive an Email copy of the signed document.
+            </p>
+          ))
+          .otherwise(() => (
+            <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+              You will receive an Email copy of the signed document once everyone has signed.
+            </p>
+          ))}
+
+        <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
+          <ShareButton documentId={document.id} token={recipient.token} />
+
+          <DocumentDownloadButton
+            className="flex-1"
+            fileName={document.title}
+            documentData={documentData}
+            disabled={document.status !== DocumentStatus.COMPLETED}
+          />
+        </div>
+
+        <p className="text-muted-foreground/60 mt-36 text-sm">
+          Want to send slick signing links like this one?{' '}
+          <Link
+            href="https://documenso.com"
+            className="text-documenso-700 hover:text-documenso-600"
+          >
+            Check out Documenso.
+          </Link>
+        </p>
       </div>
-
-      <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
-        You have signed "{document.title}"
-      </h2>
-
-      {match(document.status)
-        .with(DocumentStatus.COMPLETED, () => (
-          <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
-            Everyone has signed! You will receive an Email copy of the signed document.
-          </p>
-        ))
-        .otherwise(() => (
-          <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
-            You will receive an Email copy of the signed document once everyone has signed.
-          </p>
-        ))}
-
-      <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
-        <ShareButton documentId={document.id} token={recipient.token} />
-
-        <DocumentDownloadButton
-          className="flex-1"
-          fileName={document.title}
-          documentData={documentData}
-          disabled={document.status !== DocumentStatus.COMPLETED}
-        />
-      </div>
-
-      <p className="text-muted-foreground/60 mt-36 text-sm">
-        Want to send slick signing links like this one?{' '}
-        <Link href="https://documenso.com" className="text-documenso-700 hover:text-documenso-600">
-          Check out Documenso.
-        </Link>
-      </p>
     </div>
   );
 }

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>
   );
 };

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

@@ -1,4 +1,4 @@
-import { notFound } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 
 import { match } from 'ts-pattern';
 
@@ -9,7 +9,7 @@ import { viewedDocument } from '@documenso/lib/server-only/document/viewed-docum
 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 { getFile } from '@documenso/lib/universal/upload/get-file';
-import { FieldType } from '@documenso/prisma/client';
+import { DocumentStatus, FieldType, SigningStatus } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
@@ -53,6 +53,13 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
 
   const user = await getServerComponentSession();
 
+  if (
+    document.status === DocumentStatus.COMPLETED ||
+    recipient.signingStatus === SigningStatus.SIGNED
+  ) {
+    redirect(`/sign/${token}/complete`);
+  }
+
   return (
     <SigningProvider email={recipient.email} fullName={recipient.name} signature={user?.signature}>
       <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">

apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx

@@ -40,7 +40,7 @@ export const StackAvatarsWithTooltip = ({
 
   return (
     <TooltipProvider>
-      <Tooltip>
+      <Tooltip delayDuration={200}>
         <TooltipTrigger className="flex cursor-pointer">
           {children || <StackAvatars recipients={recipients} />}
         </TooltipTrigger>

apps/web/src/components/forms/signin.tsx

@@ -1,8 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-
-import { useSearchParams } from 'next/navigation';
+import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Eye, EyeOff, Loader } from 'lucide-react';
@@ -40,8 +38,6 @@ export type SignInFormProps = {
 };
 
 export const SignInForm = ({ className }: SignInFormProps) => {
-  const searchParams = useSearchParams();
-
   const { toast } = useToast();
   const [showPassword, setShowPassword] = useState(false);
 
@@ -57,36 +53,29 @@ export const SignInForm = ({ className }: SignInFormProps) => {
     resolver: zodResolver(ZSignInFormSchema),
   });
 
-  const errorCode = searchParams?.get('error');
-
-  useEffect(() => {
-    let timeout: NodeJS.Timeout | null = null;
-
-    if (isErrorCode(errorCode)) {
-      timeout = setTimeout(() => {
-        toast({
-          variant: 'destructive',
-          description: ERROR_MESSAGES[errorCode] ?? 'An unknown error occurred',
-        });
-      }, 0);
-    }
-
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [errorCode, toast]);
-
   const onFormSubmit = async ({ email, password }: TSignInFormSchema) => {
     try {
-      await signIn('credentials', {
+      const result = await signIn('credentials', {
         email,
         password,
         callbackUrl: LOGIN_REDIRECT_PATH,
-      }).catch((err) => {
-        console.error(err);
+        redirect: false,
       });
+
+      if (result?.error && isErrorCode(result.error)) {
+        toast({
+          variant: 'destructive',
+          description: ERROR_MESSAGES[result.error],
+        });
+
+        return;
+      }
+
+      if (!result?.url) {
+        throw new Error('An unknown error occurred');
+      }
+
+      window.location.href = result.url;
     } catch (err) {
       toast({
         title: 'An unknown error occurred',