Merge branch 'feat/refresh' into feat/document-authoring

ci: create build workflow

.env.example

@@ -1,19 +1,60 @@
+# [[AUTH]]
 NEXTAUTH_URL="http://localhost:3000"
 NEXTAUTH_SECRET="secret"
 
+# [[AUTH OPTIONAL]]
+NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
+NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=""
+
+# [[APP]]
 NEXT_PUBLIC_SITE_URL="http://localhost:3000"
 NEXT_PUBLIC_APP_URL="http://localhost:3000"
 
+# [[DATABASE]]
 NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
 
+# [[SMTP]]
+# OPTIONAL: Defines the transport to use for sending emails. Available options: smtp-auth (default) | smtp-api | mailchannels
+NEXT_PRIVATE_SMTP_TRANSPORT="smtp-auth"
+# OPTIONAL: Defines the host to use for sending emails.
+NEXT_PRIVATE_SMTP_HOST="127.0.0.1"
+# OPTIONAL: Defines the port to use for sending emails.
+NEXT_PRIVATE_SMTP_PORT=2500
+# OPTIONAL: Defines the username to use with the SMTP server.
+NEXT_PRIVATE_SMTP_USERNAME="documenso"
+# OPTIONAL: Defines the password to use with the SMTP server.
+NEXT_PRIVATE_SMTP_PASSWORD="password"
+# OPTIONAL: Defines the API key user to use with the SMTP server.
+NEXT_PRIVATE_SMTP_APIKEY_USER=
+# OPTIONAL: Defines the API key to use with the SMTP server.
+NEXT_PRIVATE_SMTP_APIKEY=
+# OPTIONAL: Defines whether to force the use of TLS.
+NEXT_PRIVATE_SMTP_SECURE=
+# REQUIRED: Defines the sender name to use for the from address.
+NEXT_PRIVATE_SMTP_FROM_NAME="No Reply @ Documenso"
+# REQUIRED: Defines the email address to use as the from address.
+NEXT_PRIVATE_SMTP_FROM_ADDRESS="noreply@documenso.com"
+# OPTIONAL: The API key to use for the MailChannels proxy endpoint.
+NEXT_PRIVATE_MAILCHANNELS_API_KEY=
+# OPTIONAL: The endpoint to use for the MailChannels API if using a proxy.
+NEXT_PRIVATE_MAILCHANNELS_ENDPOINT=
+# OPTIONAL: The domain to use for DKIM signing.
+NEXT_PRIVATE_MAILCHANNELS_DKIM_DOMAIN=
+# OPTIONAL: The selector to use for DKIM signing.
+NEXT_PRIVATE_MAILCHANNELS_DKIM_SELECTOR=
+# OPTIONAL: The private key to use for DKIM signing.
+NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY=
+
+# [[STRIPE]]
+NEXT_PRIVATE_STRIPE_API_KEY=
+NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID=
 
-NEXT_PRIVATE_STRIPE_API_KEY=
-NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
-
+# [[FEATURES]]
 NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED=false
 
 # This is only required for the marketing site
+# [[REDIS]]
 NEXT_PRIVATE_REDIS_URL=
 NEXT_PRIVATE_REDIS_TOKEN=

.github/workflows/ci.yml

@@ -0,0 +1,29 @@
+name: "Continuous Integration"
+
+on:
+  push:
+    branches: [ "feat/refresh" ]
+  pull_request:
+    branches: [ "feat/refresh" ]
+
+env:
+  HUSKY: 0
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 2
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# contentlayer
+.contentlayer

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

CLA.md

@@ -0,0 +1,45 @@
+# Documenso Contributors License Agreement
+
+This Contributors License Agreement ("CLA") is entered into between the Contributor, and Documenso Inc. ("Documenso"), collectively referred to as the "Parties."
+
+## Background:
+
+Documenso is an open-source project aimed at providing an open-source document signing platform for all parties. This CLA governs the rights and contributions made by the Contributor to the Documenso project.
+
+## Agreement:
+
+**Contributor Grant of License:**
+
+By submitting code, documentation, or any other materials (collectively, "Contributions") to the Documenso project, the Contributor grants Documenso a perpetual, worldwide, non-exclusive, royalty-free, sublicensable license to use, modify, distribute, and otherwise exploit the Contributions, including any intellectual property rights therein, for the purposes of the Documenso project.
+
+**Representation of Ownership and Right to Contribute:**
+
+The Contributor represents that they have the legal right to grant the license stated in Section 1, and that the Contributions do not infringe upon the intellectual property rights of any third party. The Contributor also represents that they have the authority to submit the Contributions on their own behalf or, if applicable, on behalf of their employer or any other entity.
+
+**Patent Grant:**
+
+If the Contributions include any method, process, or apparatus that is covered by a patent, the Contributor agrees to grant Documenso a non-exclusive, worldwide, royalty-free license under any patent claims necessary to use, modify, distribute, and otherwise exploit the Contributions for the purposes of the Documenso project.
+
+**No Implied Warranties or Support:**
+
+The Contributor acknowledges that the Contributions are provided "as is," without any warranties or support of any kind. Documenso shall have no obligation to provide maintenance, updates, bug fixes, or support for the Contributions.
+
+**Retention of Contributor Rights:**
+
+The Contributor retains all right, title, and interest in and to their Contributions. This CLA does not restrict the Contributor from using their own Contributions for any other purpose.
+
+**Governing Law:**
+
+This CLA shall be governed by and construed in accordance with the laws of California (CA), without regard to its conflict of laws principles.
+
+**Entire Agreement:**
+
+This CLA constitutes the entire agreement between the Parties with respect to the subject matter hereof and supersedes all prior and contemporaneous understandings, agreements, representations, and warranties.
+
+**Acceptance:**
+
+By submitting Contributions to the Documenso project, the Contributor acknowledges and agrees to the terms and conditions of this CLA. If the Contributor is agreeing to this CLA on behalf of an entity, they represent that they have the necessary authority to bind that entity to these terms.
+
+**Effective Date:**
+
+This CLA is effective as of the date of the first Contribution made by the Contributor to the Documenso project.

CONTRIBUTING.md

@@ -7,10 +7,11 @@ If you plan to contribute to Documenso, please take a moment to feel awesome ✨
 - Before jumping into a PR be sure to search [existing PRs](https://github.com/documenso/documenso/pulls) or [issues](https://github.com/documenso/documenso/issues) for an open or closed item that relates to your submission.
 - Select and issue from [here](https://github.com/documenso/documenso/issues) or create a new one
 - Consider the results from the discussion in the issue
+- Accept the [Contributor License Agreement](https://documen.so/cla) to ensure we can accept your contributions.
 
 ## Developing
 
-The development branch is <code>main</code>. All pull request should be made against this branch. If you need help getting started, [join us on Slack](https://join.slack.com/t/documenso/shared_invite/zt-1qwxxsvli-nDyojjt~wakhgBGl9JRl2w).
+The development branch is <code>main</code>. All pull request should be made against this branch. If you need help getting started, [join us on Discord](https://documen.so/discord).
 
 1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your
    own GitHub account and then

README.md

@@ -11,7 +11,7 @@
     <a href="https://documenso.com"><strong>Learn more »</strong></a>
     <br />
     <br />
-    <a href="https://documen.so/slack">Slack</a>
+    <a href="https://documen.so/discord">Discord</a>
     ·
     <a href="https://documenso.com">Website</a>
     ·
@@ -22,7 +22,7 @@
 </p>
 
 <p align="center">
-   <a href="https://documen.so/slack"><img src="https://img.shields.io/badge/Slack-documenso.slack.com-%234A154B" alt="Join Documenso on Slack"></a>
+   <a href="https://documen.so/discord"><img src="https://img.shields.io/badge/Discord-documen.so/discord-%235865F2" alt="Join Documenso on Discord"></a>
    <a href="https://github.com/documenso/documenso/stargazers"><img src="https://img.shields.io/github/stars/documenso/documenso" alt="Github Stars"></a>
    <a href="https://github.com/documenso/documenso/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
    <a href="https://github.com/documenso/documenso/pulse"><img src="https://img.shields.io/github/commit-activity/m/documenso/documenso" alt="Commits-per-month"></a>

apps/marketing/ambient.d.ts

@@ -0,0 +1 @@
+declare module '@documenso/tailwind-config';

apps/marketing/content/blog/announcing-open-source-docusign-alternative.mdx

@@ -0,0 +1,51 @@
+---
+title: Announcing Documenso
+description: Launching an open-source document signing tool because trusted-based products should be built on openness. The first release will be in 2023. Sign up at documenso.com to be on board.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2022-12-29
+tags:
+  - Announcement
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-banner-announcing-documenso.webp"
+    width="1400"
+    height="884"
+    alt="Documenso announcement blog banner"
+  />
+
+  <figcaption className="text-center">Documenso — The Open Source DocuSign Alternative.</figcaption>
+</figure>
+
+## TL; DR;
+
+I'm launching an open source document signing tool because trust-based products should be built on openness. The first release will be in 2023. Sign up at <a href="https://documenso.com" target="_blank">documenso.com</a> and get on board.
+
+## Let’s build the world’s most trusted document-signing tool.
+
+Today I'm excited to announce my new project Documenso. Documenso is an open source document signing tool you can host yourself and freely build upon because it's, you know, open source. Before I get more into the details of what and when will be launched I want to take a moment and talk about why.
+
+## Digital signing is great
+
+Signing Documents digitally has countless benefits: Less struggle with printing, less wasting paper, faster request delivery, easier changes, easier coordination of people far away, verifiable document integrity, and verifiable signer identity (this is a vast topic, will write more on soon), easier storage and search of signed documents, the list goes on. Digital Signatures take something very old and very trusted like personally signing documents into the digital space, adding the benefits listed above. It also introduces a new party to every signing transaction, the signing tool providers. What was peer to peer transaction before, now goes through an intermediary. While this isn't a problem in itself, it should make us think about how we want these providers of trust to work.
+
+## How do we build trusted systems?
+
+While doing research for Documenso I came upon a quote that expresses the current state of document signing pretty well:
+
+> Document signing is NOT a technical problem. [Editor’s Note: Because it was solved technically a long time ago] It’s a legal acceptance problem — and everyone KNOWS DocuSign and friends and understands how they’re admissible. Anything else would have to compete with that and people would be suspicious of it for a long time.
+
+While this may sound like a hurdle at first, it immediately gave me a sense of validation for a more open approach to signing. People will and should be suspicious of their tools and demand a high bar when it comes to trust. And the way to earn this trust is by being open. Trusted tools should be the result of thoughtful discussion and reviews. They should be the result of the needs and will of its community. They should be transparent, adaptable, and empowering while using. Open Source embodies these values very well for software, which makes it a perfect fit for this space and creating a high-trust tool.
+
+## Next Steps
+
+So, what can you expect from here on out? I've started to build Documenso 0.1 which is scheduled to release in “early” 2023. If you're interested in helping make this happen, let me know via [hi@documenso.com](mailto:hi@documenso.com). Getting working code into the hands of the perspective Documenso community is currently the #1 goal. Other than that I'll be releasing several articles about document signing and what something like Documenso should look like, in my humble opinion. So stay tuned!
+
+If you think Documenso is worthy of support, please share <a href="https://documenso.com" target="_blank">documenso.com</a> with anyone interested, and sign up to be among the first to try out version 0.1 as soon as it launches.
+
+Cheers from Hamburg
+
+Timur

apps/marketing/content/blog/building-documenso-pt1.mdx

@@ -0,0 +1,98 @@
+---
+title: 'Building Documenso — Part 1: Certificates'
+description: In today's fast-paced world, productivity and efficiency are crucial for success, both in personal and professional endeavors. We all strive to make the most of our time and energy to achieve our goals effectively. However, it's not always easy to stay on track and maintain peak performance. In this blog post, we'll explore 10 valuable tips to help you boost productivity and efficiency in your daily life.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2023-06-23
+tags:
+  - Open Source
+  - Document Signature
+  - Certificates
+  - Signing
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-banner-building-documenso.webp"
+    width="1200"
+    height="675"
+    alt="Building Documenso blog banner"
+  />
+
+  <figcaption className="text-center">
+    What actually is a signature?
+  </figcaption>
+</figure>
+
+> Disclaimer: I’m not a lawyer and this isn’t legal advice. We plan to publish a much more specific framework on the topic of signature validity.
+
+This is the first installment of the new Building Documenso series, where I describe the challenges and design choices that we make while building the world’s most open signing platform.
+
+As you may have heard, we launched the community-reviewed <a href="https://github.com/documenso/documenso" target="_blank">version 0.9 of Documenso on GitHub</a> recently and it’s now available through the early adopter’s plan. One of the most fundamental choices we had to make on this first release, was the choice of certificate. While it’s interesting to know what we opted for, this shall also serve as a guide for everyone facing the same choice for self-hosting Documenso.
+
+> Question: Why do I need a document signing certificate to self-host?
+>
+> Short Answer: Inserting the images of a signature into the document is only part of the signing process.
+
+To have an actual digitally signed document you need a document signing certificate that is used to create the digital signature that is inserted into the document, alongside the visible one¹.
+
+When hosting a signature service yourself, as we do, there are four main choices for handling the certificate: Not using a certificate, creating your own, buying a trusted certificate, and becoming and trusted service provider to issue your own trusted certificate.
+
+## 1\. No Certificate
+
+A lot of signing services actually don’t employ actual digital signatures besides the inserted image. The only insert and image of the signatures into the document you sign. This can be done and is legally acceptable in many cases. This option isn’t directly supported by Documenso without changing the code.
+
+## 2\. Create your own
+
+Since the cryptography behind certificates is freely available as open source you could generate your own using OpenSSL for example. Since it’s hardly more work than option 1 (using Documenso at least), this would be my minimum effort recommendation. Having a self-created (“self-signed”) certificate doesn’t add much in terms of regulation but it guarantees the document’s integrity, meaning no changes have been made after signing². What this doesn’t give you, is the famous green checkmark in Adobe Acrobat. Why? Because you aren’t on the list of providers Adobe “trusts”.³
+
+## 3\. Buy a “trusted” certificate.
+
+There are Certificate Authorities (CAs) that can sell you a certificate⁴. The service they provide is, that they validate your name (personal certificates) or your organization’s name (corporate certificate) before creating your certificate for you, just like you did in option 2. The difference is, that they are listed on the previously mentioned trust lists (e.g. Adobe’s) and thus the resulting signatures get a nice, green checkmark in Adobe Reader⁵
+
+## 4\. Becoming a Trusted Certificate Authority (CA) yourself and create your own certificate
+
+This option is an incredibly complex endeavour, requiring a lot of effort and skill. It can be done, as there are multiple CAs around the world. Is it worth the effort? That depends a lot on what you’re trying to accomplish.
+
+<center>.&nbsp;&nbsp;.&nbsp;&nbsp;.</center>
+
+## What we did
+
+Having briefly introduced the options, here is what we did: Since we aim to raise the bar on digital signature proliferation and trust, we opted to buy an “Advanced Personal Certificates for Companies/Organisations” from WiseKey. Thus, documents signed with Documenso’s hosted version look like this:
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-fig-building-documenso.webp"
+    width="1262"
+    height="481"
+    alt="Figure 1"
+  />
+
+  <figcaption className="text-center">The famous green checkmark: Signed by hosted Documenso</figcaption>
+</figure>
+
+There weren’t any deeper reasons we choose WiseKey, other than they offered what we needed and there wasn’t any reason to look much further. While I didn’t map the entire certificate market offering (yet), I’m pretty sure something similar could be found elsewhere. While we opted for option 3, choosing option 2 might be perfectly reasonable considering your use case.⁶
+
+> While this is our setup, for now, we have a bigger plan for this topic. While globally trusted SSL Certificates have been available for free, courtesy of Let’s Encrypt, for a while now, there is no such thing as document signing. And there should be. Not having free and trusted infrastructure for signing is blocking a completely new generation of signing products from being created. This is why we’ll start working on option 4 when the time is right.
+
+Do you have questions or thoughts about this? As always, let me know in the comments, on <a href="http://twitter.com/eltimuro" target="_blank">twitter.com/eltimuro</a>
+or directly: <a href="https://documen.so/timur" target="_blank">documen.so/timur</a>
+
+Join the self-hoster community here: <a href="https://documenso.slack.com/" target="_blank">https://documenso.slack.com/</a>
+
+Best from Hamburg
+
+Timur
+
+\[1\] There are different approaches to signing a document. For the sake of simplicity, here we talk about a document with X inserted signature images, that is afterward signed once the by signing service, i.e. Documenso. If each visual signature should have its own digital one (e.g. QES — eIDAS Level 3), the case is a bit more complex.
+
+\[2\] Of course, the signing service provider technically can change and resign the document, especially in the case mentioned in \[1\]. This can be countered by requiring actual digital signatures from each signer, that are bound to their identity/ account. Creating a completely trustless system in the context however is extremely hard to do and not the most pressing business need for the industry at this point, in my opinion. Though, this would be nice.
+
+\[3\] Adobe, like the EU, has a list of organizations they trust. The Adobe green checkmark is powered by the Adobe trust list, if you want to be trusted by EU standards here: <a href="https://ec.europa.eu/digital-building-blocks/DSS/webapp-demo/validation" target="_blank">https://ec.europa.eu/digital-building-blocks/DSS/webapp-demo/validation</a>, you need to be on the EU trust list. Getting on each list is possible, though the latter is much more work.
+
+\[4\] Technically, they sign your certificate creation request (created by you), containing your info with their certificate (which is trusted), making your certificate trusted. This way, everything you sign with your certificate is seen as trusted. They created their certificate just like you, the difference is they are on the lists, mentioned in \[3\]
+
+\[5\] Why does Adobe get to say, what is trusted? They simply happen to have the most used pdf viewer. And since everyone checks there, whom they consider trusted carries weight. If it should be like this, is a different matter.
+
+\[6\] Self-Signed signatures, even purely visual signatures, are fully legally binding. Why you use changes mainly your confidence in the signature and the burden of proof. Also, some industries require a certain level of signatures e.g. retail loans (QES/ eIDAS Level 3 in the EU).

apps/marketing/content/blog/manifest.mdx

@@ -0,0 +1,29 @@
+---
+title: The Documenso Manifest
+description: Signing documents is a fundamental building block of private, economic, and government interactions. Access to easy and secure signing to participate in society should therefore be a fundamental right for everyone. The technology to enable this should be accessible and widespread.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2023-07-13
+tags:
+  - Manifesto
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/blog-banner-manifest.jpeg"
+    width="1260"
+    height="630"
+    alt="The Documenso Manifest blog banner"
+  />
+
+  <figcaption className="text-center">
+    Documenso — The Open Source DocuSign Alternative.
+  </figcaption>
+</figure>
+
+Signing documents is a fundamental building block of private, economic, and government interactions. Access to easy and secure signing to participate in society should therefore be a fundamental right for everyone. The technology to enable this should be accessible and widespread.
+
+We know that open source is the key to solving this need once and for all to benefit all humankind. Using open source kickstarts innovation by putting the open sharing of ideas and solutions first. With Documenso, we will create an open and globally accessible signing platform to empower users, customers, and developers to fulfill their needs. Documenso is built by and for the global community, listening and implementing what is needed. Being transparent with the code and the processes that use it brings trust and security to the platform.
+
+We build Documenso for longevity and scale by embracing the capital efficiency and inclusiveness of the Commercial Open Source (COSS) movement. We are building a global commodity for the world.

apps/marketing/content/blog/pre-seed.mdx

@@ -0,0 +1,36 @@
+---
+title: Announcing Pre-Seed and Open Metrics
+description: We are exicited to report the closing of our Pre-Seed round. You can find the juicy details on our new /open page. Yes, it was signed using Documenso.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2023-08-17
+tags:
+  - Funding
+  - Metrics
+  - Open Startup
+---
+
+Today I'm happy to announce that we closed a \$1.25M Pre-Seed round for Documenso, bringing our total funding to \$1.54M. The round actually closed last month, we just were sneaky about it. 
+
+## Two more for the road (to open signing)
+We're ecstatic to welcome [OSS Capital](https://twitter.com/osscapital) and especially [Joseph Jacks](https://twitter.com/JosephJacks_) to the inner circle of the open signing revolution. We're also fortunate to be joined by Orrick's very own [John Harrison](https://www.linkedin.com/in/john-harrison-a1213b9/) and his legal experience. For those who are wondering, yes, the round was, of course, signed using Documenso.
+
+## Open Source, Open Metrics
+If you follow us, you know we're firmly committed to the open source values of openness and transparency. For us, this includes not only the code side of things but also the business. As we aim to build trust among our investors, customers, and partners, we want to be open about what's going on. We also want to allow everyone to learn from our data and choices, just as we did from so many other COSS (Commercial Open Source) startups. The term "Open Startup" isn't precisely defined (and probably will never be, just like startup). There is however a [great write-up](https://cal.com/blog/open-startup) about the basics by the founder of our favorite open source scheduling tool Cal.com. 
+
+The two main takeaways are:
+
+- "Any Startup that shares its metrics as open as technically and operationally possible is an Open Startup."
+- "Why should I care? Frankly speaking, Open Startups have a tough time screwing you over."
+
+The more open the culture, the less shady stuff is going on. While this may sound trivial, the implications are profound. A new generation of organizations, operating more ethically and responsibly simply because everything is out in the open. 
+
+For us, there are two sides to being an Open Startup:
+
+- The company side: Sharing Financial KPIs like growth, funding, team structure, salary, internal processes, and tools.
+- The product side: Sharing insights and data like usage, reach, and GitHub activity.
+
+Both sides aim to contribute to the global knowledge base of how startups work, specifically COSS startups. As we see more and more COSS, best practices and business insights should be broadly available to let the space mature. As we contribute code to the global community, we also contribute our business knowledge to help bring about even more COSS. 
+
+Starting today, we're releasing a lot of our data as part of the Open Startup movement. You can find the juicy details on our funding and more here: [documen.so/open](https://documen.so/open)

apps/marketing/content/blog/switching-from-slack-to-discord.mdx

@@ -0,0 +1,135 @@
+---
+title: Switching to Discord
+description: The Documenso community is growing and we feel the need to have a more community and developer-friendly environment. We're switching to Discord.
+authorName: 'Flo Merian'
+authorImage: '/blog/blog-author-flo.jpeg'
+authorRole: 'Go-to-market'
+date: 2023-08-02
+tags:
+  - Announcement
+  - Community
+---
+
+We’re switching to Discord.
+
+Documenso is an open-source DocuSign alternative, built with community and transparency in mind.
+
+So, when we started working on the project, we quickly set up a Slack workspace to start engaging with community members.
+
+As the community grows (reached 2K stars on GitHub and 100 community members on Slack), we felt the need to set up a more community-friendly environment.
+
+The Documenso team is growing, too. [Lucas joined Timur](https://twitter.com/ElTimuro/status/1648608988391514112), then [Ephraim](https://twitter.com/documenso/status/1662418374243041280) and [David](https://github.com/dguyen) recently joined the journey. We want to stay in touch with the community as much as possible and avoid context-switching to focus on work, support, and fun.
+
+We’re an open-source project and focus on building a great developer experience. So, when we thought of a Slack replacement, community and developer-friendly, Discord was an obvious choice — not to mention that it would help us keep up with [OSS friends](https://documen.so/oss), too.
+
+So, we’re switching all conversations, team and community-wide, to Discord.
+
+In this post, we won’t debate *why* we’re switching — Slack vs. Discord is a long-lasting debate with pros and cons, and fans on both sides. There are great [stories](https://blog.meilisearch.com/from-slack-to-discord-our-migration/) and [threads](https://twitter.com/McPizza0/status/1655519558600470528) on the topic. We just don’t want to write yet another story here.
+
+Instead, we’ll focus on *how* we plan to make the switch.
+
+## Who is this story for?
+
+First, we wrote this post for the team so we’re ready for the switch. Then we post it online because we value transparency and thought it might help the community.
+
+For community members, this story would help you understand how we plan to make the switch and give you the guidance to fully embrace the new experience.
+
+For founders and makers who would like to switch too, in one way or another, this story would help you handle the transition with a detailed guide.
+
+## Switching to Discord
+
+We’re switching to Discord, step by step. First, we’re moving team conversations, then we’re moving the community with a 15-day buffering. 
+
+The detailed plan goes like this:
+
+- 2023-07-25 `t=0`: Timur starts setting up the Discord server and sends invites to the team.
+- 2023-07-26 `t+1`: The team switches to Discord. The objective is to get used to the product and to customize it to feel at home and, when we’re ready to welcome the community, to make new members feel at home, too.
+- 2023-08-02 `t+8`: We announce to the community the upcoming changes in the different channels — GitHub, Twitter, and Slack.
+
+    - **GitHub**
+        - Create new Pull Request
+            - Add story to the blog
+            - Update link to the community
+                
+            ```
+            https://documen.so/discord
+            ```
+                
+        - Start a new Discussion
+            
+            ```markdown
+            Happy Wednesday!
+            
+            TL,DR: We’re switching to Discord. [Join the fun!](https://documen.so/discord)
+            
+            We want to build a beautiful, open-source DocuSign alternative. As we're growing (reached 2.3K Stars), we feel the need to have a more community- and developer-friendly environment to share ideas, support, and memes.
+            
+            Make sure to join the server to keep up to date on all things Documenso. 
+            
+            Oh and, spoiler alert, there may be some swag there 👀
+            
+            See you there!
+            Flo
+            ```
+            
+    - **Twitter**
+        - [Tweet the announcement](https://twitter.com/documenso/status/1686719482096766977)
+        - Pin Tweet
+        - Update link in bio
+            
+            ```
+            The Open Source DocuSign Alternative.
+            
+            http://documen.so/github
+            http://documen.so/discord
+            http://documen.so/manifest
+            ㅤ
+            ```
+            
+    - **Slack**
+        - Post message in `#general`
+            
+            ```markdown
+            Happy Wednesday!
+            
+            TL,DR: We’re switching to Discord. [Join the fun!](https://documen.so/discord)
+            
+            We want to build a beautiful, open-source DocuSign alternative. As we're growing (reached 2.3K Stars), we feel the need to have a more community- and developer-friendly environment to share ideas, support, and memes.
+            
+            Make sure to [join the server](https://documen.so/discord) to keep up to date on all things Documenso. 
+            
+            Oh and, spoiler alert, there may be some swag there 👀
+            
+            See you there!
+            Flo
+            ```
+            
+        - Pin post
+        - Set topic and description
+            
+            ```
+            We're switching to Discord. Join the fun: https://documen.so/discord
+            ```
+            
+        - Archive channels: `#code-review` `#how-to` `#meet-and-greet` `#random-memes` `#self-hosting` `#support`
+        
+- 2023-08-09 `t+15`: 7 days later, we send a reminder on Slack.
+    - **Slack**
+        - Schedule reminder in `#general`
+            
+            ```
+            Friendly reminder: we're switching to Discord and will soon disconnect this Slack workspace.
+            
+            Join the fun! https://documen.so/discord
+            ```
+            
+- 2023-08-16 `t+22`: 15 days later, we’re making the final edits to the Slack workspace.
+    - **Slack**
+        - [Edit posting permissions](https://app.slack.com/slackhelp/en-US/360004635551) in `#general`
+        - Disconnect Slack
+
+## Final thoughts
+
+- We’re at the very, early stage on our journey to building a beautiful, open-source DocuSign alternative. We want to build a great developer experience with the open-source community and, switching to Discord, we want to set up the foundations of an open, safe place for community members to get in touch, brainstorm ideas, and have fun.
+- It doesn’t mean we won’t ever switch back to Slack. The tools of today aren’t the ones of tomorrow. We don’t delete the Slack workspace, we archive it, and keep the `documenso` handle. May it be just an *au revoir?*
+- For now, we’re pushing forward and are eager to welcome you on Discord. Make sure to [join the server](https://documen.so/discord) in order to keep up to date on all things Documenso. See you there!

apps/marketing/content/privacy.mdx

@@ -0,0 +1,256 @@
+---
+title: Privacy Policy
+---
+
+# Privacy Policy
+
+Effective date: 05/28/2023
+
+### 1\. Introduction
+
+Welcome to **Documenso Inc.**
+
+Documenso Inc. (“us”, “we”, or “our”) operates [https://documenso.com](https://documenso.com) (hereinafter referred to as “ **Service**”).
+
+Our Privacy Policy governs your visit to [https://documenso.com](https://documenso.com), and explains how we collect, safeguard and disclose information that results from your use of our Service.
+
+We use your data to provide and improve Service. By using Service, you agree to the collection and use of information in accordance with this policy. Unless otherwise defined in this Privacy Policy, the terms used in this Privacy Policy have the same meanings as in our Terms and Conditions.
+
+Our Terms and Conditions (“**Terms**”) govern all use of our Service and together with the Privacy Policy constitutes your agreement with us (“ **agreement**”).
+
+### 2\. Definitions
+
+**SERVICE** means the https://documenso.com website operated by Documenso Inc.
+
+**PERSONAL DATA** means data about a living individual who can be identified from those data (or from those and other information either in our possession or likely to come into our possession).
+
+**USAGE DATA** is data collected automatically either generated by the use of Service or from Service infrastructure itself (for example, the duration of a page visit).
+
+**COOKIES** are small files stored on your device (computer or mobile device).
+
+**DATA CONTROLLER** means a natural or legal person who (either alone or jointly or in common with other persons) determines the purposes for which and the manner in which any personal data are, or are to be, processed. For the purpose of this Privacy Policy, we are a Data Controller of your data.
+
+**DATA PROCESSORS (OR SERVICE PROVIDERS)** means any natural or legal person who processes the data on behalf of the Data Controller. We may use the services of various Service Providers in order to process your data more effectively.
+
+**DATA SUBJECT** is any living individual who is the subject of Personal Data.
+
+**THE USER** is the individual using our Service. The User corresponds to the Data Subject, who is the subject of Personal Data.
+
+### 3\. Information Collection and Use
+
+We collect several different types of information for various purposes to provide and improve our Service to you.
+
+### 4\. Types of Data Collected
+
+**Personal Data**
+
+While using our Service, we may ask you to provide us with certain personally identifiable information that can be used to contact or identify you (“**Personal Data**”). Personally identifiable information may include, but is not limited to:
+
+1.  Email address
+2.  First name and last name
+3.  Cookies and Usage Data
+
+We may use your Personal Data to contact you with newsletters, marketing or promotional materials and other information that may be of interest to you. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link.
+
+**Usage Data**
+
+We may also collect information that your browser sends whenever you visit our Service or when you access Service by or through a mobile device (“**Usage Data**”).
+
+This Usage Data may include information such as your computer's Internet Protocol address (e.g. IP address), browser type, browser version, the pages of our Service that you visit, the time and date of your visit, the time spent on those pages, unique device identifiers and other diagnostic data.
+
+When you access Service with a mobile device, this Usage Data may include information such as the type of mobile device you use, your mobile device unique ID, the IP address of your mobile device, your mobile operating system, the type of mobile Internet browser you use, unique device identifiers and other diagnostic data.
+
+**Tracking Cookies Data**
+
+We use cookies and similar tracking technologies to track the activity on our Service and we hold certain information.
+
+Cookies are files with a small amount of data which may include an anonymous unique identifier. Cookies are sent to your browser from a website and stored on your device. Other tracking technologies are also used such as beacons, tags and scripts to collect and track information and to improve and analyze our Service.
+
+You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent. However, if you do not accept cookies, you may not be able to use some portions of our Service.
+
+Examples of Cookies we use:
+
+1.  **Session Cookies:** We use Session Cookies to operate our Service.
+2.  **Preference Cookies:** We use Preference Cookies to remember your preferences and various settings.
+3.  **Security Cookies:** We use Security Cookies for security purposes.
+4.  **Advertising Cookies:** Advertising Cookies are used to serve you with advertisements that may be relevant to you and your interests.
+
+### 5\. Use of Data
+
+Documenso Inc. uses the collected data for various purposes:
+
+1.  to provide and maintain our Service;
+2.  to notify you about changes to our Service;
+3.  to allow you to participate in interactive features of our Service when you choose to do so;
+4.  to provide customer support;
+5.  to gather analysis or valuable information so that we can improve our Service;
+6.  to monitor the usage of our Service;
+7.  to detect, prevent and address technical issues;
+8.  to fulfill any other purpose for which you provide it;
+9.  to carry out our obligations and enforce our rights arising from any contracts entered into between you and us, including for billing and collection;
+10. to provide you with notices about your account and/or subscription, including expiration and renewal notices, email-instructions, etc.;
+11. to provide you with news, special offers and general information about other goods, services and events which we offer that are similar to those that you have already purchased or enquired about unless you have opted not to receive such information;
+12. in any other way we may describe when you provide the information;
+13. for any other purpose with your consent.
+
+### 6\. Retention of Data
+
+We will retain your Personal Data only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use your Personal Data to the extent necessary to comply with our legal obligations (for example, if we are required to retain your data to comply with applicable laws), resolve disputes, and enforce our legal agreements and policies.
+
+We will also retain Usage Data for internal analysis purposes. Usage Data is generally retained for a shorter period, except when this data is used to strengthen the security or to improve the functionality of our Service, or we are legally obligated to retain this data for longer time periods.
+
+### 7\. Transfer of Data
+
+Your information, including Personal Data, may be transferred to – and maintained on – computers located outside of your state, province, country or other governmental jurisdiction where the data protection laws may differ from those of your jurisdiction.
+
+If you are located outside United States and choose to provide information to us, please note that we transfer the data, including Personal Data, to United States and process it there.
+
+Your consent to this Privacy Policy followed by your submission of such information represents your agreement to that transfer.
+
+Documenso Inc. will take all the steps reasonably necessary to ensure that your data is treated securely and in accordance with this Privacy Policy and no transfer of your Personal Data will take place to an organisation or a country unless there are adequate controls in place including the security of your data and other personal information.
+
+### 8\. Disclosure of Data
+
+We may disclose personal information that we collect, or you provide:
+
+1.  **Disclosure for Law Enforcement.**
+2.  Under certain circumstances, we may be required to disclose your Personal Data if required to do so by law or in response to valid requests by public authorities.
+3.  **Business Transaction.**
+4.  If we or our subsidiaries are involved in a merger, acquisition or asset sale, your Personal Data may be transferred.
+5.  **Other cases. We may disclose your information also:**
+    1.  to our subsidiaries and affiliates;
+    2.  to contractors, service providers, and other third parties we use to support our business;
+    3.  to fulfill the purpose for which you provide it;
+
+### 9\. Security of Data
+
+The security of your data is important to us but remember that no method of transmission over the Internet or method of electronic storage is 100% secure. While we strive to use commercially acceptable means to protect your Personal Data, we cannot guarantee its absolute security.
+
+### 10\. Your Data Protection Rights Under General Data Protection Regulation (GDPR)
+
+If you are a resident of the European Union (EU) and European Economic Area (EEA), you have certain data protection rights, covered by GDPR. – See more at [https://eur-lex.europa.eu/eli/reg/2016/679/oj](https://eur-lex.europa.eu/eli/reg/2016/679/oj)
+
+We aim to take reasonable steps to allow you to correct, amend, delete, or limit the use of your Personal Data.
+
+If you wish to be informed what Personal Data we hold about you and if you want it to be removed from our systems, please email us at hi@documenso.com.
+
+In certain circumstances, you have the following data protection rights:
+
+1.  the right to access, update or to delete the information we have on you;
+2.  the right of rectification. You have the right to have your information rectified if that information is inaccurate or incomplete;
+3.  the right to object. You have the right to object to our processing of your Personal Data;
+4.  the right of restriction. You have the right to request that we restrict the processing of your personal information;
+5.  the right to data portability. You have the right to be provided with a copy of your Personal Data in a structured, machine-readable and commonly used format;
+6.  the right to withdraw consent. You also have the right to withdraw your consent at any time where we rely on your consent to process your personal information;
+
+Please note that we may ask you to verify your identity before responding to such requests. Please note, we may not able to provide Service without some necessary data.
+
+You have the right to complain to a Data Protection Authority about our collection and use of your Personal Data. For more information, please contact your local data protection authority in the European Economic Area (EEA).
+
+### 11\. Your Data Protection Rights under the California Privacy Protection Act (CalOPPA)
+
+CalOPPA is the first state law in the nation to require commercial websites and online services to post a privacy policy. The law’s reach stretches well beyond California to require a person or company in the United States (and conceivable the world) that operates websites collecting personally identifiable information from California consumers to post a conspicuous privacy policy on its website stating exactly the information being collected and those individuals with whom it is being shared, and to comply with this policy. – See more at: [https://consumercal.org/about-cfc/cfc-education-foundation/california-online-privacy-protection-act-caloppa-3/](https://consumercal.org/about-cfc/cfc-education-foundation/california-online-privacy-protection-act-caloppa-3/)
+
+According to CalOPPA we agree to the following:
+
+1.  users can visit our site anonymously;
+2.  our Privacy Policy link includes the word “Privacy”, and can easily be found on the page specified above on the home page of our website;
+3.  users will be notified of any privacy policy changes on our Privacy Policy Page;
+4.  users are able to change their personal information by emailing us at hi@documenso.com.
+
+Our Policy on “Do Not Track” Signals:
+
+We honor Do Not Track signals and do not track, plant cookies, or use advertising when a Do Not Track browser mechanism is in place. Do Not Track is a preference you can set in your web browser to inform websites that you do not want to be tracked.
+
+You can enable or disable Do Not Track by visiting the Preferences or Settings page of your web browser.
+
+### 12\. Your Data Protection Rights under the California Consumer Privacy Act (CCPA)
+
+If you are a California resident, you are entitled to learn what data we collect about you, ask to delete your data and not to sell (share) it. To exercise your data protection rights, you can make certain requests and ask us:
+
+1.  **What personal information we have about you**. If you make this request, we will return to you:
+
+    1.  The categories of personal information we have collected about you.
+    2.  The categories of sources from which we collect your personal information.
+    3.  The business or commercial purpose for collecting or selling your personal information.
+    4.  The categories of third parties with whom we share personal information.
+    5.  The specific pieces of personal information we have collected about you.
+    6.  A list of categories of personal information that we have sold, along with the category of any other company we sold it to. If we have not sold your personal information, we will inform you of that fact.
+    7.  A list of categories of personal information that we have disclosed for a business purpose, along with the category of any other company we shared it with.
+
+    Please note, you are entitled to ask us to provide you with this information up to two times in a rolling twelve-month period. When you make this request, the information provided may be limited to the personal information we collected about you in the previous 12 months.
+
+2.  **To delete your personal information**. If you make this request, we will delete the personal information we hold about you as of the date of your request from our records and direct any service providers to do the same. In some cases, deletion may be accomplished through de-identification of the information. If you choose to delete your personal information, you may not be able to use certain functions that require your personal information to operate.
+3.  **To stop selling your personal information**. We don't sell or rent your personal information to any third parties for any purpose. You are the only owner of your Personal Data and can request disclosure or deletion at any time.
+
+Please note, if you ask us to delete or stop selling your data, it may impact your experience with us, and you may not be able to participate in certain programs or membership services which require the usage of your personal information to function. But in no circumstances, we will discriminate against you for exercising your rights.
+
+To exercise your California data protection rights described above, please send your request(s) by one of the following means:
+
+By email: hi@documenso.com
+
+Your data protection rights, described above, are covered by the CCPA, short for the California Consumer Privacy Act. To find out more, visit the official [California Legislative Information website](https://leginfo.legislature.ca.gov/faces/billTextClient.xhtml?bill_id=201720180AB375). The CCPA took effect on 01/01/2020.
+
+### 13\. Service Providers
+
+We may employ third party companies and individuals to facilitate our Service (“ **Service Providers**”), provide Service on our behalf, perform Service-related services or assist us in analysing how our Service is used.
+
+These third parties have access to your Personal Data only to perform these tasks on our behalf and are obligated not to disclose or use it for any other purpose.
+
+### 14\. Analytics
+
+We may use third-party Service Providers to monitor and analyze the use of our Service.
+
+**Plausible Analytics**
+
+Plausible Analytics is an analytics service provided by Conva Ventures Inc. You can find their Privacy Policy here: [https://plausible.io/privacy](https://plausible.io/privacy)
+
+### 15\. CI/CD tools
+
+We may use third-party Service Providers to automate the development process of our Service.
+
+**GitHub**
+
+GitHub is provided by GitHub, Inc.
+
+GitHub is a development platform to host and review code, manage projects, and build software.
+
+For more information on what data GitHub collects for what purpose and how the protection of the data is ensured, please visit GitHub Privacy Policy page: [https://help.github.com/en/articles/github-privacy-statement](https://help.github.com/en/articles/github-privacy-statement) .
+
+### 16\. Payments
+
+We may provide paid products and/or services within Service. In that case, we use third-party services for payment processing (e.g. payment processors).
+
+We will not store or collect your payment card details. That information is provided directly to our third-party payment processors whose use of your personal information is governed by their Privacy Policy. These payment processors adhere to the standards set by PCI-DSS as managed by the PCI Security Standards Council, which is a joint effort of brands like Visa, Mastercard, American Express and Discover. PCI-DSS requirements help ensure the secure handling of payment information.
+
+The payment processors we work with are:
+
+**Stripe:**
+
+Their Privacy Policy can be viewed at: [https://stripe.com/us/privacy](https://stripe.com/us/privacy)
+
+### 17\. Links to Other Sites
+
+Our Service may contain links to other sites that are not operated by us. If you click a third party link, you will be directed to that third party's site. We strongly advise you to review the Privacy Policy of every site you visit.
+
+We have no control over and assume no responsibility for the content, privacy policies or practices of any third party sites or services.
+
+### 18\. Children's Privacy
+
+Our Services are not intended for use by children under the age of 18 (“ **Child**” or “**Children**”).
+
+We do not knowingly collect personally identifiable information from Children under 18. If you become aware that a Child has provided us with Personal Data, please contact us. If we become aware that we have collected Personal Data from Children without verification of parental consent, we take steps to remove that information from our servers.
+
+### 19\. Changes to This Privacy Policy
+
+We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.
+
+We will let you know via email and/or a prominent notice on our Service, prior to the change becoming effective and update “effective date” at the top of this Privacy Policy.
+
+You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.
+
+### 20\. Contact Us
+
+If you have any questions about this Privacy Policy, please contact us:
+
+By email: hi@documenso.com.

apps/marketing/contentlayer.config.ts

@@ -0,0 +1,33 @@
+import { defineDocumentType, makeSource } from 'contentlayer/source-files';
+
+export const BlogPost = defineDocumentType(() => ({
+  name: 'BlogPost',
+  filePathPattern: `blog/**/*.mdx`,
+  contentType: 'mdx',
+  fields: {
+    title: { type: 'string', required: true },
+    description: { type: 'string', required: true },
+    date: { type: 'date', required: true },
+    tags: { type: 'list', of: { type: 'string' }, required: false, default: [] },
+    authorName: { type: 'string', required: true },
+    authorImage: { type: 'string', required: false },
+    authorRole: { type: 'string', required: true },
+  },
+  computedFields: {
+    href: { type: 'string', resolve: (post) => `/${post._raw.flattenedPath}` },
+  },
+}));
+
+export const GenericPage = defineDocumentType(() => ({
+  name: 'GenericPage',
+  filePathPattern: '**/*.mdx',
+  contentType: 'mdx',
+  fields: {
+    title: { type: 'string', required: true },
+  },
+  computedFields: {
+    href: { type: 'string', resolve: (post) => `/${post._raw.flattenedPath}` },
+  },
+}));
+
+export default makeSource({ contentDirPath: 'content', documentTypes: [BlogPost, GenericPage] });

apps/marketing/next.config.js

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
+const { withContentlayer } = require('next-contentlayer');
 
 const { parsed: env } = require('dotenv').config({
   path: path.join(__dirname, '../../.env.local'),
@@ -12,4 +13,4 @@ const config = {
   env,
 };
 
-module.exports = config;
+module.exports = withContentlayer(config);

apps/marketing/package.json

@@ -15,23 +15,26 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@hookform/resolvers": "^3.1.0",
+    "contentlayer": "^0.3.4",
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.214.0",
     "micro": "^10.0.1",
-    "next": "13.4.1",
-    "next-auth": "^4.22.1",
-    "next-plausible": "^3.7.2",
+    "next": "13.4.12",
+    "next-auth": "4.22.3",
+    "next-contentlayer": "^0.3.4",
+    "next-plausible": "^3.10.1",
     "perfect-freehand": "^1.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.8.0",
-    "typescript": "5.0.4",
+    "recharts": "^2.7.2",
+    "typescript": "5.1.6",
     "zod": "^3.21.4"
   },
   "devDependencies": {
     "@types/node": "20.1.0",
-    "@types/react": "18.2.6",
-    "@types/react-dom": "18.2.4"
+    "@types/react": "18.2.18",
+    "@types/react-dom": "18.2.7"
   }
 }

apps/marketing/src/app/(marketing)/[content]/page.tsx

@@ -0,0 +1,46 @@
+import Image from 'next/image';
+import { notFound } from 'next/navigation';
+
+import { allDocuments } from 'contentlayer/generated';
+import type { MDXComponents } from 'mdx/types';
+import { useMDXComponent } from 'next-contentlayer/hooks';
+
+export const generateStaticParams = async () =>
+  allDocuments.map((post) => ({ post: post._raw.flattenedPath }));
+
+export const generateMetadata = ({ params }: { params: { content: string } }) => {
+  const document = allDocuments.find((post) => post._raw.flattenedPath === params.content);
+
+  if (!document) {
+    notFound();
+  }
+
+  return { title: `Documenso - ${document.title}` };
+};
+
+const mdxComponents: MDXComponents = {
+  MdxNextImage: (props: { width: number; height: number; alt?: string; src: string }) => (
+    <Image {...props} alt={props.alt ?? ''} />
+  ),
+};
+
+/**
+ * A generic catch all page for the root level that checks for content layer documents.
+ *
+ * Will render the document if it exists, otherwise will return a 404.
+ */
+export default function ContentPage({ params }: { params: { content: string } }) {
+  const post = allDocuments.find((post) => post._raw.flattenedPath === params.content);
+
+  if (!post) {
+    notFound();
+  }
+
+  const MDXContent = useMDXComponent(post.body.code);
+
+  return (
+    <article className="prose prose-slate mx-auto">
+      <MDXContent components={mdxComponents} />
+    </article>
+  );
+}

apps/marketing/src/app/(marketing)/blog/[post]/page.tsx

@@ -0,0 +1,88 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+
+import { allBlogPosts } from 'contentlayer/generated';
+import { ChevronLeft } from 'lucide-react';
+import type { MDXComponents } from 'mdx/types';
+import { useMDXComponent } from 'next-contentlayer/hooks';
+
+export const generateStaticParams = async () =>
+  allBlogPosts.map((post) => ({ post: post._raw.flattenedPath }));
+
+export const generateMetadata = ({ params }: { params: { post: string } }) => {
+  const blogPost = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
+
+  if (!blogPost) {
+    notFound();
+  }
+
+  return { title: `Documenso - ${blogPost.title}` };
+};
+
+const mdxComponents: MDXComponents = {
+  MdxNextImage: (props: { width: number; height: number; alt?: string; src: string }) => (
+    <Image {...props} alt={props.alt ?? ''} />
+  ),
+};
+
+export default function BlogPostPage({ params }: { params: { post: string } }) {
+  const post = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
+
+  if (!post) {
+    notFound();
+  }
+
+  const MDXContent = useMDXComponent(post.body.code);
+
+  return (
+    <article className="prose prose-slate mx-auto py-8">
+      <div className="mb-6 text-center">
+        <time dateTime={post.date} className="mb-1 text-xs text-gray-600">
+          {new Date(post.date).toLocaleDateString()}
+        </time>
+
+        <h1 className="text-3xl font-bold">{post.title}</h1>
+
+        <div className="not-prose relative -mt-2 flex items-center gap-x-4 border-b border-t py-4">
+          <div className="h-10 w-10 rounded-full bg-gray-50">
+            {post.authorImage && (
+              <img
+                src={post.authorImage}
+                alt={`Image of ${post.authorName}`}
+                className="h-10 w-10 rounded-full bg-gray-50"
+              />
+            )}
+          </div>
+
+          <div className="text-sm leading-6">
+            <p className="text-foreground text-left font-semibold">{post.authorName}</p>
+            <p className="text-muted-foreground">{post.authorRole}</p>
+          </div>
+        </div>
+      </div>
+
+      <MDXContent components={mdxComponents} />
+
+      {post.tags.length > 0 && (
+        <ul className="not-prose flex list-none flex-row space-x-2 px-0">
+          {post.tags.map((tag, i) => (
+            <li
+              key={`tag-${i}`}
+              className="bg-muted hover:bg-muted/60 text-foreground relative z-10 whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-medium"
+            >
+              {tag}
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <hr />
+
+      <Link href="/blog" className="text-muted-foreground flex items-center hover:opacity-60">
+        <ChevronLeft className="mr-2 h-6 w-6" />
+        Back to all posts
+      </Link>
+    </article>
+  );
+}

apps/marketing/src/app/(marketing)/blog/page.tsx

@@ -0,0 +1,80 @@
+import { allBlogPosts } from 'contentlayer/generated';
+
+export default function BlogPage() {
+  const blogPosts = allBlogPosts.sort((a, b) => {
+    const dateA = new Date(a.date);
+    const dateB = new Date(b.date);
+
+    return dateB.getTime() - dateA.getTime();
+  });
+
+  return (
+    <div className="mt-6 sm:mt-12">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold lg:text-5xl">From the blog</h1>
+
+        <p className="mx-auto mt-4 max-w-xl text-center text-lg leading-normal text-[#31373D]">
+          Get the latest news from Documenso, including product updates, team announcements and
+          more!
+        </p>
+      </div>
+
+      <div className="mt-10 divide-y divide-slate-100 border-t border-slate-200 ">
+        {blogPosts.map((post, i) => (
+          <article
+            key={`blog-${i}`}
+            className="mx-auto mt-8 flex max-w-xl flex-col items-start justify-between pt-8 first:pt-0 sm:mt-16 sm:pt-16"
+          >
+            <div className="flex items-center gap-x-4 text-xs">
+              <time dateTime={post.date} className="text-muted-foreground">
+                {new Date(post.date).toLocaleDateString()}
+              </time>
+
+              {post.tags.length > 0 && (
+                <ul className="flex flex-row space-x-2">
+                  {post.tags.map((tag, j) => (
+                    <li
+                      key={`blog-${i}-tag-${j}`}
+                      className="text-foreground bg-muted hover:bg-muted/60 relative z-10 whitespace-nowrap rounded-full px-3 py-1.5 font-medium"
+                    >
+                      {tag}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+
+            <div className="group relative">
+              <h3 className="text-foreground group-hover:text-foreground/60 mt-3 text-lg font-semibold leading-6">
+                <a href={post.href}>
+                  <span className="absolute inset-0" />
+                  {post.title}
+                </a>
+              </h3>
+              <p className="text-foreground/60 mt-5 line-clamp-3 text-sm leading-6">
+                {post.description}
+              </p>
+            </div>
+
+            <div className="relative mt-4 flex items-center gap-x-4">
+              <div className="h-10 w-10 rounded-full bg-slate-50">
+                {post.authorImage && (
+                  <img
+                    src={post.authorImage}
+                    alt={`Image of ${post.authorName}`}
+                    className="h-10 w-10 rounded-full bg-slate-50"
+                  />
+                )}
+              </div>
+
+              <div className="text-sm leading-6">
+                <p className="text-foreground font-semibold">{post.authorName}</p>
+                <p className="text-foreground/60">{post.authorRole}</p>
+              </div>
+            </div>
+          </article>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/marketing/src/app/(marketing)/open/cap-table.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { HTMLAttributes, useEffect, useState } from 'react';
+
+import { Cell, Legend, Pie, PieChart, Tooltip } from 'recharts';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+import { CAP_TABLE } from './data';
+
+const COLORS = ['#7fd843', '#a2e771', '#c6f2a4'];
+const RADIAN = Math.PI / 180;
+
+export type LabelRenderProps = {
+  cx: number;
+  cy: number;
+  midAngle: number;
+  innerRadius: number;
+  outerRadius: number;
+  percent: number;
+};
+
+const renderCustomizedLabel = ({
+  cx,
+  cy,
+  midAngle,
+  innerRadius,
+  outerRadius,
+  percent,
+}: LabelRenderProps) => {
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.25;
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+
+  return (
+    <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
+      {`${(percent * 100).toFixed(1)}%`}
+    </text>
+  );
+};
+
+export type CapTableProps = HTMLAttributes<HTMLDivElement>;
+
+export const CapTable = ({ className, ...props }: CapTableProps) => {
+  const [isSSR, setIsSSR] = useState(true);
+
+  useEffect(() => {
+    setIsSSR(false);
+  }, []);
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Cap Table</h3>
+
+      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
+        {!isSSR && (
+          <PieChart width={400} height={400}>
+            <Pie
+              data={CAP_TABLE}
+              cx="50%"
+              cy="50%"
+              labelLine={false}
+              label={renderCustomizedLabel}
+              outerRadius={160}
+              innerRadius={80}
+              fill="#8884d8"
+              dataKey="percentage"
+            >
+              {CAP_TABLE.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+              ))}
+            </Pie>
+            <Legend
+              formatter={(value) => {
+                return <span className="text-sm text-black">{value}</span>;
+              }}
+            />
+            <Tooltip
+              formatter={(percent: number, name, props) => {
+                return [`${percent}%`, name || props['name'] || props['payload']['name']];
+              }}
+            />
+          </PieChart>
+        )}
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/data.ts

@@ -0,0 +1,124 @@
+export const TEAM_MEMBERS = [
+  {
+    name: 'Timur Ercan',
+    role: 'Co-Founder, CEO',
+    salary: 95_000,
+    location: 'Germany',
+    engagement: 'Full-Time',
+    joinDate: 'November 14th, 2022',
+  },
+  {
+    name: 'Lucas Smith',
+    role: 'Co-Founder, CTO',
+    salary: 95_000,
+    location: 'Australia',
+    engagement: 'Full-Time',
+    joinDate: 'April 19th, 2023',
+  },
+  {
+    name: 'Ephraim Atta-Duncan',
+    role: 'Software Engineer - Intern',
+    salary: 15_000,
+    location: 'Ghana',
+    engagement: 'Part-Time',
+    joinDate: 'June 6th, 2023',
+  },
+  {
+    name: 'Florent Merian',
+    role: 'Marketer - III',
+    salary: 'Project-Based',
+    location: 'France',
+    engagement: 'Full-Time',
+    joinDate: 'July 10th, 2023',
+  },
+  {
+    name: 'Thilo Konzok',
+    role: 'Designer',
+    salary: 'Project-Based',
+    location: 'Germany',
+    engagement: 'Full-Time',
+    joinDate: 'April 26th, 2023',
+  },
+  {
+    name: 'David Nguyen',
+    role: 'Software Engineer - III',
+    salary: 100_000,
+    location: 'Australia',
+    engagement: 'Full-Time',
+    joinDate: 'July 26th, 2023',
+  },
+];
+
+export const FUNDING_RAISED = [
+  {
+    date: '2023-04',
+    amount: 0,
+  },
+  {
+    date: '2023-05',
+    amount: 300_000,
+  },
+  {
+    date: '2023-07',
+    amount: 1_550_000,
+  },
+];
+
+export const SALARY_BANDS = [
+  {
+    title: 'Software Engineer - Intern',
+    seniority: 'Intern',
+    salary: 30_000,
+  },
+  {
+    title: 'Software Engineer - I',
+    seniority: 'Junior',
+    salary: 60_000,
+  },
+  {
+    title: 'Software Engineer - II',
+    seniority: 'Mid',
+    salary: 80_000,
+  },
+  {
+    title: 'Software Engineer - III',
+    seniority: 'Senior',
+    salary: 100_000,
+  },
+  {
+    title: 'Software Engineer - IV',
+    seniority: 'Principal',
+    salary: 120_000,
+  },
+  {
+    title: 'Designer - III',
+    seniority: 'Senior',
+    salary: 100_000,
+  },
+  {
+    title: 'Designer - IV',
+    seniority: 'Principal',
+    salary: 120_000,
+  },
+  {
+    title: 'Marketer - I',
+    seniority: 'Junior',
+    salary: 50_000,
+  },
+  {
+    title: 'Marketer - II',
+    seniority: 'Mid',
+    salary: 65_000,
+  },
+  {
+    title: 'Marketer - III',
+    seniority: 'Senior',
+    salary: 80_000,
+  },
+];
+
+export const CAP_TABLE = [
+  { name: 'Founders', percentage: 75.5 },
+  { name: 'Investors', percentage: 14.5 },
+  { name: 'Team Pool', percentage: 10 },
+];

apps/marketing/src/app/(marketing)/open/funding-raised.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { formatMonth } from '@documenso/lib/client-only/format-month';
+import { cn } from '@documenso/ui/lib/utils';
+
+import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
+
+export type FundingRaisedProps = HTMLAttributes<HTMLDivElement>;
+
+export const FundingRaised = ({ className, ...props }: FundingRaisedProps) => {
+  const formattedData = FUNDING_RAISED.map((item) => ({
+    amount: Number(item.amount),
+    date: formatMonth(item.date),
+  }));
+
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
+
+      <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-4 shadow-sm hover:shadow">
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
+            <XAxis dataKey="date" />
+            <YAxis
+              tickFormatter={(value) =>
+                Number(value).toLocaleString('en-US', {
+                  style: 'currency',
+                  currency: 'USD',
+                  maximumFractionDigits: 0,
+                })
+              }
+            />
+            <Tooltip
+              itemStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [
+                Number(value).toLocaleString('en-US', {
+                  style: 'currency',
+                  currency: 'USD',
+                  maximumFractionDigits: 0,
+                }),
+                'Amount Raised',
+              ]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+            <Bar dataKey="amount" fill="hsl(var(--primary))" label="Amount Raised" />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/gh-metrics.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { formatMonth } from '@documenso/lib/client-only/format-month';
+import { cn } from '@documenso/ui/lib/utils';
+
+import { StargazersType } from './page';
+
+export type MetricsDataKey = 'stars' | 'forks' | 'mergedPRs' | 'openIssues';
+export type GithubMetricProps = HTMLAttributes<HTMLDivElement> & {
+  data: StargazersType;
+  metricKey: MetricsDataKey;
+  title: string;
+  label: string;
+  chartHeight?: number;
+};
+
+export const GithubMetric = ({
+  className,
+  data,
+  metricKey,
+  title,
+  label,
+  chartHeight = 400,
+  ...props
+}: GithubMetricProps) => {
+  const formattedData = Object.keys(data)
+    .map((key) => ({
+      month: formatMonth(key),
+      [metricKey]: data[key][metricKey],
+    }))
+    .reverse();
+
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">{title}</h3>
+
+      <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border pr-2 shadow-sm hover:shadow">
+        <ResponsiveContainer width="100%" height={chartHeight}>
+          <BarChart data={formattedData} margin={{ top: 30, right: 20 }}>
+            <XAxis dataKey="month" />
+            <YAxis />
+            <Tooltip
+              itemStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value) => [Number(value), label]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+            <Bar dataKey={metricKey} fill="hsl(var(--primary))" label={label} />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/metric-card.tsx

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export type MetricCardProps = HTMLAttributes<HTMLDivElement> & {
+  title: string;
+  value: string;
+};
+
+export const MetricCard = ({ className, title, value, ...props }: MetricCardProps) => {
+  return (
+    <div className={cn('rounded-md border p-4 shadow-sm hover:shadow', className)} {...props}>
+      <h4 className="text-muted-foreground text-sm font-medium">{title}</h4>
+
+      <p className="mb-2 mt-6 text-4xl font-bold">{value}</p>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/page.tsx

@@ -0,0 +1,157 @@
+import { z } from 'zod';
+
+import { MetricCard } from '~/app/(marketing)/open/metric-card';
+import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
+
+import { CapTable } from './cap-table';
+import { FundingRaised } from './funding-raised';
+import { GithubMetric } from './gh-metrics';
+import { TeamMembers } from './team-members';
+
+export const revalidate = 86400;
+
+const ZGithubStatsResponse = z.object({
+  stargazers_count: z.number(),
+  forks_count: z.number(),
+  open_issues: z.number(),
+});
+
+const ZMergedPullRequestsResponse = z.object({
+  total_count: z.number(),
+});
+
+const ZStargazersLiveResponse = z.record(
+  z.object({
+    stars: z.number(),
+    forks: z.number(),
+    mergedPRs: z.number(),
+    openIssues: z.number(),
+  }),
+);
+
+export type StargazersType = z.infer<typeof ZStargazersLiveResponse>;
+
+// const ZOpenPullRequestsResponse = ZMergedPullRequestsResponse;
+
+export default async function OpenPage() {
+  const {
+    forks_count: forksCount,
+    open_issues: openIssues,
+    stargazers_count: stargazersCount,
+  } = await fetch('https://api.github.com/repos/documenso/documenso', {
+    headers: {
+      accept: 'application/vnd.github.v3+json',
+    },
+  })
+    .then((res) => res.json())
+    .then((res) => ZGithubStatsResponse.parse(res));
+
+  const { total_count: mergedPullRequests } = await fetch(
+    'https://api.github.com/search/issues?q=repo:documenso/documenso/+is:pr+merged:>=2010-01-01&page=0&per_page=1',
+    {
+      headers: {
+        accept: 'application/vnd.github.v3+json',
+      },
+    },
+  )
+    .then((res) => res.json())
+    .then((res) => ZMergedPullRequestsResponse.parse(res));
+
+  const STARGAZERS_DATA = await fetch('https://stargrazer-live.onrender.com/api/stats', {
+    headers: {
+      accept: 'application/json',
+    },
+  })
+    .then((res) => res.json())
+    .then((res) => ZStargazersLiveResponse.parse(res));
+
+  return (
+    <div className="mx-auto mt-12 max-w-screen-lg">
+      <div className="flex flex-col items-center justify-center">
+        <h1 className="text-3xl font-bold lg:text-5xl">Open Startup</h1>
+
+        <p className="text-muted-foreground mt-4 max-w-[60ch] text-center text-lg leading-normal">
+          All our metrics, finances, and learnings are public. We believe in transparency and want
+          to share our journey with you. You can read more about why here:{' '}
+          <a className="font-bold" href="https://documenso.com/blog/pre-seed" target="_blank">
+            Announcing Open Metrics
+          </a>
+        </p>
+      </div>
+
+      <div className="mt-12 grid grid-cols-12 gap-8">
+        <div className="col-span-12 grid grid-cols-4 gap-4">
+          <MetricCard
+            className="col-span-2 lg:col-span-1"
+            title="Stargazers"
+            value={stargazersCount.toLocaleString('en-US')}
+          />
+          <MetricCard
+            className="col-span-2 lg:col-span-1"
+            title="Forks"
+            value={forksCount.toLocaleString('en-US')}
+          />
+          <MetricCard
+            className="col-span-2 lg:col-span-1"
+            title="Open Issues"
+            value={openIssues.toLocaleString('en-US')}
+          />
+          <MetricCard
+            className="col-span-2 lg:col-span-1"
+            title="Merged PR's"
+            value={mergedPullRequests.toLocaleString('en-US')}
+          />
+        </div>
+
+        <TeamMembers className="col-span-12" />
+
+        <SalaryBands className="col-span-12 lg:col-span-6" />
+
+        <FundingRaised className="col-span-12 lg:col-span-6" />
+
+        <CapTable className="col-span-12 lg:col-span-6" />
+        <GithubMetric
+          data={STARGAZERS_DATA}
+          metricKey="stars"
+          title="Github: Total Stars"
+          label="Stars"
+          className="col-span-12 lg:col-span-6"
+        />
+
+        <GithubMetric
+          data={STARGAZERS_DATA}
+          metricKey="mergedPRs"
+          title="Github: Total Merged PRs"
+          label="Merged PRs"
+          chartHeight={300}
+          className="col-span-12 lg:col-span-4"
+        />
+        <GithubMetric
+          data={STARGAZERS_DATA}
+          metricKey="forks"
+          title="Github: Total Forks"
+          label="Forks"
+          chartHeight={300}
+          className="col-span-12 lg:col-span-4"
+        />
+        <GithubMetric
+          data={STARGAZERS_DATA}
+          metricKey="openIssues"
+          title="Github: Total Open Issues"
+          label="Open Issues"
+          chartHeight={300}
+          className="col-span-12 lg:col-span-4"
+        />
+
+        <div className="col-span-12 mt-12 flex flex-col items-center justify-center">
+          <h2 className="text-2xl font-bold">Where's the rest?</h2>
+
+          <p className="text-muted-foreground mt-4 max-w-[55ch] text-center text-lg leading-normal">
+            We're still working on getting all our metrics together. We'll update this page as soon
+            as we have more to share.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/marketing/src/app/(marketing)/open/salary-bands.tsx

@@ -0,0 +1,50 @@
+import { HTMLAttributes } from 'react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+
+import { SALARY_BANDS } from '~/app/(marketing)/open/data';
+
+export type SalaryBandsProps = HTMLAttributes<HTMLDivElement>;
+
+export const SalaryBands = ({ className, ...props }: SalaryBandsProps) => {
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h3 className="px-4 text-lg font-semibold">Global Salary Bands</h3>
+
+      <div className="border-border mt-2.5 flex-1 rounded-2xl border shadow-sm hover:shadow">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[200px]">Title</TableHead>
+              <TableHead>Seniority</TableHead>
+              <TableHead className="w-[100px] text-right">Salary</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {SALARY_BANDS.map((band, index) => (
+              <TableRow key={index}>
+                <TableCell className="font-medium">{band.title}</TableCell>
+                <TableCell>{band.seniority}</TableCell>
+                <TableCell className="text-right">
+                  {band.salary.toLocaleString('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                    maximumFractionDigits: 0,
+                  })}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/open/team-members.tsx

@@ -0,0 +1,57 @@
+import { HTMLAttributes } from 'react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+
+import { TEAM_MEMBERS } from './data';
+
+export type TeamMembersProps = HTMLAttributes<HTMLDivElement>;
+
+export const TeamMembers = ({ className, ...props }: TeamMembersProps) => {
+  return (
+    <div className={cn('flex flex-col', className)} {...props}>
+      <h2 className="px-4 text-2xl font-semibold">Team</h2>
+
+      <div className="border-border mt-2.5 flex-1 rounded-2xl border shadow-sm hover:shadow">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="">Name</TableHead>
+              <TableHead>Role</TableHead>
+              <TableHead>Salary</TableHead>
+              <TableHead>Engagement</TableHead>
+              <TableHead>Location</TableHead>
+              <TableHead className="w-[100px] text-right">Join Date</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {TEAM_MEMBERS.map((member) => (
+              <TableRow key={member.name}>
+                <TableCell className="font-medium">{member.name}</TableCell>
+                <TableCell>{member.role}</TableCell>
+
+                <TableCell>
+                  {member.salary.toLocaleString('en-US', {
+                    style: 'currency',
+                    currency: 'USD',
+                    maximumFractionDigits: 0,
+                  })}
+                </TableCell>
+                <TableCell>{member.engagement}</TableCell>
+                <TableCell>{member.location}</TableCell>
+                <TableCell className="text-right">{member.joinDate}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+};

apps/marketing/src/app/(marketing)/oss-friends/page.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { Variants, motion } from 'framer-motion';
+
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent, CardTitle } from '@documenso/ui/primitives/card';
+
+import backgroundPattern from '~/assets/background-pattern.png';
+
+const OSSFriends = [
+  {
+    name: 'BoxyHQ',
+    description:
+      'BoxyHQ’s suite of APIs for security and privacy helps engineering teams build and ship compliant cloud applications faster.',
+    href: 'https://boxyhq.com',
+  },
+  {
+    name: 'Cal.com',
+    description:
+      'Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.',
+    href: 'https://cal.com',
+  },
+  {
+    name: 'Crowd.dev',
+    description:
+      'Centralize community, product, and customer data to understand which companies are engaging with your open source project.',
+    href: 'https://www.crowd.dev',
+  },
+  {
+    name: 'Documenso',
+    description:
+      'The Open-Source DocuSign Alternative. We aim to earn your trust by enabling you to self-host the platform and examine its inner workings.',
+    href: 'https://documenso.com',
+  },
+  {
+    name: 'Erxes',
+    description:
+      'The Open-Source HubSpot Alternative. A single XOS enables to create unique and life-changing experiences ​​that work for all types of business.',
+    href: 'https://erxes.io',
+  },
+  {
+    name: 'Formbricks',
+    description:
+      'Survey granular user segments at any point in the user journey. Gather up to 6x more insights with targeted micro-surveys. All open-source.',
+    href: 'https://formbricks.com',
+  },
+  {
+    name: 'Forward Email',
+    description:
+      'Free email forwarding for custom domains. For 6 years and counting, we are the go-to email service for thousands of creators, developers, and businesses.',
+    href: 'https://forwardemail.net',
+  },
+  {
+    name: 'GitWonk',
+    description:
+      'GitWonk is an open-source technical documentation tool, designed and built focusing on the developer experience.',
+    href: 'https://gitwonk.com',
+  },
+  {
+    name: 'Hanko',
+    description:
+      'Open-source authentication and user management for the passkey era. Integrated in minutes, for web and mobile apps.',
+    href: 'https://www.hanko.io',
+  },
+  {
+    name: 'HTMX',
+    description:
+      'HTMX is a dependency-free JavaScript library that allows you to access AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML.',
+    href: 'https://htmx.org',
+  },
+  {
+    name: 'Infisical',
+    description:
+      'Open source, end-to-end encrypted platform that lets you securely manage secrets and configs across your team, devices, and infrastructure.',
+    href: 'https://infisical.com',
+  },
+  {
+    name: 'Novu',
+    description:
+      'The open-source notification infrastructure for developers. Simple components and APIs for managing all communication channels in one place.',
+    href: 'https://novu.co',
+  },
+  {
+    name: 'OpenBB',
+    description:
+      'Democratizing investment research through an open source financial ecosystem. The OpenBB Terminal allows everyone to perform investment research, from everywhere.',
+    href: 'https://openbb.co',
+  },
+  {
+    name: 'Sniffnet',
+    description:
+      'Sniffnet is a network monitoring tool to help you easily keep track of your Internet traffic.',
+    href: 'https://www.sniffnet.net',
+  },
+  {
+    name: 'Typebot',
+    description:
+      'Typebot gives you powerful blocks to create unique chat experiences. Embed them anywhere on your apps and start collecting results like magic.',
+    href: 'https://typebot.io',
+  },
+  {
+    name: 'Webiny',
+    description:
+      'Open-source enterprise-grade serverless CMS. Own your data. Scale effortlessly. Customize everything.',
+    href: 'https://www.webiny.com',
+  },
+  {
+    name: 'Webstudio',
+    description: 'Webstudio is an open source alternative to Webflow',
+    href: 'https://webstudio.is',
+  },
+];
+
+const ContainerVariants: Variants = {
+  initial: {
+    opacity: 0,
+  },
+  animate: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.075,
+    },
+  },
+};
+
+const CardVariants: Variants = {
+  initial: {
+    opacity: 0,
+    y: 50,
+  },
+  animate: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.5,
+    },
+  },
+};
+
+const randomDegrees = () => {
+  const degrees = [45, 120, -140, -45];
+
+  return degrees[Math.floor(Math.random() * degrees.length)];
+};
+
+export default function OSSFriendsPage() {
+  return (
+    <div className="relative mt-12">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold lg:text-5xl">
+          Our <span title="Open Source Software">OSS</span> Friends
+        </h1>
+
+        <p className="mx-auto mt-4 max-w-[55ch] text-lg leading-normal text-[#31373D]">
+          We love open source and so should you, below you can find a list of our friends who are
+          just as passionate about open source as we are.
+        </p>
+      </div>
+
+      <motion.div
+        className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"
+        variants={ContainerVariants}
+        initial="initial"
+        animate="animate"
+      >
+        {OSSFriends.map((friend, index) => (
+          <motion.div key={index} className="h-full w-full" variants={CardVariants}>
+            <Card
+              className="h-full"
+              degrees={randomDegrees()}
+              gradient={index % 2 === 0}
+              spotlight={index % 2 !== 0}
+            >
+              <CardContent className="flex h-full flex-col p-6">
+                <CardTitle>
+                  <Link href={friend.href}>{friend.name}</Link>
+                </CardTitle>
+
+                <p className="mt-4 flex-1 text-sm text-slate-700">{friend.description}</p>
+
+                <div className="mt-8">
+                  <Link target="_blank" href={friend.href}>
+                    <Button>Learn more</Button>
+                  </Link>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        ))}
+      </motion.div>
+
+      <div className="absolute inset-0 -z-10 flex items-start justify-center">
+        <Image
+          src={backgroundPattern}
+          alt="background pattern"
+          className="-mr-[15vw] -mt-[15vh] h-full max-h-[150vh] scale-125 object-cover md:-mr-[50vw] md:scale-150 lg:scale-[175%]"
+        />
+      </div>
+    </div>
+  );
+}

apps/marketing/src/app/(marketing)/page.tsx

@@ -9,6 +9,8 @@ import { Hero } from '~/components/(marketing)/hero';
 import { OpenBuildTemplateBento } from '~/components/(marketing)/open-build-template-bento';
 import { ShareConnectPaidWidgetBento } from '~/components/(marketing)/share-connect-paid-widget-bento';
 
+export const revalidate = 600;
+
 const fontCaveat = Caveat({
   weight: ['500'],
   subsets: ['latin'],
@@ -17,15 +19,24 @@ const fontCaveat = Caveat({
 });
 
 export default async function IndexPage() {
+  const starCount = await fetch('https://api.github.com/repos/documenso/documenso', {
+    headers: {
+      accept: 'application/vnd.github.v3+json',
+    },
+  })
+    .then((res) => res.json())
+    .then((res) => (typeof res.stargazers_count === 'number' ? res.stargazers_count : undefined))
+    .catch(() => undefined);
+
   return (
     <div className={cn('mt-12', fontCaveat.variable)}>
-      <Hero />
+      <Hero starCount={starCount} />
 
       <FasterSmarterBeautifulBento className="my-48" />
       <ShareConnectPaidWidgetBento className="my-48" />
       <OpenBuildTemplateBento className="my-48" />
 
-      <Callout />
+      <Callout starCount={starCount} />
     </div>
   );
 }

apps/marketing/src/app/layout.tsx

@@ -43,9 +43,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       </head>
 
       <body>
-        <PlausibleProvider>
-          {children}
-        </PlausibleProvider>
+        <PlausibleProvider>{children}</PlausibleProvider>
         <Toaster />
       </body>
     </html>

apps/marketing/src/components/(marketing)/callout.tsx

@@ -7,7 +7,12 @@ import { usePlausible } from 'next-plausible';
 
 import { Button } from '@documenso/ui/primitives/button';
 
-export const Callout = () => {
+export type CalloutProps = {
+  starCount?: number;
+  [key: string]: unknown;
+};
+
+export const Callout = ({ starCount }: CalloutProps) => {
   const event = usePlausible();
 
   const onSignUpClick = () => {
@@ -36,7 +41,7 @@ export const Callout = () => {
         onClick={onSignUpClick}
       >
         Get the Community Plan
-        <span className="bg-primary -mr-2 ml-2.5 rounded-full px-2 py-1.5 text-xs">
+        <span className="bg-primary -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
           $30/mo. forever!
         </span>
       </Button>
@@ -49,6 +54,11 @@ export const Callout = () => {
         <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
           <Github className="mr-2 h-5 w-5" />
           Star on Github
+          {starCount && starCount > 0 && (
+            <span className="bg-primary -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
+              {starCount.toLocaleString('en-US')}
+            </span>
+          )}
         </Button>
       </Link>
     </div>

apps/marketing/src/components/(marketing)/footer.tsx

@@ -53,6 +53,14 @@ export const Footer = ({ className, ...props }: FooterProps) => {
             Pricing
           </Link>
 
+          <Link href="/blog" className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]">
+            Blog
+          </Link>
+
+          <Link href="/open" className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]">
+            Open
+          </Link>
+
           <Link
             href="https://status.documenso.com"
             target="_blank"
@@ -68,12 +76,12 @@ export const Footer = ({ className, ...props }: FooterProps) => {
             Support
           </Link>
 
-          {/* <Link
+          <Link
             href="/privacy"
             className="flex-shrink-0 text-sm text-[#8D8D8D] hover:text-[#6D6D6D]"
           >
             Privacy
-          </Link> */}
+          </Link>
         </div>
       </div>
       <div className="mx-auto mt-4 w-full max-w-screen-xl px-8 md:mt-12 lg:mt-24">

apps/marketing/src/components/(marketing)/header.tsx

@@ -19,6 +19,14 @@ export const Header = ({ className, ...props }: HeaderProps) => {
           Pricing
         </Link>
 
+        <Link href="/blog" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
+          Blog
+        </Link>
+
+        <Link href="/open" className="text-sm font-semibold text-[#8D8D8D] hover:text-[#6D6D6D]">
+          Open
+        </Link>
+
         <Link
           href="https://app.documenso.com/login"
           target="_blank"

apps/marketing/src/pages/api/stripe/webhook/index.ts

@@ -124,16 +124,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         document.document = await insertImageInPDF(
           document.document,
           signatureDataUrl,
-          field.positionX,
-          field.positionY,
+          Number(field.positionX),
+          Number(field.positionY),
           field.page,
         );
       } else {
         document.document = await insertTextInPDF(
           document.document,
           signatureText ?? '',
-          field.positionX,
-          field.positionY,
+          Number(field.positionX),
+          Number(field.positionY),
           field.page,
         );
       }

apps/marketing/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@documenso/tsconfig/nextjs.json",
   "compilerOptions": {
+    "baseUrl": ".",
     "allowJs": true,
     "plugins": [
       {
@@ -10,15 +11,23 @@
     "paths": {
       "~/*": [
         "./src/*"
+      ],
+      "contentlayer/generated": [
+        "./.contentlayer/generated"
       ]
     },
-    "strictNullChecks": true
+    "types": [
+      "@documenso/lib/types/next-auth.d.ts"
+    ],
+    "strictNullChecks": true,
+    "incremental": false
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".contentlayer/generated"
   ],
   "exclude": [
     "node_modules"

apps/web/ambient.d.ts

@@ -0,0 +1 @@
+declare module '@documenso/tailwind-config';

apps/web/next.config.js

@@ -7,9 +7,23 @@ const { parsed: env } = require('dotenv').config({
 
 /** @type {import('next').NextConfig} */
 const config = {
+  experimental: {
+    serverActions: true,
+  },
   reactStrictMode: true,
-  transpilePackages: ['@documenso/lib', '@documenso/prisma', '@documenso/trpc', '@documenso/ui'],
+  transpilePackages: [
+    '@documenso/lib',
+    '@documenso/prisma',
+    '@documenso/trpc',
+    '@documenso/ui',
+    '@documenso/email',
+  ],
   env,
+  modularizeImports: {
+    'lucide-react': {
+      transform: 'lucide-react/dist/esm/icons/{{ kebabCase member }}',
+    },
+  },
 };
 
 module.exports = config;

apps/web/package.json

@@ -22,9 +22,9 @@
     "lucide-react": "^0.214.0",
     "micro": "^10.0.1",
     "nanoid": "^4.0.2",
-    "next": "13.4.1",
-    "next-auth": "^4.22.1",
-    "next-plausible": "^3.7.2",
+    "next": "13.4.12",
+    "next-auth": "4.22.3",
+    "next-plausible": "^3.10.1",
     "next-themes": "^0.2.1",
     "perfect-freehand": "^1.2.0",
     "react": "18.2.0",
@@ -34,13 +34,14 @@
     "react-icons": "^4.8.0",
     "react-pdf": "^7.1.1",
     "react-rnd": "^10.4.1",
-    "typescript": "5.0.4",
+    "ts-pattern": "^5.0.5",
+    "typescript": "5.1.6",
     "zod": "^3.21.4"
   },
   "devDependencies": {
     "@types/formidable": "^2.0.6",
     "@types/node": "20.1.0",
-    "@types/react": "18.2.6",
-    "@types/react-dom": "18.2.4"
+    "@types/react": "18.2.18",
+    "@types/react-dom": "18.2.7"
   }
 }

apps/web/process-env.d.ts

@@ -11,5 +11,8 @@ declare namespace NodeJS {
     NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET: string;
 
     NEXT_PUBLIC_SUBSCRIPTIONS_ENABLED: string;
+
+    NEXT_PRIVATE_GOOGLE_CLIENT_ID: string;
+    NEXT_PRIVATE_GOOGLE_CLIENT_SECRET: string;
   }
 }

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

@@ -14,8 +14,8 @@ import {
   TableRow,
 } from '@documenso/ui/primitives/table';
 
+import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
-import { ActionButtons } from '~/components/(dashboard)/table/actions-component';
 import { DocumentStatus } from '~/components/formatter/document-status';
 import { LocaleDate } from '~/components/formatter/locale-date';
 
@@ -61,37 +61,41 @@ export default async function DashboardPage() {
               <TableRow>
                 <TableHead className="w-[100px]">ID</TableHead>
                 <TableHead>Title</TableHead>
+                <TableHead>Reciepient</TableHead>
                 <TableHead>Status</TableHead>
-                <TableHead>Created</TableHead>
-                <TableHead>Actions</TableHead>
+                <TableHead className="text-right">Created</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              {results.data.map((document) => (
-                <TableRow key={document.id}>
-                  <TableCell className="font-medium">{document.id}</TableCell>
-                  <TableCell>
-                    <Link
-                      href={`/documents/${document.id}`}
-                      className="focus-visible:ring-ring ring-offset-background rounded-md font-medium hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
-                    >
-                      {document.title}
-                    </Link>
-                  </TableCell>
-                  <TableCell>
-                    <DocumentStatus status={document.status} />
-                  </TableCell>
-                  <TableCell>
-                    <LocaleDate date={document.created} />
-                  </TableCell>
-                  <TableCell className="flex cursor-pointer gap-6">
-                    <ActionButtons documentId={document.id} />
-                  </TableCell>
-                </TableRow>
-              ))}
+              {results.data.map((document) => {
+                return (
+                  <TableRow key={document.id}>
+                    <TableCell className="font-medium">{document.id}</TableCell>
+                    <TableCell>
+                      <Link
+                        href={`/documents/${document.id}`}
+                        className="focus-visible:ring-ring ring-offset-background rounded-md font-medium hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+                      >
+                        {document.title}
+                      </Link>
+                    </TableCell>
+
+                    <TableCell>
+                      <StackAvatarsWithTooltip recipients={document.Recipient} />
+                    </TableCell>
+
+                    <TableCell>
+                      <DocumentStatus status={document.status} />
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <LocaleDate date={document.created} />
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
               {results.data.length === 0 && (
                 <TableRow>
-                  <TableCell colSpan={5} className="h-24 text-center">
+                  <TableCell colSpan={4} className="h-24 text-center">
                     No results.
                   </TableCell>
                 </TableRow>

apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useState } from 'react';
+
+import { Document, Field, Recipient, User } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import { LazyPDFViewer } from '~/components/(dashboard)/pdf-viewer/lazy-pdf-viewer';
+import { AddFieldsFormPartial } from '~/components/forms/edit-document/add-fields';
+import { AddSignersFormPartial } from '~/components/forms/edit-document/add-signers';
+import { AddSubjectFormPartial } from '~/components/forms/edit-document/add-subject';
+
+export type EditDocumentFormProps = {
+  className?: string;
+  user: User;
+  document: Document;
+  recipients: Recipient[];
+  fields: Field[];
+};
+
+export const EditDocumentForm = ({
+  className,
+  document,
+  recipients,
+  fields,
+  user: _user,
+}: EditDocumentFormProps) => {
+  const [step, setStep] = useState<'signers' | 'fields' | 'subject'>('signers');
+
+  const documentUrl = `data:application/pdf;base64,${document.document}`;
+
+  const onNextStep = () => {
+    if (step === 'signers') {
+      setStep('fields');
+    }
+
+    if (step === 'fields') {
+      setStep('subject');
+    }
+  };
+
+  const onPreviousStep = () => {
+    if (step === 'fields') {
+      setStep('signers');
+    }
+
+    if (step === 'subject') {
+      setStep('fields');
+    }
+  };
+
+  return (
+    <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
+      <Card
+        className="col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+        gradient
+      >
+        <CardContent className="p-2">
+          <LazyPDFViewer document={documentUrl} />
+        </CardContent>
+      </Card>
+
+      <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+        {step === 'signers' && (
+          <AddSignersFormPartial
+            recipients={recipients}
+            fields={fields}
+            document={document}
+            onContinue={onNextStep}
+            onGoBack={onPreviousStep}
+          />
+        )}
+
+        {step === 'fields' && (
+          <AddFieldsFormPartial
+            recipients={recipients}
+            fields={fields}
+            document={document}
+            onContinue={onNextStep}
+            onGoBack={onPreviousStep}
+          />
+        )}
+
+        {step === 'subject' && (
+          <AddSubjectFormPartial
+            recipients={recipients}
+            fields={fields}
+            document={document}
+            onContinue={onNextStep}
+            onGoBack={onPreviousStep}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

apps/web/src/app/(dashboard)/documents/[id]/loading.tsx

@@ -13,7 +13,7 @@ export default function Loading() {
         Loading Document...
       </h1>
       <div className="mt-8 grid min-h-[80vh] w-full grid-cols-12 gap-x-8">
-        <div className="dark:bg-background border-documenso col-span-7 rounded-xl border-2 bg-white/50 p-2 before:rounded-xl">
+        <div className="dark:bg-background border-border col-span-12 rounded-xl border-2 bg-white/50 p-2 before:rounded-xl lg:col-span-6 xl:col-span-7">
           <div className="flex min-h-[80vh] flex-col items-center justify-center">
             <Loader className="text-documenso h-12 w-12 animate-spin" />
 
@@ -21,7 +21,7 @@ export default function Loading() {
           </div>
         </div>
 
-        <div className="bg-background border-documenso col-span-5  rounded-xl border-2 before:rounded-xl" />
+        <div className="bg-background border-border col-span-12 rounded-xl border-2  before:rounded-xl lg:col-span-6 xl:col-span-5" />
       </div>
     </div>
   );

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

@@ -1,14 +1,15 @@
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
-import { ChevronLeft } from 'lucide-react';
+import { ChevronLeft, Users2 } from 'lucide-react';
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getFieldsForDocument } from '@documenso/lib/server-only/field/get-fields-for-document';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 
-import { EditDocumentForm } from '~/components/forms/edit-document';
+import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document';
+import { DocumentStatus } from '~/components/formatter/document-status';
 
 export type DocumentPageProps = {
   params: {
@@ -61,6 +62,18 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
         {document.title}
       </h1>
 
+      <div className="mt-2.5 flex items-center gap-x-6">
+        <DocumentStatus inheritColor status={document.status} className="text-muted-foreground" />
+
+        {recipients.length > 0 && (
+          <div className="text-muted-foreground flex items-center">
+            <Users2 className="mr-2 h-5 w-5" />
+
+            <span>{recipients.length} Recipient(s)</span>
+          </div>
+        )}
+      </div>
+
       <EditDocumentForm
         className="mt-8"
         document={document}

apps/web/src/app/(dashboard)/documents/[id]/sent/page.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+
+import { ChevronLeft } from 'lucide-react';
+
+export default function DocumentSentPage() {
+  return (
+    <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
+      <Link href="/documents" className="flex grow-0 items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        Documents
+      </Link>
+
+      <h1 className="mt-4 max-w-xs grow-0 truncate text-2xl font-semibold md:text-3xl">
+        Loading Document...
+      </h1>
+    </div>
+  );
+}

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

@@ -8,16 +8,16 @@ import { Loader } from 'lucide-react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { FindResultSet } from '@documenso/lib/types/find-result-set';
-import { Document } from '@documenso/prisma/client';
+import { DocumentWithReciepient } from '@documenso/prisma/types/document-with-recipient';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
 
-import { ActionButtons } from '~/components/(dashboard)/table/actions-component';
+import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { DocumentStatus } from '~/components/formatter/document-status';
 import { LocaleDate } from '~/components/formatter/locale-date';
 
 export type DocumentsDataTableProps = {
-  results: FindResultSet<Document>;
+  results: FindResultSet<DocumentWithReciepient>;
 };
 
 export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
@@ -50,6 +50,13 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
               </Link>
             ),
           },
+          {
+            header: 'Recipient',
+            accessorKey: 'recipient',
+            cell: ({ row }) => {
+              return <StackAvatarsWithTooltip recipients={row.original.Recipient} />;
+            },
+          },
           {
             header: 'Status',
             accessorKey: 'status',
@@ -60,11 +67,6 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
             accessorKey: 'created',
             cell: ({ row }) => <LocaleDate date={row.getValue('created')} />,
           },
-          {
-            header: 'Actions',
-            accessorKey: 'actions',
-            cell: ({ row }) => <ActionButtons documentId={row.original.id} />,
-          },
         ]}
         data={results.data}
         perPage={results.perPage}

apps/web/src/app/(dashboard)/layout.tsx

@@ -8,6 +8,7 @@ import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 
 import { Header } from '~/components/(dashboard)/layout/header';
+import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
 import { NextAuthProvider } from '~/providers/next-auth';
 
 export type AuthenticatedDashboardLayoutProps = {
@@ -30,6 +31,8 @@ export default async function AuthenticatedDashboardLayout({
       <Header user={user} />
 
       <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>
+
+      <RefreshOnFocus />
     </NextAuthProvider>
   );
 }

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

@@ -0,0 +1,68 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import { Download } from 'lucide-react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export type DownloadButtonProps = HTMLAttributes<HTMLButtonElement> & {
+  disabled?: boolean;
+  fileName?: string;
+  document?: string;
+};
+
+export const DownloadButton = ({
+  className,
+  fileName,
+  document,
+  disabled,
+  ...props
+}: DownloadButtonProps) => {
+  /**
+   * Convert the document from base64 to a blob and download it.
+   */
+  const onDownloadClick = () => {
+    if (!document) {
+      return;
+    }
+
+    let decodedDocument = document;
+
+    try {
+      decodedDocument = atob(document);
+    } catch (err) {
+      // We're just going to ignore this error and try to download the document
+      console.error(err);
+    }
+
+    const documentBytes = Uint8Array.from(decodedDocument.split('').map((c) => c.charCodeAt(0)));
+
+    const blob = new Blob([documentBytes], {
+      type: 'application/pdf',
+    });
+
+    const link = window.document.createElement('a');
+
+    link.href = window.URL.createObjectURL(blob);
+    link.download = fileName || 'document.pdf';
+
+    link.click();
+
+    window.URL.revokeObjectURL(link.href);
+  };
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      className={className}
+      disabled={disabled || !document}
+      onClick={onDownloadClick}
+      {...props}
+    >
+      <Download className="mr-2 h-5 w-5" />
+      Download
+    </Button>
+  );
+};

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

@@ -0,0 +1,107 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+
+import { CheckCircle2, Clock8, Share } from 'lucide-react';
+import { match } from 'ts-pattern';
+
+import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+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 { DocumentStatus, FieldType } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { DownloadButton } from './download-button';
+import { SigningCard } from './signing-card';
+
+export type CompletedSigningPageProps = {
+  params: {
+    token?: string;
+  };
+};
+
+export default async function CompletedSigningPage({
+  params: { token },
+}: CompletedSigningPageProps) {
+  if (!token) {
+    return notFound();
+  }
+
+  const document = await getDocumentAndSenderByToken({
+    token,
+  }).catch(() => null);
+
+  if (!document) {
+    return notFound();
+  }
+
+  const [fields, recipient] = await Promise.all([
+    getFieldsForToken({ token }),
+    getRecipientByToken({ token }),
+  ]);
+
+  const recipientName =
+    recipient.name ||
+    fields.find((field) => field.type === FieldType.NAME)?.customText ||
+    recipient.email;
+
+  return (
+    <div className="flex flex-col items-center pt-24">
+      {/* Card with recipient */}
+      <SigningCard name={recipientName} />
+
+      <div className="mt-6">
+        {match(document.status)
+          .with(DocumentStatus.COMPLETED, () => (
+            <div className="text-documenso-700 flex items-center text-center">
+              <CheckCircle2 className="mr-2 h-5 w-5" />
+              <span className="text-sm">Everyone has signed</span>
+            </div>
+          ))
+          .otherwise(() => (
+            <div className="flex items-center text-center text-blue-600">
+              <Clock8 className="mr-2 h-5 w-5" />
+              <span className="text-sm">Waiting for others to sign</span>
+            </div>
+          ))}
+      </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">
+        {/* TODO: Hook this up */}
+        <Button variant="outline" className="flex-1">
+          <Share className="mr-2 h-5 w-5" />
+          Share
+        </Button>
+
+        <DownloadButton
+          className="flex-1"
+          fileName={document.title}
+          document={document.status === DocumentStatus.COMPLETED ? document.document : undefined}
+          disabled={document.status !== DocumentStatus.COMPLETED}
+        />
+      </div>
+
+      <p className="text-muted-foreground/60 mt-36 text-sm">
+        Want so 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/signing-card.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import Image from 'next/image';
+
+import { motion } from 'framer-motion';
+
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import signingCelebration from '~/assets/signing-celebration.png';
+
+export type SigningCardProps = {
+  name: string;
+};
+
+export const SigningCard = ({ name }: SigningCardProps) => {
+  return (
+    <div className="relative w-full max-w-xs md:max-w-sm">
+      <Card
+        className="group mx-auto flex aspect-[21/9] w-full items-center justify-center"
+        degrees={-145}
+        gradient
+      >
+        <CardContent
+          className="font-signature p-6 text-center"
+          style={{
+            container: 'main',
+          }}
+        >
+          <span
+            className="text-muted-foreground/60 group-hover:text-primary/80 break-all font-semibold duration-300"
+            style={{
+              fontSize: `max(min(4rem, ${(100 / name.length / 2).toFixed(4)}cqw), 1.875rem)`,
+            }}
+          >
+            {name}
+          </span>
+        </CardContent>
+      </Card>
+
+      <motion.div
+        className="absolute -inset-32 -z-10 flex items-center justify-center md:-inset-44 xl:-inset-60 2xl:-inset-80"
+        initial={{
+          opacity: 0,
+          scale: 0.8,
+        }}
+        animate={{
+          scale: 1,
+          opacity: 0.5,
+        }}
+        transition={{
+          delay: 0.5,
+          duration: 0.5,
+        }}
+      >
+        <Image
+          src={signingCelebration}
+          alt="background pattern"
+          className="w-full"
+          style={{
+            mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
+            WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
+          }}
+        />
+      </motion.div>
+    </div>
+  );
+};

apps/web/src/app/(signing)/sign/[token]/date-field.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Loader } from 'lucide-react';
+
+import { Recipient } from '@documenso/prisma/client';
+import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { SigningFieldContainer } from './signing-field-container';
+
+export type DateFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+};
+
+export const DateField = ({ field, recipient }: DateFieldProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const [isPending, startTransition] = useTransition();
+
+  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation();
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isLoading: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation();
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+
+  const onSign = async () => {
+    try {
+      await signFieldWithToken({
+        token: recipient.token,
+        fieldId: field.id,
+        value: '',
+      });
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while signing the document.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      await removeSignedFieldWithToken({
+        token: recipient.token,
+        fieldId: field.id,
+      });
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while removing the signature.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Date</p>
+      )}
+
+      {field.inserted && (
+        <p className="text-muted-foreground text-sm duration-200">{field.customText}</p>
+      )}
+    </SigningFieldContainer>
+  );
+};

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

@@ -0,0 +1,127 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+
+import { completeDocumentWithToken } from '@documenso/lib/server-only/document/complete-document-with-token';
+import { Document, Field, Recipient } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+
+import { SignaturePad } from '~/components/signature-pad';
+
+import { useRequiredSigningContext } from './provider';
+
+export type SigningFormProps = {
+  document: Document;
+  recipient: Recipient;
+  fields: Field[];
+};
+
+export const SigningForm = ({ document, recipient, fields }: SigningFormProps) => {
+  const router = useRouter();
+
+  const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
+
+  const {
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm();
+
+  const isComplete = fields.every((f) => f.inserted);
+
+  const onFormSubmit = async () => {
+    if (!isComplete) {
+      return;
+    }
+
+    await completeDocumentWithToken({
+      token: recipient.token,
+      documentId: document.id,
+    });
+
+    router.push(`/sign/${recipient.token}/complete`);
+  };
+
+  return (
+    <form
+      className={cn(
+        'dark:bg-background border-border bg-widget sticky top-20 flex h-[calc(100vh-6rem)] max-h-screen flex-col rounded-xl border px-4 py-6',
+      )}
+      onSubmit={handleSubmit(onFormSubmit)}
+    >
+      <div className={cn('-mx-2 flex flex-1 flex-col overflow-hidden px-2')}>
+        <div className={cn('flex flex-1 flex-col')}>
+          <h3 className="text-foreground text-2xl font-semibold">Sign Document</h3>
+
+          <p className="text-muted-foreground mt-2 text-sm">
+            Please review the document before signing.
+          </p>
+
+          <hr className="border-border mb-8 mt-4" />
+
+          <div className="-mx-2 flex flex-1 flex-col overflow-y-auto px-2">
+            <div className="flex flex-1 flex-col gap-y-4">
+              <div>
+                <Label htmlFor="full-name">Full Name</Label>
+
+                <Input
+                  type="text"
+                  id="full-name"
+                  className="bg-background mt-2"
+                  value={fullName}
+                  onChange={(e) => setFullName(e.target.value)}
+                />
+              </div>
+
+              <div>
+                <Label htmlFor="Signature">Signature</Label>
+
+                <Card className="mt-2" gradient degrees={-120}>
+                  <CardContent className="p-0">
+                    <SignaturePad
+                      className="h-44 w-full"
+                      defaultValue={signature ?? undefined}
+                      onChange={(value) => {
+                        console.log({
+                          signpadValue: value,
+                        });
+                        setSignature(value);
+                      }}
+                    />
+                  </CardContent>
+                </Card>
+              </div>
+            </div>
+
+            <div className="flex gap-4">
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                size="lg"
+              >
+                Cancel
+              </Button>
+
+              <Button
+                type="submit"
+                className="flex-1"
+                size="lg"
+                disabled={!isComplete || isSubmitting}
+              >
+                {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
+                Complete
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};

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

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+
+import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header';
+import { NextAuthProvider } from '~/providers/next-auth';
+
+export type SigningLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default async function SigningLayout({ children }: SigningLayoutProps) {
+  const user = await getServerComponentSession();
+
+  return (
+    <NextAuthProvider>
+      <div className="min-h-screen overflow-hidden">
+        {user && <AuthenticatedHeader user={user} />}
+
+        <main className="mb-8 mt-8 px-4 md:mb-12 md:mt-12 md:px-8">{children}</main>
+      </div>
+    </NextAuthProvider>
+  );
+}

apps/web/src/app/(signing)/sign/[token]/name-field.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Loader } from 'lucide-react';
+
+import { Recipient } from '@documenso/prisma/client';
+import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredSigningContext } from './provider';
+import { SigningFieldContainer } from './signing-field-container';
+
+export type NameFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+};
+
+export const NameField = ({ field, recipient }: NameFieldProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const { fullName: providedFullName, setFullName: setProvidedFullName } =
+    useRequiredSigningContext();
+
+  const [isPending, startTransition] = useTransition();
+
+  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation();
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isLoading: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation();
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+
+  const [showFullNameModal, setShowFullNameModal] = useState(false);
+  const [localFullName, setLocalFullName] = useState('');
+
+  const onSign = async (source: 'local' | 'provider' = 'provider') => {
+    try {
+      if (!providedFullName && !localFullName) {
+        setShowFullNameModal(true);
+        return;
+      }
+
+      await signFieldWithToken({
+        token: recipient.token,
+        fieldId: field.id,
+        value: source === 'local' && localFullName ? localFullName : providedFullName ?? '',
+        isBase64: false,
+      });
+
+      if (source === 'local' && !providedFullName) {
+        setProvidedFullName(localFullName);
+      }
+
+      setLocalFullName('');
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while signing the document.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      await removeSignedFieldWithToken({
+        token: recipient.token,
+        fieldId: field.id,
+      });
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while removing the signature.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Name</p>
+      )}
+
+      {field.inserted && <p className="text-muted-foreground duration-200">{field.customText}</p>}
+
+      <Dialog open={showFullNameModal} onOpenChange={setShowFullNameModal}>
+        <DialogContent>
+          <DialogTitle>
+            Sign as {recipient.name}{' '}
+            <span className="text-muted-foreground">({recipient.email})</span>
+          </DialogTitle>
+
+          <div className="py-4">
+            <Label htmlFor="signature">Full Name</Label>
+
+            <Input
+              type="text"
+              className="mt-2"
+              value={localFullName}
+              onChange={(e) => setLocalFullName(e.target.value)}
+            />
+          </div>
+
+          <DialogFooter>
+            <div className="flex w-full flex-1 flex-nowrap gap-4">
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                onClick={() => {
+                  setShowFullNameModal(false);
+                  setLocalFullName('');
+                }}
+              >
+                Cancel
+              </Button>
+
+              <Button
+                type="button"
+                className="flex-1"
+                disabled={!localFullName}
+                onClick={() => {
+                  setShowFullNameModal(false);
+                  onSign('local');
+                }}
+              >
+                Sign
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </SigningFieldContainer>
+  );
+};

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

@@ -0,0 +1,94 @@
+import { notFound } from 'next/navigation';
+
+import { match } from 'ts-pattern';
+
+import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
+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 { FieldType } from '@documenso/prisma/client';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+
+import { LazyPDFViewer } from '~/components/(dashboard)/pdf-viewer/lazy-pdf-viewer';
+import { PDF_VIEWER_PAGE_SELECTOR } from '~/components/(dashboard)/pdf-viewer/types';
+
+import { DateField } from './date-field';
+import { SigningForm } from './form';
+import { NameField } from './name-field';
+import { SigningProvider } from './provider';
+import { SignatureField } from './signature-field';
+
+export type SigningPageProps = {
+  params: {
+    token?: string;
+  };
+};
+
+export default async function SigningPage({ params: { token } }: SigningPageProps) {
+  if (!token) {
+    return notFound();
+  }
+
+  const [document, fields, recipient] = await Promise.all([
+    getDocumentAndSenderByToken({
+      token,
+    }).catch(() => null),
+    getFieldsForToken({ token }),
+    getRecipientByToken({ token }),
+    viewedDocument({ token }),
+  ]);
+
+  if (!document) {
+    return notFound();
+  }
+
+  const documentUrl = `data:application/pdf;base64,${document.document}`;
+
+  return (
+    <SigningProvider email={recipient.email} fullName={recipient.name}>
+      <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+        <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
+          {document.title}
+        </h1>
+
+        <div className="mt-2.5 flex items-center gap-x-6">
+          <p className="text-muted-foreground">
+            {document.User.name} ({document.User.email}) has invited you to sign this document.
+          </p>
+        </div>
+
+        <div className="mt-8 grid grid-cols-12 gap-8">
+          <Card
+            className="col-span-12 rounded-xl before:rounded-xl lg:col-span-7 xl:col-span-8"
+            gradient
+          >
+            <CardContent className="p-2">
+              <LazyPDFViewer document={documentUrl} />
+            </CardContent>
+          </Card>
+
+          <div className="col-span-12 lg:col-span-5 xl:col-span-4">
+            <SigningForm document={document} recipient={recipient} fields={fields} />
+          </div>
+        </div>
+
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+          {fields.map((field) =>
+            match(field.type)
+              .with(FieldType.SIGNATURE, () => (
+                <SignatureField key={field.id} field={field} recipient={recipient} />
+              ))
+              .with(FieldType.NAME, () => (
+                <NameField key={field.id} field={field} recipient={recipient} />
+              ))
+              .with(FieldType.DATE, () => (
+                <DateField key={field.id} field={field} recipient={recipient} />
+              ))
+              .otherwise(() => null),
+          )}
+        </ElementVisible>
+      </div>
+    </SigningProvider>
+  );
+}

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

@@ -0,0 +1,63 @@
+'use client';
+
+import { createContext, useContext, useState } from 'react';
+
+export type SigningContextValue = {
+  fullName: string;
+  setFullName: (_value: string) => void;
+  email: string;
+  setEmail: (_value: string) => void;
+  signature: string | null;
+  setSignature: (_value: string | null) => void;
+};
+
+const SigningContext = createContext<SigningContextValue | null>(null);
+
+export const useSigningContext = () => {
+  return useContext(SigningContext);
+};
+
+export const useRequiredSigningContext = () => {
+  const context = useSigningContext();
+
+  if (!context) {
+    throw new Error('Signing context is required');
+  }
+
+  return context;
+};
+
+export interface SigningProviderProps {
+  fullName?: string;
+  email?: string;
+  signature?: string;
+  children: React.ReactNode;
+}
+
+export const SigningProvider = ({
+  fullName: initialFullName,
+  email: initialEmail,
+  signature: initialSignature,
+  children,
+}: SigningProviderProps) => {
+  const [fullName, setFullName] = useState(initialFullName || '');
+  const [email, setEmail] = useState(initialEmail || '');
+  const [signature, setSignature] = useState(initialSignature || null);
+
+  return (
+    <SigningContext.Provider
+      value={{
+        fullName,
+        setFullName,
+        email,
+        setEmail,
+        signature,
+        setSignature,
+      }}
+    >
+      {children}
+    </SigningContext.Provider>
+  );
+};
+
+SigningProvider.displayName = 'SigningProvider';

apps/web/src/app/(signing)/sign/[token]/signature-field.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import { useMemo, useState, useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Loader } from 'lucide-react';
+
+import { Recipient } from '@documenso/prisma/client';
+import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { SignaturePad } from '~/components/signature-pad';
+
+import { useRequiredSigningContext } from './provider';
+import { SigningFieldContainer } from './signing-field-container';
+
+type SignatureFieldState = 'empty' | 'signed-image' | 'signed-text';
+
+export type SignatureFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+};
+
+export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+  const { signature: providedSignature, setSignature: setProvidedSignature } =
+    useRequiredSigningContext();
+
+  const [isPending, startTransition] = useTransition();
+
+  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation();
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isLoading: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation();
+
+  const { Signature: signature } = field;
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+
+  const [showSignatureModal, setShowSignatureModal] = useState(false);
+  const [localSignature, setLocalSignature] = useState<string | null>(null);
+
+  const state = useMemo<SignatureFieldState>(() => {
+    if (!field.inserted) {
+      return 'empty';
+    }
+
+    if (signature?.signatureImageAsBase64) {
+      return 'signed-image';
+    }
+
+    return 'signed-text';
+  }, [field.inserted, signature?.signatureImageAsBase64]);
+
+  const onSign = async (source: 'local' | 'provider' = 'provider') => {
+    try {
+      console.log({
+        providedSignature,
+        localSignature,
+      });
+
+      if (!providedSignature && !localSignature) {
+        setShowSignatureModal(true);
+        return;
+      }
+
+      await signFieldWithToken({
+        token: recipient.token,
+        fieldId: field.id,
+        value: source === 'local' && localSignature ? localSignature : providedSignature ?? '',
+        isBase64: true,
+      });
+
+      if (source === 'local' && !providedSignature) {
+        setProvidedSignature(localSignature);
+      }
+
+      setLocalSignature(null);
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while signing the document.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      await removeSignedFieldWithToken({
+        token: recipient.token,
+        fieldId: field.id,
+      });
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while removing the signature.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {state === 'empty' && (
+        <p className="group-hover:text-primary font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
+          Signature
+        </p>
+      )}
+
+      {state === 'signed-image' && signature?.signatureImageAsBase64 && (
+        <img
+          src={signature.signatureImageAsBase64}
+          alt={`Signature for ${recipient.name}`}
+          className="h-full w-full object-contain"
+        />
+      )}
+
+      {state === 'signed-text' && (
+        <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
+          {signature?.typedSignature}
+        </p>
+      )}
+
+      <Dialog open={showSignatureModal} onOpenChange={setShowSignatureModal}>
+        <DialogContent>
+          <DialogTitle>
+            Sign as {recipient.name}{' '}
+            <span className="text-muted-foreground">({recipient.email})</span>
+          </DialogTitle>
+
+          <div className="">
+            <Label htmlFor="signature">Signature</Label>
+
+            <SignaturePad
+              id="signature"
+              className="border-border mt-2 h-44 w-full rounded-md border"
+              onChange={(value) => setLocalSignature(value)}
+            />
+          </div>
+
+          <DialogFooter>
+            <div className="flex w-full flex-1 flex-nowrap gap-4">
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                onClick={() => {
+                  setShowSignatureModal(false);
+                  setLocalSignature(null);
+                }}
+              >
+                Cancel
+              </Button>
+
+              <Button
+                type="button"
+                className="flex-1"
+                disabled={!localSignature}
+                onClick={() => {
+                  setShowSignatureModal(false);
+                  onSign('local');
+                }}
+              >
+                Sign
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </SigningFieldContainer>
+  );
+};

apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import React from 'react';
+
+import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { cn } from '@documenso/ui/lib/utils';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import { useFieldPageCoords } from '~/hooks/use-field-page-coords';
+
+export type SignatureFieldProps = {
+  field: FieldWithSignature;
+  loading?: boolean;
+  children: React.ReactNode;
+  onSign?: () => Promise<void> | void;
+  onRemove?: () => Promise<void> | void;
+};
+
+export const SigningFieldContainer = ({
+  field,
+  loading,
+  onSign,
+  onRemove,
+  children,
+}: SignatureFieldProps) => {
+  const coords = useFieldPageCoords(field);
+
+  const onSignFieldClick = async () => {
+    if (field.inserted) {
+      return;
+    }
+
+    await onSign?.();
+  };
+
+  const onRemoveSignedFieldClick = async () => {
+    if (!field.inserted) {
+      return;
+    }
+
+    await onRemove?.();
+  };
+
+  return (
+    <div
+      className="absolute"
+      style={{
+        top: `${coords.y}px`,
+        left: `${coords.x}px`,
+        height: `${coords.height}px`,
+        width: `${coords.width}px`,
+      }}
+    >
+      <Card
+        className="bg-background relative h-full w-full"
+        data-inserted={field.inserted ? 'true' : 'false'}
+      >
+        <CardContent
+          className={cn(
+            'text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2',
+          )}
+        >
+          {!field.inserted && !loading && (
+            <button type="submit" className="absolute inset-0 z-10" onClick={onSignFieldClick} />
+          )}
+
+          {field.inserted && !loading && (
+            <button
+              className="text-destructive bg-background/40 absolute inset-0 z-10 flex items-center justify-center rounded-md text-sm opacity-0 backdrop-blur-sm duration-200 group-hover:opacity-100"
+              onClick={onRemoveSignedFieldClick}
+            >
+              Remove
+            </button>
+          )}
+
+          {children}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

apps/web/src/app/layout.tsx

@@ -1,7 +1,9 @@
-import { Inter } from 'next/font/google';
+import { Caveat, Inter } from 'next/font/google';
 
 import { TrpcProvider } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
 import { Toaster } from '@documenso/ui/primitives/toaster';
+import { TooltipProvider } from '@documenso/ui/primitives/tooltip';
 
 import { ThemeProvider } from '~/providers/next-theme';
 import { PlausibleProvider } from '~/providers/plausible';
@@ -9,6 +11,7 @@ import { PlausibleProvider } from '~/providers/plausible';
 import './globals.css';
 
 const fontInter = Inter({ subsets: ['latin'], variable: '--font-sans' });
+const fontCaveat = Caveat({ subsets: ['latin'], variable: '--font-signature' });
 
 export const metadata = {
   title: 'Documenso - The Open Source DocuSign Alternative',
@@ -36,7 +39,11 @@ export const metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={fontInter.variable} suppressHydrationWarning>
+    <html
+      lang="en"
+      className={cn(fontInter.variable, fontCaveat.variable)}
+      suppressHydrationWarning
+    >
       <head>
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
@@ -47,7 +54,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body>
         <PlausibleProvider>
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-            <TrpcProvider>{children}</TrpcProvider>
+            <TooltipProvider>
+              <TrpcProvider>{children}</TrpcProvider>
+            </TooltipProvider>
           </ThemeProvider>
         </PlausibleProvider>
         <Toaster />

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

@@ -0,0 +1,54 @@
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+
+const ZIndexes: { [key: string]: string } = {
+  '10': 'z-10',
+  '20': 'z-20',
+  '30': 'z-30',
+  '40': 'z-40',
+  '50': 'z-50',
+};
+
+export type StackAvatarProps = {
+  first?: boolean;
+  zIndex?: string;
+  fallbackText?: string;
+  type: 'unsigned' | 'waiting' | 'opened' | 'completed';
+};
+
+export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarProps) => {
+  let classes = '';
+  let zIndexClass = '';
+  const firstClass = first ? '' : '-ml-3';
+
+  if (zIndex) {
+    zIndexClass = ZIndexes[zIndex] ?? '';
+  }
+
+  switch (type) {
+    case 'unsigned':
+      classes = 'bg-dawn-200 text-dawn-900';
+      break;
+    case 'opened':
+      classes = 'bg-yellow-200 text-yellow-700';
+      break;
+    case 'waiting':
+      classes = 'bg-water text-water-700';
+      break;
+    case 'completed':
+      classes = 'bg-documenso-200 text-documenso-800';
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <Avatar
+      className={`
+        ${zIndexClass}
+        ${firstClass}
+        h-10 w-10 border-2 border-solid border-white`}
+    >
+      <AvatarFallback className={classes}>{fallbackText ?? 'UK'}</AvatarFallback>
+    </Avatar>
+  );
+};

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

@@ -0,0 +1,111 @@
+import { initials } from '@documenso/lib/client-only/recipient-initials';
+import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import { Recipient } from '@documenso/prisma/client';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
+
+import { StackAvatar } from './stack-avatar';
+import { StackAvatars } from './stack-avatars';
+
+export const StackAvatarsWithTooltip = ({ recipients }: { recipients: Recipient[] }) => {
+  const waitingRecipients = recipients.filter(
+    (recipient) => getRecipientType(recipient) === 'waiting',
+  );
+
+  const openedRecipients = recipients.filter(
+    (recipient) => getRecipientType(recipient) === 'opened',
+  );
+
+  const completedRecipients = recipients.filter(
+    (recipient) => getRecipientType(recipient) === 'completed',
+  );
+
+  const uncompletedRecipients = recipients.filter(
+    (recipient) => getRecipientType(recipient) === 'unsigned',
+  );
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger className="flex cursor-pointer">
+          <StackAvatars recipients={recipients} />
+        </TooltipTrigger>
+        <TooltipContent>
+          <div className="flex flex-col gap-y-5 p-1">
+            {completedRecipients.length > 0 && (
+              <div>
+                <h1 className="text-base font-medium">Completed</h1>
+                {completedRecipients.map((recipient: Recipient) => (
+                  <div key={recipient.id} className="my-1 flex items-center gap-2">
+                    <StackAvatar
+                      first={true}
+                      key={recipient.id}
+                      type={getRecipientType(recipient)}
+                      fallbackText={initials(recipient.name)}
+                    />
+                    <span className="text-sm text-gray-500">{recipient.email}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {waitingRecipients.length > 0 && (
+              <div>
+                <h1 className="text-base font-medium">Waiting</h1>
+                {waitingRecipients.map((recipient: Recipient) => (
+                  <div key={recipient.id} className="my-1 flex items-center gap-2">
+                    <StackAvatar
+                      first={true}
+                      key={recipient.id}
+                      type={getRecipientType(recipient)}
+                      fallbackText={initials(recipient.name)}
+                    />
+                    <span className="text-sm text-gray-500">{recipient.email}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {openedRecipients.length > 0 && (
+              <div>
+                <h1 className="text-base font-medium">Opened</h1>
+                {openedRecipients.map((recipient: Recipient) => (
+                  <div key={recipient.id} className="my-1 flex items-center gap-2">
+                    <StackAvatar
+                      first={true}
+                      key={recipient.id}
+                      type={getRecipientType(recipient)}
+                      fallbackText={initials(recipient.name)}
+                    />
+                    <span className="text-sm text-gray-500">{recipient.email}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {uncompletedRecipients.length > 0 && (
+              <div>
+                <h1 className="text-base font-medium">Uncompleted</h1>
+                {uncompletedRecipients.map((recipient: Recipient) => (
+                  <div key={recipient.id} className="my-1 flex items-center gap-2">
+                    <StackAvatar
+                      first={true}
+                      key={recipient.id}
+                      type={getRecipientType(recipient)}
+                      fallbackText={initials(recipient.name)}
+                    />
+                    <span className="text-sm text-gray-500">{recipient.email}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { initials } from '@documenso/lib/client-only/recipient-initials';
+import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import { Recipient } from '@documenso/prisma/client';
+
+import { StackAvatar } from './stack-avatar';
+
+export function StackAvatars({ recipients }: { recipients: Recipient[] }) {
+  const renderStackAvatars = (recipients: Recipient[]) => {
+    const zIndex = 50;
+    const itemsToRender = recipients.slice(0, 5);
+    const remainingItems = recipients.length - itemsToRender.length;
+
+    return itemsToRender.map((recipient: Recipient, index: number) => {
+      const first = index === 0 ? true : false;
+
+      const lastItemText =
+        index === itemsToRender.length - 1 && remainingItems > 0
+          ? `+${remainingItems + 1}`
+          : undefined;
+
+      return (
+        <StackAvatar
+          key={recipient.id}
+          first={first}
+          zIndex={String(zIndex - index * 10)}
+          type={lastItemText && index === 4 ? 'unsigned' : getRecipientType(recipient)}
+          fallbackText={lastItemText ? lastItemText : initials(recipient.name)}
+        />
+      );
+    });
+  };
+
+  return <>{renderStackAvatars(recipients)}</>;
+}

apps/web/src/components/(dashboard)/document-dropzone/document-dropzone.tsx

@@ -2,7 +2,6 @@
 
 import { Variants, motion } from 'framer-motion';
 import { Plus } from 'lucide-react';
-import { useTheme } from 'next-themes';
 import { useDropzone } from 'react-dropzone';
 
 import { cn } from '@documenso/ui/lib/utils';
@@ -92,8 +91,6 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
     },
   });
 
-  const { theme } = useTheme();
-
   return (
     <motion.div
       className={cn('flex', className)}
@@ -110,7 +107,6 @@ export const DocumentDropzone = ({ className, onDrop, ...props }: DocumentDropzo
         )}
         gradient={true}
         degrees={120}
-
         {...getRootProps()}
         {...props}
       >

apps/web/src/components/(dashboard)/metric-card/metric-card.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
-
-import { LucideIcon } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react/dist/lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -15,7 +13,7 @@ export const CardMetric = ({ icon: Icon, title, value, className }: CardMetricPr
   return (
     <div
       className={cn(
-        'border-border bg-background overflow-hidden rounded-lg border shadow shadow-transparent duration-200 hover:shadow-slate-100',
+        'border-border bg-background hover:shadow-border/80 overflow-hidden rounded-lg border shadow shadow-transparent duration-200',
         className,
       )}
     >

apps/web/src/components/(dashboard)/pdf-viewer/lazy-pdf-viewer.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+import { Loader } from 'lucide-react';
+
+export const LazyPDFViewer = dynamic(
+  async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="dark:bg-background flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
+        <Loader className="text-documenso h-12 w-12 animate-spin" />
+
+        <p className="text-muted-foreground mt-4">Loading document...</p>
+      </div>
+    ),
+  },
+);

apps/web/src/components/(dashboard)/refresh-on-focus/refresh-on-focus.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { useCallback, useEffect } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+export const RefreshOnFocus = () => {
+  const { refresh } = useRouter();
+
+  const onFocus = useCallback(() => {
+    refresh();
+  }, [refresh]);
+
+  useEffect(() => {
+    window.addEventListener('focus', onFocus);
+
+    return () => {
+      window.removeEventListener('focus', onFocus);
+    };
+  }, [onFocus]);
+
+  return null;
+};

apps/web/src/components/(dashboard)/table/actions-component.tsx

@@ -1,30 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { Download, Edit, Trash } from 'lucide-react';
-
-export function ActionButtons({ documentId }: { documentId: number }) {
-  return (
-    <div className="flex cursor-pointer gap-6">
-      <Edit
-        className="text-primary h-5 w-5"
-        onClick={() => {
-          console.log('Edit Document with id: ', documentId);
-        }}
-      />
-      <Download
-        className="text-primary h-5 w-5"
-        onClick={() => {
-          console.log('Download Document with id: ', documentId);
-        }}
-      />
-      <Trash
-        className="text-primary h-5 w-5"
-        onClick={() => {
-          console.log('Delete Document with id: ', documentId);
-        }}
-      />
-    </div>
-  );
-}

apps/web/src/components/(marketing)/callout.tsx

@@ -7,7 +7,12 @@ import { usePlausible } from 'next-plausible';
 
 import { Button } from '@documenso/ui/primitives/button';
 
-export const Callout = () => {
+export type CalloutProps = {
+  starCount?: number;
+  [key: string]: unknown;
+};
+
+export const Callout = ({ starCount }: CalloutProps) => {
   const event = usePlausible();
 
   const onSignUpClick = () => {
@@ -36,21 +41,26 @@ export const Callout = () => {
         onClick={onSignUpClick}
       >
         Get the Community Plan
-        <span className="bg-primary -mr-2 ml-2.5 rounded-full px-2 py-1.5 text-xs">
+        <span className="bg-primary -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
           $30/mo. forever!
         </span>
       </Button>
 
-      <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm" asChild>
-        <Link
-          href="https://github.com/documenso/documenso"
-          target="_blank"
-          onClick={() => event('view-github')}
-        >
+      <Link
+        href="https://github.com/documenso/documenso"
+        target="_blank"
+        onClick={() => event('view-github')}
+      >
+        <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
           <Github className="mr-2 h-5 w-5" />
           Star on Github
-        </Link>
-      </Button>
+          {starCount && starCount > 0 && (
+            <span className="bg-primary -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
+              {starCount.toLocaleString('en-US')}
+            </span>
+          )}
+        </Button>
+      </Link>
     </div>
   );
 };

apps/web/src/components/(marketing)/hero.tsx

@@ -16,6 +16,7 @@ import { Widget } from './widget';
 
 export type HeroProps = {
   className?: string;
+  starCount?: number;
   [key: string]: unknown;
 };
 
@@ -48,7 +49,7 @@ const HeroTitleVariants: Variants = {
   },
 };
 
-export const Hero = ({ className, ...props }: HeroProps) => {
+export const Hero = ({ className, starCount, ...props }: HeroProps) => {
   const event = usePlausible();
 
   const onSignUpClick = () => {
@@ -109,44 +110,44 @@ export const Hero = ({ className, ...props }: HeroProps) => {
             onClick={onSignUpClick}
           >
             Get the Community Plan
-            <span className="bg-primary -mr-2 ml-2.5 rounded-full px-2 py-1.5 text-xs">
+            <span className="bg-primary -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
               $30/mo. forever!
             </span>
           </Button>
 
-          <Button
-            variant="outline"
-            className="rounded-full bg-transparent backdrop-blur-sm"
-            asChild
-          >
-            <Link
-              href="https://github.com/documenso/documenso"
-              onClick={() => event('view-github')}
-            >
+          <Link href="https://github.com/documenso/documenso" onClick={() => event('view-github')}>
+            <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
               <Github className="mr-2 h-5 w-5" />
               Star on Github
-            </Link>
-          </Button>
-        </motion.div>
-
-        <motion.div
-          variants={HeroTitleVariants}
-          initial="initial"
-          animate="animate"
-          className="mt-8 flex flex-col items-center justify-center gap-x-6 gap-y-4"
-        >
-          <Link
-            href="https://www.producthunt.com/posts/documenso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-documenso"
-            target="_blank"
-          >
-            <img
-              src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=395047&theme=light&period=daily"
-              alt="Documenso - The open source DocuSign alternative | Product Hunt"
-              style={{ width: '250px', height: '54px' }}
-            />
+              {starCount && starCount > 0 && (
+                <span className="bg-primary -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
+                  {starCount.toLocaleString('en-US')}
+                </span>
+              )}
+            </Button>
           </Link>
         </motion.div>
 
+        <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-6">
+          <motion.div
+            variants={HeroTitleVariants}
+            initial="initial"
+            animate="animate"
+            className="mt-8 flex flex-col items-center justify-center gap-x-6 gap-y-4"
+          >
+            <Link
+              href="https://www.producthunt.com/posts/documenso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-documenso"
+              target="_blank"
+            >
+              <img
+                src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=395047&theme=light&period=daily"
+                alt="Documenso - The open source DocuSign alternative | Product Hunt"
+                style={{ width: '250px', height: '54px' }}
+              />
+            </Link>
+          </motion.div>
+        </div>
+
         <motion.div
           className="mt-12"
           variants={{

apps/web/src/components/formatter/document-status.tsx

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
 
-import { CheckCircle2, Clock, File, LucideIcon } from 'lucide-react';
+import { CheckCircle2, Clock, File } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react/dist/lucide-react';
 
 import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
@@ -31,14 +32,24 @@ const FRIENDLY_STATUS_MAP: Record<InternalDocumentStatus, FriendlyStatus> = {
 
 export type DocumentStatusProps = HTMLAttributes<HTMLSpanElement> & {
   status: InternalDocumentStatus;
+  inheritColor?: boolean;
 };
 
-export const DocumentStatus = ({ className, status, ...props }: DocumentStatusProps) => {
+export const DocumentStatus = ({
+  className,
+  status,
+  inheritColor,
+  ...props
+}: DocumentStatusProps) => {
   const { label, icon: Icon, color } = FRIENDLY_STATUS_MAP[status];
 
   return (
     <span className={cn('flex items-center', className)} {...props}>
-      <Icon className={cn('mr-2 inline-block h-4 w-4', color)} />
+      <Icon
+        className={cn('mr-2 inline-block h-4 w-4', {
+          [color]: !inheritColor,
+        })}
+      />
       {label}
     </span>
   );

apps/web/src/components/forms/edit-document.tsx

@@ -1,251 +0,0 @@
-'use client';
-
-import { useId, useState } from 'react';
-
-import dynamic from 'next/dynamic';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
-import { useForm } from 'react-hook-form';
-
-import { Document, Field, Recipient, User } from '@documenso/prisma/client';
-import { trpc } from '@documenso/trpc/react';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-
-import { AddFieldsFormPartial } from './edit-document/add-fields';
-import { AddSignersFormPartial } from './edit-document/add-signers';
-import { AddSubjectFormPartial } from './edit-document/add-subject';
-import { TEditDocumentFormSchema, ZEditDocumentFormSchema } from './edit-document/types';
-
-const PDFViewer = dynamic(async () => import('~/components/(dashboard)/pdf-viewer/pdf-viewer'), {
-  ssr: false,
-  loading: () => (
-    <div className="dark:bg-background flex min-h-[80vh] flex-col items-center justify-center bg-white/50">
-      <Loader className="text-documenso h-12 w-12 animate-spin" />
-
-      <p className="text-muted-foreground mt-4">Loading document...</p>
-    </div>
-  ),
-});
-
-const MAX_STEP = 2;
-
-export type EditDocumentFormProps = {
-  className?: string;
-  user: User;
-  document: Document;
-  recipients: Recipient[];
-  fields: Field[];
-};
-
-export const EditDocumentForm = ({
-  className,
-  document,
-  recipients,
-  fields,
-  user: _user,
-}: EditDocumentFormProps) => {
-  const initialId = useId();
-
-  const [step, setStep] = useState(0);
-  const [nextStepLoading, setNextStepLoading] = useState(false);
-
-  const documentUrl = `data:application/pdf;base64,${document.document}`;
-  const defaultSigners =
-    recipients.length > 0
-      ? recipients.map((recipient) => ({
-          nativeId: recipient.id,
-          formId: `${recipient.id}-${recipient.documentId}`,
-          name: recipient.name,
-          email: recipient.email,
-        }))
-      : [
-          {
-            formId: initialId,
-            name: '',
-            email: '',
-          },
-        ];
-
-  const defaultFields = fields.map((field) => ({
-    nativeId: field.id,
-    formId: `${field.id}-${field.documentId}`,
-    pageNumber: field.page,
-    type: field.type,
-    pageX: Number(field.positionX),
-    pageY: Number(field.positionY),
-    pageWidth: Number(field.width),
-    pageHeight: Number(field.height),
-    signerEmail: recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '',
-  }));
-
-  const { mutateAsync: setRecipientsForDocument } =
-    trpc.document.setRecipientsForDocument.useMutation();
-
-  const { mutateAsync: setFieldsForDocument } = trpc.document.setFieldsForDocument.useMutation();
-
-  const {
-    control,
-    handleSubmit,
-    watch,
-    trigger,
-    formState: { errors, isSubmitting },
-  } = useForm<TEditDocumentFormSchema>({
-    mode: 'onBlur',
-    defaultValues: {
-      signers: defaultSigners,
-      fields: defaultFields,
-      email: {
-        subject: '',
-        message: '',
-      },
-    },
-    resolver: zodResolver(ZEditDocumentFormSchema),
-  });
-
-  const signersFormValue = watch('signers');
-  const fieldsFormValue = watch('fields');
-
-  console.log({ state: watch(), errors });
-
-  const canGoBack = step > 0;
-  const canGoNext = step < MAX_STEP;
-
-  const onGoBackClick = () => setStep((prev) => Math.max(0, prev - 1));
-  const onGoNextClick = async () => {
-    setNextStepLoading(true);
-
-    const passes = await trigger();
-
-    if (step === 0) {
-      await setRecipientsForDocument({
-        documentId: document.id,
-        recipients: signersFormValue.map((signer) => ({
-          id: signer.nativeId ?? undefined,
-          name: signer.name,
-          email: signer.email,
-        })),
-      }).catch((err: unknown) => console.error(err));
-    }
-
-    if (step === 1) {
-      await setFieldsForDocument({
-        documentId: document.id,
-        fields: fieldsFormValue.map((field) => ({
-          id: field.nativeId ?? undefined,
-          type: field.type,
-          signerEmail: field.signerEmail,
-          pageNumber: field.pageNumber,
-          pageX: field.pageX,
-          pageY: field.pageY,
-          pageWidth: field.pageWidth,
-          pageHeight: field.pageHeight,
-        })),
-      }).catch((err: unknown) => console.error(err));
-    }
-
-    if (passes) {
-      setStep((prev) => Math.min(MAX_STEP, prev + 1));
-    }
-
-    console.log({ passes });
-
-    setNextStepLoading(false);
-  };
-
-  return (
-    <div className={cn('grid w-full grid-cols-12 gap-x-8', className)}>
-      <Card className="col-span-7 rounded-xl before:rounded-xl" gradient>
-        <CardContent className="p-2">
-          <PDFViewer document={documentUrl} />
-        </CardContent>
-      </Card>
-
-      <div className="col-span-5">
-        <form
-          className="dark:bg-background border-border sticky top-20 flex h-[calc(100vh-6rem)] max-h-screen flex-col rounded-xl border bg-[hsl(var(--widget))] px-4 py-6"
-          onSubmit={handleSubmit(console.log)}
-        >
-          {step === 0 && (
-            <AddSignersFormPartial
-              className="-mx-2 flex-1 overflow-y-hidden px-2"
-              control={control}
-              watch={watch}
-              errors={errors}
-              isSubmitting={isSubmitting}
-            />
-          )}
-
-          {step === 1 && (
-            <AddFieldsFormPartial
-              className="-mx-2 flex-1 overflow-y-hidden px-2"
-              control={control}
-              watch={watch}
-              errors={errors}
-              isSubmitting={isSubmitting}
-            />
-          )}
-
-          {step === 2 && (
-            <AddSubjectFormPartial
-              className="-mx-2 flex-1 overflow-y-hidden px-2"
-              control={control}
-              watch={watch}
-              errors={errors}
-              isSubmitting={isSubmitting}
-            />
-          )}
-
-          <div className="mt-4 flex-shrink-0">
-            <p className="text-muted-foreground text-sm">
-              Add Signers ({step + 1}/{MAX_STEP + 1})
-            </p>
-
-            <div className="bg-muted relative mt-4 h-[2px] rounded-md">
-              <div
-                className="bg-documenso absolute inset-y-0 left-0"
-                style={{
-                  width: `${(100 / (MAX_STEP + 1)) * (step + 1)}%`,
-                }}
-              />
-            </div>
-
-            <div className="mt-4 flex gap-x-4">
-              <Button
-                type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
-                size="lg"
-                variant="secondary"
-                disabled={!canGoBack}
-                onClick={onGoBackClick}
-              >
-                Go Back
-              </Button>
-
-              {step < MAX_STEP && (
-                <Button
-                  type="button"
-                  className="bg-documenso flex-1"
-                  size="lg"
-                  disabled={!canGoNext}
-                  onClick={onGoNextClick}
-                >
-                  {nextStepLoading && <Loader className="mr-2 h-5 w-5 animate-spin" />}
-                  Continue
-                </Button>
-              )}
-
-              {step === MAX_STEP && (
-                <Button type="submit" className="bg-documenso flex-1" size="lg">
-                  Complete
-                </Button>
-              )}
-            </div>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};

apps/web/src/components/forms/edit-document/add-fields.action.ts

@@ -0,0 +1,31 @@
+'use server';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { setFieldsForDocument } from '@documenso/lib/server-only/field/set-fields-for-document';
+
+import { TAddFieldsFormSchema } from './add-fields.types';
+
+export type AddFieldsActionInput = TAddFieldsFormSchema & {
+  documentId: number;
+};
+
+export const addFields = async ({ documentId, fields }: AddFieldsActionInput) => {
+  'use server';
+
+  const { id: userId } = await getRequiredServerComponentSession();
+
+  await setFieldsForDocument({
+    userId,
+    documentId,
+    fields: fields.map((field) => ({
+      id: field.nativeId,
+      signerEmail: field.signerEmail,
+      type: field.type,
+      pageNumber: field.pageNumber,
+      pageX: field.pageX,
+      pageY: field.pageY,
+      pageWidth: field.pageWidth,
+      pageHeight: field.pageHeight,
+    })),
+  });
+};

apps/web/src/components/forms/edit-document/add-fields.tsx

@@ -3,12 +3,13 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { Caveat } from 'next/font/google';
+import { useRouter } from 'next/navigation';
 
-import { Check, ChevronsUpDown } from 'lucide-react';
+import { Check, ChevronsUpDown, Info } from 'lucide-react';
 import { nanoid } from 'nanoid';
-import { Control, FieldErrors, UseFormWatch, useFieldArray } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
 
-import { FieldType } from '@documenso/prisma/client';
+import { Document, Field, FieldType, Recipient, SendStatus } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -20,11 +21,23 @@ import {
   CommandItem,
 } from '@documenso/ui/primitives/command';
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { PDF_VIEWER_PAGE_SELECTOR } from '~/components/(dashboard)/pdf-viewer/types';
+import { getBoundingClientRect } from '~/helpers/getBoundingClientRect';
 
+import { addFields } from './add-fields.action';
+import { TAddFieldsFormSchema } from './add-fields.types';
+import {
+  EditDocumentFormContainer,
+  EditDocumentFormContainerActions,
+  EditDocumentFormContainerContent,
+  EditDocumentFormContainerFooter,
+  EditDocumentFormContainerStep,
+} from './container';
 import { FieldItem } from './field-item';
-import { FRIENDLY_FIELD_TYPE, TEditDocumentFormSchema } from './types';
+import { FRIENDLY_FIELD_TYPE } from './types';
 
 const fontCaveat = Caveat({
   weight: ['500'],
@@ -40,31 +53,58 @@ const MIN_HEIGHT_PX = 60;
 const MIN_WIDTH_PX = 200;
 
 export type AddFieldsFormProps = {
-  className?: string;
-  control: Control<TEditDocumentFormSchema>;
-  watch: UseFormWatch<TEditDocumentFormSchema>;
-  errors: FieldErrors<TEditDocumentFormSchema>;
-  isSubmitting: boolean;
+  recipients: Recipient[];
+  fields: Field[];
+  document: Document;
+  onContinue?: () => void;
+  onGoBack?: () => void;
 };
 
 export const AddFieldsFormPartial = ({
-  className,
-  control: control,
-  watch,
-  errors: _errors,
-  isSubmitting: _isSubmitting,
+  recipients,
+  fields,
+  document,
+  onContinue,
+  onGoBack,
 }: AddFieldsFormProps) => {
-  const signers = watch('signers');
-  const fields = watch('fields');
+  const { toast } = useToast();
+  const router = useRouter();
 
-  const { append, remove, update } = useFieldArray({
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm<TAddFieldsFormSchema>({
+    defaultValues: {
+      fields: fields.map((field) => ({
+        nativeId: field.id,
+        formId: `${field.id}-${field.documentId}`,
+        pageNumber: field.page,
+        type: field.type,
+        pageX: Number(field.positionX),
+        pageY: Number(field.positionY),
+        pageWidth: Number(field.width),
+        pageHeight: Number(field.height),
+        signerEmail:
+          recipients.find((recipient) => recipient.id === field.recipientId)?.email ?? '',
+      })),
+    },
+  });
+
+  const {
+    append,
+    remove,
+    update,
+    fields: localFields,
+  } = useFieldArray({
     control,
     name: 'fields',
   });
 
-  const [selectedSigner, setSelectedSigner] = useState(() => signers[0]);
-
   const [selectedField, setSelectedField] = useState<FieldType | null>(null);
+  const [selectedSigner, setSelectedSigner] = useState<Recipient | null>(null);
+
+  const hasSelectedSignerBeenSent = selectedSigner?.sendStatus === SendStatus.SENT;
 
   const [visible, setVisible] = useState(false);
   const [coords, setCoords] = useState({
@@ -77,14 +117,60 @@ export const AddFieldsFormPartial = ({
     width: 0,
   });
 
-  const isWithinPageBounds = useCallback((event: MouseEvent) => {
+  /**
+   * Given a mouse event, find the nearest pdf page element.
+   */
+  const getPage = (event: MouseEvent) => {
     if (!(event.target instanceof HTMLElement)) {
-      return false;
+      return null;
     }
 
     const target = event.target;
+
     const $page =
-      target.closest(PDF_VIEWER_PAGE_SELECTOR) ?? target.querySelector(PDF_VIEWER_PAGE_SELECTOR);
+      target.closest<HTMLElement>(PDF_VIEWER_PAGE_SELECTOR) ??
+      target.querySelector<HTMLElement>(PDF_VIEWER_PAGE_SELECTOR);
+
+    if (!$page) {
+      return null;
+    }
+
+    return $page;
+  };
+
+  /**
+   * Provided a page and a field, calculate the position of the field
+   * as a percentage of the page width and height.
+   */
+  const getFieldPosition = (page: HTMLElement, field: HTMLElement) => {
+    const {
+      top: pageTop,
+      left: pageLeft,
+      height: pageHeight,
+      width: pageWidth,
+    } = getBoundingClientRect(page);
+
+    const {
+      top: fieldTop,
+      left: fieldLeft,
+      height: fieldHeight,
+      width: fieldWidth,
+    } = getBoundingClientRect(field);
+
+    return {
+      x: ((fieldLeft - pageLeft) / pageWidth) * 100,
+      y: ((fieldTop - pageTop) / pageHeight) * 100,
+      width: (fieldWidth / pageWidth) * 100,
+      height: (fieldHeight / pageHeight) * 100,
+    };
+  };
+
+  /**
+   * Given a mouse event, determine if the mouse is within the bounds of the
+   * nearest pdf page element.
+   */
+  const isWithinPageBounds = useCallback((event: MouseEvent) => {
+    const $page = getPage(event);
 
     if (!$page) {
       return false;
@@ -121,28 +207,17 @@ export const AddFieldsFormPartial = ({
 
   const onMouseClick = useCallback(
     (event: MouseEvent) => {
-      if (!selectedField) {
+      if (!selectedField || !selectedSigner) {
         return;
       }
 
-      if (!(event.target instanceof HTMLElement)) {
-        return;
-      }
-
-      const target = event.target;
-
-      const $page =
-        target.closest<HTMLElement>(PDF_VIEWER_PAGE_SELECTOR) ??
-        target.querySelector<HTMLElement>(PDF_VIEWER_PAGE_SELECTOR);
+      const $page = getPage(event);
 
       if (!$page || !isWithinPageBounds(event)) {
         return;
       }
 
-      const { height, width } = $page.getBoundingClientRect();
-
-      const top = $page.offsetTop;
-      const left = $page.offsetLeft;
+      const { top, left, height, width } = getBoundingClientRect($page);
 
       const pageNumber = parseInt($page.getAttribute('data-page-number') ?? '1', 10);
 
@@ -172,14 +247,14 @@ export const AddFieldsFormPartial = ({
       setVisible(false);
       setSelectedField(null);
     },
-    [append, isWithinPageBounds, selectedField, selectedSigner.email],
+    [append, isWithinPageBounds, selectedField, selectedSigner],
   );
 
   const onFieldResize = useCallback(
     (node: HTMLElement, index: number) => {
-      const field = fields[index];
+      const field = localFields[index];
 
-      const $page = document.querySelector<HTMLElement>(
+      const $page = window.document.querySelector<HTMLElement>(
         `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
       );
 
@@ -187,71 +262,69 @@ export const AddFieldsFormPartial = ({
         return;
       }
 
-      const { height: pageHeight, width: pageWidth } = $page.getBoundingClientRect();
-
-      const pageTop = $page.offsetTop;
-      const pageLeft = $page.offsetLeft;
-
-      let { top: nodeTop, left: nodeLeft } = node.getBoundingClientRect();
-      const { height, width } = node.getBoundingClientRect();
-
-      nodeTop += window.scrollY;
-      nodeLeft += window.scrollX;
-
-      // Calculate width and height as a percentage of the page width and height
-      const newWidth = (width / pageWidth) * 100;
-      const newHeight = (height / pageHeight) * 100;
-
-      // Calculate the new position as a percentage of the page width and height
-      const newX = ((nodeLeft - pageLeft) / pageWidth) * 100;
-      const newY = ((nodeTop - pageTop) / pageHeight) * 100;
+      const {
+        x: pageX,
+        y: pageY,
+        width: pageWidth,
+        height: pageHeight,
+      } = getFieldPosition($page, node);
 
       update(index, {
         ...field,
-        pageX: newX,
-        pageY: newY,
-        pageWidth: newWidth,
-        pageHeight: newHeight,
+        pageX,
+        pageY,
+        pageWidth,
+        pageHeight,
       });
     },
-    [fields, update],
+    [localFields, update],
   );
 
   const onFieldMove = useCallback(
     (node: HTMLElement, index: number) => {
-      const field = fields[index];
+      const field = localFields[index];
 
-      const $page = document.querySelector(
+      const $page = window.document.querySelector<HTMLElement>(
         `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
       );
 
-      if (!$page || !($page instanceof HTMLElement)) {
+      if (!$page) {
         return;
       }
 
-      const { height: pageHeight, width: pageWidth } = $page.getBoundingClientRect();
-
-      const pageTop = $page.offsetTop;
-      const pageLeft = $page.offsetLeft;
-
-      let { top: nodeTop, left: nodeLeft } = node.getBoundingClientRect();
-
-      nodeTop += window.scrollY;
-      nodeLeft += window.scrollX;
-
-      // Calculate the new position as a percentage of the page width and height
-      const newX = ((nodeLeft - pageLeft) / pageWidth) * 100;
-      const newY = ((nodeTop - pageTop) / pageHeight) * 100;
+      const { x: pageX, y: pageY } = getFieldPosition($page, node);
 
       update(index, {
         ...field,
-        pageX: newX,
-        pageY: newY,
+        pageX,
+        pageY,
       });
     },
-    [fields, update],
+    [localFields, update],
   );
 
+  const onFormSubmit = handleSubmit(async (data: TAddFieldsFormSchema) => {
+    try {
+      // Custom invocation server action
+      await addFields({
+        documentId: document.id,
+        fields: data.fields,
+      });
+
+      router.refresh();
+
+      onContinue?.();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while adding signers.',
+        variant: 'destructive',
+      });
+    }
+  });
+
   useEffect(() => {
     if (selectedField) {
       window.addEventListener('mousemove', onMouseMove);
@@ -265,7 +338,7 @@ export const AddFieldsFormPartial = ({
   }, [onMouseClick, onMouseMove, selectedField]);
 
   useEffect(() => {
-    const $page = document.querySelector(PDF_VIEWER_PAGE_SELECTOR);
+    const $page = window.document.querySelector(PDF_VIEWER_PAGE_SELECTOR);
 
     if (!$page) {
       return;
@@ -279,183 +352,226 @@ export const AddFieldsFormPartial = ({
     };
   }, []);
 
+  useEffect(() => {
+    setSelectedSigner(recipients.find((r) => r.sendStatus !== SendStatus.SENT) ?? recipients[0]);
+  }, [recipients]);
+
   return (
-    <div className={cn('flex flex-col', className)}>
-      {selectedField && visible && (
-        <Card
-          className="border-primary pointer-events-none fixed z-50 cursor-pointer bg-white"
-          style={{
-            top: coords.y,
-            left: coords.x,
-            height: fieldBounds.current.height,
-            width: fieldBounds.current.width,
-          }}
-        >
-          <CardContent className="text-foreground flex h-full w-full items-center justify-center p-2">
-            {FRIENDLY_FIELD_TYPE[selectedField]}
-          </CardContent>
-        </Card>
-      )}
-
-      {fields.map((field, index) => (
-        <FieldItem
-          key={index}
-          field={field}
-          disabled={selectedSigner.email !== field.signerEmail}
-          minHeight={fieldBounds.current.height}
-          minWidth={fieldBounds.current.width}
-          passive={visible && !!selectedField}
-          onResize={(options) => onFieldResize(options, index)}
-          onMove={(options) => onFieldMove(options, index)}
-          onRemove={() => remove(index)}
-        />
-      ))}
-
-      <h3 className="text-2xl font-semibold">Add Fields</h3>
-
-      <p className="text-muted-foreground mt-2 text-sm">
-        Add all relevant fields for each recipient.
-      </p>
-
-      <hr className="mb-8 mt-4" />
-
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button
-            type="button"
-            variant="outline"
-            role="combobox"
-            className="bg-background text-muted-foreground justify-between font-normal"
-          >
-            {selectedSigner.name && (
-              <span>
-                {selectedSigner.name} ({selectedSigner.email})
-              </span>
-            )}
-
-            {!selectedSigner.name && <span>{selectedSigner.email}</span>}
-
-            <ChevronsUpDown className="ml-2 h-4 w-4" />
-          </Button>
-        </PopoverTrigger>
-
-        <PopoverContent className="p-0" align="start">
-          <Command>
-            <CommandInput />
-            <CommandEmpty />
-
-            <CommandGroup>
-              {signers.map((signer, index) => (
-                <CommandItem key={index} onSelect={() => setSelectedSigner(signer)}>
-                  <Check
-                    aria-hidden={signer !== selectedSigner}
-                    className={cn('mr-2 h-4 w-4', {
-                      'opacity-0': signer !== selectedSigner,
-                      'opacity-100': signer === selectedSigner,
-                    })}
-                  />
-                  {signer.name && (
-                    <span>
-                      {signer.name} ({signer.email})
-                    </span>
-                  )}
-
-                  {!signer.name && <span>{signer.email}</span>}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </Command>
-        </PopoverContent>
-      </Popover>
-
-      <div className="-mx-2 mt-8 flex-1 overflow-y-scroll px-2">
-        <div className="mt-4 grid grid-cols-2 gap-x-4 gap-y-8">
-          <button
-            type="button"
-            className="group h-full w-full"
-            onClick={() => setSelectedField(FieldType.SIGNATURE)}
-            data-selected={selectedField === FieldType.SIGNATURE ? true : undefined}
-          >
-            <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer">
-              <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                <p
-                  className={cn(
-                    'text-muted-foreground group-data-[selected]:text-foreground text-3xl font-medium',
-                    fontCaveat.className,
-                  )}
-                >
-                  {selectedSigner.name || 'Signature'}
-                </p>
-
-                <p className="text-muted-foreground mt-2 text-center text-xs">Signature</p>
+    <EditDocumentFormContainer>
+      <EditDocumentFormContainerContent
+        title="Add Fields"
+        description="Add all relevant fields for each recipient."
+      >
+        <div className="flex flex-col">
+          {selectedField && visible && (
+            <Card
+              className="border-primary pointer-events-none fixed z-50 cursor-pointer bg-white"
+              style={{
+                top: coords.y,
+                left: coords.x,
+                height: fieldBounds.current.height,
+                width: fieldBounds.current.width,
+              }}
+            >
+              <CardContent className="text-foreground flex h-full w-full items-center justify-center p-2">
+                {FRIENDLY_FIELD_TYPE[selectedField]}
               </CardContent>
             </Card>
-          </button>
+          )}
 
-          <button
-            type="button"
-            className="group h-full w-full"
-            onClick={() => setSelectedField(FieldType.EMAIL)}
-            data-selected={selectedField === FieldType.EMAIL ? true : undefined}
-          >
-            <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer">
-              <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                <p
-                  className={cn(
-                    'text-muted-foreground group-data-[selected]:text-foreground text-xl font-medium',
-                  )}
-                >
-                  {'Email'}
-                </p>
+          {localFields.map((field, index) => (
+            <FieldItem
+              key={index}
+              field={field}
+              disabled={selectedSigner?.email !== field.signerEmail || hasSelectedSignerBeenSent}
+              minHeight={fieldBounds.current.height}
+              minWidth={fieldBounds.current.width}
+              passive={visible && !!selectedField}
+              onResize={(options) => onFieldResize(options, index)}
+              onMove={(options) => onFieldMove(options, index)}
+              onRemove={() => remove(index)}
+            />
+          ))}
 
-                <p className="text-muted-foreground mt-2 text-xs">Email</p>
-              </CardContent>
-            </Card>
-          </button>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                type="button"
+                variant="outline"
+                role="combobox"
+                className="bg-background text-muted-foreground justify-between font-normal"
+              >
+                {selectedSigner?.email && (
+                  <span className="flex-1 truncate text-left">
+                    {selectedSigner?.email} ({selectedSigner?.email})
+                  </span>
+                )}
 
-          <button
-            type="button"
-            className="group h-full w-full"
-            onClick={() => setSelectedField(FieldType.NAME)}
-            data-selected={selectedField === FieldType.NAME ? true : undefined}
-          >
-            <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer">
-              <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                <p
-                  className={cn(
-                    'text-muted-foreground group-data-[selected]:text-foreground text-xl font-medium',
-                  )}
-                >
-                  {'Name'}
-                </p>
+                {!selectedSigner?.email && (
+                  <span className="flex-1 truncate text-left">{selectedSigner?.email}</span>
+                )}
 
-                <p className="text-muted-foreground mt-2 text-xs">Name</p>
-              </CardContent>
-            </Card>
-          </button>
+                <ChevronsUpDown className="ml-2 h-4 w-4" />
+              </Button>
+            </PopoverTrigger>
 
-          <button
-            type="button"
-            className="group h-full w-full"
-            onClick={() => setSelectedField(FieldType.DATE)}
-            data-selected={selectedField === FieldType.DATE ? true : undefined}
-          >
-            <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer">
-              <CardContent className="flex flex-col items-center justify-center px-6 py-4">
-                <p
-                  className={cn(
-                    'text-muted-foreground group-data-[selected]:text-foreground text-xl font-medium',
-                  )}
-                >
-                  {'Date'}
-                </p>
+            <PopoverContent className="p-0" align="start">
+              <Command>
+                <CommandInput />
+                <CommandEmpty />
 
-                <p className="text-muted-foreground mt-2 text-xs">Date</p>
-              </CardContent>
-            </Card>
-          </button>
+                <CommandGroup>
+                  {recipients.map((recipient, index) => (
+                    <CommandItem
+                      key={index}
+                      className={cn({
+                        'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
+                      })}
+                      onSelect={() => setSelectedSigner(recipient)}
+                    >
+                      {recipient.sendStatus !== SendStatus.SENT ? (
+                        <Check
+                          aria-hidden={recipient !== selectedSigner}
+                          className={cn('mr-2 h-4 w-4 flex-shrink-0', {
+                            'opacity-0': recipient !== selectedSigner,
+                            'opacity-100': recipient === selectedSigner,
+                          })}
+                        />
+                      ) : (
+                        <Tooltip>
+                          <TooltipTrigger>
+                            <Info className="mr-2 h-4 w-4" />
+                          </TooltipTrigger>
+                          <TooltipContent className="max-w-xs">
+                            This document has already been sent to this recipient. You can no longer
+                            edit this recipient.
+                          </TooltipContent>
+                        </Tooltip>
+                      )}
+
+                      {recipient.name && (
+                        <span className="truncate" title={`${recipient.name} (${recipient.email})`}>
+                          {recipient.name} ({recipient.email})
+                        </span>
+                      )}
+
+                      {!recipient.name && (
+                        <span className="truncate" title={recipient.email}>
+                          {recipient.email}
+                        </span>
+                      )}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </Command>
+            </PopoverContent>
+          </Popover>
+
+          <div className="-mx-2 mt-8 flex-1 overflow-y-scroll px-2">
+            <div className="mt-4 grid grid-cols-2 gap-x-4 gap-y-8">
+              <button
+                type="button"
+                className="group h-full w-full"
+                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
+                onClick={() => setSelectedField(FieldType.SIGNATURE)}
+                data-selected={selectedField === FieldType.SIGNATURE ? true : undefined}
+              >
+                <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
+                  <CardContent className="flex flex-col items-center justify-center px-6 py-4">
+                    <p
+                      className={cn(
+                        'text-muted-foreground group-data-[selected]:text-foreground text-3xl font-medium',
+                        fontCaveat.className,
+                      )}
+                    >
+                      {selectedSigner?.name || 'Signature'}
+                    </p>
+
+                    <p className="text-muted-foreground mt-2 text-center text-xs">Signature</p>
+                  </CardContent>
+                </Card>
+              </button>
+
+              <button
+                type="button"
+                className="group h-full w-full"
+                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
+                onClick={() => setSelectedField(FieldType.EMAIL)}
+                data-selected={selectedField === FieldType.EMAIL ? true : undefined}
+              >
+                <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
+                  <CardContent className="flex flex-col items-center justify-center px-6 py-4">
+                    <p
+                      className={cn(
+                        'text-muted-foreground group-data-[selected]:text-foreground text-xl font-medium',
+                      )}
+                    >
+                      {'Email'}
+                    </p>
+
+                    <p className="text-muted-foreground mt-2 text-xs">Email</p>
+                  </CardContent>
+                </Card>
+              </button>
+
+              <button
+                type="button"
+                className="group h-full w-full"
+                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
+                onClick={() => setSelectedField(FieldType.NAME)}
+                data-selected={selectedField === FieldType.NAME ? true : undefined}
+              >
+                <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
+                  <CardContent className="flex flex-col items-center justify-center px-6 py-4">
+                    <p
+                      className={cn(
+                        'text-muted-foreground group-data-[selected]:text-foreground text-xl font-medium',
+                      )}
+                    >
+                      {'Name'}
+                    </p>
+
+                    <p className="text-muted-foreground mt-2 text-xs">Name</p>
+                  </CardContent>
+                </Card>
+              </button>
+
+              <button
+                type="button"
+                className="group h-full w-full"
+                disabled={!selectedSigner || selectedSigner?.sendStatus === SendStatus.SENT}
+                onClick={() => setSelectedField(FieldType.DATE)}
+                data-selected={selectedField === FieldType.DATE ? true : undefined}
+              >
+                <Card className="group-data-[selected]:border-documenso h-full w-full cursor-pointer group-disabled:opacity-50">
+                  <CardContent className="flex flex-col items-center justify-center px-6 py-4">
+                    <p
+                      className={cn(
+                        'text-muted-foreground group-data-[selected]:text-foreground text-xl font-medium',
+                      )}
+                    >
+                      {'Date'}
+                    </p>
+
+                    <p className="text-muted-foreground mt-2 text-xs">Date</p>
+                  </CardContent>
+                </Card>
+              </button>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      </EditDocumentFormContainerContent>
+
+      <EditDocumentFormContainerFooter>
+        <EditDocumentFormContainerStep title="Add Fields" step={2} maxStep={3} />
+
+        <EditDocumentFormContainerActions
+          loading={isSubmitting}
+          disabled={isSubmitting}
+          onGoNextClick={() => onFormSubmit()}
+          onGoBackClick={onGoBack}
+        />
+      </EditDocumentFormContainerFooter>
+    </EditDocumentFormContainer>
   );
 };

apps/web/src/components/forms/edit-document/add-fields.types.ts

@@ -0,0 +1,21 @@
+import { z } from 'zod';
+
+import { FieldType } from '@documenso/prisma/client';
+
+export const ZAddFieldsFormSchema = z.object({
+  fields: z.array(
+    z.object({
+      formId: z.string().min(1),
+      nativeId: z.number().optional(),
+      type: z.nativeEnum(FieldType),
+      signerEmail: z.string().min(1),
+      pageNumber: z.number().min(1),
+      pageX: z.number().min(0),
+      pageY: z.number().min(0),
+      pageWidth: z.number().min(0),
+      pageHeight: z.number().min(0),
+    }),
+  ),
+});
+
+export type TAddFieldsFormSchema = z.infer<typeof ZAddFieldsFormSchema>;

apps/web/src/components/forms/edit-document/add-signers.action.ts

@@ -0,0 +1,26 @@
+'use server';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { setRecipientsForDocument } from '@documenso/lib/server-only/recipient/set-recipients-for-document';
+
+import { TAddSignersFormSchema } from './add-signers.types';
+
+export type AddSignersActionInput = TAddSignersFormSchema & {
+  documentId: number;
+};
+
+export const addSigners = async ({ documentId, signers }: AddSignersActionInput) => {
+  'use server';
+
+  const { id: userId } = await getRequiredServerComponentSession();
+
+  await setRecipientsForDocument({
+    userId,
+    documentId,
+    recipients: signers.map((signer) => ({
+      id: signer.nativeId,
+      email: signer.email,
+      name: signer.name,
+    })),
+  });
+};

apps/web/src/components/forms/edit-document/add-signers.tsx

@@ -1,35 +1,76 @@
 'use client';
 
-import React from 'react';
+import React, { useId } from 'react';
+
+import { useRouter } from 'next/navigation';
 
 import { AnimatePresence, motion } from 'framer-motion';
 import { Plus, Trash } from 'lucide-react';
 import { nanoid } from 'nanoid';
-import { Control, Controller, FieldErrors, UseFormWatch, useFieldArray } from 'react-hook-form';
+import { Controller, useFieldArray, useForm } from 'react-hook-form';
 
-import { cn } from '@documenso/ui/lib/utils';
+import { Document, Field, Recipient, SendStatus } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { FormErrorMessage } from '~/components/form/form-error-message';
 
-import { TEditDocumentFormSchema } from './types';
+import { addSigners } from './add-signers.action';
+import { TAddSignersFormSchema } from './add-signers.types';
+import {
+  EditDocumentFormContainer,
+  EditDocumentFormContainerActions,
+  EditDocumentFormContainerContent,
+  EditDocumentFormContainerFooter,
+  EditDocumentFormContainerStep,
+} from './container';
 
 export type AddSignersFormProps = {
-  className?: string;
-  control: Control<TEditDocumentFormSchema>;
-  watch: UseFormWatch<TEditDocumentFormSchema>;
-  errors: FieldErrors<TEditDocumentFormSchema>;
-  isSubmitting: boolean;
+  recipients: Recipient[];
+  fields: Field[];
+  document: Document;
+  onContinue?: () => void;
+  onGoBack?: () => void;
 };
 
 export const AddSignersFormPartial = ({
-  className,
-  control,
-  errors,
-  isSubmitting,
+  recipients,
+  fields: _fields,
+  document: document,
+  onContinue,
+  onGoBack,
 }: AddSignersFormProps) => {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const initialId = useId();
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<TAddSignersFormSchema>({
+    defaultValues: {
+      signers:
+        recipients.length > 0
+          ? recipients.map((recipient) => ({
+              nativeId: recipient.id,
+              formId: String(recipient.id),
+              name: recipient.name,
+              email: recipient.email,
+            }))
+          : [
+              {
+                formId: initialId,
+                name: '',
+                email: '',
+              },
+            ],
+    },
+  });
+
   const {
     append: appendSigner,
     fields: signers,
@@ -39,10 +80,15 @@ export const AddSignersFormPartial = ({
     name: 'signers',
   });
 
-  const { remove: removeField, fields: fields } = useFieldArray({
-    name: 'fields',
-    control,
-  });
+  const hasBeenSentToRecipientId = (id?: number) => {
+    if (!id) {
+      return false;
+    }
+
+    return recipients.some(
+      (recipient) => recipient.id === id && recipient.sendStatus === SendStatus.SENT,
+    );
+  };
 
   const onAddSigner = () => {
     appendSigner({
@@ -55,17 +101,17 @@ export const AddSignersFormPartial = ({
   const onRemoveSigner = (index: number) => {
     const signer = signers[index];
 
+    if (hasBeenSentToRecipientId(signer.nativeId)) {
+      toast({
+        title: 'Cannot remove signer',
+        description: 'This signer has already received the document.',
+        variant: 'destructive',
+      });
+
+      return;
+    }
+
     removeSigner(index);
-
-    const fieldsToRemove: number[] = [];
-
-    fields.forEach((field, fieldIndex) => {
-      if (field.signerEmail === signer.email) {
-        fieldsToRemove.push(fieldIndex);
-      }
-    });
-
-    removeField(fieldsToRemove);
   };
 
   const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -74,21 +120,42 @@ export const AddSignersFormPartial = ({
     }
   };
 
+  const onFormSubmit = handleSubmit(async (data: TAddSignersFormSchema) => {
+    try {
+      // Custom invocation server action
+      await addSigners({
+        documentId: document.id,
+        signers: data.signers,
+      });
+
+      router.refresh();
+
+      onContinue?.();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while adding signers.',
+        variant: 'destructive',
+      });
+    }
+  });
+
   return (
-    <div className={cn('flex flex-col', className)}>
-      <h3 className="text-foreground text-2xl font-semibold">Add Signers</h3>
-
-      <p className="text-muted-foreground mt-2 text-sm">
-        Add the people who will sign the document.
-      </p>
-
-      <hr className="border-border mb-8 mt-4" />
-
-      <div className="-mx-2 flex flex-1 flex-col overflow-y-auto px-2">
+    <EditDocumentFormContainer onSubmit={onFormSubmit}>
+      <EditDocumentFormContainerContent
+        title="Add Signers"
+        description="Add the people who will sign the document."
+      >
         <div className="flex w-full flex-col gap-y-4">
           <AnimatePresence>
             {signers.map((signer, index) => (
-              <motion.div key={signer.formId} className="flex flex-wrap items-end gap-x-4">
+              <motion.div
+                key={signer.formId}
+                data-native-id={signer.nativeId}
+                className="flex flex-wrap items-end gap-x-4"
+              >
                 <div className="flex-1">
                   <Label htmlFor={`signer-${signer.formId}-email`}>
                     Email
@@ -103,7 +170,7 @@ export const AddSignersFormPartial = ({
                         id={`signer-${signer.formId}-email`}
                         type="email"
                         className="bg-background mt-2"
-                        disabled={isSubmitting}
+                        disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
                         onKeyDown={onKeyDown}
                         {...field}
                       />
@@ -122,7 +189,7 @@ export const AddSignersFormPartial = ({
                         id={`signer-${signer.formId}-name`}
                         type="text"
                         className="bg-background mt-2"
-                        disabled={isSubmitting}
+                        disabled={isSubmitting || hasBeenSentToRecipientId(signer.nativeId)}
                         onKeyDown={onKeyDown}
                         {...field}
                       />
@@ -134,7 +201,11 @@ export const AddSignersFormPartial = ({
                   <button
                     type="button"
                     className="inline-flex h-10 w-10 items-center justify-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
-                    disabled={isSubmitting || signers.length === 1}
+                    disabled={
+                      isSubmitting ||
+                      hasBeenSentToRecipientId(signer.nativeId) ||
+                      signers.length === 1
+                    }
                     onClick={() => onRemoveSigner(index)}
                   >
                     <Trash className="h-5 w-5" />
@@ -158,7 +229,18 @@ export const AddSignersFormPartial = ({
             Add Signer
           </Button>
         </div>
-      </div>
-    </div>
+      </EditDocumentFormContainerContent>
+
+      <EditDocumentFormContainerFooter>
+        <EditDocumentFormContainerStep title="Add Signers" step={1} maxStep={3} />
+
+        <EditDocumentFormContainerActions
+          loading={isSubmitting}
+          disabled={isSubmitting}
+          onGoNextClick={() => onFormSubmit()}
+          onGoBackClick={onGoBack}
+        />
+      </EditDocumentFormContainerFooter>
+    </EditDocumentFormContainer>
   );
 };

apps/web/src/components/forms/edit-document/add-signers.types.ts

@@ -0,0 +1,19 @@
+import { z } from 'zod';
+
+export const ZAddSignersFormSchema = z.object({
+  signers: z
+    .array(
+      z.object({
+        formId: z.string().min(1),
+        nativeId: z.number().optional(),
+        email: z.string().min(1).email(),
+        name: z.string(),
+      }),
+    )
+    .refine((signers) => {
+      const emails = signers.map((signer) => signer.email);
+      return new Set(emails).size === emails.length;
+    }, 'Signers must have unique emails'),
+});
+
+export type TAddSignersFormSchema = z.infer<typeof ZAddSignersFormSchema>;

apps/web/src/components/forms/edit-document/add-subject.action.ts

@@ -0,0 +1,21 @@
+'use server';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { sendDocument } from '@documenso/lib/server-only/document/send-document';
+
+import { TAddSubjectFormSchema } from './add-subject.types';
+
+export type CompleteDocumentActionInput = TAddSubjectFormSchema & {
+  documentId: number;
+};
+
+export const completeDocument = async ({ documentId }: CompleteDocumentActionInput) => {
+  'use server';
+
+  const { id: userId } = await getRequiredServerComponentSession();
+
+  await sendDocument({
+    userId,
+    documentId,
+  });
+};

apps/web/src/components/forms/edit-document/add-subject.tsx

@@ -1,111 +1,169 @@
 'use client';
 
-import { Control, Controller, FieldErrors, UseFormWatch } from 'react-hook-form';
+import { useRouter } from 'next/navigation';
 
-import { cn } from '@documenso/ui/lib/utils';
+import { useForm } from 'react-hook-form';
+
+import { Document, DocumentStatus, Field, Recipient } from '@documenso/prisma/client';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { FormErrorMessage } from '~/components/form/form-error-message';
 
-import { TEditDocumentFormSchema } from './types';
+import { completeDocument } from './add-subject.action';
+import { TAddSubjectFormSchema } from './add-subject.types';
+import {
+  EditDocumentFormContainer,
+  EditDocumentFormContainerActions,
+  EditDocumentFormContainerContent,
+  EditDocumentFormContainerFooter,
+  EditDocumentFormContainerStep,
+} from './container';
 
 export type AddSubjectFormProps = {
-  className?: string;
-  control: Control<TEditDocumentFormSchema>;
-  watch: UseFormWatch<TEditDocumentFormSchema>;
-  errors: FieldErrors<TEditDocumentFormSchema>;
-  isSubmitting: boolean;
+  recipients: Recipient[];
+  fields: Field[];
+  document: Document;
+  onContinue?: () => void;
+  onGoBack?: () => void;
 };
 
 export const AddSubjectFormPartial = ({
-  className,
-  control,
-  errors,
-  isSubmitting,
+  recipients: _recipients,
+  fields: _fields,
+  document,
+  onContinue,
+  onGoBack,
 }: AddSubjectFormProps) => {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<TAddSubjectFormSchema>({
+    defaultValues: {
+      email: {
+        subject: '',
+        message: '',
+      },
+    },
+  });
+
+  const onFormSubmit = handleSubmit(async (data: TAddSubjectFormSchema) => {
+    const { subject, message } = data.email;
+
+    try {
+      await completeDocument({
+        documentId: document.id,
+        email: {
+          subject,
+          message,
+        },
+      });
+
+      router.refresh();
+
+      onContinue?.();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while sending the document.',
+        variant: 'destructive',
+      });
+    }
+  });
+
   return (
-    <div className={cn('flex flex-col', className)}>
-      <h3 className="text-foreground text-2xl font-semibold">Add Subject</h3>
+    <EditDocumentFormContainer>
+      <EditDocumentFormContainerContent
+        title="Add Subject"
+        description="Add the subject and message you wish to send to signers."
+      >
+        <div className="flex flex-col">
+          <div className="flex flex-col gap-y-4">
+            <div>
+              <Label htmlFor="subject">
+                Subject <span className="text-muted-foreground">(Optional)</span>
+              </Label>
 
-      <p className="text-muted-foreground mt-2 text-sm">
-        Add the subject and message you wish to send to signers.
-      </p>
-
-      <hr className="border-border mb-8 mt-4" />
-
-      <div className="flex flex-col gap-y-4">
-        <div>
-          <Label htmlFor="subject">
-            Subject <span className="text-muted-foreground">(Optional)</span>
-          </Label>
-
-          <Controller
-            control={control}
-            name="email.subject"
-            render={({ field }) => (
               <Input
                 id="subject"
                 // placeholder="Subject"
                 className="bg-background mt-2"
                 disabled={isSubmitting}
-                {...field}
+                {...register('email.subject')}
               />
-            )}
-          />
 
-          <FormErrorMessage className="mt-2" errors={errors} />
-        </div>
+              <FormErrorMessage className="mt-2" error={errors.email?.subject} />
+            </div>
 
-        <div>
-          <Label htmlFor="message">
-            Message <span className="text-muted-foreground">(Optional)</span>
-          </Label>
+            <div>
+              <Label htmlFor="message">
+                Message <span className="text-muted-foreground">(Optional)</span>
+              </Label>
 
-          <Controller
-            control={control}
-            name="email.message"
-            render={({ field }) => (
               <Textarea
                 id="message"
                 className="bg-background mt-2 h-32 resize-none"
                 disabled={isSubmitting}
-                {...field}
+                {...register('email.message')}
               />
-            )}
-          />
 
-          <FormErrorMessage className="mt-2" errors={errors} />
+              <FormErrorMessage
+                className="mt-2"
+                error={
+                  typeof errors.email?.message !== 'string' ? errors.email?.message : undefined
+                }
+              />
+            </div>
+
+            <div>
+              <p className="text-muted-foreground text-sm">
+                You can use the following variables in your message:
+              </p>
+
+              <ul className="mt-2 flex list-inside list-disc flex-col gap-y-2 text-sm">
+                <li className="text-muted-foreground">
+                  <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
+                    {'{signer.name}'}
+                  </code>{' '}
+                  - The signer's name
+                </li>
+                <li className="text-muted-foreground">
+                  <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
+                    {'{signer.email}'}
+                  </code>{' '}
+                  - The signer's email
+                </li>
+                <li className="text-muted-foreground">
+                  <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
+                    {'{document.name}'}
+                  </code>{' '}
+                  - The document's name
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
+      </EditDocumentFormContainerContent>
 
-        <div>
-          <p className="text-muted-foreground text-sm">
-            You can use the following variables in your message:
-          </p>
+      <EditDocumentFormContainerFooter>
+        <EditDocumentFormContainerStep title="Add Subject" step={3} maxStep={3} />
 
-          <ul className="mt-2 flex list-inside list-disc flex-col gap-y-2 text-sm">
-            <li className="text-muted-foreground">
-              <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
-                {'{signer.name}'}
-              </code>{' '}
-              - The signer's name
-            </li>
-            <li className="text-muted-foreground">
-              <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
-                {'{signer.email}'}
-              </code>{' '}
-              - The signer's email
-            </li>
-            <li className="text-muted-foreground">
-              <code className="text-muted-foreground bg-muted-foreground/20 rounded p-1 text-sm">
-                {'{document.name}'}
-              </code>{' '}
-              - The document's name
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
+        <EditDocumentFormContainerActions
+          loading={isSubmitting}
+          disabled={isSubmitting}
+          goNextLabel={document.status === DocumentStatus.DRAFT ? 'Send' : 'Update'}
+          onGoNextClick={() => onFormSubmit()}
+          onGoBackClick={onGoBack}
+        />
+      </EditDocumentFormContainerFooter>
+    </EditDocumentFormContainer>
   );
 };

apps/web/src/components/forms/edit-document/add-subject.types.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod';
+
+export const ZAddSubjectFormSchema = z.object({
+  email: z.object({
+    subject: z.string(),
+    message: z.string(),
+  }),
+});
+
+export type TAddSubjectFormSchema = z.infer<typeof ZAddSubjectFormSchema>;

apps/web/src/components/forms/edit-document/container.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import React, { HTMLAttributes } from 'react';
+
+import { Loader } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type EditDocumentFormContainerProps = HTMLAttributes<HTMLFormElement> & {
+  children?: React.ReactNode;
+};
+
+export const EditDocumentFormContainer = ({
+  children,
+  id = 'edit-document-form',
+  className,
+  ...props
+}: EditDocumentFormContainerProps) => {
+  return (
+    <form
+      id={id}
+      className={cn(
+        'dark:bg-background border-border bg-widget sticky top-20 flex h-[calc(100vh-6rem)] max-h-screen flex-col rounded-xl border px-4 py-6',
+        className,
+      )}
+      {...props}
+    >
+      <div className={cn('-mx-2 flex flex-1 flex-col overflow-hidden px-2')}>{children}</div>
+    </form>
+  );
+};
+
+export type EditDocumentFormContainerContentProps = HTMLAttributes<HTMLDivElement> & {
+  title: string;
+  description: string;
+  children?: React.ReactNode;
+};
+
+export const EditDocumentFormContainerContent = ({
+  children,
+  title,
+  description,
+  className,
+  ...props
+}: EditDocumentFormContainerContentProps) => {
+  return (
+    <div className={cn('flex flex-1 flex-col', className)} {...props}>
+      <h3 className="text-foreground text-2xl font-semibold">{title}</h3>
+
+      <p className="text-muted-foreground mt-2 text-sm">{description}</p>
+
+      <hr className="border-border mb-8 mt-4" />
+
+      <div className="-mx-2 flex flex-1 flex-col overflow-y-auto px-2">{children}</div>
+    </div>
+  );
+};
+
+export type EditDocumentFormContainerFooterProps = HTMLAttributes<HTMLDivElement> & {
+  children?: React.ReactNode;
+};
+
+export const EditDocumentFormContainerFooter = ({
+  children,
+  className,
+  ...props
+}: EditDocumentFormContainerFooterProps) => {
+  return (
+    <div className={cn('mt-4 flex-shrink-0', className)} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export type EditDocumentFormContainerStepProps = {
+  title: string;
+  step: number;
+  maxStep: number;
+};
+
+export const EditDocumentFormContainerStep = ({
+  title,
+  step,
+  maxStep,
+}: EditDocumentFormContainerStepProps) => {
+  return (
+    <div>
+      <p className="text-muted-foreground text-sm">
+        {title}{' '}
+        <span>
+          ({step}/{maxStep})
+        </span>
+      </p>
+
+      <div className="bg-muted relative mt-4 h-[2px] rounded-md">
+        <div
+          className="bg-documenso absolute inset-y-0 left-0"
+          style={{
+            width: `${(100 / maxStep) * step}%`,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export type EditDocumentFormContainerActionsProps = {
+  canGoBack?: boolean;
+  canGoNext?: boolean;
+  goNextLabel?: string;
+  goBackLabel?: string;
+  onGoBackClick?: () => void;
+  onGoNextClick?: () => void;
+  loading?: boolean;
+  disabled?: boolean;
+};
+
+export const EditDocumentFormContainerActions = ({
+  canGoBack = true,
+  canGoNext = true,
+  goNextLabel = 'Continue',
+  goBackLabel = 'Go Back',
+  onGoBackClick,
+  onGoNextClick,
+  loading,
+  disabled,
+}: EditDocumentFormContainerActionsProps) => {
+  return (
+    <div className="mt-4 flex gap-x-4">
+      <Button
+        type="button"
+        className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+        size="lg"
+        variant="secondary"
+        disabled={disabled || loading || !canGoBack}
+        onClick={onGoBackClick}
+      >
+        {goBackLabel}
+      </Button>
+
+      <Button
+        type="button"
+        className="bg-documenso flex-1"
+        size="lg"
+        disabled={disabled || loading || !canGoNext}
+        onClick={onGoNextClick}
+      >
+        {loading && <Loader className="mr-2 h-5 w-5 animate-spin" />}
+        {goNextLabel}
+      </Button>
+    </div>
+  );
+};

apps/web/src/components/forms/edit-document/field-item.tsx

@@ -1,6 +1,8 @@
+'use client';
+
 import { useCallback, useEffect, useState } from 'react';
 
-import { X } from 'lucide-react';
+import { Trash } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { Rnd } from 'react-rnd';
 
@@ -28,8 +30,8 @@ export const FieldItem = ({
   field,
   passive,
   disabled,
-  minHeight,
-  minWidth,
+  minHeight: _minHeight,
+  minWidth: _minWidth,
   onResize,
   onMove,
   onRemove,
@@ -53,8 +55,8 @@ export const FieldItem = ({
 
     const { height, width } = $page.getBoundingClientRect();
 
-    const top = $page.offsetTop;
-    const left = $page.offsetLeft;
+    const top = $page.getBoundingClientRect().top + window.scrollY;
+    const left = $page.getBoundingClientRect().left + window.scrollX;
 
     // X and Y are percentages of the page's height and width
     const pageX = (field.pageX / 100) * width + left;
@@ -92,10 +94,10 @@ export const FieldItem = ({
       key={coords.pageX + coords.pageY + coords.pageHeight + coords.pageWidth}
       className={cn('absolute z-20', {
         'pointer-events-none': passive,
-        'pointer-events-none opacity-75': disabled,
+        'pointer-events-none z-10 opacity-75': disabled,
       })}
-      minHeight={minHeight}
-      minWidth={minWidth}
+      // minHeight={minHeight}
+      // minWidth={minWidth}
       default={{
         x: coords.pageX,
         y: coords.pageY,
@@ -116,16 +118,17 @@ export const FieldItem = ({
     >
       {!disabled && (
         <button
-          className="bg-destructive absolute -right-2 -top-2 z-[9999] flex h-5 w-5 items-center justify-center rounded-full"
+          className="text-muted-foreground/50 hover:text-muted-foreground/80 absolute -right-2 -top-2 z-[9999] flex h-8 w-8 items-center justify-center rounded-full border bg-white shadow-[0_0_0_2px_theme(colors.gray.100/70%)]"
           onClick={() => onRemove?.()}
         >
-          <X className="text-destructive-foreground h-4 w-4" />
+          <Trash className="h-4 w-4" />
         </button>
       )}
 
       <Card
-        className={cn('hover:border-primary/50 h-full w-full bg-white', {
-          'border-primary hover:border-primary': active,
+        className={cn('h-full w-full bg-white', {
+          'border-primary': !disabled,
+          'border-primary/80': active,
         })}
       >
         <CardContent

apps/web/src/components/forms/edit-document/provider.tsx

@@ -1,53 +0,0 @@
-import React, { createContext, useRef } from 'react';
-
-import { OnPDFViewerPageClick } from '~/components/(dashboard)/pdf-viewer/pdf-viewer';
-
-type EditFormContextValue = {
-  firePageClickEvent: OnPDFViewerPageClick;
-  registerPageClickHandler: (_handler: OnPDFViewerPageClick) => void;
-  unregisterPageClickHandler: (_handler: OnPDFViewerPageClick) => void;
-} | null;
-
-const EditFormContext = createContext<EditFormContextValue>(null);
-
-export type EditFormProviderProps = {
-  children: React.ReactNode;
-};
-
-export const useEditForm = () => {
-  const context = React.useContext(EditFormContext);
-
-  if (!context) {
-    throw new Error('useEditForm must be used within a EditFormProvider');
-  }
-
-  return context;
-};
-
-export const EditFormProvider = ({ children }: EditFormProviderProps) => {
-  const handlers = useRef(new Set<OnPDFViewerPageClick>());
-
-  const firePageClickEvent: OnPDFViewerPageClick = (event) => {
-    handlers.current.forEach((handler) => handler(event));
-  };
-
-  const registerPageClickHandler = (handler: OnPDFViewerPageClick) => {
-    handlers.current.add(handler);
-  };
-
-  const unregisterPageClickHandler = (handler: OnPDFViewerPageClick) => {
-    handlers.current.delete(handler);
-  };
-
-  return (
-    <EditFormContext.Provider
-      value={{
-        firePageClickEvent,
-        registerPageClickHandler,
-        unregisterPageClickHandler,
-      }}
-    >
-      {children}
-    </EditFormContext.Provider>
-  );
-};

apps/web/src/components/forms/edit-document/send-document-action-dialog.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+
+import { Loader } from 'lucide-react';
+
+import { Button, ButtonProps } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+
+export type SendDocumentActionDialogProps = ButtonProps & {
+  loading?: boolean;
+};
+
+export const SendDocumentActionDialog = ({
+  loading,
+  className,
+  ...props
+}: SendDocumentActionDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button type="button" className={className}>
+          {loading && <Loader className="text-documenso mr-2 h-5 w-5 animate-spin" />}
+          Send
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-center text-lg font-semibold">Send Document</DialogTitle>
+          <DialogDescription className="text-center text-base">
+            You are about to send this document to the recipients. Are you sure you want to
+            continue?
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter className="mt-4 flex items-center gap-x-4">
+          <Button
+            className="dark:bg-muted dark:hover:bg-muted/80 dark:focus-visible:ring-muted/80 flex-1 border-none bg-black/5 hover:bg-black/10 focus-visible:ring-black/10"
+            type="button"
+            variant="secondary"
+            onClick={() => setOpen(false)}
+          >
+            Cancel
+          </Button>
+
+          {/* We would use DialogAction here but it interrupts the submit action */}
+          <Button className={className} {...props}>
+            {loading && <Loader className="mr-2 h-5 w-5 animate-spin" />}
+            Send
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -1,5 +1,7 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader } from 'lucide-react';
 import { Controller, useForm } from 'react-hook-form';
@@ -30,6 +32,8 @@ export type ProfileFormProps = {
 };
 
 export const ProfileForm = ({ className, user }: ProfileFormProps) => {
+  const router = useRouter();
+
   const { toast } = useToast();
 
   const {
@@ -59,6 +63,8 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
         description: 'Your profile has been updated successfully.',
         duration: 5000,
       });
+
+      router.refresh();
     } catch (err) {
       if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
         toast({

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

@@ -61,8 +61,8 @@ export const SignInForm = ({ className }: SignInFormProps) => {
 
   const onSignInWithGoogleClick = async () => {
     try {
-      // await signIn('google', { callbackUrl: '/dashboard' });
-      throw new Error('Not implemented');
+      await signIn('google', { callbackUrl: '/dashboard' });
+      // throw new Error('Not implemented');
     } catch (err) {
       toast({
         title: 'An unknown error occurred',

apps/web/src/components/motion.tsx

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