fix: links

feat: add empty document state

apps/marketing/content/blog/design-system.mdx

@@ -0,0 +1,49 @@
+---
+title: Open Sourcing Documenso's Design
+description: It's day 1 of our first launch week. We are kicking it off by open sourcing Documenso's design system! Let's go..
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2023-09-25
+tags:
+  - Design
+  - Open Source
+  - Community
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/designsystem.png"
+    width="1260"
+    height="630"
+    alt="Documenso's Design System"
+  />
+
+  <figcaption className="text-center">
+   Documenso's Design System ✨
+  </figcaption>
+</figure>
+
+> TLDR; Our design system is OSS under MIT at [design.documenso.com](https://design.documenso.com)
+
+Today, we are open sourcing our design system, lovingly crafted by [Thilo](https://twitter.com/thilokonzok). The system is public on Figma and will be available at [design.documenso.com](https://design.documenso.com) from here on out.
+We are publishing it under the MIT License so everyone can share, remix, and use it as it helps them most.
+
+We chose to start our first launch week with a design topic to emphasize the role design will play in Documenso's company and community culture. As it is historically difficult to bring together open-source software with great design, this is our first step towards encouraging a more design-driven COSS (Commercial Open Source) movement.
+
+## Designers Welcome
+
+We added a designer role in our Discord to create a space for designers to explore and discuss design-related topics of Documenso and signing in general. In the future, we want to foster more coding contributions and start a design culture around the product. As it is much more difficult to incorporate design contributions, we have yet to find a clear plan of what that will look like. I would like to see contributions around stuff we are NOT working on. Designs in that area can inspire and start discussions without the complexities of implementing them immediately — a free-thinking space around everything Documenso. Having a free mandate to design without restriction can create many exciting ideas. Some Ideas worth exploring:
+
+## Areas for design contributions
+
+- Explorations of exciting aspects of signing and document handling:
+- What does signing look like when we no longer have skeuomorphic signatures?
+- What is signing if we move beyond paper-inspired documents?
+- What would the government process look like using Documenso?
+- Solutions Concepts for features further down the roadmap, e.g., Widgets in websites
+
+These are fascinating ideas for explorative design. They won't be built 1:1 but shape how we think about signing and where it can go, which is even more critical. If you are interested in product design, you are invited to join our [Discord](https://documen.so/discord) and discuss the future of signing design or the future of Documenso's design system. Also let me know what you think on [X (formerly Twitter)](https://x.com/eltimuro).
+
+Best from Hamburg\
+Timur

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/(dashboard)/documents/empty-state.tsx

@@ -0,0 +1,50 @@
+import { Bird, CheckCircle2 } from 'lucide-react';
+import { match } from 'ts-pattern';
+
+import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+
+export type EmptyDocumentProps = { status: ExtendedDocumentStatus };
+
+export const EmptyDocumentState = ({ status }: EmptyDocumentProps) => {
+  const {
+    title,
+    message,
+    icon: Icon,
+  } = match(status)
+    .with(ExtendedDocumentStatus.COMPLETED, () => ({
+      title: 'Nothing to do',
+      message:
+        'There are no completed documents yet. Documents that you have created or received that become completed will appear here later.',
+      icon: CheckCircle2,
+    }))
+    .with(ExtendedDocumentStatus.DRAFT, () => ({
+      title: 'No active drafts',
+      message:
+        'There are no active drafts at then current moment. You can upload a document to start drafting.',
+      icon: CheckCircle2,
+    }))
+    .with(ExtendedDocumentStatus.ALL, () => ({
+      title: "We're all empty",
+      message:
+        'You have not yet created or received any documents. To create a document please upload one.',
+      icon: Bird,
+    }))
+    .otherwise(() => ({
+      title: 'Nothing to do',
+      message:
+        'All documents are currently actioned. Any new documents are sent or recieved they will start to appear here.',
+      icon: CheckCircle2,
+    }));
+
+  return (
+    <div className="text-muted-foreground/60 flex h-60 flex-col items-center justify-center gap-y-4">
+      <Icon className="h-12 w-12" strokeWidth={1.5} />
+
+      <div className="text-center">
+        <h3 className="text-lg font-semibold">{title}</h3>
+
+        <p className="mt-2 max-w-[60ch]">{message}</p>
+      </div>
+    </div>
+  );
+};

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

@@ -12,6 +12,7 @@ import { PeriodSelectorValue } from '~/components/(dashboard)/period-selector/ty
 import { DocumentStatus } from '~/components/formatter/document-status';
 
 import { DocumentsDataTable } from './data-table';
+import { EmptyDocumentState } from './empty-state';
 import { UploadDocument } from './upload-document';
 
 export type DocumentsPageProps = {
@@ -96,7 +97,8 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
       </div>
 
       <div className="mt-8">
-        <DocumentsDataTable results={results} />
+        {results.count > 0 && <DocumentsDataTable results={results} />}
+        {results.count === 0 && <EmptyDocumentState status={status} />}
       </div>
     </div>
   );

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/forms/edit-document/add-subject.action.ts

@@ -1,6 +1,7 @@
 'use server';
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { upsertDocumentMeta } from '@documenso/lib/server-only/document-meta/upsert-document-meta';
 import { sendDocument } from '@documenso/lib/server-only/document/send-document';
 import { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
 
@@ -8,12 +9,20 @@ export type CompleteDocumentActionInput = TAddSubjectFormSchema & {
   documentId: number;
 };
 
-export const completeDocument = async ({ documentId }: CompleteDocumentActionInput) => {
+export const completeDocument = async ({ documentId, email }: CompleteDocumentActionInput) => {
   'use server';
 
   const { id: userId } = await getRequiredServerComponentSession();
 
-  await sendDocument({
+  if (email.message || email.subject) {
+    await upsertDocumentMeta({
+      documentId,
+      subject: email.subject,
+      message: email.message,
+    });
+  }
+
+  return await sendDocument({
     userId,
     documentId,
   });

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/email/template-components/template-document-completed.tsx

@@ -1,4 +1,4 @@
-import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
@@ -29,11 +29,23 @@ export const TemplateDocumentCompleted = ({
         },
       }}
     >
-      <Section className="flex-row items-center justify-center">
-        <div className="flex items-center justify-center p-4">
-          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
-        </div>
+      <Section>
+        <Row className="table-fixed">
+          <Column />
 
+          <Column>
+            <Img
+              className="h-42 mx-auto"
+              src={getAssetUrl('/static/document.png')}
+              alt="Documenso"
+            />
+          </Column>
+
+          <Column />
+        </Row>
+      </Section>
+
+      <Section>
         <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-[#7AC455]">
           <Img src={getAssetUrl('/static/completed.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
           Completed

packages/email/template-components/template-document-invite.tsx

@@ -1,4 +1,4 @@
-import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
+import { Button, Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
@@ -30,13 +30,26 @@ export const TemplateDocumentInvite = ({
         },
       }}
     >
-      <Section className="mt-4 flex-row items-center justify-center">
-        <div className="flex items-center justify-center p-4">
-          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
-        </div>
+      <Section className="mt-4">
+        <Row className="table-fixed">
+          <Column />
 
+          <Column>
+            <Img
+              className="h-42 mx-auto"
+              src={getAssetUrl('/static/document.png')}
+              alt="Documenso"
+            />
+          </Column>
+
+          <Column />
+        </Row>
+      </Section>
+
+      <Section>
         <Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
-          {inviterName} has invited you to sign "{documentName}"
+          {inviterName} has invited you to sign
+          <br />"{documentName}"
         </Text>
 
         <Text className="my-1 text-center text-base text-slate-400">

packages/email/template-components/template-document-pending.tsx

@@ -1,4 +1,4 @@
-import { Img, Section, Tailwind, Text } from '@react-email/components';
+import { Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
 
 import * as config from '@documenso/tailwind-config';
 
@@ -25,11 +25,23 @@ export const TemplateDocumentPending = ({
         },
       }}
     >
-      <Section className="flex-row items-center justify-center">
-        <div className="flex items-center justify-center p-4">
-          <Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
-        </div>
+      <Section>
+        <Row className="table-fixed">
+          <Column />
 
+          <Column>
+            <Img
+              className="h-42 mx-auto"
+              src={getAssetUrl('/static/document.png')}
+              alt="Documenso"
+            />
+          </Column>
+
+          <Column />
+        </Row>
+      </Section>
+
+      <Section>
         <Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-blue-500">
           <Img src={getAssetUrl('/static/clock.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
           Waiting for others

packages/email/templates/document-invite.tsx

@@ -20,7 +20,9 @@ import {
 } from '../template-components/template-document-invite';
 import TemplateFooter from '../template-components/template-footer';
 
-export type DocumentInviteEmailTemplateProps = Partial<TemplateDocumentInviteProps>;
+export type DocumentInviteEmailTemplateProps = Partial<TemplateDocumentInviteProps> & {
+  customBody?: string;
+};
 
 export const DocumentInviteEmailTemplate = ({
   inviterName = 'Lucas Smith',
@@ -28,6 +30,7 @@ export const DocumentInviteEmailTemplate = ({
   documentName = 'Open Source Pledge.pdf',
   signDocumentLink = 'https://documenso.com',
   assetBaseUrl = 'http://localhost:3002',
+  customBody,
 }: DocumentInviteEmailTemplateProps) => {
   const previewText = `Completed Document`;
 
@@ -78,7 +81,11 @@ export const DocumentInviteEmailTemplate = ({
                 </Text>
 
                 <Text className="mt-2 text-base text-slate-400">
-                  {inviterName} has invited you to sign the document "{documentName}".
+                  {customBody ? (
+                    <pre className="font-sans text-base text-slate-400">{customBody}</pre>
+                  ) : (
+                    `${inviterName} has invited you to sign the document "${documentName}".`
+                  )}
                 </Text>
               </Section>
             </Container>

packages/lib/server-only/document-meta/upsert-document-meta.ts

@@ -0,0 +1,30 @@
+'use server';
+
+import { prisma } from '@documenso/prisma';
+
+export type CreateDocumentMetaOptions = {
+  documentId: number;
+  subject: string;
+  message: string;
+};
+
+export const upsertDocumentMeta = async ({
+  subject,
+  message,
+  documentId,
+}: CreateDocumentMetaOptions) => {
+  return await prisma.documentMeta.upsert({
+    where: {
+      documentId,
+    },
+    create: {
+      subject,
+      message,
+      documentId,
+    },
+    update: {
+      subject,
+      message,
+    },
+  });
+};

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/get-document-by-id.ts

@@ -13,6 +13,7 @@ export const getDocumentById = async ({ id, userId }: GetDocumentByIdOptions) =>
     },
     include: {
       documentData: true,
+      documentMeta: true,
     },
   });
 };

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-document.tsx

@@ -3,13 +3,14 @@ import { createElement } from 'react';
 import { mailer } from '@documenso/email/mailer';
 import { render } from '@documenso/email/render';
 import { DocumentInviteEmailTemplate } from '@documenso/email/templates/document-invite';
+import { renderCustomEmailTemplate } from '@documenso/lib/utils/render-custom-email-template';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, SendStatus } from '@documenso/prisma/client';
 
-export interface SendDocumentOptions {
+export type SendDocumentOptions = {
   documentId: number;
   userId: number;
-}
+};
 
 export const sendDocument = async ({ documentId, userId }: SendDocumentOptions) => {
   const user = await prisma.user.findFirstOrThrow({
@@ -25,9 +26,12 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
     },
     include: {
       Recipient: true,
+      documentMeta: true,
     },
   });
 
+  const customEmail = document?.documentMeta;
+
   if (!document) {
     throw new Error('Document not found');
   }
@@ -44,6 +48,12 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
     document.Recipient.map(async (recipient) => {
       const { email, name } = recipient;
 
+      const customEmailTemplate = {
+        'signer.name': name,
+        'signer.email': email,
+        'document.name': document.title,
+      };
+
       if (recipient.sendStatus === SendStatus.SENT) {
         return;
       }
@@ -57,6 +67,7 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
         inviterEmail: user.email,
         assetBaseUrl,
         signDocumentLink,
+        customBody: renderCustomEmailTemplate(customEmail?.message || '', customEmailTemplate),
       });
 
       await mailer.sendMail({
@@ -68,7 +79,9 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
           name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
           address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
         },
-        subject: 'Please sign this document',
+        subject: customEmail?.subject
+          ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
+          : 'Please sign this document',
         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 }),
+  });
+};

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

@@ -0,0 +1,21 @@
+'use server';
+
+import { Prisma } from '@prisma/client';
+
+import { prisma } from '@documenso/prisma';
+
+export type UpdateDocumentOptions = {
+  documentId: number;
+  data: Prisma.DocumentUpdateInput;
+};
+
+export const updateDocument = async ({ documentId, data }: UpdateDocumentOptions) => {
+  return await prisma.document.update({
+    where: {
+      id: documentId,
+    },
+    data: {
+      ...data,
+    },
+  });
+};

packages/lib/server-only/pdf/insert-field-in-pdf.ts

@@ -50,10 +50,10 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
     let imageWidth = image.width;
     let imageHeight = image.height;
 
-    const initialDimensions = {
-      width: imageWidth,
-      height: imageHeight,
-    };
+    // const initialDimensions = {
+    //   width: imageWidth,
+    //   height: imageHeight,
+    // };
 
     const scalingFactor = Math.min(fieldWidth / imageWidth, fieldHeight / imageHeight, 1);
 
@@ -76,10 +76,10 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
     let textWidth = font.widthOfTextAtSize(field.customText, fontSize);
     const textHeight = font.heightAtSize(fontSize);
 
-    const initialDimensions = {
-      width: textWidth,
-      height: textHeight,
-    };
+    // const initialDimensions = {
+    //   width: textWidth,
+    //   height: textHeight,
+    // };
 
     const scalingFactor = Math.min(fieldWidth / textWidth, fieldHeight / textHeight, 1);
 

packages/lib/utils/render-custom-email-template.ts

@@ -0,0 +1,12 @@
+export const renderCustomEmailTemplate = <T extends Record<string, string>>(
+  template: string,
+  variables: T,
+): string => {
+  return template.replace(/\{(\S+)\}/g, (_, key) => {
+    if (key in variables) {
+      return variables[key];
+    }
+
+    return key;
+  });
+};

packages/prisma/migrations/20230920052232_document_meta/migration.sql

@@ -0,0 +1,14 @@
+-- AlterTable
+ALTER TABLE "Document" ADD COLUMN     "documentMetaId" TEXT;
+
+-- CreateTable
+CREATE TABLE "DocumentMeta" (
+    "id" TEXT NOT NULL,
+    "customEmailSubject" TEXT,
+    "customEmailBody" TEXT,
+
+    CONSTRAINT "DocumentMeta_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "Document" ADD CONSTRAINT "Document_documentMetaId_fkey" FOREIGN KEY ("documentMetaId") REFERENCES "DocumentMeta"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/migrations/20230920124941_fix_documentmeta_relation/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[documentMetaId]` on the table `Document` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "Document_documentMetaId_key" ON "Document"("documentMetaId");

packages/prisma/migrations/20230922121421_fix_document_meta_schema/migration.sql

@@ -0,0 +1,52 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `documentMetaId` on the `Document` table. All the data in the column will be lost.
+  - You are about to drop the column `customEmailBody` on the `DocumentMeta` table. All the data in the column will be lost.
+  - You are about to drop the column `customEmailSubject` on the `DocumentMeta` table. All the data in the column will be lost.
+  - A unique constraint covering the columns `[documentId]` on the table `DocumentMeta` will be added. If there are existing duplicate values, this will fail.
+  - Added the required column `documentId` to the `DocumentMeta` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- DropForeignKey
+ALTER TABLE "Document" DROP CONSTRAINT "Document_documentMetaId_fkey";
+
+-- DropIndex
+DROP INDEX "Document_documentMetaId_key";
+
+-- AlterTable
+ALTER TABLE "DocumentMeta"
+ADD COLUMN     "documentId" INTEGER,
+ADD COLUMN     "message" TEXT,
+ADD COLUMN     "subject" TEXT;
+
+-- Migrate data
+UPDATE "DocumentMeta" SET "documentId" = (
+  SELECT "id" FROM "Document" WHERE "Document"."documentMetaId" = "DocumentMeta"."id"
+);
+
+-- Migrate data
+UPDATE "DocumentMeta" SET "message" = "customEmailBody";
+
+-- Migrate data
+UPDATE "DocumentMeta" SET "subject" = "customEmailSubject";
+
+-- Prune data
+DELETE FROM "DocumentMeta" WHERE "documentId" IS NULL;
+
+-- AlterTable
+ALTER TABLE "Document" DROP COLUMN "documentMetaId";
+
+-- AlterTable
+ALTER TABLE "DocumentMeta" 
+DROP COLUMN "customEmailBody",
+DROP COLUMN "customEmailSubject";
+
+-- AlterColumn
+ALTER TABLE "DocumentMeta" ALTER COLUMN "documentId" SET NOT NULL;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "DocumentMeta_documentId_key" ON "DocumentMeta"("documentId");
+
+-- AddForeignKey
+ALTER TABLE "DocumentMeta" ADD CONSTRAINT "DocumentMeta_documentId_fkey" FOREIGN KEY ("documentId") REFERENCES "Document"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/schema.prisma

@@ -110,6 +110,7 @@ model Document {
   Field          Field[]
   documentDataId String
   documentData   DocumentData   @relation(fields: [documentDataId], references: [id], onDelete: Cascade)
+  documentMeta   DocumentMeta?
   createdAt      DateTime       @default(now())
   updatedAt      DateTime       @default(now()) @updatedAt
 
@@ -130,6 +131,14 @@ model DocumentData {
   Document    Document?
 }
 
+model DocumentMeta {
+  id       String    @id @default(cuid())
+  subject  String?
+  message  String?
+  documentId Int @unique
+  document Document @relation(fields: [documentId], references: [id], onDelete: Cascade)
+}
+
 enum ReadStatus {
   NOT_OPENED
   OPENED

packages/prisma/types/document-with-data.ts

@@ -1,5 +1,6 @@
-import { Document, DocumentData } from '@documenso/prisma/client';
+import { Document, DocumentData, DocumentMeta } from '@documenso/prisma/client';
 
 export type DocumentWithData = Document & {
   documentData?: DocumentData | null;
+  documentMeta?: DocumentMeta | null;
 };

packages/ui/primitives/document-flow/add-subject.tsx

@@ -2,7 +2,8 @@
 
 import { useForm } from 'react-hook-form';
 
-import { Document, DocumentStatus, Field, Recipient } from '@documenso/prisma/client';
+import { DocumentStatus, Field, Recipient } from '@documenso/prisma/client';
+import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
@@ -21,7 +22,7 @@ export type AddSubjectFormProps = {
   documentFlow: DocumentFlowStep;
   recipients: Recipient[];
   fields: Field[];
-  document: Document;
+  document: DocumentWithData;
   numberOfSteps: number;
   onSubmit: (_data: TAddSubjectFormSchema) => void;
 };
@@ -41,8 +42,8 @@ export const AddSubjectFormPartial = ({
   } = useForm<TAddSubjectFormSchema>({
     defaultValues: {
       email: {
-        subject: '',
-        message: '',
+        subject: document.documentMeta?.subject ?? '',
+        message: document.documentMeta?.message ?? '',
       },
     },
   });