fix: minor updates

feat: added custom `not-found` or 404 pages

apps/marketing/src/app/not-found.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+import { motion } from 'framer-motion';
+import { ChevronLeft } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+
+export default function NotFound() {
+  const router = useRouter();
+
+  return (
+    <div className={cn('relative max-w-[100vw] overflow-hidden')}>
+      <div className="absolute -inset-24 -z-10">
+        <motion.div
+          className="flex h-full w-full items-center justify-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 0.8, transition: { duration: 0.5, delay: 0.5 } }}
+        >
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="-mr-[50vw] -mt-[15vh] h-full scale-100 object-cover md:scale-100 lg:scale-[100%]"
+            priority
+          />
+        </motion.div>
+      </div>
+
+      <div className="container mx-auto flex h-full min-h-screen items-center px-6 py-32">
+        <div>
+          <p className="text-muted-foreground font-semibold">404 Page not found</p>
+
+          <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+
+          <p className="text-muted-foreground mt-4 text-sm">
+            The page you are looking for was moved, removed, renamed or might never have existed.
+          </p>
+
+          <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+            <Button
+              variant="ghost"
+              className="w-32"
+              onClick={() => {
+                void router.back();
+              }}
+            >
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              Go Back
+            </Button>
+
+            <Button className="w-32" asChild>
+              <Link href="/">Home</Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/marketing/src/app/robots.ts

@@ -4,11 +4,11 @@ import { getBaseUrl } from '@documenso/lib/universal/get-base-url';
 
 export default function robots(): MetadataRoute.Robots {
   return {
-    rules: {
-      userAgent: '*',
-      allow: '/*',
-      disallow: ['/_next/*'],
-    },
+    rules: [
+      {
+        userAgent: '*',
+      },
+    ],
     sitemap: `${getBaseUrl()}/sitemap.xml`,
   };
 }

apps/web/src/app/not-found.tsx

@@ -0,0 +1,26 @@
+import Link from 'next/link';
+
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { Button } from '@documenso/ui/primitives/button';
+
+import NotFoundPartial from '~/components/partials/not-found';
+
+export default async function NotFound() {
+  const session = await getServerComponentSession();
+
+  return (
+    <NotFoundPartial>
+      {session && (
+        <Button className="w-32" asChild>
+          <Link href="/documents">Documents</Link>
+        </Button>
+      )}
+
+      {!session && (
+        <Button className="w-32" asChild>
+          <Link href="/signin">Sign In</Link>
+        </Button>
+      )}
+    </NotFoundPartial>
+  );
+}

apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx

@@ -10,6 +10,7 @@ import {
   User as LucideUser,
   Monitor,
   Moon,
+  Palette,
   Sun,
   UserCog,
 } from 'lucide-react';
@@ -26,7 +27,13 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
 
@@ -37,8 +44,8 @@ export type ProfileDropdownProps = {
 };
 
 export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
-  const { theme, setTheme } = useTheme();
   const { getFlag } = useFeatureFlags();
+  const { theme, setTheme } = useTheme();
   const isUserAdmin = isAdmin(user);
 
   const isBillingEnabled = getFlag('app_billing');
@@ -98,28 +105,30 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
 
         <DropdownMenuSeparator />
 
-        {theme === 'light' ? null : (
-          <DropdownMenuItem onClick={() => setTheme('light')}>
-            <Sun className="mr-2 h-4 w-4" />
-            Light Mode
-          </DropdownMenuItem>
-        )}
-        {theme === 'dark' ? null : (
-          <DropdownMenuItem onClick={() => setTheme('dark')}>
-            <Moon className="mr-2 h-4 w-4" />
-            Dark Mode
-          </DropdownMenuItem>
-        )}
-
-        {theme === 'system' ? null : (
-          <DropdownMenuItem onClick={() => setTheme('system')}>
-            <Monitor className="mr-2 h-4 w-4" />
-            System Theme
-          </DropdownMenuItem>
-        )}
-
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <Palette className="mr-2 h-4 w-4" />
+            Themes
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+                <DropdownMenuRadioItem value="light">
+                  <Sun className="mr-2 h-4 w-4" /> Light
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="dark">
+                  <Moon className="mr-2 h-4 w-4" />
+                  Dark
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="system">
+                  <Monitor className="mr-2 h-4 w-4" />
+                  System
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
         <DropdownMenuSeparator />
-
         <DropdownMenuItem asChild>
           <Link href="https://github.com/documenso/documenso" className="cursor-pointer">
             <Github className="mr-2 h-4 w-4" />

apps/web/src/components/motion.tsx

@@ -1,7 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-
-export * from 'framer-motion';
-
-export const MotionDiv = motion.div;

apps/web/src/components/partials/not-found.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
+import { motion } from 'framer-motion';
+import { ChevronLeft } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+
+export type NotFoundPartialProps = {
+  children?: React.ReactNode;
+};
+
+export default function NotFoundPartial({ children }: NotFoundPartialProps) {
+  const router = useRouter();
+
+  return (
+    <div className={cn('relative max-w-[100vw] overflow-hidden')}>
+      <div className="absolute -inset-24 -z-10">
+        <motion.div
+          className="flex h-full w-full items-center justify-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 0.8, transition: { duration: 0.5, delay: 0.5 } }}
+        >
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="-mr-[50vw] -mt-[15vh] h-full scale-100 object-cover md:scale-100 lg:scale-[100%]"
+            priority
+          />
+        </motion.div>
+      </div>
+
+      <div className="container mx-auto flex h-full min-h-screen items-center px-6 py-32">
+        <div>
+          <p className="text-muted-foreground font-semibold">404 Page not found</p>
+
+          <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+
+          <p className="text-muted-foreground mt-4 text-sm">
+            The page you are looking for was moved, removed, renamed or might never have existed.
+          </p>
+
+          <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+            <Button
+              variant="ghost"
+              className="w-32"
+              onClick={() => {
+                void router.back();
+              }}
+            >
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              Go Back
+            </Button>
+
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/lib/server-only/document/complete-document-with-token.ts

@@ -4,6 +4,7 @@ import { prisma } from '@documenso/prisma';
 import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 
 import { sealDocument } from './seal-document';
+import { sendPendingEmail } from './send-pending-email';
 
 export type CompleteDocumentWithTokenOptions = {
   token: string;
@@ -69,6 +70,19 @@ export const completeDocumentWithToken = async ({
     },
   });
 
+  const pendingRecipients = await prisma.recipient.count({
+    where: {
+      documentId: document.id,
+      signingStatus: {
+        not: SigningStatus.SIGNED,
+      },
+    },
+  });
+
+  if (pendingRecipients > 0) {
+    await sendPendingEmail({ documentId, recipientId: recipient.id });
+  }
+
   const documents = await prisma.document.updateMany({
     where: {
       id: document.id,

packages/lib/server-only/document/seal-document.ts

@@ -9,6 +9,7 @@ import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 import { getFile } from '../../universal/upload/get-file';
 import { putFile } from '../../universal/upload/put-file';
 import { insertFieldInPDF } from '../pdf/insert-field-in-pdf';
+import { sendCompletedEmail } from './send-completed-email';
 
 export type SealDocumentOptions = {
   documentId: number;
@@ -86,4 +87,6 @@ export const sealDocument = async ({ documentId }: SealDocumentOptions) => {
       data: newData,
     },
   });
+
+  await sendCompletedEmail({ documentId });
 };

packages/lib/server-only/document/send-completed-email.ts

@@ -0,0 +1,57 @@
+import { createElement } from 'react';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import { DocumentCompletedEmailTemplate } from '@documenso/email/templates/document-completed';
+import { prisma } from '@documenso/prisma';
+
+export interface SendDocumentOptions {
+  documentId: number;
+}
+
+export const sendCompletedEmail = async ({ documentId }: SendDocumentOptions) => {
+  const document = await prisma.document.findUnique({
+    where: {
+      id: documentId,
+    },
+    include: {
+      Recipient: true,
+    },
+  });
+
+  if (!document) {
+    throw new Error('Document not found');
+  }
+
+  if (document.Recipient.length === 0) {
+    throw new Error('Document has no recipients');
+  }
+
+  await Promise.all([
+    document.Recipient.map(async (recipient) => {
+      const { email, name, token } = recipient;
+
+      const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+
+      const template = createElement(DocumentCompletedEmailTemplate, {
+        documentName: document.title,
+        assetBaseUrl,
+        downloadLink: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/sign/${token}/complete`,
+      });
+
+      await mailer.sendMail({
+        to: {
+          address: email,
+          name,
+        },
+        from: {
+          name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
+          address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
+        },
+        subject: 'Signing Complete!',
+        html: render(template),
+        text: render(template, { plainText: true }),
+      });
+    }),
+  ]);
+};

packages/lib/server-only/document/send-pending-email.ts

@@ -0,0 +1,64 @@
+import { createElement } from 'react';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import { DocumentPendingEmailTemplate } from '@documenso/email/templates/document-pending';
+import { prisma } from '@documenso/prisma';
+
+export interface SendPendingEmailOptions {
+  documentId: number;
+  recipientId: number;
+}
+
+export const sendPendingEmail = async ({ documentId, recipientId }: SendPendingEmailOptions) => {
+  const document = await prisma.document.findFirst({
+    where: {
+      id: documentId,
+      Recipient: {
+        some: {
+          id: recipientId,
+        },
+      },
+    },
+    include: {
+      Recipient: {
+        where: {
+          id: recipientId,
+        },
+      },
+    },
+  });
+
+  if (!document) {
+    throw new Error('Document not found');
+  }
+
+  if (document.Recipient.length === 0) {
+    throw new Error('Document has no recipients');
+  }
+
+  const [recipient] = document.Recipient;
+
+  const { email, name } = recipient;
+
+  const assetBaseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+
+  const template = createElement(DocumentPendingEmailTemplate, {
+    documentName: document.title,
+    assetBaseUrl,
+  });
+
+  await mailer.sendMail({
+    to: {
+      address: email,
+      name,
+    },
+    from: {
+      name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
+      address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
+    },
+    subject: 'Waiting for others to complete signing.',
+    html: render(template),
+    text: render(template, { plainText: true }),
+  });
+};