chore: downgrade sharp

How to Sign an NDA online (fast) blog article

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Published a new blog post on signing NDAs faster with Documenso,
highlighting the use of direct links, templates, and basic signing for
efficiency.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

.env.example

@@ -13,6 +13,10 @@ NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="DEADBEEF"
 NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
 NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=""
 
+NEXT_PRIVATE_OIDC_WELL_KNOWN=""
+NEXT_PRIVATE_OIDC_CLIENT_ID=""
+NEXT_PRIVATE_OIDC_CLIENT_SECRET=""
+
 # [[URLS]]
 NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
 NEXT_PUBLIC_MARKETING_URL="http://localhost:3001"
@@ -75,7 +79,7 @@ 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"
+NEXT_PRIVATE_SMTP_FROM_NAME="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 Resend.com
@@ -99,6 +103,12 @@ NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
 NEXT_PUBLIC_STRIPE_ENTERPRISE_PLAN_MONTHLY_PRICE_ID=
 
+# [[BACKGROUND JOBS]]
+NEXT_PRIVATE_JOBS_PROVIDER="local"
+NEXT_PRIVATE_TRIGGER_API_KEY=
+NEXT_PRIVATE_TRIGGER_API_URL=
+NEXT_PRIVATE_INNGEST_EVENT_KEY=
+
 # [[FEATURES]]
 # OPTIONAL: Leave blank to disable PostHog and feature flags.
 NEXT_PUBLIC_POSTHOG_KEY=""

.eslintrc.cjs

@@ -4,6 +4,7 @@ module.exports = {
   extends: ['@documenso/eslint-config'],
   rules: {
     '@next/next/no-img-element': 'off',
+    'no-unreachable': 'error',
   },
   settings: {
     next: {

.github/workflows/ci.yml

@@ -41,7 +41,7 @@ jobs:
         uses: docker/setup-buildx-action@v3
 
       - name: Cache Docker layers
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: /tmp/.buildx-cache
           key: ${{ runner.os }}-buildx-${{ github.sha }}

.github/workflows/codeql-analysis.yml

@@ -33,9 +33,9 @@ jobs:
       - uses: ./.github/actions/cache-build
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v3
         with:
           languages: ${{ matrix.language }}
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3

.github/workflows/e2e-tests.yml

@@ -33,7 +33,7 @@ jobs:
       - name: Run Playwright tests
         run: npm run ci
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: test-results

.github/workflows/issue-assignee-check.yml

@@ -27,7 +27,7 @@ jobs:
 
       - name: Check Assigned User's Issue Count
         id: parse-comment
-        uses: actions/github-script@v5
+        uses: actions/github-script@v6
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |

.github/workflows/issue-labeler.yml

@@ -0,0 +1,25 @@
+name: Auto Label Assigned Issues
+
+on:
+  issues:
+    types: [assigned]
+
+jobs:
+  label-when-assigned:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Label issue
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            const issue = context.issue;
+            // To run only on issues and not on PR
+            if (github.context.payload.issue.pull_request === undefined) {
+              const labelResponse = await github.rest.issues.addLabels({
+                owner: issue.owner,
+                repo: issue.repo,
+                issue_number: issue.number,
+                labels: ['status: assigned']
+              });
+            }

.github/workflows/issue-opened.yml

@@ -17,5 +17,5 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              labels: ["needs triage"]
+              labels: ["status: triage"]
             })

.github/workflows/pr-review-reminder.yml

@@ -2,14 +2,14 @@ name: 'PR Review Reminder'
 
 on:
   pull_request:
-    types: ['opened', 'reopened', 'ready_for_review', 'review_requested']
+    types: ['opened', 'ready_for_review']
 
 permissions:
   pull-requests: write
 
 jobs:
   checkPRs:
-    if: ${{ github.event.pull_request.user.login }} && github.event.action == ('opened' || 'reopened' || 'ready_for_review' || 'review_requested')
+    if: ${{ github.event.pull_request.user.login }} && github.event.action == ('opened' || 'ready_for_review')
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

.github/workflows/stale.yml

@@ -12,7 +12,7 @@ jobs:
       pull-requests: write
 
     steps:
-      - uses: actions/stale@v4
+      - uses: actions/stale@v5
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-pr-stale: 90

.gitpod.yml

@@ -6,7 +6,7 @@ tasks:
       set -a; source .env &&
       export NEXTAUTH_URL="$(gp url 3000)" &&
       export NEXT_PUBLIC_WEBAPP_URL="$(gp url 3000)" &&
-      export NEXT_PUBLIC_MARKETING_URL="$(gp url 3001)" 
+      export NEXT_PUBLIC_MARKETING_URL="$(gp url 3001)"
     command: npm run d
 
 ports:
@@ -25,20 +25,10 @@ ports:
   - port: 2500
     visibility: private
     onOpen: ignore
-  - port: 54320 
-    visibility: private 
+  - port: 54320
+    visibility: private
     onOpen: ignore
 
-
-github:
-  prebuilds:
-    master: true
-    pullRequests: true
-    pullRequestsFromForks: true
-    addCheck: true
-    addComment: true
-    addBadge: true
-
 vscode:
   extensions:
     - aaron-bond.better-comments
@@ -47,9 +37,5 @@ vscode:
     - esbenp.prettier-vscode
     - mikestead.dotenv
     - unifiedjs.vscode-mdx
-    - GitHub.copilot-chat
-    - GitHub.copilot-labs
-    - GitHub.copilot
     - GitHub.vscode-pull-request-github
     - Prisma.prisma
-    - VisualStudioExptTeam.vscodeintellicode

.vscode/settings.json

@@ -5,11 +5,19 @@
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },
-  "eslint.validate": ["typescript", "typescriptreact", "javascript", "javascriptreact"],
+  "eslint.validate": [
+    "typescript",
+    "typescriptreact",
+    "javascript",
+    "javascriptreact"
+  ],
   "javascript.preferences.importModuleSpecifier": "non-relative",
   "javascript.preferences.useAliasesForRenames": false,
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "files.eol": "\n",
   "editor.tabSize": 2,
-  "editor.insertSpaces": true
-}
+  "editor.insertSpaces": true,
+  "[prisma]": {
+    "editor.defaultFormatter": "Prisma.prisma"
+  },
+}

README.md

@@ -73,10 +73,22 @@ Contact us if you are interested in our Enterprise plan for large organizations
 <a href="https://cal.com/timurercan/enterprise-customers?utm_source=banner&utm_campaign=oss"><img alt="Book us with Cal.com" src="https://cal.com/book-with-cal-dark.svg" /></a>
 
 ## Tech Stack
+<p align="left">
+  <a href="https://www.typescriptlang.org"><img src="https://shields.io/badge/TypeScript-3178C6?logo=TypeScript&logoColor=FFF&style=flat-square" alt="TypeScript"></a>
+  <a href="https://nextjs.org/"><img src="https://img.shields.io/badge/next.js-000000?style=flat-square&logo=nextdotjs&logoColor=white" alt="NextJS"></a>
+  <a href="https://prisma.io"><img width="122" height="20" src="http://made-with.prisma.io/indigo.svg" alt="Made with Prisma" /></a>
+  <a href="https://tailwindcss.com/"><img src="https://img.shields.io/badge/tailwindcss-0F172A?&logo=tailwindcss" alt="Tailwind CSS"></a>
+  <a href=""><img src="" alt=""></a>
+  <a href=""><img src="" alt=""></a>
+  <a href=""><img src="" alt=""></a>
+  <a href=""><img src="" alt=""></a>
+  <a href=""><img src="" alt=""></a>
+</p>
+
 
 - [Typescript](https://www.typescriptlang.org/) - Language
 - [Next.js](https://nextjs.org/) - Framework
-- [Prisma](https://www.prisma.io/) - ORM
+- [Prisma](https://www.prisma.io/)  - ORM
 - [Tailwind](https://tailwindcss.com/) - CSS
 - [shadcn/ui](https://ui.shadcn.com/) - Component Library
 - [NextAuth.js](https://next-auth.js.org/) - Authentication

apps/marketing/content/blog/announcing-direct-links.mdx

@@ -0,0 +1,63 @@
+---
+title: Launching Direct Links
+description: Today, we are launching direct links to templates, a new and async way to get documents signed.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-06-17
+tags:
+  - Announcement
+  - Direct Links
+  - Profiles
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/direct-links.png"
+    width="1400"
+    height="884"
+    alt="Direct Links in Templats List View"
+  />
+
+  <figcaption className="text-center">Direct Template Links - Async signing, anytime.</figcaption>
+</figure>
+
+> TLDR; We are launching direct links to templates. With direct links, a document is created from a template every time anyone signs the link. Links can be public.
+
+## Sync or Async?
+
+> Quick refresher on Sync vs. Async: Sync means everyone has to wait for me until they can continue their work. Async means everyone can and does their work at the time that fits best.
+
+Digital signing has become almost as normalized as email when doing business. While not 100% of companies are onboarded on digital signatures yet, hardly anyone is surprised when receiving a link to sign something digitally. As we got used to the user experience of sending emails, we also got used to the experience of sending document signature requests, with all the downsides:
+
+- I have to become active each time before anything can happen: I need to send a signature request
+- My counterpart has to wait for me to send: "Did you send the signing link yet?"
+- I need to monitor the requests I started for completion: "I sent you a link yesterday; please check it out."
+
+## Introducing Direct Links
+
+Today, we are introducing a new paradigm to signing: Async Direct Signing Links. Direct links are attached to a template and can be used anytime by anyone using the link. You set up the signature experience and flow once using all existing template mechanisms and you are done. You can provide anyone with the link so they can sign whenever they need to. You can even post the link publicly if you want to maximize its reach, i.e. for sales contracts.
+
+<video
+  id="vid"
+  width="100%"
+  src="https://github.com/documenso/design/assets/1309312/129f690b-29b4-4a11-b9a0-14fc6648e611"
+  autoPlay
+  loop
+  muted
+></video>
+
+## Embrace Async
+
+So, how does this help anyone? You may still need to send a signature request to people, but in the cases you don't, you are not forced to anymore. Need an NDA? Check out our standing NDA link. A customer needs an updated Form W-9? Just use the company W-9 Link; it always has the most up-to-date form. You can even go as far as publicly posting a link to a software development or design contract any potential customer can sign anytime. Can they talk to you first? Sure, but if they don't need to or already have to, they go straight to the link. The process of actively sending has gotten us used to using a sync paradigm (I send, you receive and sign, and I get the result), whereas an async one (you sign whenever it suits you, and I become active only then, if at all) is way better suited. Adding more approval and signature steps makes sure you still control the outcome, but the process becomes a lot more efficient. For example, you can grab your own copy of the early adopter's pledge here if you missed it: [documen.so/pledge](https://documen.so/pledge).
+
+> Take a minute to think about every signing request you send and whether they really require you to be part of the transaction. Could they be outsourced to the recipient and only reviewed once their part is done?
+
+## Coming Soon: Profiles
+
+The best place to put your public links will be your **Documenso profile**, which is also close to launching. We want to get a feel for how links are used and move on to profiles shortly after. Want to try out direct links? Grab a free account here to get started: [documen.so/free](https://documen.so/free).
+
+As always, we want to hear from you on [Twitter / X](https://twitter.com/eltimuro) (DMs are open) or [Discord](https://documen.so/discord) if you have any questions, ideas, or comments.
+
+Best from Hamburg\
+Timur

apps/marketing/content/blog/how-documenso-enhances-contract-management-for-freelancers-helping-them-close-more-clients-efficiently.mdx

@@ -0,0 +1,103 @@
+---
+title: How Documenso Enhances Contract Management for Freelancers, Helping Them Close More Clients Efficiently
+description: Making it easy for the customer to sign the contract after they say yes is critical. Let take a look how Documenso can help.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-06-20
+tags:
+  - Freelancer
+  - Proposal
+  - Productivity
+---
+
+## Yes to Yes
+
+> [Check out Part 1](https://documen.so/freelance-proposal) to learn about signing freelance proposals with Documenso and getting your first yes
+
+A basic rule of sales is going from "yes to yes”. Outlining the main points of working together in a proposal is a good way to get to your first yes since it reduces details and focuses on the main points of the work at hand. After being on the same page about the work and getting the first yes, it's time to draw up a formal contract. While agreeing to the proposal has some weight as well, the legal contract formalizes the commitments of both sides in an enforceable way. Having clear legal terms on payments, unexpected cases, and even dissolving the partnership helps both parties to feel assured about what to expect.
+
+### **Digital Signatures for the Win**
+
+Digitally signing documents accelerates contract closure, enhancing both speed and security. Parties can review and sign documents within minutes, eliminating the days required for manual signatures or even weeks with traditional mail. Beyond these efficiency gains, digital signatures boost trust by making the process secure and auditable. Once signed, digital documents are immutable, and every step is logged.
+
+Documenso simplifies this process, allowing you to send contracts effortlessly. As an open-source solution, our product's integrity and security are verifiable by anyone, which is why thousands of users rely on Documenso for their signing needs. Discover more at [https://documen.so/open](https://documen.so/open).
+
+## Preparing the Contract
+
+As a freelancer, obtaining a contract template ensures you have a standardized and professional agreement ready for new clients, helping to protect your interests and clarify project terms. While there are many good templates out there, be sure to verify that they fit your case since contracts are often very specific to a certain case. Always consider having your contract checked by a legal professional if it's a high-value transaction.
+
+Here is a quick checklist of what your contract should include:
+
+### Checklist
+
+- Names and Addresses of you and your client
+- Scope of Work to be performed, deadlines and deliverables
+- Payment Terms, Payment Schedules, and Pricing
+- A clear timeline
+- Provisions for unexpected extra work
+- Intellectual Property Rights Provisions
+- Confidentiality and Non-Disclosure Agreements, if needed
+- Termination Clauses: Condition and terms when the contract can be terminated, including notice period and compensation
+- Indemnity and Liability
+- Dispute Resolution
+- Provisions ensuring changes can only be made in writing
+- Completeness Agreement: Both parties state this is the full extent of the agreement
+- Severability Clause ensuring minor errors will not endanger the whole contract
+- The signees with name, role, and date
+
+## Getting the Signature
+
+Once you have your contract ready, you can upload it and add recipients and signature fields. To add a more personal touch, consider adding a personal message to the signature request.
+
+<figure>
+  <MdxNextImage
+    src="/blog/l1.png"
+    width="1260"
+    height="630"
+    alt="Manually Copy Signature Link by Hovering of the Recipient"
+  />
+
+  <figcaption className="text-center">
+    Copy recipient links to send them for a personal touch manually.
+  </figcaption>
+</figure>
+
+You can also copy the link for each recipient after sending it and send it via another channel e.g. WhatsApp with a personal message. To further customize the experience, you can define a redirect when your customer signs the contract to redirect them to a Cal.com Link to get started, a Thank You Page, or a Form.
+
+<figure>
+  <MdxNextImage
+    src="/blog/l2.png"
+    width="1260"
+    height="630"
+    alt="Redirect Link in Advanced Settings"
+  />
+
+  <figcaption className="text-center">
+    Redirect after Signing for a more personal experience.
+  </figcaption>
+</figure>
+
+The more you add to the workflow, the more important it is to keep up to date with the process. Using Zapier, you can add a variety of notifications, from email to Discord messages, to keep a good overview and respond quickly. It's not just about getting the signatures; it's about creating the workflow that provides the best experience for you and your customers.
+
+<figure>
+  <MdxNextImage
+    src="/blog/l3.png"
+    width="1260"
+    height="630"
+    alt="Zapier Documenso Discord Integration"
+  />
+
+  <figcaption className="text-center">
+      Trigger any kind of notification with[Zapier](https://documen.so/zapier)
+  </figcaption>
+</figure>
+
+### Conclusion
+
+Sending a contract to clients using Documenso makes the process fast and easy. Seeing if your contract was signed or even read helps you understand where you are in the process. You can use the [Documenso Free Plan](https://app.documenso.com/signup?utm_source=blog-freelancer-contract) to send 5 contracts per month. Digital signing in 2024 is the best practice for professionals seeking the most efficient way to get business done.
+
+Let us know what you think and what we can improve. Connect with us on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments! We're always here and would love to hear from you :)
+
+Best from Hamburg\
+Timur

apps/marketing/content/blog/how-documenso-help-freelancers-close-more-clients-efficiently.mdx

@@ -0,0 +1,76 @@
+---
+title: How Documenso Helps Freelancers Close More Clients Efficiently
+description: Reducing friction when sending proposals is critical to closing new clients. By using Documenso, freelancers can save time, enhance client interactions, and ultimately close more deals efficiently.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-06-14
+tags:
+  - Freelancer
+  - Proposal
+  - Productivity
+---
+
+Getting new clients, or maybe even your first client, to sign with you is at the very core of freelance work. Whether you develop software, create designs, or market products, it all starts with a signature from you and your future customer. Closing a customer usually means agreeing on a proposal first and then signing a formal agreement afterward. Signing proposals and contracts is fast, easy, and painless with Documenso, so let's take a look.
+
+## Understanding Proposal and Contracts
+
+### 1. Initial Proposal
+
+> Agreeing on what needs to be done and terms for payment
+
+A proposal will include the scope of the work (what does the customer want done?), desired deliverables (documents, code, features, videos, etc.), timelines, payment terms (one-time, monthly, per hour), and prices (e.g. $60/ hour, $5k one-time). A proposal is important for both sides to be clear about the goal and the terms that apply. Customers usually decide based on the proposal if your offer is what they want.
+
+### 2. Formal Contract
+
+> After the client signs the proposal, a contract can be signed, formalizing the agreement and adding detailed legal terms.
+
+Once the terms are agreed upon, a more formal document should specify the terms of working together, especially legal details such as confidentiality, indemnification, governing law, etc. The contract provides clarity on legal details for both sides and formalizes their claims.
+
+Sending one or even multiple documents to a potential client and having them send them back signed (in the worst case, they send it via actual mail) is time-consuming for both sides. It also introduces friction at a time when making it as easy as possible for your potential client to say yes should be your number one goal.
+
+### **Digital Signatures for the Win**
+
+Signing documents digitally makes closing proposals and contracts faster and more secure. Each party can review and sign the documents in minutes instead of days (inserting the signatures manually via PDF editor) or even weeks (using conventional mail). Apart from the efficiency gains, signing digitally also increases trust by making the process more secure and auditable. Digitally signed documents can’t be changed after the fact, and every step of the process is logged.
+
+Documenso lets you reap these benefits by sending proposals and contracts with minimal effort. Being open source, the whole world can verify our product and how we deliver on these promises, which is why thousands of users already trust Documenso for their signing needs: [https://documen.so/open](https://documen.so/open).
+
+## Preparing the Proposal
+
+If you already have a proposal template, create a new version for your client and export it to PDF. If your tool doesn’t support that, your system's “PDF printer” lets you create a PDF from almost any tool by using the print function. If you do not have a template yet, you can find a lot of content and guides on the matter through a quick Google search. Here is a quick checklist of what your proposal should cover:
+
+- A clear and concise title
+- Your contact information
+- Date of the proposal/ validity period
+- Experience, qualifications, and prior relevant projects
+- A summary of the project
+- A detailed description of the project
+- Goals, outcomes, and deliverables
+- Tasks and activities to achieve the goals and outcomes
+- A timeline with milestones and deadlines
+- Pricing terms and payment schedule
+- Summary of major terms for the coming contract
+
+## Sending the Proposal
+
+If you don’t have a Documenso Account yet, you can [create one for free](https://documen.so/signup?utm_source=blog-freelancer-proposal). Once you sign up, you can upload your proposal PDF by simply dragging it into the upload area. Add your potential client as a recipient, add a signature field, and you are done! You can track the status of your proposal simply by clicking the Document in the overview. Documenso will also notify you once the proposal is signed.
+
+<video
+  id="vid"
+  width="100%"
+  src="https://github.com/documenso/design/assets/1309312/050a1501-b562-4b1e-97b5-a46fc0da8246"
+  autoPlay
+  loop
+  muted
+></video>
+
+### Conclusion
+
+Sending a proposal to potential clients using Documenso makes getting to the first “yes” fast and easy. Seeing if your proposal was signed or even read helps you to get a feel for where you are in the process. You can use the [Documenso Free Plan](https://app.documenso.com/signup?utm_source=blog-freelancer-proposal) to send 5 proposals per month. Digital Signing in 2024 is the best practice for all professionals looking for the most efficient way to get business done.
+
+> [Check out Part 2](https://documen.so/freelance-contract) to learn about signing freelance contracts with Documenso.
+
+Let us know what you think and what we can improve. Which field types are you missing? Connect with us on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments! We're always here and would love to hear from you :)
+
+Best from Hamburg\
+Timur

apps/marketing/content/blog/signing-an-nda-faster-with-documenso.mdx

@@ -0,0 +1,88 @@
+---
+title: How to Sign an NDA online (fast)
+description: Signing an NDA with Documenso direct links is amazingly fast. Let’s look at how to make it even faster.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-06-27
+tags:
+  - NDA
+  - Direct Links
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/nda.jpg"
+    width="1400"
+    height="884"
+    alt="Direct Links in Templates List View"
+  />
+
+  <figcaption className="text-center">A generic document saying "NDA" to underline this article is about NDAs.</figcaption>
+</figure>
+
+> TLDR; Documenso makes sending NDAs faster, faster with templates, and even still faster using direct links.
+
+## What is an NDA?
+An NDA, or non-disclosure agreement, is a legal contract that establishes a confidential relationship. The parties involved agree not to disclose information covered by the agreement. NDAs are often used to protect sensitive information or trade secrets and to ensure that such information isn't made public by the recipient without permission. They are commonly used in business settings, such as during negotiations or when new employees are hired who will have access to proprietary information.
+
+## Do I need an NDA?
+> Disclaimer: This is not legal advice, and the most important legal questions are often ultra-case-specific and should be discussed with a legal professional
+
+
+There is a solid amount of debate around the question of whether an NDA actually protects anyone and is worth the friction. Investors scoff at the idea of a startup requiring them to sign an NDA before disclosing their "billion dollar idea" as they see hundreds of them and are aware that without proper execution, there is nothing to protect.
+
+In another classical example, a big company and a small company e.g. a startup, sign an NDA before going into detail for partnership talks. While this seems prudent, given the resource asymmetry, the startup probably won't be able to litigate against breach of contract successfully. If Microsoft (not saying they do) breaks your NDA, you will hardly sue them into a settlement.
+
+That being said, as with most contracts, NDAs can be useful if both parties keep the spirit of the agreement. In this case, detailing in writing what can and cannot be disclosed is good for managing expectations and building trust. NDAs are also common practice in merger and acquisition projects and are often part of hiring critical roles within a company.
+
+### Level 1: Basic Signing
+If you need to sign an NDA, signing it with Documenso is incredibly fast already. Let's take a look at how to make it even faster. Simply uploading and sending is the most straightforward way to get this done. It works like this:
+
+- Upload the NDA PDF template
+- Add the recipients
+- place the signature fields
+- Hit send
+- Sign the NDA while or after waiting for your counterpart to sign
+
+<video
+  id="vid"
+  width="100%"
+  src="https://github.com/documenso/design/raw/main/blog/nda1.webm"
+  autoPlay
+  loop
+  muted
+  controls
+></video>
+
+### Level 2: Using Templates
+If you have to sign the same NDA multiple times with different people, you can create a template to save time. Creating a template is just as easy as creating a document, just skipping the sending step. After creating the template for your NDA, you can create a signable document with just 1 click. Simply fill in the recipient email, and you are done.
+> Pro Tip: Check "Send Document" to immediately send it after filling out the recipient if you are familiar with the template.
+
+<video
+  id="vid"
+  width="100%"
+  src="https://github.com/documenso/design/raw/main/blog/nda2.webm"
+  autoPlay
+  loop
+  muted
+  controls
+></video>
+<figcaption className="text-center">
+  You can send out templates without even going through the full flow.
+</figcaption>
+
+### Level 3: Using a Direct Link
+Using a pre-defined template is pretty fast, but can we make it even faster? Yes, we can! By adding a direct link to your NDA template and publishing it (internally or even externally). A [Direct Link](http://documenso.com/blog/announcing-direct-links) lets people sign your NDA without you lifting a finger. Everyone with access to the link can sign it at any time, making discussions of who sends what when a thing of the past. You can use Direct links with a pre-signed template for maximum convenience or with a second signer/ approver from your side to keep control over the process.
+
+You can try it here and [sign a demo NDA](https://documen.so/demo-nda) with me.
+
+> Pro Tip: Use [Zapier](https://documen.so/zapier) to get notified of that platform of your choice as soon as someone signs your link.
+
+## Conclusion
+Signing NDAs is not always effective, but it can be necessary, so be sure to use a tool to make it easy and fast. Documenso is a great DocuSign alternative that helps you get it done. If you need to get an NDA out today, you can use the [Documenso Free plan](https://documen.so/free), which gives you 5 signatures per month and 3 Direct Link templates.
+
+As always, we want to hear from you on [Twitter / X](https://twitter.com/eltimuro) (DMs are open) or [Discord](https://documen.so/discord) if you have any questions, ideas, or comments.
+
+Best from Hamburg\
+Timur

apps/marketing/content/blog/sunsetting-early-adopters.mdx

@@ -0,0 +1,52 @@
+---
+title: Sunsetting the Early Adopters Plan
+description: We reached or Early Adopter cap and not transition to our regular pricing 🎉
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-06-12
+tags:
+  - Early Adopters
+  - Pricing
+  - Open Startup
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/sunset.jpg"
+    width="1260"
+    height="630"
+    alt="A beautiful sunset as a metaphor for the Early Adopter phase ending"
+  />
+
+  <figcaption className="text-center">
+    "Being early is, uh, good." -Unknown
+  </figcaption>
+</figure>
+
+> TLDR; The Early Adopters Plan ended, and we have a new pricing. If you are an Early Adopter, reach out for a Discord community badge 🏅
+
+# The End of the Beginning
+
+12 months, 13 releases, and 344 merged pull requests after announcing the Early Adopter plan in our first-ever launch week, and we hit the cap of 100. Documenso has changed and grown a lot since then. For us, this is a great milestone towards our broader mission of bringing open signing to the world since now we are joined by a community consisting of contributors and early customers all around the world.
+
+# The New Plans
+
+Starting today, we are sunsetting the Early Adopter Plan in favor of our new, more nuanced pricing model. The Early Adopter plan will succeeded by the **Individual plan**, which is still priced at $30/mo. The Individual plans will still include unlimited signatures and recipients since this aligns with our core belief of empowering our users wherever possible. If you managed to grab an Early Adopter plan, reach out on X or Discord to receive a special community badge. Early Adopters are meant to get preferential treatment where possible.
+
+Previously soft-launched as part of Early Adopters, we are officially introducing the **Team Plan** to our pricing for customers requiring multi-user accounts. Priced at $50/ mo. for 5 users, this plan offers unlimited signature volume as well. Additional users can be added for $10/mo. as needed. We have carefully crafted the billing of teams to ensure that dynamic changes are accurately reflected at the end of each billing cycle, providing you with a fair-value pricing structure.
+
+Our **Free Plan** stays unchanged, offering coverage to casual users and an easy way to try out Documenso or start developing.
+
+Check out our [new pricing page here](https://documen.so/pricing). We also updated our [open page](https://documen.so/open) to reflect the end of Early Adopters. The metric now counts active subscriptions from Individuals and Teams.
+
+# API Access
+
+All plans include access to the API as per our philosophy, making Documenso an open platform, and allowing everyone to build on it, no matter how big or small. Besides the Free Plan's 5 signatures per month limit, the API does not have access restrictions. Even the free plan can keep using the API after using its signature volume for non-signing operations like reading, editing, and even creating documents. Since the individual plan technically allows for running a Fortune 500 company for $30/ mo., plan we are adding a fair use clause here: You are free to use the API "a lot" if you are a big organization trying to stay on the Individual Plan we will ask to have a word about upgrading (which might make sense anyway considering your requirements). Fair use excludes Early Adopters, which we consider limitless by any measure. If you need clarification on whether your case is covered under fair use, you can contact us on Discord or support@documenso.com. It's probably fine, though.
+
+We also have a lot in the pipeline, and we are excited to share everything with you soon. A Big Shoutout to all Early Adopters. We salute you, and you will receive the preferred treatment where possible.
+
+If you have any questions or comments, please reach out on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord).
+
+Best from Hamburg\
+Timur

apps/marketing/content/changelog.mdx

@@ -0,0 +1,55 @@
+---
+title: Changelog - Documenso
+---
+
+# Changelog
+
+Check out what's new in the latest major version and read what we think about it. You can find our releases on GitHub for more technical details [here](https://github.com/documenso/documenso/releases). You can find our [release candidates here](https://github.com/documenso/documenso/tags).
+
+---
+
+## v1.5.5 (latest)
+
+### <small>Released 6th May 2024</small>
+
+> This release contains [20 fixes](https://github.com/documenso/documenso/releases/tag/v1.5.5)
+
+### ✅ Show Completed Fields
+
+Fields completed by other recipients are now visible to everyone to communicate the state of the document better and allow users an informed decision on what they are signing.
+
+### ⬇️ Download Completed Documents via API
+
+Completed documents can now be downloaded via the API using this new endpoint:
+
+**GET /API/V1//DOCUMENTS/\{ID\}/DOWNLOAD**
+
+Check out the full Open API docs here: [https://documen.so/openapi](https://documen.so/openapi)
+
+### ➕ Adding Yourself as a Signer
+
+Adding yourself as a signer is now just one click away.
+
+---
+
+## v1.5.4
+
+### <small>Released 11th April 2024</small>
+
+> This release contains [21 fixes](https://github.com/documenso/documenso/releases/tag/v1.5.4)
+
+#### 🔑 Passkeys
+
+To improve security and usability for high-security setups, we added passkeys with this release. Passkeys can now be used to log in or re-authenticate each signature for high-compliance cases.
+
+#### 📄 Signing Certificate & Audit Log
+
+On the security/ compliance side, we also added Signing Certificates and Audit Logs. Every signed document now has a certificate attached, showing technical details of the signature to improve transparency and security. Further, every action on a document from creation to completion is now logged in the audit log to guarantee the integrity of the process.
+
+#### 🔏🦀 @documenso/pdf-sign
+
+We are pretty hyped about this one: Since version 0.9, we relied on https://github.com/vbuch/node-signpdf to add the digital signatures to our documents. Since signing is at the heart of Documenso, we created our own rust-based library for signing. As of 1.5.4, Documenso's signing runs on @documenso/pdf-sign. The library offers a better architecture to enable signing with private keys that are not stored locally (e.g. via HSM). We are in the process of cleaning up the library to open source it like the rest of Documenso 🌱 The library will also help us to offer Long Term Validation (LTV) for signatures soon. While we are currently limited to signing with PKCS7-B, eventually, we plan to support all common signing standards like PAdES, CAdES, and XAdES.
+
+---
+
+´

apps/marketing/next.config.js

@@ -18,6 +18,10 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
   path.join(__dirname, '../../packages/assets/fonts/caveat.ttf'),
 );
 
+const FONT_NOTO_SANS_BYTES = fs.readFileSync(
+  path.join(__dirname, '../../packages/assets/fonts/noto-sans.ttf'),
+);
+
 /** @type {import('next').NextConfig} */
 const config = {
   experimental: {
@@ -38,6 +42,7 @@ const config = {
   env: {
     NEXT_PUBLIC_PROJECT: 'marketing',
     FONT_CAVEAT_URI: `data:font/ttf;base64,${FONT_CAVEAT_BYTES.toString('base64')}`,
+    FONT_NOTO_SANS_URI: `data:font/ttf;base64,${FONT_NOTO_SANS_BYTES.toString('base64')}`,
   },
   modularizeImports: {
     'lucide-react': {

apps/marketing/package.json

@@ -21,6 +21,9 @@
     "@hookform/resolvers": "^3.1.0",
     "@openstatus/react": "^0.0.3",
     "contentlayer": "^0.3.4",
+    "embla-carousel": "^8.1.3",
+    "embla-carousel-autoplay": "^8.1.3",
+    "embla-carousel-react": "^8.1.3",
     "framer-motion": "^10.12.8",
     "lucide-react": "^0.279.0",
     "luxon": "^3.4.0",
@@ -38,7 +41,7 @@
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.11.0",
     "recharts": "^2.7.2",
-    "sharp": "^0.33.1",
+    "sharp": "0.32.6",
     "typescript": "5.2.2",
     "zod": "^3.22.4"
   },
@@ -55,4 +58,4 @@
       "next": "$next"
     }
   }
-}
+}

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

@@ -47,14 +47,6 @@ export const TEAM_MEMBERS = [
     engagement: 'Full-Time',
     joinDate: 'October 9th, 2023',
   },
-  {
-    name: 'Adithya Krishna',
-    role: 'Software Engineer - II',
-    salary: '-',
-    location: 'India',
-    engagement: 'Full-Time',
-    joinDate: 'December 1st, 2023',
-  },
 ];
 
 export const FUNDING_RAISED = [

apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx

@@ -3,11 +3,11 @@
 import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
-import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+import type { GetCompletedDocumentsMonthlyResult } from '@documenso/lib/server-only/user/get-monthly-completed-document';
 
 export type MonthlyCompletedDocumentsChartProps = {
   className?: string;
-  data: GetUserMonthlyGrowthResult;
+  data: GetCompletedDocumentsMonthlyResult;
 };
 
 export const MonthlyCompletedDocumentsChart = ({

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

@@ -247,8 +247,8 @@ export default async function OpenPage() {
           <BarMetric<EarlyAdoptersType>
             data={EARLY_ADOPTERS_DATA}
             metricKey="earlyAdopters"
-            title="Early Adopters"
-            label="Early Adopters"
+            title="Total Customers"
+            label="Total Customers"
             className="col-span-12 lg:col-span-6"
             extraInfo={<OpenPageTooltip />}
           />

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

@@ -29,7 +29,7 @@ export function OpenPageTooltip() {
           </svg>
         </TooltipTrigger>
         <TooltipContent>
-          <p>Active Subscriptions.</p>
+          <p>Customers with an Active Subscriptions.</p>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>

apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx

@@ -3,11 +3,11 @@
 import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
-import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+import type { GetCompletedDocumentsMonthlyResult } from '@documenso/lib/server-only/user/get-monthly-completed-document';
 
 export type TotalSignedDocumentsChartProps = {
   className?: string;
-  data: GetUserMonthlyGrowthResult;
+  data: GetCompletedDocumentsMonthlyResult;
 };
 
 export const TotalSignedDocumentsChart = ({ className, data }: TotalSignedDocumentsChartProps) => {

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

@@ -9,6 +9,7 @@ import {
 } from '@documenso/ui/primitives/accordion';
 import { Button } from '@documenso/ui/primitives/button';
 
+import { Enterprise } from '~/components/(marketing)/enterprise';
 import { PricingTable } from '~/components/(marketing)/pricing-table';
 
 export const metadata: Metadata = {
@@ -42,6 +43,10 @@ export default function PricingPage() {
         <PricingTable />
       </div>
 
+      <div className="mt-12">
+        <Enterprise />
+      </div>
+
       <div className="mx-auto mt-36 max-w-2xl">
         <h2 className="text-center text-2xl font-semibold">
           None of these work for you? Try self-hosting!

apps/marketing/src/app/(marketing)/singleplayer/client.tsx

@@ -248,6 +248,7 @@ export const SinglePlayerClient = () => {
                   recipients={uploadedFile ? [placeholderRecipient] : []}
                   fields={fields}
                   onSubmit={onFieldsSubmit}
+                  canGoBack={true}
                   isDocumentPdfLoaded={true}
                 />
               </fieldset>

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

@@ -34,17 +34,18 @@ export const Callout = ({ starCount }: CalloutProps) => {
 
   return (
     <div className="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-4">
-      <Button
-        type="button"
-        variant="outline"
-        className="rounded-full bg-transparent backdrop-blur-sm"
-        onClick={onSignUpClick}
-      >
-        Claim Early Adopter Plan
-        <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs font-medium">
-          $30/mo
-        </span>
-      </Button>
+      <Link href="https://app.documenso.com/signup?utm_source=marketing-callout">
+        <Button
+          type="button"
+          variant="outline"
+          className="rounded-full bg-transparent backdrop-blur-sm"
+        >
+          Try our Free Plan
+          <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs font-medium">
+            No Credit Card required
+          </span>
+        </Button>
+      </Link>
 
       <Link
         href="https://github.com/documenso/documenso"

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

@@ -0,0 +1,267 @@
+'use client';
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import Autoplay from 'embla-carousel-autoplay';
+import useEmblaCarousel from 'embla-carousel-react';
+import { useTheme } from 'next-themes';
+
+import { Card } from '@documenso/ui/primitives/card';
+import { Progress } from '@documenso/ui/primitives/progress';
+
+import { Slide } from './slide';
+
+const SLIDES = [
+  {
+    label: 'Signing Process',
+    type: 'video',
+    srcLight: 'https://github.com/documenso/design/raw/main/marketing/signing.webm',
+    srcDark: 'https://github.com/documenso/design/raw/main/marketing/dark/signing.webm',
+  },
+  {
+    label: 'Teams',
+    type: 'video',
+    srcLight: 'https://github.com/documenso/design/raw/main/marketing/teams.webm',
+    srcDark: 'https://github.com/documenso/design/raw/main/marketing/dark/teams.webm',
+  },
+  {
+    label: 'Zapier',
+    type: 'video',
+    srcLight: 'https://github.com/documenso/design/raw/main/marketing/zapier.webm',
+    srcDark: 'https://github.com/documenso/design/raw/main/marketing/dark/zapier.webm',
+  },
+  {
+    label: 'Direct Link',
+    type: 'video',
+    srcLight: 'https://github.com/documenso/design/raw/main/marketing/direct-links.webm',
+    srcDark: 'https://github.com/documenso/design/raw/main/marketing/dark/direct-links.webm',
+  },
+  {
+    label: 'Webhooks',
+    type: 'video',
+    srcLight: 'https://github.com/documenso/design/raw/main/marketing/webhooks.webm',
+    srcDark: 'https://github.com/documenso/design/raw/main/marketing/dark/webhooks.webm',
+  },
+  {
+    label: 'API',
+    type: 'video',
+    srcLight: 'https://github.com/documenso/design/raw/main/marketing/api.webm',
+    srcDark: 'https://github.com/documenso/design/raw/main/marketing/dark/api.webm',
+  },
+  {
+    label: 'Profile',
+    type: 'video',
+    srcLight: 'https://github.com/documenso/design/raw/main/marketing/profile_teaser.webm',
+    srcDark: 'https://github.com/documenso/design/raw/main/marketing/dark/profile_teaser.webm',
+  },
+];
+
+export const Carousel = () => {
+  const slides = SLIDES;
+  const [_isPlaying, setIsPlaying] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [progress, setProgress] = useState(0);
+  const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
+  const [autoplayDelay, setAutoplayDelay] = useState<number[]>([]);
+  const { resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
+    Autoplay({ playOnInit: true, delay: autoplayDelay[selectedIndex] || 5000 }),
+  ]);
+  const [emblaThumbsRef, emblaThumbsApi] = useEmblaCarousel(
+    {
+      loop: true,
+      containScroll: 'keepSnaps',
+      dragFree: true,
+    },
+    [Autoplay({ playOnInit: true, delay: autoplayDelay[selectedIndex] || 5000 })],
+  );
+
+  const onThumbClick = useCallback(
+    (index: number) => {
+      if (!emblaApi || !emblaThumbsApi) return;
+      emblaApi.scrollTo(index);
+    },
+    [emblaApi, emblaThumbsApi],
+  );
+
+  const onSelect = useCallback(() => {
+    if (!emblaApi || !emblaThumbsApi) return;
+    setSelectedIndex(emblaApi.selectedScrollSnap());
+    emblaThumbsApi.scrollTo(emblaApi.selectedScrollSnap());
+
+    resetProgress();
+    const autoplay = emblaApi.plugins()?.autoplay;
+
+    if (autoplay) {
+      autoplay.reset();
+    }
+  }, [emblaApi, emblaThumbsApi, setSelectedIndex]);
+
+  const resetProgress = useCallback(() => {
+    setProgress(0);
+  }, []);
+
+  useEffect(() => {
+    const setVideoDurations = async () => {
+      const durations = await Promise.all(
+        videoRefs.current.map(
+          async (video) =>
+            new Promise<number>((resolve) => {
+              if (video) {
+                video.onloadedmetadata = () => resolve(video.duration * 1000);
+              } else {
+                resolve(5000);
+              }
+            }),
+        ),
+      );
+
+      setAutoplayDelay(durations);
+    };
+
+    void setVideoDurations();
+  }, [slides, mounted, resolvedTheme]);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const video = entry.target as HTMLVideoElement;
+            video
+              .play()
+              .catch((error) => console.log('Error attempting to play the video:', error));
+          } else {
+            const video = entry.target as HTMLVideoElement;
+            video.pause();
+          }
+        });
+      },
+      {
+        threshold: 0.5,
+      },
+    );
+
+    videoRefs.current.forEach((video) => {
+      if (video) {
+        observer.observe(video);
+      }
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [slides, mounted, resolvedTheme]);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+    onSelect();
+
+    emblaApi.on('select', onSelect).on('reInit', onSelect);
+  }, [emblaApi, onSelect, mounted, resolvedTheme]);
+
+  useEffect(() => {
+    const autoplay = emblaApi?.plugins()?.autoplay;
+    if (!autoplay) return;
+
+    setIsPlaying(autoplay.isPlaying());
+    emblaApi
+      .on('autoplay:play', () => setIsPlaying(true))
+      .on('autoplay:stop', () => setIsPlaying(false))
+      .on('reInit', () => setIsPlaying(autoplay.isPlaying()));
+  }, [emblaApi, mounted, resolvedTheme]);
+
+  useEffect(() => {
+    if (autoplayDelay[selectedIndex] === undefined) return;
+
+    const updateInterval = 50;
+    const increment = 100 / (autoplayDelay[selectedIndex] / updateInterval);
+    let progressValue = 0;
+
+    const timer = setInterval(() => {
+      setProgress((prevProgress) => {
+        progressValue = prevProgress + increment;
+        if (progressValue >= 100) {
+          clearInterval(timer);
+          if (emblaApi) {
+            emblaApi.scrollNext();
+          }
+          return 100;
+        }
+        return progressValue;
+      });
+    }, updateInterval);
+
+    return () => clearInterval(timer);
+  }, [selectedIndex, autoplayDelay, emblaApi, mounted, resolvedTheme]);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+
+    const resetCarousel = () => {
+      emblaApi.reInit();
+      emblaApi.scrollTo(0);
+    };
+
+    resetCarousel();
+  }, [emblaApi, autoplayDelay, mounted, resolvedTheme]);
+
+  // Ensure the component renders only after mounting to avoid theme issues
+  if (!mounted) return null;
+  return (
+    <>
+      <Card className="mx-auto mt-12 w-full max-w-4xl rounded-2xl p-1 before:rounded-2xl" gradient>
+        <div className="overflow-hidden rounded-xl" ref={emblaRef}>
+          <div className="flex touch-pan-y rounded-xl">
+            {slides.map((slide, index) => (
+              <div className="min-w-[10rem] flex-none basis-full rounded-xl" key={index}>
+                {slide.type === 'video' && (
+                  <video
+                    key={`${resolvedTheme}-${index}`}
+                    ref={(el) => (videoRefs.current[index] = el)}
+                    muted
+                    loop
+                    className="h-auto w-full rounded-xl"
+                  >
+                    <source
+                      src={resolvedTheme === 'dark' ? slide.srcDark : slide.srcLight}
+                      type="video/webm"
+                    />
+                    Your browser does not support the video tag.
+                  </video>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="dark:bg-background absolute bottom-2 right-2 flex w-[20%] flex-col items-center space-y-1 rounded-lg bg-white p-1.5 sm:w-[5%]">
+          <span className="text-foreground dark:text-muted-foreground text-[10px] sm:text-xs">
+            {selectedIndex + 1}/{slides.length}
+          </span>
+          <Progress value={progress} className="h-1" />
+        </div>
+      </Card>
+
+      <div className="mx-auto mt-6 w-full max-w-4xl px-2 sm:mt-12">
+        <div className="mt-2 flex flex-wrap justify-between gap-6" ref={emblaThumbsRef}>
+          {slides.map((slide, index) => (
+            <Slide
+              key={index}
+              onClick={() => onThumbClick(index)}
+              selected={index === selectedIndex}
+              index={index}
+              label={slide.label}
+            />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,36 @@
+'use client';
+
+import Link from 'next/link';
+
+import { usePlausible } from 'next-plausible';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export const Enterprise = () => {
+  const event = usePlausible();
+
+  return (
+    <div className="mx-auto mt-36 max-w-2xl">
+      <h2 className="text-center text-2xl font-semibold">
+        Enterprise Compliance, License or Technical Needs?
+      </h2>
+
+      <p className="text-muted-foreground mt-4 text-center leading-relaxed">
+        Our Enterprise License is great large organizations looking to switch to Documenso for all
+        their signing needs. It's availible for our cloud offering as well as self-hosted setups and
+        offer a wide range of compliance and Adminstration Features.
+      </p>
+
+      <div className="mt-4 flex justify-center">
+        <Link
+          href="https://dub.sh/enterprise"
+          target="_blank"
+          className="mt-6"
+          onClick={() => event('enterprise-contact')}
+        >
+          <Button className="rounded-full text-base">Contact Us</Button>
+        </Link>
+      </div>
+    </div>
+  );
+};

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

@@ -35,6 +35,7 @@ const FOOTER_LINKS = [
   { href: '/oss-friends', text: 'OSS Friends' },
   { href: '/careers', text: 'Careers' },
   { href: '/privacy', text: 'Privacy' },
+  { href: '/changelog', text: 'Changelog' },
 ];
 
 export const Footer = ({ className, ...props }: FooterProps) => {

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

@@ -14,7 +14,7 @@ import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-fl
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
-import { Widget } from './widget';
+import { Carousel } from './carousel';
 
 export type HeroProps = {
   className?: string;
@@ -50,6 +50,21 @@ const HeroTitleVariants: Variants = {
   },
 };
 
+const HeroCarouselVariants: Variants = {
+  initial: {
+    opacity: 0,
+    y: 60,
+  },
+  animate: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: 0.5,
+      duration: 0.8,
+    },
+  },
+};
+
 export const Hero = ({ className, ...props }: HeroProps) => {
   const event = usePlausible();
 
@@ -57,23 +72,6 @@ export const Hero = ({ className, ...props }: HeroProps) => {
 
   const heroMarketingCTA = getFlag('marketing_landing_hero_cta');
 
-  const onSignUpClick = () => {
-    const el = document.getElementById('email');
-
-    if (el) {
-      const { top } = el.getBoundingClientRect();
-
-      window.scrollTo({
-        top: top - 120,
-        behavior: 'smooth',
-      });
-
-      requestAnimationFrame(() => {
-        el.focus();
-      });
-    }
-  };
-
   return (
     <motion.div className={cn('relative', className)} {...props}>
       <div className="absolute -inset-24 -z-10">
@@ -108,18 +106,18 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           animate="animate"
           className="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-4"
         >
-          <Button
-            type="button"
-            variant="outline"
-            className="rounded-full bg-transparent backdrop-blur-sm"
-            onClick={onSignUpClick}
-          >
-            Claim Early Adopter Plan
-            <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs font-medium">
-              $30/mo
-            </span>
-          </Button>
-
+          <Link href="https://app.documenso.com/signup?utm_source=marketing-hero">
+            <Button
+              type="button"
+              variant="outline"
+              className="rounded-full bg-transparent backdrop-blur-sm"
+            >
+              Try our Free Plan
+              <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs font-medium">
+                No Credit Card required
+              </span>
+            </Button>
+          </Link>
           <Link href="https://github.com/documenso/documenso" onClick={() => event('view-github')}>
             <Button variant="outline" className="rounded-full bg-transparent backdrop-blur-sm">
               <LuGithub className="mr-2 h-5 w-5" />
@@ -170,74 +168,11 @@ export const Hero = ({ className, ...props }: HeroProps) => {
 
         <motion.div
           className="mt-12"
-          variants={{
-            initial: {
-              scale: 0.2,
-              opacity: 0,
-            },
-            animate: {
-              scale: 1,
-              opacity: 1,
-              transition: {
-                ease: 'easeInOut',
-                delay: 0.5,
-                duration: 0.8,
-              },
-            },
-          }}
+          variants={HeroCarouselVariants}
           initial="initial"
           animate="animate"
         >
-          <Widget className="mt-12">
-            <strong>Documenso Supporter Pledge</strong>
-            <p className="w-full max-w-[70ch]">
-              Our mission is to create an open signing infrastructure that empowers the world,
-              enabling businesses to embrace openness, cooperation, and transparency. We believe
-              that signing, as a fundamental act, should embody these values. By offering an
-              open-source signing solution, we aim to make document signing accessible, transparent,
-              and trustworthy.
-            </p>
-
-            <p className="w-full max-w-[70ch]">
-              Through our platform, called Documenso, we strive to earn your trust by allowing
-              self-hosting and providing complete visibility into its inner workings. We value
-              inclusivity and foster an environment where diverse perspectives and contributions are
-              welcomed, even though we may not implement them all.
-            </p>
-
-            <p className="w-full max-w-[70ch]">
-              At Documenso, we envision a web-enabled future for business and contracts, and we are
-              committed to being the leading provider of open signing infrastructure. By combining
-              exceptional product design with open-source principles, we aim to deliver a robust and
-              well-designed application that exceeds your expectations.
-            </p>
-
-            <p className="w-full max-w-[70ch]">
-              We understand that exceptional products are born from exceptional communities, and we
-              invite you to join our open-source community. Your contributions, whether technical or
-              non-technical, will help shape the future of signing. Together, we can create a better
-              future for everyone.
-            </p>
-
-            <p className="w-full max-w-[70ch]">
-              Today we invite you to join us on this journey: By signing this mission statement you
-              signal your support of Documenso's mission{' '}
-              <span className="bg-primary text-black">
-                (in a non-legally binding, but heartfelt way)
-              </span>{' '}
-              and lock in the early adopter plan for forever, including everything we build this
-              year.
-            </p>
-
-            <div className="flex h-24 items-center">
-              <p className={cn('text-5xl [font-family:var(--font-caveat)]')}>Timur & Lucas</p>
-            </div>
-
-            <div>
-              <strong>Timur Ercan & Lucas Smith</strong>
-              <p className="mt-1">Co-Founders, Documenso</p>
-            </div>
-          </Widget>
+          <Carousel />
         </motion.div>
       </div>
     </motion.div>

apps/marketing/src/components/(marketing)/pricing-table.tsx

@@ -58,7 +58,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           >
             Yearly
             <div className="bg-muted text-foreground block rounded-full px-2 py-0.5 text-xs">
-              Save $60
+              Save $60 or $120
             </div>
             {period === 'YEARLY' && (
               <motion.div
@@ -75,7 +75,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           data-plan="free"
           className="bg-background shadow-foreground/5 flex flex-col items-center justify-center rounded-lg border px-8 py-12 shadow-lg"
         >
-          <p className="text-foreground text-4xl font-medium">Free Plan</p>
+          <p className="text-foreground text-4xl font-medium">Free</p>
           <p className="text-primary mt-2.5 text-xl font-medium">$0</p>
 
           <p className="text-foreground mt-4 max-w-[30ch] text-center">
@@ -102,10 +102,10 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
         </div>
 
         <div
-          data-plan="early-adopter"
-          className="border-primary bg-background shadow-foreground/5 flex flex-col items-center justify-center rounded-lg border-2 px-8 py-12 shadow-[0px_0px_0px_4px_#E3E3E380]"
+          data-plan="individual"
+          className="bg-background shadow-foreground/5 flex flex-col items-center justify-center rounded-lg border-2 px-8 py-12 shadow-[0px_0px_0px_4px_#E3E3E380]"
         >
-          <p className="text-foreground text-4xl font-medium">Early Adopters</p>
+          <p className="text-foreground text-4xl font-medium">Individual</p>
           <div className="text-primary mt-2.5 text-xl font-medium">
             <AnimatePresence mode="wait">
               {period === 'MONTHLY' && <motion.div layoutId="pricing">$30</motion.div>}
@@ -114,12 +114,12 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           </div>
 
           <p className="text-foreground mt-4 max-w-[30ch] text-center">
-            For fast-growing companies that aim to scale across multiple teams.
+            Everything you need for a great signing experience.
           </p>
 
           <Button className="mt-6 rounded-full text-base" asChild>
             <Link
-              href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=pricing-early-adopter`}
+              href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=pricing-individual-plan`}
               target="_blank"
             >
               Signup Now
@@ -127,51 +127,48 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           </Button>
 
           <div className="mt-8 flex w-full flex-col divide-y">
-            <p className="text-foreground py-4">
-              <a
-                href="https://documen.so/early-adopters-pricing-page"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Limited Time Offer: <span className="text-documenso-700">Read More</span>
-              </a>
-            </p>
-            <p className="text-foregro‚und py-4">Unlimited Teams</p>
-            <p className="text-foregro‚und py-4">Unlimited Users</p>
-            <p className="text-foregro‚und py-4">Unlimited Documents per month</p>
-            <p className="text-foreground py-4">Includes all upcoming features</p>
-            <p className="text-foreground py-4">Email, Discord and Slack assistance</p>
+            <p className="text-foreground py-4">Unlimited Documents per Month</p>
+            <p className="text-foreground py-4">API Accesss</p>
+            <p className="text-foreground py-4">Email and Discord Support</p>
+            <p className="text-foreground py-4">Premium Profile Name</p>
           </div>
           <div className="flex-1" />
         </div>
 
         <div
-          data-plan="enterprise"
-          className="bg-background shadow-foreground/5 flex flex-col items-center justify-center rounded-lg border px-8 py-12 shadow-lg"
+          data-plan="teams"
+          className="border-primary bg-background shadow-foreground/5 flex flex-col items-center justify-center rounded-lg border px-8 py-12 shadow-lg"
         >
-          <p className="text-foreground text-4xl font-medium">Enterprise</p>
-          <p className="text-primary mt-2.5 text-xl font-medium">Pricing on request</p>
+          <p className="text-foreground text-4xl font-medium">Teams</p>
+          <div className="text-primary mt-2.5 text-xl font-medium">
+            <AnimatePresence mode="wait">
+              {period === 'MONTHLY' && <motion.div layoutId="pricingTeams">$50</motion.div>}
+              {period === 'YEARLY' && <motion.div layoutId="pricingTeams">$480</motion.div>}
+            </AnimatePresence>
+          </div>
 
           <p className="text-foreground mt-4 max-w-[30ch] text-center">
-            For large organizations that need extra flexibility and control.
+            For companies looking to scale across multiple teams.
           </p>
 
-          <Link
-            href="https://dub.sh/enterprise"
-            target="_blank"
-            className="mt-6"
-            onClick={() => event('enterprise-contact')}
-          >
-            <Button className="rounded-full text-base">Contact Us</Button>
-          </Link>
+          <Button className="mt-6 rounded-full text-base" asChild>
+            <Link
+              href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=pricing-teams-plan`}
+              target="_blank"
+            >
+              Signup Now
+            </Link>
+          </Button>
 
           <div className="mt-8 flex w-full flex-col divide-y">
-            <p className="text-foreground py-4 font-medium">Everything in Early Adopters, plus:</p>
-            <p className="text-foreground py-4">Custom Subdomain</p>
-            <p className="text-foreground py-4">Compliance Check</p>
-            <p className="text-foreground py-4">Guaranteed Uptime</p>
-            <p className="text-foreground py-4">Reporting & Analysis</p>
-            <p className="text-foreground py-4">24/7 Support</p>
+            <p className="text-foreground py-4">Unlimited Documents per Month</p>
+            <p className="text-foreground py-4">API Accesss</p>
+            <p className="text-foreground py-4">Email and Discord Support</p>
+            <p className="text-foreground py-4 font-medium">Team Inbox</p>
+            <p className="text-foreground py-4">5 Users Included</p>
+            <p className="text-foreground py-4">
+              Add More Users for {period === 'MONTHLY' ? '$10/ mo.' : '$96/ yr.'}
+            </p>
           </div>
         </div>
       </div>

apps/marketing/src/components/(marketing)/share-connect-paid-widget-bento.tsx

@@ -70,7 +70,7 @@ export const ShareConnectPaidWidgetBento = ({
           <CardContent className="grid grid-cols-1 gap-8 p-6">
             <p className="text-foreground/80 leading-relaxed">
               <strong className="block">Get paid (Soon).</strong>
-              Integrated payments with stripe so you don’t have to worry about getting paid.
+              Integrated payments with Stripe so you don’t have to worry about getting paid.
             </p>
 
             <div className="flex items-center justify-center p-8">

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

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+type SlideProps = {
+  selected: boolean;
+  index: number;
+  onClick: () => void;
+  label: string;
+};
+
+export const Slide: React.FC<SlideProps> = (props) => {
+  const { selected, label, onClick } = props;
+
+  return (
+    <button
+      onClick={onClick}
+      type="button"
+      className={cn(
+        'text-muted-foreground dark:text-muted-foreground/60 border-b-2 border-transparent py-1 text-xs sm:py-4 sm:text-base',
+        {
+          'border-primary text-foreground dark:text-muted-foreground border-b-2': selected,
+        },
+      )}
+    >
+      {label}
+    </button>
+  );
+};

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

@@ -1,421 +0,0 @@
-'use client';
-
-import type { HTMLAttributes, KeyboardEvent } from 'react';
-import { useMemo, useState } from 'react';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { AnimatePresence, motion } from 'framer-motion';
-import { Loader } from 'lucide-react';
-import { usePlausible } from 'next-plausible';
-import { env } from 'next-runtime-env';
-import { Controller, useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@documenso/ui/primitives/dialog';
-import { Input } from '@documenso/ui/primitives/input';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { claimPlan } from '~/api/claim-plan/fetcher';
-
-import { STEP } from '../constants';
-import { FormErrorMessage } from '../form/form-error-message';
-
-const ZWidgetFormSchema = z
-  .object({
-    email: z.string().email({ message: 'Please enter a valid email address.' }),
-    name: z.string().trim().min(3, { message: 'Please enter a valid name.' }),
-  })
-  .and(
-    z.union([
-      z.object({
-        signatureDataUrl: z.string().min(1),
-        signatureText: z.null().or(z.string().max(0)),
-      }),
-      z.object({
-        signatureDataUrl: z.null().or(z.string().max(0)),
-        signatureText: z.string().trim().min(1),
-      }),
-    ]),
-  );
-
-export type TWidgetFormSchema = z.infer<typeof ZWidgetFormSchema>;
-
-type StepKeys = keyof typeof STEP;
-type StepValues = (typeof STEP)[StepKeys];
-
-export type WidgetProps = HTMLAttributes<HTMLDivElement>;
-
-export const Widget = ({ className, children, ...props }: WidgetProps) => {
-  const { toast } = useToast();
-  const event = usePlausible();
-
-  const [step, setStep] = useState<StepValues>(STEP.EMAIL);
-  const [showSigningDialog, setShowSigningDialog] = useState(false);
-  const [draftSignatureDataUrl, setDraftSignatureDataUrl] = useState<string | null>(null);
-
-  const {
-    control,
-    register,
-    handleSubmit,
-    setValue,
-    trigger,
-    watch,
-    formState: { errors, isSubmitting, isValid },
-  } = useForm<TWidgetFormSchema>({
-    mode: 'onChange',
-    defaultValues: {
-      email: '',
-      name: '',
-      signatureDataUrl: null,
-      signatureText: '',
-    },
-    resolver: zodResolver(ZWidgetFormSchema),
-  });
-
-  const signatureDataUrl = watch('signatureDataUrl');
-  const signatureText = watch('signatureText');
-
-  const stepsRemaining = useMemo(() => {
-    if (step === STEP.NAME) {
-      return 2;
-    }
-
-    if (step === STEP.EMAIL) {
-      return 3;
-    }
-
-    return 1;
-  }, [step]);
-
-  const onNextStepClick = () => {
-    if (step === STEP.EMAIL) {
-      setStep(STEP.NAME);
-
-      setTimeout(() => {
-        document.querySelector<HTMLElement>('#name')?.focus();
-      }, 0);
-    }
-
-    if (step === STEP.NAME) {
-      setStep(STEP.SIGN);
-
-      setTimeout(() => {
-        document.querySelector<HTMLElement>('#signatureText')?.focus();
-      }, 0);
-    }
-  };
-
-  const onEnterPress = (callback: () => void) => {
-    return (e: KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-
-        callback();
-      }
-    };
-  };
-
-  const onSignatureConfirmClick = () => {
-    setValue('signatureDataUrl', draftSignatureDataUrl);
-    setValue('signatureText', '');
-
-    void trigger('signatureDataUrl');
-    setShowSigningDialog(false);
-  };
-
-  const onFormSubmit = async ({
-    email,
-    name,
-    signatureDataUrl,
-    signatureText,
-  }: TWidgetFormSchema) => {
-    try {
-      const delay = new Promise<void>((resolve) => {
-        setTimeout(resolve, 1000);
-      });
-
-      const planId = env('NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID');
-
-      if (!planId) {
-        throw new Error('No plan ID found.');
-      }
-
-      const claimPlanInput = signatureDataUrl
-        ? {
-            name,
-            email,
-            planId,
-            signatureDataUrl: signatureDataUrl,
-            signatureText: null,
-          }
-        : {
-            name,
-            email,
-            planId,
-            signatureDataUrl: null,
-            signatureText: signatureText ?? '',
-          };
-
-      const [result] = await Promise.all([claimPlan(claimPlanInput), delay]);
-
-      event('claim-plan-widget');
-
-      window.location.href = result;
-    } catch (error) {
-      event('claim-plan-failed');
-
-      toast({
-        title: 'Something went wrong',
-        description: error instanceof Error ? error.message : 'Please try again later.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  return (
-    <>
-      <Card
-        className={cn('mx-auto w-full max-w-4xl rounded-3xl before:rounded-3xl', className)}
-        gradient
-        {...props}
-      >
-        <div className="grid grid-cols-12 gap-y-8 overflow-hidden p-2 lg:gap-x-8">
-          <div className="text-muted-foreground col-span-12 flex flex-col gap-y-4 p-4 text-xs leading-relaxed lg:col-span-7">
-            {children}
-          </div>
-
-          <form
-            className="bg-foreground/5 col-span-12 flex flex-col rounded-2xl p-6 lg:col-span-5"
-            onSubmit={handleSubmit(onFormSubmit)}
-          >
-            <h3 className="text-xl font-semibold">Sign up to Early Adopter Plan</h3>
-            <p className="text-muted-foreground mt-2 text-xs">
-              with Timur Ercan & Lucas Smith from Documenso
-            </p>
-
-            <hr className="mb-6 mt-4" />
-
-            <AnimatePresence>
-              <motion.div key="email">
-                <label htmlFor="email" className="text-foreground font-medium ">
-                  What’s your email?
-                </label>
-
-                <Controller
-                  control={control}
-                  name="email"
-                  render={({ field }) => (
-                    <div className="relative mt-2">
-                      <Input
-                        id="email"
-                        type="email"
-                        placeholder="your@example.com"
-                        className="bg-background w-full pr-16"
-                        disabled={isSubmitting}
-                        onKeyDown={(e) =>
-                          field.value !== '' &&
-                          !errors.email?.message &&
-                          onEnterPress(onNextStepClick)(e)
-                        }
-                        {...field}
-                      />
-
-                      <div className="absolute inset-y-0 right-0 p-1.5">
-                        <Button
-                          type="button"
-                          className="bg-primary h-full w-14 rounded"
-                          disabled={!field.value || !!errors.email?.message}
-                          onClick={() => step === STEP.EMAIL && onNextStepClick()}
-                        >
-                          Next
-                        </Button>
-                      </div>
-                    </div>
-                  )}
-                />
-
-                <FormErrorMessage error={errors.email} className="mt-1" />
-              </motion.div>
-
-              {(step === STEP.NAME || step === STEP.SIGN) && (
-                <motion.div
-                  key="name"
-                  className="mt-4"
-                  animate={{
-                    opacity: 1,
-                    transform: 'translateX(0)',
-                  }}
-                  initial={{
-                    opacity: 0,
-                    transform: 'translateX(-25%)',
-                  }}
-                  exit={{
-                    opacity: 0,
-                    transform: 'translateX(25%)',
-                  }}
-                >
-                  <label htmlFor="name" className="text-foreground font-medium ">
-                    And your name?
-                  </label>
-
-                  <Controller
-                    control={control}
-                    name="name"
-                    render={({ field }) => (
-                      <div className="relative mt-2">
-                        <Input
-                          id="name"
-                          type="text"
-                          placeholder=""
-                          className="bg-background w-full pr-16"
-                          disabled={isSubmitting}
-                          onKeyDown={(e) =>
-                            field.value !== '' &&
-                            !errors.name?.message &&
-                            onEnterPress(onNextStepClick)(e)
-                          }
-                          {...field}
-                        />
-
-                        <div className="absolute inset-y-0 right-0 p-1.5">
-                          <Button
-                            type="button"
-                            className="bg-primary h-full w-14 rounded"
-                            disabled={!field.value || !!errors.name?.message}
-                            onClick={() => onNextStepClick()}
-                          >
-                            Next
-                          </Button>
-                        </div>
-                      </div>
-                    )}
-                  />
-
-                  <FormErrorMessage error={errors.name} className="mt-1" />
-                </motion.div>
-              )}
-            </AnimatePresence>
-
-            <div className="mt-12 flex-1" />
-
-            <div className="flex items-center justify-between">
-              <p className="text-muted-foreground text-xs">
-                {isValid ? 'Ready for Signing' : `${stepsRemaining} step(s) until signed`}
-              </p>
-
-              <p className="text-muted-foreground block text-xs md:hidden">Minimise contract</p>
-            </div>
-
-            <div className="bg-background relative mt-2.5 h-[2px] w-full">
-              <div
-                className={cn('bg-primary/60 absolute inset-y-0 left-0 duration-200', {
-                  'w-1/3': stepsRemaining === 3,
-                  'w-2/3': stepsRemaining === 2,
-                  'w-11/12': stepsRemaining === 1,
-                  'w-full': isValid,
-                })}
-              />
-            </div>
-
-            <Card id="signature" className="mt-4" degrees={-140} gradient>
-              <CardContent
-                role="button"
-                className="relative cursor-pointer pt-6"
-                onClick={() => setShowSigningDialog(true)}
-              >
-                <div className="flex h-28 items-center justify-center pb-6">
-                  {!signatureText && signatureDataUrl && (
-                    <img
-                      src={signatureDataUrl}
-                      alt="user signature"
-                      className="h-full dark:invert"
-                    />
-                  )}
-
-                  {signatureText && (
-                    <p
-                      className={cn(
-                        'text-foreground truncate text-4xl font-semibold [font-family:var(--font-caveat)]',
-                      )}
-                    >
-                      {signatureText}
-                    </p>
-                  )}
-                </div>
-
-                <div
-                  className="absolute inset-x-0 bottom-0 flex cursor-auto items-center justify-between px-4 pb-2"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <Input
-                    id="signatureText"
-                    className="text-foreground placeholder:text-muted-foreground truncate border-none p-0 text-sm focus-visible:ring-0"
-                    placeholder="Draw or type name here"
-                    disabled={isSubmitting}
-                    {...register('signatureText', {
-                      onChange: (e) => {
-                        if (e.target.value !== '') {
-                          setValue('signatureDataUrl', null);
-                        }
-                      },
-                    })}
-                  />
-
-                  <Button
-                    type="submit"
-                    className="disabled:bg-muted disabled:text-muted-foreground disabled:hover:bg-muted h-8"
-                    disabled={!isValid || isSubmitting}
-                  >
-                    {isSubmitting && <Loader className="mr-2 h-4 w-4 animate-spin" />}
-                    Sign
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-          </form>
-        </div>
-      </Card>
-
-      <Dialog open={showSigningDialog} onOpenChange={setShowSigningDialog}>
-        <DialogContent position="center">
-          <DialogHeader>
-            <DialogTitle>Add your signature</DialogTitle>
-          </DialogHeader>
-
-          <DialogDescription>
-            By signing you signal your support of Documenso's mission in a <br></br>
-            <strong>non-legally binding, but heartfelt way</strong>. <br></br>
-            <br></br>You also unlock the option to purchase the early supporter plan including
-            everything we build this year for fixed price.
-          </DialogDescription>
-
-          <SignaturePad
-            disabled={isSubmitting}
-            className="aspect-video w-full rounded-md border"
-            defaultValue={signatureDataUrl || ''}
-            onChange={setDraftSignatureDataUrl}
-          />
-
-          <DialogFooter>
-            <Button variant="ghost" onClick={() => setShowSigningDialog(false)}>
-              Cancel
-            </Button>
-
-            <Button onClick={() => onSignatureConfirmClick()}>Confirm</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-};

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

@@ -13,6 +13,7 @@ import { updateFile } from '@documenso/lib/universal/upload/update-file';
 import { prisma } from '@documenso/prisma';
 import {
   DocumentDataType,
+  DocumentSource,
   DocumentStatus,
   FieldType,
   ReadStatus,
@@ -104,6 +105,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
       const document = await prisma.document.create({
         data: {
+          source: DocumentSource.DOCUMENT,
           title: 'Documenso Supporter Pledge.pdf',
           status: DocumentStatus.COMPLETED,
           userId: user.id,

apps/web/next.config.js

@@ -18,6 +18,10 @@ const FONT_CAVEAT_BYTES = fs.readFileSync(
   path.join(__dirname, '../../packages/assets/fonts/caveat.ttf'),
 );
 
+const FONT_NOTO_SANS_BYTES = fs.readFileSync(
+  path.join(__dirname, '../../packages/assets/fonts/noto-sans.ttf'),
+);
+
 /** @type {import('next').NextConfig} */
 const config = {
   output: process.env.DOCKER_OUTPUT ? 'standalone' : undefined,
@@ -42,6 +46,7 @@ const config = {
     APP_VERSION: version,
     NEXT_PUBLIC_PROJECT: 'web',
     FONT_CAVEAT_URI: `data:font/ttf;base64,${FONT_CAVEAT_BYTES.toString('base64')}`,
+    FONT_NOTO_SANS_URI: `data:font/ttf;base64,${FONT_NOTO_SANS_BYTES.toString('base64')}`,
   },
   modularizeImports: {
     'lucide-react': {

apps/web/package.json

@@ -28,6 +28,7 @@
     "cookie-es": "^1.0.0",
     "formidable": "^2.1.1",
     "framer-motion": "^10.12.8",
+    "input-otp": "^1.2.4",
     "lucide-react": "^0.279.0",
     "luxon": "^3.4.0",
     "micro": "^10.0.1",
@@ -47,8 +48,9 @@
     "react-hotkeys-hook": "^4.4.1",
     "react-icons": "^4.11.0",
     "react-rnd": "^10.4.1",
+    "recharts": "^2.7.2",
     "remeda": "^1.27.1",
-    "sharp": "^0.33.1",
+    "sharp": "0.32.6",
     "ts-pattern": "^5.0.5",
     "ua-parser-js": "^1.0.37",
     "uqr": "^0.1.2",
@@ -74,4 +76,4 @@
       "next": "$next"
     }
   }
-}
+}

apps/web/process-env.d.ts

@@ -12,5 +12,9 @@ declare namespace NodeJS {
 
     NEXT_PRIVATE_GOOGLE_CLIENT_ID: string;
     NEXT_PRIVATE_GOOGLE_CLIENT_SECRET: string;
+
+    NEXT_PRIVATE_OIDC_WELL_KNOWN: string;
+    NEXT_PRIVATE_OIDC_CLIENT_ID: string;
+    NEXT_PRIVATE_OIDC_CLIENT_SECRET: string;
   }
 }

apps/web/public/static/early-supporter-badge.svg

@@ -0,0 +1,33 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1080_12656)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.56772 0.890928C9.5882 -0.296974 11.4118 -0.296978 12.4323 0.890927L13.2272 1.81624C13.3589 1.96964 13.5596 2.0435 13.758 2.01166L14.955 1.81961C16.4917 1.57307 17.8887 2.75864 17.9154 4.33206L17.9363 5.55768C17.9398 5.76086 18.0465 5.94788 18.2188 6.0525L19.2578 6.68358C20.5916 7.49375 20.9083 9.31015 19.9288 10.5329L19.1659 11.4853C19.0394 11.6432 19.0023 11.8559 19.0678 12.048L19.4627 13.2069C19.9696 14.6947 19.0578 16.292 17.5304 16.5919L16.3406 16.8255C16.1434 16.8643 15.9798 17.0031 15.9079 17.1928L15.4738 18.3373C14.9166 19.8066 13.203 20.4374 11.8423 19.6741L10.7825 19.0796C10.6068 18.981 10.3932 18.981 10.2175 19.0796L9.15768 19.6741C7.79704 20.4374 6.08341 19.8066 5.52618 18.3373L5.09212 17.1928C5.02017 17.0031 4.8566 16.8643 4.65937 16.8255L3.46962 16.5919C1.94224 16.292 1.03044 14.6947 1.53734 13.2069L1.93219 12.048C1.99765 11.8559 1.96057 11.6432 1.8341 11.4853L1.07116 10.5329C0.0917119 9.31015 0.408373 7.49375 1.74223 6.68358L2.78123 6.0525C2.95348 5.94788 3.06024 5.76086 3.0637 5.55768L3.08456 4.33206C3.11133 2.75864 4.50829 1.57307 6.04498 1.81961L7.24197 2.01166C7.4404 2.0435 7.64105 1.96964 7.77282 1.81624L8.56772 0.890928Z" fill="url(#paint0_linear_1080_12656)"/>
+<g filter="url(#filter0_di_1080_12656)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3714 14.5609C13.5195 14.6358 13.6925 14.5149 13.6642 14.3563L13.1163 11.2805L15.4388 9.10299C15.5586 8.9907 15.4925 8.79506 15.327 8.77192L12.1176 8.32508L10.681 5.52519C10.6069 5.38093 10.3931 5.38093 10.319 5.52519L8.88116 8.32354L5.673 8.77192C5.50748 8.79506 5.44139 8.9907 5.56116 9.10299L7.8843 11.2803L7.33579 14.3563C7.30752 14.5149 7.48055 14.6358 7.62859 14.5609L10.5014 13.1083L13.3714 14.5609Z" fill="#FFFCEB"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_di_1080_12656" x="5.33521" y="5.41699" width="10.6591" height="9.90853" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.164785" dy="0.411963"/>
+<feGaussianBlur stdDeviation="0.164785"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.414307 0 0 0 0 0.24341 0 0 0 0 0.0856598 0 0 0 0.1 0"/>
+<feBlend mode="plus-darker" in2="BackgroundImageFix" result="effect1_dropShadow_1080_12656"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1080_12656" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.164785" dy="0.164785"/>
+<feGaussianBlur stdDeviation="0.0823927"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0"/>
+<feBlend mode="screen" in2="shape" result="effect2_innerShadow_1080_12656"/>
+</filter>
+<linearGradient id="paint0_linear_1080_12656" x1="12.5596" y1="-9.0568e-08" x2="6.25112" y2="19.9592" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFE76A"/>
+<stop offset="1" stop-color="#E8C445"/>
+</linearGradient>
+<clipPath id="clip0_1080_12656">
+<rect width="20" height="20" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>

apps/web/public/static/premium-user-badge.svg

@@ -0,0 +1,9 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.54474 0.890944C9.57689 -0.296979 11.4213 -0.296983 12.4535 0.890943L13.2575 1.81628C13.3908 1.96967 13.5937 2.04354 13.7944 2.0117L15.0051 1.81965C16.5593 1.57309 17.9723 2.75869 17.9994 4.33214L18.0205 5.55778C18.024 5.76096 18.1319 5.94799 18.3061 6.05261L19.357 6.6837C20.7061 7.49389 21.0264 9.31032 20.0358 10.5331L19.2641 11.4855C19.1362 11.6434 19.0987 11.8561 19.1649 12.0482L19.5643 13.2072C20.077 14.695 19.1547 16.2923 17.6099 16.5922L16.4065 16.8258C16.207 16.8646 16.0416 17.0034 15.9688 17.1931L15.5298 18.3376C14.9662 19.8069 13.233 20.4378 11.8568 19.6745L10.7848 19.08C10.6071 18.9814 10.3911 18.9814 10.2134 19.08L9.14145 19.6745C7.76525 20.4378 6.03203 19.8069 5.46842 18.3376L5.0294 17.1931C4.95662 17.0034 4.79119 16.8646 4.5917 16.8258L3.38834 16.5922C1.8435 16.2923 0.921268 14.695 1.43397 13.2072L1.83334 12.0482C1.89954 11.8561 1.86204 11.6434 1.73412 11.4855L0.962455 10.5331C-0.0281913 9.31032 0.292091 7.49389 1.6412 6.6837L2.69209 6.05261C2.8663 5.94799 2.97428 5.76096 2.97778 5.55778L2.99888 4.33214C3.02596 2.75869 4.4389 1.57309 5.99315 1.81965L7.20383 2.0117C7.40454 2.04354 7.60747 1.96967 7.74076 1.81628L8.54474 0.890944ZM13.7062 9.20711C14.0968 8.81658 14.0968 8.18342 13.7062 7.79289C13.3157 7.40237 12.6825 7.40237 12.292 7.79289L9.49912 10.5858L8.70622 9.79289C8.3157 9.40237 7.68253 9.40237 7.29201 9.79289C6.90148 10.1834 6.90148 10.8166 7.29201 11.2071L8.43846 12.3536C9.02425 12.9393 9.97399 12.9393 10.5598 12.3536L13.7062 9.20711Z" fill="url(#paint0_linear_1080_12647)"/>
+<defs>
+<linearGradient id="paint0_linear_1080_12647" x1="12.5823" y1="-9.05696e-08" x2="6.33214" y2="20.0004" gradientUnits="userSpaceOnUse">
+<stop stop-color="#96D766"/>
+<stop offset="1" stop-color="#5AAE30"/>
+</linearGradient>
+</defs>
+</svg>

apps/web/src/app/(dashboard)/admin/documents/[id]/admin-actions.tsx

@@ -2,7 +2,8 @@
 
 import Link from 'next/link';
 
-import { type Document, DocumentStatus } from '@documenso/prisma/client';
+import type { Recipient } from '@documenso/prisma/client';
+import { type Document, SigningStatus } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -17,9 +18,10 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 export type AdminActionsProps = {
   className?: string;
   document: Document;
+  recipients: Recipient[];
 };
 
-export const AdminActions = ({ className, document }: AdminActionsProps) => {
+export const AdminActions = ({ className, document, recipients }: AdminActionsProps) => {
   const { toast } = useToast();
 
   const { mutate: resealDocument, isLoading: isResealDocumentLoading } =
@@ -47,7 +49,9 @@ export const AdminActions = ({ className, document }: AdminActionsProps) => {
             <Button
               variant="outline"
               loading={isResealDocumentLoading}
-              disabled={document.status !== DocumentStatus.COMPLETED}
+              disabled={recipients.some(
+                (recipient) => recipient.signingStatus !== SigningStatus.SIGNED,
+              )}
               onClick={() => resealDocument({ id: document.id })}
             >
               Reseal document

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

@@ -53,7 +53,7 @@ export default async function AdminDocumentDetailsPage({ params }: AdminDocument
 
       <h2 className="text-lg font-semibold">Admin Actions</h2>
 
-      <AdminActions className="mt-2" document={document} />
+      <AdminActions className="mt-2" document={document} recipients={document.Recipient} />
 
       <hr className="my-4" />
       <h2 className="text-lg font-semibold">Recipients</h2>

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

@@ -14,18 +14,34 @@ import {
 import { getDocumentStats } from '@documenso/lib/server-only/admin/get-documents-stats';
 import { getRecipientsStats } from '@documenso/lib/server-only/admin/get-recipients-stats';
 import {
+  getUserWithAtLeastOneDocumentPerMonth,
+  getUserWithAtLeastOneDocumentSignedPerMonth,
+  getUserWithSignedDocumentMonthlyGrowth,
   getUsersCount,
   getUsersWithSubscriptionsCount,
 } from '@documenso/lib/server-only/admin/get-users-stats';
 
 import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
 
+import { UserWithDocumentChart } from './user-with-document';
+
 export default async function AdminStatsPage() {
-  const [usersCount, usersWithSubscriptionsCount, docStats, recipientStats] = await Promise.all([
+  const [
+    usersCount,
+    usersWithSubscriptionsCount,
+    docStats,
+    recipientStats,
+    userWithAtLeastOneDocumentPerMonth,
+    userWithAtLeastOneDocumentSignedPerMonth,
+    MONTHLY_USERS_SIGNED,
+  ] = await Promise.all([
     getUsersCount(),
     getUsersWithSubscriptionsCount(),
     getDocumentStats(),
     getRecipientsStats(),
+    getUserWithAtLeastOneDocumentPerMonth(),
+    getUserWithAtLeastOneDocumentSignedPerMonth(),
+    getUserWithSignedDocumentMonthlyGrowth(),
   ]);
 
   return (
@@ -43,12 +59,11 @@ export default async function AdminStatsPage() {
         <CardMetric icon={UserPlus2} title="App Version" value={`v${process.env.APP_VERSION}`} />
       </div>
 
-      <div className="mt-16 grid grid-cols-1 gap-8 md:grid-cols-1 lg:grid-cols-2">
+      <div className="mt-16 gap-8">
         <div>
           <h3 className="text-3xl font-semibold">Document metrics</h3>
 
-          <div className="mt-8 grid flex-1 grid-cols-2 gap-4">
-            <CardMetric icon={File} title="Total Documents" value={docStats.ALL} />
+          <div className="mb-8 mt-4 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2">
             <CardMetric icon={FileEdit} title="Drafted Documents" value={docStats.DRAFT} />
             <CardMetric icon={FileClock} title="Pending Documents" value={docStats.PENDING} />
             <CardMetric icon={FileCheck} title="Completed Documents" value={docStats.COMPLETED} />
@@ -58,7 +73,7 @@ export default async function AdminStatsPage() {
         <div>
           <h3 className="text-3xl font-semibold">Recipients metrics</h3>
 
-          <div className="mt-8 grid flex-1 grid-cols-2 gap-4">
+          <div className="mb-8 mt-4 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2">
             <CardMetric
               icon={UserSquare2}
               title="Total Recipients"
@@ -70,6 +85,23 @@ export default async function AdminStatsPage() {
           </div>
         </div>
       </div>
+
+      <div className="mt-16">
+        <h3 className="text-3xl font-semibold">Charts</h3>
+        <div className="mt-5 grid grid-cols-2 gap-10">
+          <UserWithDocumentChart
+            data={MONTHLY_USERS_SIGNED}
+            title="MAU (created document)"
+            tooltip="Monthly Active Users: Users that created at least one Document"
+          />
+          <UserWithDocumentChart
+            data={MONTHLY_USERS_SIGNED}
+            completed
+            title="MAU (had document completed)"
+            tooltip="Monthly Active Users: Users that had at least one of their documents completed"
+          />
+        </div>
+      </div>
     </div>
   );
 }

apps/web/src/app/(dashboard)/admin/stats/user-with-document.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import type { TooltipProps } from 'recharts';
+import type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
+
+import type { GetUserWithDocumentMonthlyGrowth } from '@documenso/lib/server-only/admin/get-users-stats';
+
+export type UserWithDocumentChartProps = {
+  className?: string;
+  title: string;
+  data: GetUserWithDocumentMonthlyGrowth;
+  completed?: boolean;
+  tooltip?: string;
+};
+
+const CustomTooltip = ({
+  active,
+  payload,
+  label,
+  tooltip,
+}: TooltipProps<ValueType, NameType> & { tooltip?: string }) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="z-100 w-60 space-y-1 rounded-md border border-solid  bg-white p-2 px-3">
+        <p className="">{label}</p>
+        <p className="text-documenso">
+          {`${tooltip} : `}
+          <span className="text-black">{payload[0].value}</span>
+        </p>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export const UserWithDocumentChart = ({
+  className,
+  data,
+  title,
+  completed = false,
+  tooltip,
+}: UserWithDocumentChartProps) => {
+  const formattedData = (data: GetUserWithDocumentMonthlyGrowth, completed: boolean) => {
+    return [...data].reverse().map(({ month, count, signed_count }) => {
+      const formattedMonth = DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL');
+      if (completed) {
+        return {
+          month: formattedMonth,
+          count: Number(signed_count),
+        };
+      } else {
+        return {
+          month: formattedMonth,
+          count: Number(count),
+        };
+      }
+    });
+  };
+
+  return (
+    <div className={className}>
+      <div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2">
+        <div className="mb-6 flex h-12 px-4">
+          <h3 className="text-lg font-semibold">{title}</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart className="bg-white" data={formattedData(data, completed)}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              content={<CustomTooltip tooltip={tooltip} />}
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label={tooltip}
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

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

@@ -19,7 +19,7 @@ export default async function AdminManageUsers({ searchParams = {} }: AdminManag
 
   const [{ users, totalPages }, individualPrices] = await Promise.all([
     search(searchString, page, perPage),
-    getPricesByPlan(STRIPE_PLAN_TYPE.COMMUNITY).catch(() => []),
+    getPricesByPlan([STRIPE_PLAN_TYPE.REGULAR, STRIPE_PLAN_TYPE.COMMUNITY]).catch(() => []),
   ]);
 
   const individualPriceIds = individualPrices.map((price) => price.id);

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

@@ -8,7 +8,7 @@ import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
 import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
-import { getCompletedFieldsForDocument } from '@documenso/lib/server-only/field/get-completed-fields-for-document';
+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 { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
@@ -86,14 +86,15 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
     documentMeta.password = securePassword;
   }
 
-  const [recipients, completedFields] = await Promise.all([
+  const [recipients, fields] = await Promise.all([
     getRecipientsForDocument({
       documentId,
       teamId: team?.id,
       userId: user.id,
     }),
-    getCompletedFieldsForDocument({
+    getFieldsForDocument({
       documentId,
+      userId: user.id,
     }),
   ]);
 
@@ -163,10 +164,7 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
         </Card>
 
         {document.status === DocumentStatus.PENDING && (
-          <DocumentReadOnlyFields
-            fields={completedFields}
-            documentMeta={document.documentMeta || undefined}
-          />
+          <DocumentReadOnlyFields fields={fields} documentMeta={documentMeta || undefined} />
         )}
 
         <div className="col-span-12 lg:col-span-6 xl:col-span-5">

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

@@ -332,6 +332,7 @@ export const EditDocumentForm = ({
               isDocumentPdfLoaded={isDocumentPdfLoaded}
               onSubmit={onAddSettingsFormSubmit}
             />
+
             <AddSignersFormPartial
               key={recipients.length}
               documentFlow={documentFlow.signers}

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

@@ -36,11 +36,6 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
 
   const { user } = await getRequiredServerComponentSession();
 
-  const isDocumentEnterprise = await isUserEnterprise({
-    userId: user.id,
-    teamId: team?.id,
-  });
-
   const document = await getDocumentWithDetailsById({
     id: documentId,
     userId: user.id,
@@ -74,6 +69,11 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
     documentMeta.password = securePassword;
   }
 
+  const isDocumentEnterprise = await isUserEnterprise({
+    userId: user.id,
+    teamId: team?.id,
+  });
+
   return (
     <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
       <Link href={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">

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

@@ -3,6 +3,7 @@
 import { useTransition } from 'react';
 
 import { Loader } from 'lucide-react';
+import { DateTime } from 'luxon';
 import { useSession } from 'next-auth/react';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
@@ -62,7 +63,12 @@ export const DocumentsDataTable = ({
           {
             header: 'Created',
             accessorKey: 'createdAt',
-            cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+            cell: ({ row }) => (
+              <LocaleDate
+                date={row.original.createdAt}
+                format={{ ...DateTime.DATETIME_SHORT, hourCycle: 'h12' }}
+              />
+            ),
           },
           {
             header: 'Title',

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

@@ -39,7 +39,7 @@ export default async function BillingSettingsPage() {
 
   const [subscriptions, prices, primaryAccountPlanPrices] = await Promise.all([
     getSubscriptionsByUserId({ userId: user.id }),
-    getPricesByInterval({ plan: STRIPE_PLAN_TYPE.COMMUNITY }),
+    getPricesByInterval({ plan: STRIPE_PLAN_TYPE.REGULAR }),
     getPrimaryAccountPlanPrices(),
   ]);
 

apps/web/src/app/(dashboard)/settings/profile/claim-profile-alert-dialog.tsx

@@ -1,46 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import type { User } from '@documenso/prisma/client';
-import { cn } from '@documenso/ui/lib/utils';
-import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
-
-import { ClaimPublicProfileDialogForm } from '~/components/forms/public-profile-claim-dialog';
-
-export type ClaimProfileAlertDialogProps = {
-  className?: string;
-  user: User;
-};
-
-export const ClaimProfileAlertDialog = ({ className, user }: ClaimProfileAlertDialogProps) => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <Alert
-        className={cn(
-          'flex flex-col items-center justify-between gap-4 p-6 md:flex-row',
-          className,
-        )}
-        variant="neutral"
-      >
-        <div>
-          <AlertTitle>{user.url ? 'Update your profile' : 'Claim your profile'}</AlertTitle>
-          <AlertDescription className="mr-2">
-            {user.url
-              ? 'Profiles are coming soon! Update your profile username to reserve your corner of the signing revolution.'
-              : 'Profiles are coming soon! Claim your profile username now to reserve your corner of the signing revolution.'}
-          </AlertDescription>
-        </div>
-
-        <div className="flex-shrink-0">
-          <Button onClick={() => setOpen(true)}>{user.url ? 'Update Now' : 'Claim Now'}</Button>
-        </div>
-      </Alert>
-
-      <ClaimPublicProfileDialogForm open={open} onOpenChange={setOpen} user={user} />
-    </>
-  );
-};

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

@@ -3,9 +3,9 @@ import type { Metadata } from 'next';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+import { AvatarImageForm } from '~/components/forms/avatar-image';
 import { ProfileForm } from '~/components/forms/profile';
 
-import { ClaimProfileAlertDialog } from './claim-profile-alert-dialog';
 import { DeleteAccountDialog } from './delete-account-dialog';
 
 export const metadata: Metadata = {
@@ -19,10 +19,9 @@ export default async function ProfileSettingsPage() {
     <div>
       <SettingsHeader title="Profile" subtitle="Here you can edit your personal details." />
 
+      <AvatarImageForm className="mb-8 max-w-xl" user={user} />
       <ProfileForm className="mb-8 max-w-xl" user={user} />
 
-      <ClaimProfileAlertDialog className="max-w-xl" user={user} />
-
       <hr className="my-4 max-w-xl" />
 
       <DeleteAccountDialog className="max-w-xl" user={user} />

apps/web/src/app/(dashboard)/settings/public-profile/page.tsx

@@ -0,0 +1,14 @@
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getUserPublicProfile } from '@documenso/lib/server-only/user/get-user-public-profile';
+
+import { PublicProfilePageView } from './public-profile-page-view';
+
+export default async function Page() {
+  const { user } = await getRequiredServerComponentSession();
+
+  const { profile } = await getUserPublicProfile({
+    userId: user.id,
+  });
+
+  return <PublicProfilePageView user={user} profile={profile} />;
+}

apps/web/src/app/(dashboard)/settings/public-profile/public-profile-page-view.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+
+import type { FindTemplateRow } from '@documenso/lib/server-only/template/find-templates';
+import type {
+  Team,
+  TeamProfile,
+  TemplateDirectLink,
+  User,
+  UserProfile,
+} from '@documenso/prisma/client';
+import { TemplateType } 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 { Switch } from '@documenso/ui/primitives/switch';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+import type { TPublicProfileFormSchema } from '~/components/forms/public-profile-form';
+import { PublicProfileForm } from '~/components/forms/public-profile-form';
+import { ManagePublicTemplateDialog } from '~/components/templates/manage-public-template-dialog';
+
+import { PublicTemplatesDataTable } from './public-templates-data-table';
+
+export type PublicProfilePageViewOptions = {
+  user: User;
+  team?: Team;
+  profile: UserProfile | TeamProfile;
+};
+
+type DirectTemplate = FindTemplateRow & {
+  directLink: Pick<TemplateDirectLink, 'token' | 'enabled'>;
+};
+
+const userProfileText = {
+  settingsTitle: 'Public Profile',
+  settingsSubtitle: 'You can choose to enable or disable your profile for public view.',
+  templatesTitle: 'My templates',
+  templatesSubtitle:
+    'Show templates in your public profile for your audience to sign and get started quickly',
+};
+
+const teamProfileText = {
+  settingsTitle: 'Team Public Profile',
+  settingsSubtitle: 'You can choose to enable or disable your team profile for public view.',
+  templatesTitle: 'Team templates',
+  templatesSubtitle:
+    'Show templates in your team public profile for your audience to sign and get started quickly',
+};
+
+export const PublicProfilePageView = ({ user, team, profile }: PublicProfilePageViewOptions) => {
+  const { toast } = useToast();
+
+  const [isPublicProfileVisible, setIsPublicProfileVisible] = useState(profile.enabled);
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+
+  const { data } = trpc.template.findTemplates.useQuery({
+    perPage: 100,
+    teamId: team?.id,
+  });
+
+  const { mutateAsync: updateUserProfile, isLoading: isUpdatingUserProfile } =
+    trpc.profile.updatePublicProfile.useMutation();
+
+  const { mutateAsync: updateTeamProfile, isLoading: isUpdatingTeamProfile } =
+    trpc.team.updateTeamPublicProfile.useMutation();
+
+  const isUpdating = isUpdatingUserProfile || isUpdatingTeamProfile;
+  const profileText = team ? teamProfileText : userProfileText;
+
+  const enabledPrivateDirectTemplates = useMemo(
+    () =>
+      (data?.templates ?? []).filter(
+        (template): template is DirectTemplate =>
+          template.directLink?.enabled === true && template.type !== TemplateType.PUBLIC,
+      ),
+    [data],
+  );
+
+  const onProfileUpdate = async (data: TPublicProfileFormSchema) => {
+    if (team) {
+      await updateTeamProfile({
+        teamId: team.id,
+        ...data,
+      });
+    } else {
+      await updateUserProfile(data);
+    }
+
+    if (data.enabled === undefined && !isPublicProfileVisible) {
+      setIsTooltipOpen(true);
+    }
+  };
+
+  const togglePublicProfileVisibility = async (isVisible: boolean) => {
+    setIsTooltipOpen(false);
+
+    if (isUpdating) {
+      return;
+    }
+
+    if (isVisible && !user.url) {
+      toast({
+        title: 'You must set a profile URL before enabling your public profile.',
+        variant: 'destructive',
+      });
+
+      return;
+    }
+
+    setIsPublicProfileVisible(isVisible);
+
+    try {
+      await onProfileUpdate({
+        enabled: isVisible,
+      });
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'We were unable to set your public profile to public. Please try again.',
+        variant: 'destructive',
+      });
+
+      setIsPublicProfileVisible(!isVisible);
+    }
+  };
+
+  useEffect(() => {
+    setIsPublicProfileVisible(profile.enabled);
+  }, [profile.enabled]);
+
+  return (
+    <div className="max-w-2xl">
+      <SettingsHeader title={profileText.settingsTitle} subtitle={profileText.settingsSubtitle}>
+        <Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                'text-muted-foreground/50 flex flex-row items-center justify-center space-x-2 text-xs',
+                {
+                  '[&>*:first-child]:text-muted-foreground': !isPublicProfileVisible,
+                  '[&>*:last-child]:text-muted-foreground': isPublicProfileVisible,
+                },
+              )}
+            >
+              <span>Hide</span>
+              <Switch
+                disabled={isUpdating}
+                checked={isPublicProfileVisible}
+                onCheckedChange={togglePublicProfileVisibility}
+              />
+              <span>Show</span>
+            </div>
+          </TooltipTrigger>
+
+          <TooltipContent className="text-muted-foreground max-w-[40ch] space-y-2 py-2">
+            {isPublicProfileVisible ? (
+              <>
+                <p>
+                  Profile is currently <strong>visible</strong>.
+                </p>
+
+                <p>Toggle the switch to hide your profile from the public.</p>
+              </>
+            ) : (
+              <>
+                <p>
+                  Profile is currently <strong>hidden</strong>.
+                </p>
+
+                <p>Toggle the switch to show your profile to the public.</p>
+              </>
+            )}
+          </TooltipContent>
+        </Tooltip>
+      </SettingsHeader>
+
+      <PublicProfileForm
+        profileUrl={team ? team.url : user.url}
+        teamUrl={team?.url}
+        profile={profile}
+        onProfileUpdate={onProfileUpdate}
+      />
+
+      <div className="mt-4">
+        <SettingsHeader
+          title={profileText.templatesTitle}
+          subtitle={profileText.templatesSubtitle}
+          hideDivider={true}
+          className="mt-8 [&>*>h3]:text-base"
+        >
+          <ManagePublicTemplateDialog
+            directTemplates={enabledPrivateDirectTemplates}
+            trigger={<Button variant="outline">Link template</Button>}
+          />
+        </SettingsHeader>
+
+        <div className="mt-6">
+          <PublicTemplatesDataTable />
+        </div>
+      </div>
+    </div>
+  );
+};

apps/web/src/app/(dashboard)/settings/public-profile/public-templates-data-table.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { EditIcon, FileIcon, LinkIcon, MoreHorizontalIcon, Trash2Icon } from 'lucide-react';
+
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import type { FindTemplateRow } from '@documenso/lib/server-only/template/find-templates';
+import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
+import type { TemplateDirectLink } from '@documenso/prisma/client';
+import { TemplateType } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { ManagePublicTemplateDialog } from '~/components/templates/manage-public-template-dialog';
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+type DirectTemplate = FindTemplateRow & {
+  directLink: Pick<TemplateDirectLink, 'token' | 'enabled'>;
+};
+
+export const PublicTemplatesDataTable = () => {
+  const team = useOptionalCurrentTeam();
+
+  const { toast } = useToast();
+
+  const [, copy] = useCopyToClipboard();
+
+  const [publicTemplateDialogPayload, setPublicTemplateDialogPayload] = useState<{
+    step: 'MANAGE' | 'CONFIRM_DISABLE';
+    templateId: number;
+  } | null>(null);
+
+  const { data, isInitialLoading, isLoadingError, refetch } = trpc.template.findTemplates.useQuery(
+    {
+      teamId: team?.id,
+    },
+    {
+      keepPreviousData: true,
+    },
+  );
+
+  const { directTemplates, publicDirectTemplates, privateDirectTemplates } = useMemo(() => {
+    const directTemplates = (data?.templates ?? []).filter(
+      (template): template is DirectTemplate => template.directLink?.enabled === true,
+    );
+
+    const publicDirectTemplates = directTemplates.filter(
+      (template) => template.directLink?.enabled === true && template.type === TemplateType.PUBLIC,
+    );
+
+    const privateDirectTemplates = directTemplates.filter(
+      (template) => template.directLink?.enabled === true && template.type === TemplateType.PRIVATE,
+    );
+
+    return {
+      directTemplates,
+      publicDirectTemplates,
+      privateDirectTemplates,
+    };
+  }, [data]);
+
+  const onCopyClick = async (token: string) =>
+    copy(formatDirectTemplatePath(token)).then(() => {
+      toast({
+        title: 'Copied to clipboard',
+        description: 'The direct link has been copied to your clipboard',
+      });
+    });
+
+  return (
+    <div>
+      <div className="dark:divide-foreground/30 dark:border-foreground/30 mt-6 divide-y divide-neutral-200 overflow-hidden rounded-lg border border-neutral-200">
+        {/* Loading and error handling states. */}
+        {publicDirectTemplates.length === 0 && (
+          <>
+            {isInitialLoading &&
+              Array(3)
+                .fill(0)
+                .map((_, index) => (
+                  <div
+                    key={index}
+                    className="bg-background flex items-center justify-between gap-x-6 p-4"
+                  >
+                    <div className="flex gap-x-2">
+                      <FileIcon className="text-muted-foreground/40 h-8 w-8" strokeWidth={1.5} />
+
+                      <div className="space-y-2">
+                        <Skeleton className="h-4 w-24" />
+                        <Skeleton className="h-4 w-48" />
+                      </div>
+                    </div>
+
+                    <MoreHorizontalIcon className="text-muted-foreground h-5 w-5" />
+                  </div>
+                ))}
+
+            {isLoadingError && (
+              <div className="text-muted-foreground flex h-32 flex-col items-center justify-center text-sm">
+                Unable to load your public profile templates at this time
+                <button
+                  onClick={(e) => {
+                    e.preventDefault();
+                    void refetch();
+                  }}
+                >
+                  Click here to retry
+                </button>
+              </div>
+            )}
+
+            {!isInitialLoading && (
+              <div className="text-muted-foreground flex h-32 flex-col items-center justify-center text-sm">
+                No public profile templates found
+                <ManagePublicTemplateDialog
+                  directTemplates={privateDirectTemplates}
+                  trigger={
+                    <button className="hover:text-muted-foreground/80 mt-1 text-xs">
+                      Click here to get started
+                    </button>
+                  }
+                />
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Public templates list. */}
+        {publicDirectTemplates.map((template) => (
+          <div
+            key={template.id}
+            className="bg-background flex items-center justify-between gap-x-6 p-4"
+          >
+            <div className="flex gap-x-2">
+              <FileIcon
+                className="text-muted-foreground/40 h-8 w-8 flex-shrink-0"
+                strokeWidth={1.5}
+              />
+
+              <div>
+                <p className="text-sm">{template.publicTitle}</p>
+                <p className="text-xs text-neutral-400">{template.publicDescription}</p>
+              </div>
+            </div>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger>
+                <MoreHorizontalIcon className="text-muted-foreground h-5 w-5" />
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent className="w-52" align="center" side="left">
+                <DropdownMenuLabel>Action</DropdownMenuLabel>
+
+                <DropdownMenuItem onClick={() => void onCopyClick(template.directLink.token)}>
+                  <LinkIcon className="mr-2 h-4 w-4" />
+                  Copy sharable link
+                </DropdownMenuItem>
+
+                <DropdownMenuItem
+                  onClick={() => {
+                    setPublicTemplateDialogPayload({
+                      step: 'MANAGE',
+                      templateId: template.id,
+                    });
+                  }}
+                >
+                  <EditIcon className="mr-2 h-4 w-4" />
+                  Update
+                </DropdownMenuItem>
+
+                <DropdownMenuItem
+                  onClick={() =>
+                    setPublicTemplateDialogPayload({
+                      step: 'CONFIRM_DISABLE',
+                      templateId: template.id,
+                    })
+                  }
+                >
+                  <Trash2Icon className="mr-2 h-4 w-4" />
+                  Remove
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        ))}
+      </div>
+
+      <ManagePublicTemplateDialog
+        directTemplates={directTemplates}
+        initialTemplateId={publicTemplateDialogPayload?.templateId}
+        initialStep={publicTemplateDialogPayload?.step}
+        isOpen={publicTemplateDialogPayload !== null}
+        onIsOpenChange={(value) => {
+          if (!value) {
+            setPublicTemplateDialogPayload(null);
+          }
+        }}
+      />
+    </div>
+  );
+};

apps/web/src/app/(dashboard)/templates/[id]/edit-template.tsx

@@ -1,10 +1,14 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
-import type { DocumentData, Field, Recipient, Template, User } from '@documenso/prisma/client';
+import {
+  DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+  SKIP_QUERY_BATCH_META,
+} from '@documenso/lib/constants/trpc';
+import type { TemplateWithDetails } from '@documenso/prisma/types/template';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -19,52 +23,135 @@ import { AddTemplateFieldsFormPartial } from '@documenso/ui/primitives/template-
 import type { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
 import { AddTemplatePlaceholderRecipientsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients';
 import type { TAddTemplatePlacholderRecipientsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients.types';
+import { AddTemplateSettingsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-settings';
+import type { TAddTemplateSettingsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-settings.types';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useOptionalCurrentTeam } from '~/providers/team';
+
 export type EditTemplateFormProps = {
   className?: string;
-  user: User;
-  template: Template;
-  recipients: Recipient[];
-  fields: Field[];
-  documentData: DocumentData;
+  initialTemplate: TemplateWithDetails;
+  isEnterprise: boolean;
   templateRootPath: string;
 };
 
-type EditTemplateStep = 'signers' | 'fields';
-const EditTemplateSteps: EditTemplateStep[] = ['signers', 'fields'];
+type EditTemplateStep = 'settings' | 'signers' | 'fields';
+const EditTemplateSteps: EditTemplateStep[] = ['settings', 'signers', 'fields'];
 
 export const EditTemplateForm = ({
+  initialTemplate,
   className,
-  template,
-  recipients,
-  fields,
-  user: _user,
-  documentData,
+  isEnterprise,
   templateRootPath,
 }: EditTemplateFormProps) => {
   const { toast } = useToast();
   const router = useRouter();
 
-  const [step, setStep] = useState<EditTemplateStep>('signers');
+  const team = useOptionalCurrentTeam();
+
+  const [step, setStep] = useState<EditTemplateStep>('settings');
+
+  const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
+
+  const utils = trpc.useUtils();
+
+  const { data: template, refetch: refetchTemplate } =
+    trpc.template.getTemplateWithDetailsById.useQuery(
+      {
+        id: initialTemplate.id,
+      },
+      {
+        initialData: initialTemplate,
+        ...SKIP_QUERY_BATCH_META,
+      },
+    );
+
+  const { Recipient: recipients, Field: fields, templateDocumentData } = template;
 
   const documentFlow: Record<EditTemplateStep, DocumentFlowStep> = {
+    settings: {
+      title: 'General',
+      description: 'Configure general settings for the template.',
+      stepIndex: 1,
+    },
     signers: {
       title: 'Add Placeholders',
       description: 'Add all relevant placeholders for each recipient.',
-      stepIndex: 1,
+      stepIndex: 2,
     },
     fields: {
       title: 'Add Fields',
       description: 'Add all relevant fields for each recipient.',
-      stepIndex: 2,
+      stepIndex: 3,
     },
   };
 
   const currentDocumentFlow = documentFlow[step];
 
-  const { mutateAsync: addTemplateFields } = trpc.field.addTemplateFields.useMutation();
-  const { mutateAsync: addTemplateSigners } = trpc.recipient.addTemplateSigners.useMutation();
+  const { mutateAsync: updateTemplateSettings } = trpc.template.updateTemplateSettings.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newData) => {
+      utils.template.getTemplateWithDetailsById.setData(
+        {
+          id: initialTemplate.id,
+        },
+        (oldData) => ({ ...(oldData || initialTemplate), ...newData }),
+      );
+    },
+  });
+
+  const { mutateAsync: addTemplateFields } = trpc.field.addTemplateFields.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newData) => {
+      utils.template.getTemplateWithDetailsById.setData(
+        {
+          id: initialTemplate.id,
+        },
+        (oldData) => ({ ...(oldData || initialTemplate), ...newData }),
+      );
+    },
+  });
+
+  const { mutateAsync: addTemplateSigners } = trpc.recipient.addTemplateSigners.useMutation({
+    ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+    onSuccess: (newData) => {
+      utils.template.getTemplateWithDetailsById.setData(
+        {
+          id: initialTemplate.id,
+        },
+        (oldData) => ({ ...(oldData || initialTemplate), ...newData }),
+      );
+    },
+  });
+
+  const onAddSettingsFormSubmit = async (data: TAddTemplateSettingsFormSchema) => {
+    try {
+      await updateTemplateSettings({
+        templateId: template.id,
+        teamId: team?.id,
+        data: {
+          title: data.title,
+          globalAccessAuth: data.globalAccessAuth ?? null,
+          globalActionAuth: data.globalActionAuth ?? null,
+        },
+        meta: data.meta,
+      });
+
+      // Router refresh is here to clear the router cache for when navigating to /documents.
+      router.refresh();
+
+      setStep('signers');
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while updating the document settings.',
+        variant: 'destructive',
+      });
+    }
+  };
 
   const onAddTemplatePlaceholderFormSubmit = async (
     data: TAddTemplatePlacholderRecipientsFormSchema,
@@ -72,9 +159,11 @@ export const EditTemplateForm = ({
     try {
       await addTemplateSigners({
         templateId: template.id,
+        teamId: team?.id,
         signers: data.signers,
       });
 
+      // Router refresh is here to clear the router cache for when navigating to /documents.
       router.refresh();
 
       setStep('fields');
@@ -100,6 +189,9 @@ export const EditTemplateForm = ({
         duration: 5000,
       });
 
+      // Router refresh is here to clear the router cache for when navigating to /documents.
+      router.refresh();
+
       router.push(templateRootPath);
     } catch (err) {
       toast({
@@ -110,6 +202,15 @@ export const EditTemplateForm = ({
     }
   };
 
+  /**
+   * Refresh the data in the background when steps change.
+   */
+  useEffect(() => {
+    void refetchTemplate();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [step]);
+
   return (
     <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
       <Card
@@ -117,7 +218,11 @@ export const EditTemplateForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <LazyPDFViewer key={documentData.id} documentData={documentData} />
+          <LazyPDFViewer
+            key={templateDocumentData.id}
+            documentData={templateDocumentData}
+            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
+          />
         </CardContent>
       </Card>
 
@@ -135,12 +240,26 @@ export const EditTemplateForm = ({
             currentStep={currentDocumentFlow.stepIndex}
             setCurrentStep={(step) => setStep(EditTemplateSteps[step - 1])}
           >
+            <AddTemplateSettingsFormPartial
+              key={recipients.length}
+              template={template}
+              documentFlow={documentFlow.settings}
+              recipients={recipients}
+              fields={fields}
+              onSubmit={onAddSettingsFormSubmit}
+              isEnterprise={isEnterprise}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
+            />
+
             <AddTemplatePlaceholderRecipientsFormPartial
               key={recipients.length}
               documentFlow={documentFlow.signers}
               recipients={recipients}
               fields={fields}
+              templateDirectLink={template.directLink}
               onSubmit={onAddTemplatePlaceholderFormSubmit}
+              isEnterprise={isEnterprise}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
             />
 
             <AddTemplateFieldsFormPartial

apps/web/src/app/(dashboard)/templates/[id]/template-direct-link-dialog-wrapper.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import React, { useState } from 'react';
+
+import { LinkIcon } from 'lucide-react';
+
+import type { Recipient, Template, TemplateDirectLink } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { TemplateDirectLinkDialog } from '../template-direct-link-dialog';
+
+export type TemplatePageViewProps = {
+  template: Template & { directLink?: TemplateDirectLink | null; Recipient: Recipient[] };
+};
+
+export const TemplateDirectLinkDialogWrapper = ({ template }: TemplatePageViewProps) => {
+  const [isTemplateDirectLinkOpen, setTemplateDirectLinkOpen] = useState(false);
+
+  return (
+    <div>
+      <Button
+        variant="outline"
+        className="px-3"
+        onClick={(e) => {
+          e.preventDefault();
+          setTemplateDirectLinkOpen(true);
+        }}
+      >
+        <LinkIcon className="mr-1.5 h-3.5 w-3.5" />
+        {template.directLink ? 'Manage' : 'Create'} Direct Link
+      </Button>
+
+      <TemplateDirectLinkDialog
+        template={template}
+        open={isTemplateDirectLinkOpen}
+        onOpenChange={setTemplateDirectLinkOpen}
+      />
+    </div>
+  );
+};

apps/web/src/app/(dashboard)/templates/[id]/template-page-view.tsx

@@ -5,16 +5,17 @@ import { redirect } from 'next/navigation';
 
 import { ChevronLeft } from 'lucide-react';
 
+import { isUserEnterprise } from '@documenso/ee/server-only/util/is-document-enterprise';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { getFieldsForTemplate } from '@documenso/lib/server-only/field/get-fields-for-template';
-import { getRecipientsForTemplate } from '@documenso/lib/server-only/recipient/get-recipients-for-template';
-import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { getTemplateWithDetailsById } from '@documenso/lib/server-only/template/get-template-with-details-by-id';
 import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 import type { Team } from '@documenso/prisma/client';
 
 import { TemplateType } from '~/components/formatter/template-type';
 
+import { TemplateDirectLinkBadge } from '../template-direct-link-badge';
 import { EditTemplateForm } from './edit-template';
+import { TemplateDirectLinkDialogWrapper } from './template-direct-link-dialog-wrapper';
 
 export type TemplatePageViewProps = {
   params: {
@@ -35,7 +36,7 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
 
   const { user } = await getRequiredServerComponentSession();
 
-  const template = await getTemplateById({
+  const template = await getTemplateWithDetailsById({
     id: templateId,
     userId: user.id,
   }).catch(() => null);
@@ -44,42 +45,47 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
     redirect(templateRootPath);
   }
 
-  const { templateDocumentData } = template;
-
-  const [templateRecipients, templateFields] = await Promise.all([
-    getRecipientsForTemplate({
-      templateId,
-      userId: user.id,
-    }),
-    getFieldsForTemplate({
-      templateId,
-      userId: user.id,
-    }),
-  ]);
+  const isTemplateEnterprise = await isUserEnterprise({
+    userId: user.id,
+    teamId: team?.id,
+  });
 
   return (
-    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-      <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
-        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Templates
-      </Link>
+    <div className="mx-auto -mt-4 max-w-screen-xl px-4 md:px-8">
+      <div className="flex flex-col justify-between sm:flex-row">
+        <div>
+          <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
+            <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+            Templates
+          </Link>
 
-      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>
-        {template.title}
-      </h1>
+          <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>
+            {template.title}
+          </h1>
 
-      <div className="mt-2.5 flex items-center gap-x-6">
-        <TemplateType inheritColor type={template.type} className="text-muted-foreground" />
+          <div className="mt-2.5 flex items-center">
+            <TemplateType inheritColor className="text-muted-foreground" type={template.type} />
+
+            {template.directLink?.token && (
+              <TemplateDirectLinkBadge
+                className="ml-4"
+                token={template.directLink.token}
+                enabled={template.directLink.enabled}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="mt-2 sm:mt-0 sm:self-end">
+          <TemplateDirectLinkDialogWrapper template={template} />
+        </div>
       </div>
 
       <EditTemplateForm
-        className="mt-8"
-        template={template}
-        user={user}
-        recipients={templateRecipients}
-        fields={templateFields}
-        documentData={templateDocumentData}
+        className="mt-6"
+        initialTemplate={template}
         templateRootPath={templateRootPath}
+        isEnterprise={isTemplateEnterprise}
       />
     </div>
   );

apps/web/src/app/(dashboard)/templates/data-table-action-dropdown.tsx

@@ -4,10 +4,10 @@ import { useState } from 'react';
 
 import Link from 'next/link';
 
-import { Copy, Edit, MoreHorizontal, Trash2 } from 'lucide-react';
+import { Copy, Edit, MoreHorizontal, Share2Icon, Trash2 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
-import type { Template } from '@documenso/prisma/client';
+import { type FindTemplateRow } from '@documenso/lib/server-only/template/find-templates';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -18,9 +18,10 @@ import {
 
 import { DeleteTemplateDialog } from './delete-template-dialog';
 import { DuplicateTemplateDialog } from './duplicate-template-dialog';
+import { TemplateDirectLinkDialog } from './template-direct-link-dialog';
 
 export type DataTableActionDropdownProps = {
-  row: Template;
+  row: FindTemplateRow;
   templateRootPath: string;
   teamId?: number;
 };
@@ -33,6 +34,7 @@ export const DataTableActionDropdown = ({
   const { data: session } = useSession();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isTemplateDirectLinkDialogOpen, setTemplateDirectLinkDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
 
   if (!session) {
@@ -66,6 +68,11 @@ export const DataTableActionDropdown = ({
           Duplicate
         </DropdownMenuItem>
 
+        <DropdownMenuItem onClick={() => setTemplateDirectLinkDialogOpen(true)}>
+          <Share2Icon className="mr-2 h-4 w-4" />
+          Direct link
+        </DropdownMenuItem>
+
         <DropdownMenuItem
           disabled={!isOwner && !isTeamTemplate}
           onClick={() => setDeleteDialogOpen(true)}
@@ -82,8 +89,15 @@ export const DataTableActionDropdown = ({
         onOpenChange={setDuplicateDialogOpen}
       />
 
+      <TemplateDirectLinkDialog
+        template={row}
+        open={isTemplateDirectLinkDialogOpen}
+        onOpenChange={setTemplateDirectLinkDialogOpen}
+      />
+
       <DeleteTemplateDialog
         id={row.id}
+        teamId={row.teamId || undefined}
         open={isDeleteDialogOpen}
         onOpenChange={setDeleteDialogOpen}
       />

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

@@ -4,32 +4,26 @@ import { useTransition } from 'react';
 
 import Link from 'next/link';
 
-import { AlertTriangle, Loader } from 'lucide-react';
+import { AlertTriangle, Globe2Icon, InfoIcon, Link2Icon, Loader, LockIcon } from 'lucide-react';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import type { Recipient, Template } from '@documenso/prisma/client';
+import type { FindTemplateRow } from '@documenso/lib/server-only/template/find-templates';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 import { LocaleDate } from '~/components/formatter/locale-date';
 import { TemplateType } from '~/components/formatter/template-type';
 
 import { DataTableActionDropdown } from './data-table-action-dropdown';
 import { DataTableTitle } from './data-table-title';
+import { TemplateDirectLinkBadge } from './template-direct-link-badge';
 import { UseTemplateDialog } from './use-template-dialog';
 
-type TemplateWithRecipient = Template & {
-  Recipient: Recipient[];
-};
-
 type TemplatesDataTableProps = {
-  templates: Array<
-    TemplateWithRecipient & {
-      team: { id: number; url: string } | null;
-    }
-  >;
+  templates: FindTemplateRow[];
   perPage: number;
   page: number;
   totalPages: number;
@@ -48,6 +42,7 @@ export const TemplatesDataTable = ({
   teamId,
 }: TemplatesDataTableProps) => {
   const [isPending, startTransition] = useTransition();
+
   const updateSearchParams = useUpdateSearchParams();
 
   const { remaining } = useLimits();
@@ -88,9 +83,70 @@ export const TemplatesDataTable = ({
             cell: ({ row }) => <DataTableTitle row={row.original} />,
           },
           {
-            header: 'Type',
+            header: () => (
+              <div className="flex flex-row items-center">
+                Type
+                <Tooltip>
+                  <TooltipTrigger>
+                    <InfoIcon className="mx-2 h-4 w-4" />
+                  </TooltipTrigger>
+
+                  <TooltipContent className="text-foreground max-w-md space-y-2 !p-0">
+                    <ul className="text-muted-foreground space-y-0.5 divide-y [&>li]:p-4">
+                      <li>
+                        <h2 className="mb-2 flex flex-row items-center font-semibold">
+                          <Globe2Icon className="mr-2 h-5 w-5 text-green-500 dark:text-green-300" />
+                          Public
+                        </h2>
+
+                        <p>
+                          Public templates are connected to your public profile. Any modifications
+                          to public templates will also appear in your public profile.
+                        </p>
+                      </li>
+                      <li>
+                        <div className="mb-2 flex w-fit flex-row items-center rounded border border-neutral-300 bg-neutral-200 px-1.5 py-0.5 text-xs dark:border-neutral-500 dark:bg-neutral-600">
+                          <Link2Icon className="mr-1 h-3 w-3" />
+                          direct link
+                        </div>
+
+                        <p>
+                          Direct link templates contain one dynamic recipient placeholder. Anyone
+                          with access to this link can sign the document, and it will then appear on
+                          your documents page.
+                        </p>
+                      </li>
+                      <li>
+                        <h2 className="mb-2 flex flex-row items-center font-semibold">
+                          <LockIcon className="mr-2 h-5 w-5 text-blue-600 dark:text-blue-300" />
+                          {teamId ? 'Team Only' : 'Private'}
+                        </h2>
+
+                        <p>
+                          {teamId
+                            ? 'Team only templates are not linked anywhere and are visible only to your team.'
+                            : 'Private templates can only be modified and viewed by you.'}
+                        </p>
+                      </li>
+                    </ul>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+            ),
             accessorKey: 'type',
-            cell: ({ row }) => <TemplateType type={row.original.type} />,
+            cell: ({ row }) => (
+              <div className="flex flex-row items-center">
+                <TemplateType type="PRIVATE" />
+
+                {row.original.directLink?.token && (
+                  <TemplateDirectLinkBadge
+                    className="ml-2"
+                    token={row.original.directLink.token}
+                    enabled={row.original.directLink.enabled}
+                  />
+                )}
+              </div>
+            ),
           },
           {
             header: 'Actions',

apps/web/src/app/(dashboard)/templates/delete-template-dialog.tsx

@@ -14,11 +14,17 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 type DeleteTemplateDialogProps = {
   id: number;
+  teamId?: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
 };
 
-export const DeleteTemplateDialog = ({ id, open, onOpenChange }: DeleteTemplateDialogProps) => {
+export const DeleteTemplateDialog = ({
+  id,
+  teamId,
+  open,
+  onOpenChange,
+}: DeleteTemplateDialogProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -67,7 +73,12 @@ export const DeleteTemplateDialog = ({ id, open, onOpenChange }: DeleteTemplateD
             Cancel
           </Button>
 
-          <Button type="button" loading={isLoading} onClick={async () => deleteTemplate({ id })}>
+          <Button
+            type="button"
+            variant="destructive"
+            loading={isLoading}
+            onClick={async () => deleteTemplate({ id, teamId })}
+          >
             Delete
           </Button>
         </DialogFooter>

apps/web/src/app/(dashboard)/templates/new-template-dialog.tsx

@@ -1,21 +1,16 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
-import { zodResolver } from '@hookform/resolvers/zod';
-import { FilePlus, X } from 'lucide-react';
+import { FilePlus, Loader } from 'lucide-react';
 import { useSession } from 'next-auth/react';
-import { useForm } from 'react-hook-form';
-import * as z from 'zod';
 
 import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
-import { base64 } from '@documenso/lib/universal/base64';
 import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
   Dialog,
   DialogClose,
@@ -27,24 +22,8 @@ import {
   DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
 import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-const ZCreateTemplateFormSchema = z.object({
-  name: z.string(),
-});
-
-type TCreateTemplateFormSchema = z.infer<typeof ZCreateTemplateFormSchema>;
-
 type NewTemplateDialogProps = {
   teamId?: number;
   templateRootPath: string;
@@ -56,50 +35,20 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
   const { data: session } = useSession();
   const { toast } = useToast();
 
-  const form = useForm<TCreateTemplateFormSchema>({
-    defaultValues: {
-      name: '',
-    },
-    resolver: zodResolver(ZCreateTemplateFormSchema),
-  });
-
   const { mutateAsync: createTemplate } = trpc.template.createTemplate.useMutation();
 
   const [showNewTemplateDialog, setShowNewTemplateDialog] = useState(false);
-  const [uploadedFile, setUploadedFile] = useState<{ file: File; fileBase64: string } | null>();
+  const [isUploadingFile, setIsUploadingFile] = useState(false);
 
   const onFileDrop = async (file: File) => {
-    try {
-      const arrayBuffer = await file.arrayBuffer();
-      const base64String = base64.encode(new Uint8Array(arrayBuffer));
-
-      setUploadedFile({
-        file,
-        fileBase64: `data:application/pdf;base64,${base64String}`,
-      });
-
-      if (!form.getValues('name')) {
-        form.setValue('name', file.name);
-      }
-    } catch {
-      toast({
-        title: 'Something went wrong',
-        description: 'Please try again later.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onSubmit = async (values: TCreateTemplateFormSchema) => {
-    if (!uploadedFile) {
+    if (isUploadingFile) {
       return;
     }
 
-    const file: File = uploadedFile.file;
+    setIsUploadingFile(true);
 
     try {
       const { type, data } = await putPdfFile(file);
-
       const { id: templateDocumentDataId } = await createDocumentData({
         type,
         data,
@@ -107,7 +56,7 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
 
       const { id } = await createTemplate({
         teamId,
-        title: values.name ? values.name : file.name,
+        title: file.name,
         templateDocumentDataId,
       });
 
@@ -127,26 +76,16 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
         description: 'Please try again later.',
         variant: 'destructive',
       });
+
+      setIsUploadingFile(false);
     }
   };
 
-  const resetForm = () => {
-    if (form.getValues('name') === uploadedFile?.file.name) {
-      form.reset();
-    }
-
-    setUploadedFile(null);
-  };
-
-  useEffect(() => {
-    if (!showNewTemplateDialog) {
-      form.reset();
-      setUploadedFile(null);
-    }
-  }, [form, showNewTemplateDialog]);
-
   return (
-    <Dialog open={showNewTemplateDialog} onOpenChange={setShowNewTemplateDialog}>
+    <Dialog
+      open={showNewTemplateDialog}
+      onOpenChange={(value) => !isUploadingFile && setShowNewTemplateDialog(value)}
+    >
       <DialogTrigger asChild>
         <Button className="cursor-pointer" disabled={!session?.user.emailVerified}>
           <FilePlus className="-ml-1 mr-2 h-4 w-4" />
@@ -162,80 +101,23 @@ export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialo
           </DialogDescription>
         </DialogHeader>
 
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <fieldset disabled={form.formState.isSubmitting} className="flex flex-col gap-y-4">
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Template name</FormLabel>
-                    <FormControl>
-                      <Input {...field} />
-                    </FormControl>
-                    <FormDescription>
-                      <span className="text-muted-foreground text-xs">
-                        Leave this empty if you would like to use your document's name for the
-                        template
-                      </span>
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+        <div className="relative">
+          <DocumentDropzone className="h-[40vh]" onDrop={onFileDrop} type="template" />
 
-              <div className="mt-1.5">
-                {uploadedFile ? (
-                  <Card gradient className="h-[40vh]">
-                    <CardContent className="flex h-full flex-col items-center justify-center p-2">
-                      <button
-                        onClick={() => resetForm()}
-                        title="Remove Template"
-                        className="text-muted-foreground absolute right-2.5 top-2.5 rounded-sm opacity-60 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
-                      >
-                        <X className="h-6 w-6" />
-                        <span className="sr-only">Remove Template</span>
-                      </button>
+          {isUploadingFile && (
+            <div className="bg-background/50 absolute inset-0 flex items-center justify-center rounded-lg">
+              <Loader className="text-muted-foreground h-12 w-12 animate-spin" />
+            </div>
+          )}
+        </div>
 
-                      <div className="border-muted-foreground/20 group-hover:border-documenso/80 dark:bg-muted/80 z-10 flex aspect-[3/4] w-24 flex-col gap-y-1 rounded-lg border bg-white/80 px-2 py-4 backdrop-blur-sm">
-                        <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
-                        <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-5/6 rounded-[2px]" />
-                        <div className="bg-muted-foreground/20 group-hover:bg-documenso h-2 w-full rounded-[2px]" />
-                      </div>
-
-                      <p className="group-hover:text-foreground text-muted-foreground mt-4 font-medium">
-                        Uploaded Document
-                      </p>
-
-                      <span className="text-muted-foreground/80 mt-1 text-sm">
-                        {uploadedFile.file.name}
-                      </span>
-                    </CardContent>
-                  </Card>
-                ) : (
-                  <DocumentDropzone className="h-[40vh]" onDrop={onFileDrop} type="template" />
-                )}
-              </div>
-
-              <DialogFooter>
-                <DialogClose asChild>
-                  <Button type="button" variant="secondary">
-                    Cancel
-                  </Button>
-                </DialogClose>
-
-                <Button
-                  loading={form.formState.isSubmitting}
-                  disabled={!uploadedFile}
-                  type="submit"
-                >
-                  Create template
-                </Button>
-              </DialogFooter>
-            </fieldset>
-          </form>
-        </Form>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isUploadingFile}>
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );

apps/web/src/app/(dashboard)/templates/template-direct-link-badge.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { Link2Icon } from 'lucide-react';
+
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
+import { cn } from '@documenso/ui/lib/utils';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type TemplateDirectLinkBadgeProps = {
+  token: string;
+  enabled: boolean;
+  className?: string;
+};
+
+export const TemplateDirectLinkBadge = ({
+  token,
+  enabled,
+  className,
+}: TemplateDirectLinkBadgeProps) => {
+  const [, copy] = useCopyToClipboard();
+  const { toast } = useToast();
+
+  const onCopyClick = async (token: string) =>
+    copy(formatDirectTemplatePath(token)).then(() => {
+      toast({
+        title: 'Copied to clipboard',
+        description: 'The direct link has been copied to your clipboard',
+      });
+    });
+
+  return (
+    <button
+      title="Copy direct link"
+      className={cn(
+        'flex flex-row items-center rounded border border-neutral-300 bg-neutral-200 px-1.5 py-0.5 text-xs dark:border-neutral-500 dark:bg-neutral-600',
+        className,
+      )}
+      onClick={async () => onCopyClick(token)}
+    >
+      <Link2Icon className="mr-1 h-3 w-3" />
+      direct link {!enabled && 'disabled'}
+    </button>
+  );
+};

apps/web/src/app/(dashboard)/templates/template-direct-link-dialog.tsx

@@ -0,0 +1,448 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+import { CircleDotIcon, CircleIcon, ClipboardCopyIcon, InfoIcon, LoaderIcon } from 'lucide-react';
+import { P, match } from 'ts-pattern';
+
+import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import {
+  DIRECT_TEMPLATE_DOCUMENTATION,
+  DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+} from '@documenso/lib/constants/template';
+import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
+import {
+  type Recipient,
+  RecipientRole,
+  type Template,
+  type TemplateDirectLink,
+} from '@documenso/prisma/client';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { Switch } from '@documenso/ui/primitives/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type TemplateDirectLinkDialogProps = {
+  template: Template & {
+    directLink?: Pick<TemplateDirectLink, 'token' | 'enabled'> | null;
+    Recipient: Recipient[];
+  };
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+};
+
+type TemplateDirectLinkStep = 'ONBOARD' | 'SELECT_RECIPIENT' | 'MANAGE' | 'CONFIRM_DELETE';
+
+export const TemplateDirectLinkDialog = ({
+  template,
+  open,
+  onOpenChange,
+}: TemplateDirectLinkDialogProps) => {
+  const { toast } = useToast();
+  const { quota, remaining } = useLimits();
+
+  const [, copy] = useCopyToClipboard();
+  const router = useRouter();
+
+  const [isEnabled, setIsEnabled] = useState(template.directLink?.enabled ?? false);
+  const [token, setToken] = useState(template.directLink?.token ?? null);
+  const [selectedRecipientId, setSelectedRecipientId] = useState<number | null>(null);
+  const [currentStep, setCurrentStep] = useState<TemplateDirectLinkStep>(
+    token ? 'MANAGE' : 'ONBOARD',
+  );
+
+  const validDirectTemplateRecipients = useMemo(
+    () => template.Recipient.filter((recipient) => recipient.role !== RecipientRole.CC),
+    [template.Recipient],
+  );
+
+  const {
+    mutateAsync: createTemplateDirectLink,
+    isLoading: isCreatingTemplateDirectLink,
+    reset: resetCreateTemplateDirectLink,
+  } = trpcReact.template.createTemplateDirectLink.useMutation({
+    onSuccess: (data) => {
+      setToken(data.token);
+      setIsEnabled(data.enabled);
+      setCurrentStep('MANAGE');
+
+      router.refresh();
+    },
+    onError: () => {
+      setSelectedRecipientId(null);
+
+      toast({
+        title: 'Something went wrong',
+        description: 'Unable to create direct template access. Please try again later.',
+        variant: 'destructive',
+      });
+    },
+  });
+
+  const { mutateAsync: toggleTemplateDirectLink, isLoading: isTogglingTemplateAccess } =
+    trpcReact.template.toggleTemplateDirectLink.useMutation({
+      onSuccess: (data) => {
+        toast({
+          title: 'Success',
+          description: `Direct link signing has been ${data.enabled ? 'enabled' : 'disabled'}`,
+        });
+      },
+      onError: (_ctx, data) => {
+        toast({
+          title: 'Something went wrong',
+          description: `An error occurred while ${
+            data.enabled ? 'enabling' : 'disabling'
+          } direct link signing.`,
+          variant: 'destructive',
+        });
+      },
+    });
+
+  const { mutateAsync: deleteTemplateDirectLink, isLoading: isDeletingTemplateDirectLink } =
+    trpcReact.template.deleteTemplateDirectLink.useMutation({
+      onSuccess: () => {
+        onOpenChange(false);
+        setToken(null);
+
+        toast({
+          title: 'Success',
+          description: 'Direct template link deleted',
+          duration: 5000,
+        });
+
+        router.refresh();
+        setToken(null);
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          description:
+            'We encountered an error while removing the direct template link. Please try again later.',
+          variant: 'destructive',
+        });
+      },
+    });
+
+  const onCopyClick = async (token: string) =>
+    copy(formatDirectTemplatePath(token)).then(() => {
+      toast({
+        title: 'Copied to clipboard',
+        description: 'The direct link has been copied to your clipboard',
+      });
+    });
+
+  const onRecipientTableRowClick = async (recipientId: number) => {
+    if (isLoading) {
+      return;
+    }
+
+    setSelectedRecipientId(recipientId);
+
+    await createTemplateDirectLink({
+      templateId: template.id,
+      directRecipientId: recipientId,
+    });
+  };
+
+  const isLoading =
+    isCreatingTemplateDirectLink || isTogglingTemplateAccess || isDeletingTemplateDirectLink;
+
+  useEffect(() => {
+    resetCreateTemplateDirectLink();
+    setCurrentStep(token ? 'MANAGE' : 'ONBOARD');
+    setSelectedRecipientId(null);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+      <fieldset disabled={isLoading} className="relative">
+        <AnimateGenericFadeInOut motionKey={currentStep}>
+          {match({ token, currentStep })
+            .with({ token: P.nullish, currentStep: 'ONBOARD' }, () => (
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Create Direct Signing Link</DialogTitle>
+
+                  <DialogDescription>Here's how it works:</DialogDescription>
+                </DialogHeader>
+
+                <ul className="mt-4 space-y-4 pl-12">
+                  {DIRECT_TEMPLATE_DOCUMENTATION.map((step, index) => (
+                    <li className="relative" key={index}>
+                      <div className="absolute -left-12">
+                        <div className="flex h-8 w-8 items-center justify-center rounded-full border-[3px] border-neutral-200 text-sm font-bold">
+                          {index + 1}
+                        </div>
+                      </div>
+
+                      <h3 className="font-semibold">{step.title}</h3>
+                      <p className="text-muted-foreground mt-1 text-sm">{step.description}</p>
+                    </li>
+                  ))}
+                </ul>
+
+                {remaining.directTemplates === 0 && (
+                  <Alert variant="warning">
+                    <AlertTitle>
+                      Direct template link usage exceeded ({quota.directTemplates}/
+                      {quota.directTemplates})
+                    </AlertTitle>
+                    <AlertDescription>
+                      You have reached the maximum limit of {quota.directTemplates} direct
+                      templates.{' '}
+                      <Link
+                        className="mt-1 block underline underline-offset-4"
+                        href="/settings/billing"
+                      >
+                        Upgrade your account to continue!
+                      </Link>
+                    </AlertDescription>
+                  </Alert>
+                )}
+
+                {remaining.directTemplates !== 0 && (
+                  <DialogFooter className="mx-auto mt-4">
+                    <Button type="button" onClick={() => setCurrentStep('SELECT_RECIPIENT')}>
+                      Enable direct link signing
+                    </Button>
+                  </DialogFooter>
+                )}
+              </DialogContent>
+            ))
+            .with({ token: P.nullish, currentStep: 'SELECT_RECIPIENT' }, () => (
+              <DialogContent className="relative">
+                {isCreatingTemplateDirectLink && validDirectTemplateRecipients.length !== 0 && (
+                  <div className="absolute inset-0 z-50 flex items-center justify-center rounded bg-white/50 dark:bg-black/50">
+                    <LoaderIcon className="h-6 w-6 animate-spin text-gray-500" />
+                  </div>
+                )}
+
+                <DialogHeader>
+                  <DialogTitle>Choose Direct Link Recipient</DialogTitle>
+
+                  <DialogDescription>
+                    Choose an existing recipient from below to continue
+                  </DialogDescription>
+                </DialogHeader>
+
+                <div className="custom-scrollbar max-h-[60vh] overflow-y-auto rounded-md border">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Recipient</TableHead>
+                        <TableHead>Role</TableHead>
+                        <TableHead></TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {validDirectTemplateRecipients.length === 0 && (
+                        <TableRow>
+                          <TableCell colSpan={3} className="h-16 text-center">
+                            <p className="text-muted-foreground">No valid recipients found</p>
+                          </TableCell>
+                        </TableRow>
+                      )}
+
+                      {validDirectTemplateRecipients.map((row) => (
+                        <TableRow
+                          className="cursor-pointer"
+                          key={row.id}
+                          onClick={async () => onRecipientTableRowClick(row.id)}
+                        >
+                          <TableCell>
+                            <div className="text-muted-foreground text-sm">
+                              <p>{row.name}</p>
+                              <p className="text-muted-foreground/70 text-xs">{row.email}</p>
+                            </div>
+                          </TableCell>
+
+                          <TableCell className="text-muted-foreground text-sm">
+                            {RECIPIENT_ROLES_DESCRIPTION[row.role].roleName}
+                          </TableCell>
+
+                          <TableCell>
+                            {selectedRecipientId === row.id ? (
+                              <CircleDotIcon className="h-5 w-5 text-neutral-300" />
+                            ) : (
+                              <CircleIcon className="h-5 w-5 text-neutral-300" />
+                            )}
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+
+                {/* Prevent creating placeholder direct template recipient if the email already exists. */}
+                {!template.Recipient.some(
+                  (recipient) => recipient.email === DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+                ) && (
+                  <DialogFooter className="mx-auto">
+                    <div className="flex flex-col items-center justify-center">
+                      {validDirectTemplateRecipients.length !== 0 && (
+                        <p className="text-muted-foreground text-sm">Or</p>
+                      )}
+
+                      <Button
+                        type="button"
+                        className="mt-2"
+                        loading={isCreatingTemplateDirectLink && !selectedRecipientId}
+                        onClick={async () =>
+                          createTemplateDirectLink({
+                            templateId: template.id,
+                          })
+                        }
+                      >
+                        Create one automatically
+                      </Button>
+                    </div>
+                  </DialogFooter>
+                )}
+              </DialogContent>
+            ))
+            .with({ token: P.string, currentStep: 'MANAGE' }, ({ token }) => (
+              <DialogContent className="relative">
+                <DialogHeader>
+                  <DialogTitle>Direct Link Signing</DialogTitle>
+
+                  <DialogDescription>
+                    Manage the direct link signing for this template
+                  </DialogDescription>
+                </DialogHeader>
+
+                <div>
+                  <div className="flex flex-row items-center justify-between">
+                    <Label className="flex flex-row">
+                      Enable Direct Link Signing
+                      <Tooltip>
+                        <TooltipTrigger tabIndex={-1} className="ml-2">
+                          <InfoIcon className="h-4 w-4" />
+                        </TooltipTrigger>
+                        <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                          Disabling direct link signing will prevent anyone from accessing the link.
+                        </TooltipContent>
+                      </Tooltip>
+                    </Label>
+
+                    <Switch
+                      className="mt-2"
+                      checked={isEnabled}
+                      onCheckedChange={(value) => setIsEnabled(value)}
+                    />
+                  </div>
+
+                  <div className="mt-2">
+                    <Label htmlFor="copy-direct-link">Copy Shareable Link</Label>
+
+                    <div className="relative mt-1">
+                      <Input
+                        id="copy-direct-link"
+                        disabled
+                        value={formatDirectTemplatePath(token).replace(/https?:\/\//, '')}
+                        readOnly
+                        className="pr-12"
+                      />
+
+                      <div className="absolute bottom-0 right-1 top-0 flex items-center justify-center">
+                        <Button
+                          variant="none"
+                          type="button"
+                          className="h-8 w-8"
+                          onClick={() => void onCopyClick(token)}
+                        >
+                          <ClipboardCopyIcon className="h-4 w-4 flex-shrink-0" />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <DialogFooter className="mt-4">
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    className="mr-auto w-full sm:w-auto"
+                    loading={isDeletingTemplateDirectLink}
+                    onClick={() => setCurrentStep('CONFIRM_DELETE')}
+                  >
+                    Remove
+                  </Button>
+
+                  <Button
+                    type="button"
+                    loading={isTogglingTemplateAccess}
+                    onClick={async () =>
+                      toggleTemplateDirectLink({
+                        templateId: template.id,
+                        enabled: isEnabled,
+                      })
+                    }
+                  >
+                    Save
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            ))
+            .with({ token: P.string, currentStep: 'CONFIRM_DELETE' }, () => (
+              <DialogContent className="relative">
+                <DialogHeader>
+                  <DialogTitle>Are you sure?</DialogTitle>
+
+                  <DialogDescription>
+                    Please note that proceeding will remove direct linking recipient and turn it
+                    into a placeholder.
+                  </DialogDescription>
+                </DialogHeader>
+
+                <DialogFooter>
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    onClick={() => setCurrentStep('MANAGE')}
+                  >
+                    Cancel
+                  </Button>
+
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    loading={isDeletingTemplateDirectLink}
+                    onClick={() => void deleteTemplateDirectLink({ templateId: template.id })}
+                  >
+                    Confirm
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            ))
+            .otherwise(() => null)}
+        </AnimateGenericFadeInOut>
+      </fieldset>
+    </Dialog>
+  );
+};

apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx

@@ -1,14 +1,21 @@
+import { useEffect, useState } from 'react';
+
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Plus } from 'lucide-react';
-import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import { InfoIcon, Plus } from 'lucide-react';
+import { useFieldArray, useForm } from 'react-hook-form';
 import * as z from 'zod';
 
+import {
+  TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX,
+  TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX,
+} from '@documenso/lib/constants/template';
+import { AppError } from '@documenso/lib/errors/app-error';
 import type { Recipient } from '@documenso/prisma/client';
-import { RecipientRole } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
   Dialog,
   DialogClose,
@@ -19,24 +26,59 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
-import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
-import { ROLE_ICONS } from '@documenso/ui/primitives/recipient-role-icons';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@documenso/ui/primitives/select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import type { Toast } from '@documenso/ui/primitives/use-toast';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useOptionalCurrentTeam } from '~/providers/team';
 
-const ZAddRecipientsForNewDocumentSchema = z.object({
-  recipients: z.array(
-    z.object({
-      email: z.string().email(),
-      name: z.string(),
-      role: z.nativeEnum(RecipientRole),
-    }),
-  ),
-});
+const ZAddRecipientsForNewDocumentSchema = z
+  .object({
+    sendDocument: z.boolean(),
+    recipients: z.array(
+      z.object({
+        id: z.number(),
+        email: z.string().email(),
+        name: z.string(),
+      }),
+    ),
+  })
+  // Display exactly which rows are duplicates.
+  .superRefine((items, ctx) => {
+    const uniqueEmails = new Map<string, number>();
+
+    for (const [index, recipients] of items.recipients.entries()) {
+      const email = recipients.email.toLowerCase();
+
+      const firstFoundIndex = uniqueEmails.get(email);
+
+      if (firstFoundIndex === undefined) {
+        uniqueEmails.set(email, index);
+        continue;
+      }
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Emails must be unique',
+        path: ['recipients', index, 'email'],
+      });
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Emails must be unique',
+        path: ['recipients', firstFoundIndex, 'email'],
+      });
+    }
+  });
 
 type TAddRecipientsForNewDocumentSchema = z.infer<typeof ZAddRecipientsForNewDocumentSchema>;
 
@@ -54,35 +96,33 @@ export function UseTemplateDialog({
   const router = useRouter();
   const { toast } = useToast();
 
+  const [open, setOpen] = useState(false);
+
   const team = useOptionalCurrentTeam();
 
-  const {
-    control,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TAddRecipientsForNewDocumentSchema>({
+  const form = useForm<TAddRecipientsForNewDocumentSchema>({
     resolver: zodResolver(ZAddRecipientsForNewDocumentSchema),
     defaultValues: {
-      recipients:
-        recipients.length > 0
-          ? recipients.map((recipient) => ({
-              nativeId: recipient.id,
-              formId: String(recipient.id),
-              name: recipient.name,
-              email: recipient.email,
-              role: recipient.role,
-            }))
-          : [
-              {
-                name: '',
-                email: '',
-                role: RecipientRole.SIGNER,
-              },
-            ],
+      sendDocument: false,
+      recipients: recipients.map((recipient) => {
+        const isRecipientEmailPlaceholder = recipient.email.match(
+          TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX,
+        );
+
+        const isRecipientNamePlaceholder = recipient.name.match(
+          TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX,
+        );
+
+        return {
+          id: recipient.id,
+          name: !isRecipientNamePlaceholder ? recipient.name : '',
+          email: !isRecipientEmailPlaceholder ? recipient.email : '',
+        };
+      }),
     },
   });
 
-  const { mutateAsync: createDocumentFromTemplate, isLoading: isCreatingDocumentFromTemplate } =
+  const { mutateAsync: createDocumentFromTemplate } =
     trpc.template.createDocumentFromTemplate.useMutation();
 
   const onSubmit = async (data: TAddRecipientsForNewDocumentSchema) => {
@@ -91,6 +131,7 @@ export function UseTemplateDialog({
         templateId,
         teamId: team?.id,
         recipients: data.recipients,
+        sendDocument: data.sendDocument,
       });
 
       toast({
@@ -101,146 +142,147 @@ export function UseTemplateDialog({
 
       router.push(`${documentRootPath}/${id}`);
     } catch (err) {
-      toast({
+      const error = AppError.parseError(err);
+
+      const toastPayload: Toast = {
         title: 'Error',
         description: 'An error occurred while creating document from template.',
         variant: 'destructive',
-      });
+      };
+
+      if (error.code === 'DOCUMENT_SEND_FAILED') {
+        toastPayload.description = 'The document was created but could not be sent to recipients.';
+      }
+
+      toast(toastPayload);
     }
   };
 
-  const onCreateDocumentFromTemplate = handleSubmit(onSubmit);
-
   const { fields: formRecipients } = useFieldArray({
-    control,
+    control: form.control,
     name: 'recipients',
   });
 
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
   return (
-    <Dialog>
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
       <DialogTrigger asChild>
-        <Button className="cursor-pointer">
+        <Button variant="outline" className="bg-background">
           <Plus className="-ml-1 mr-2 h-4 w-4" />
           Use Template
         </Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>Document Recipients</DialogTitle>
-          <DialogDescription>Add the recipients to create the template with.</DialogDescription>
+          <DialogTitle>Create document from template</DialogTitle>
+          <DialogDescription>
+            {recipients.length === 0
+              ? 'A draft document will be created'
+              : 'Add the recipients to create the document with'}
+          </DialogDescription>
         </DialogHeader>
-        <div className="flex flex-col space-y-4">
-          {formRecipients.map((recipient, index) => (
-            <div
-              key={recipient.id}
-              data-native-id={recipient.id}
-              className="flex flex-wrap items-end gap-x-4"
-            >
-              <div className="flex-1">
-                <Label htmlFor={`recipient-${recipient.id}-email`}>
-                  Email
-                  <span className="text-destructive ml-1 inline-block font-medium">*</span>
-                </Label>
 
-                <Controller
-                  control={control}
-                  name={`recipients.${index}.email`}
-                  render={({ field }) => (
-                    <Input
-                      id={`recipient-${recipient.id}-email`}
-                      type="email"
-                      className="bg-background mt-2"
-                      disabled={isSubmitting}
-                      {...field}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+              <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
+                {formRecipients.map((recipient, index) => (
+                  <div className="flex w-full flex-row space-x-4" key={recipient.id}>
+                    <FormField
+                      control={form.control}
+                      name={`recipients.${index}.email`}
+                      render={({ field }) => (
+                        <FormItem className="w-full">
+                          {index === 0 && <FormLabel required>Email</FormLabel>}
+
+                          <FormControl>
+                            <Input {...field} placeholder={recipients[index].email || 'Email'} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
                     />
-                  )}
-                />
-              </div>
 
-              <div className="flex-1">
-                <Label htmlFor={`recipient-${recipient.id}-name`}>Name</Label>
+                    <FormField
+                      control={form.control}
+                      name={`recipients.${index}.name`}
+                      render={({ field }) => (
+                        <FormItem className="w-full">
+                          {index === 0 && <FormLabel>Name</FormLabel>}
 
-                <Controller
-                  control={control}
-                  name={`recipients.${index}.name`}
-                  render={({ field }) => (
-                    <Input
-                      id={`recipient-${recipient.id}-name`}
-                      type="text"
-                      className="bg-background mt-2"
-                      disabled={isSubmitting}
-                      {...field}
+                          <FormControl>
+                            <Input {...field} placeholder={recipients[index].name || 'Name'} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
                     />
-                  )}
-                />
+                  </div>
+                ))}
               </div>
 
-              <div className="w-[60px]">
-                <Controller
-                  control={control}
-                  name={`recipients.${index}.role`}
-                  render={({ field: { value, onChange } }) => (
-                    <Select value={value} onValueChange={(x) => onChange(x)}>
-                      <SelectTrigger className="bg-background">{ROLE_ICONS[value]}</SelectTrigger>
+              {recipients.length > 0 && (
+                <div className="mt-4 flex flex-row items-center">
+                  <FormField
+                    control={form.control}
+                    name="sendDocument"
+                    render={({ field }) => (
+                      <FormItem>
+                        <div className="flex flex-row items-center">
+                          <Checkbox
+                            id="sendDocument"
+                            className="h-5 w-5"
+                            checkClassName="dark:text-white text-primary"
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
 
-                      <SelectContent className="" align="end">
-                        <SelectItem value={RecipientRole.SIGNER}>
-                          <div className="flex items-center">
-                            <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
-                            Signer
-                          </div>
-                        </SelectItem>
+                          <label
+                            className="text-muted-foreground ml-2 flex items-center text-sm"
+                            htmlFor="sendDocument"
+                          >
+                            Send document
+                            <Tooltip>
+                              <TooltipTrigger type="button">
+                                <InfoIcon className="mx-1 h-4 w-4" />
+                              </TooltipTrigger>
 
-                        <SelectItem value={RecipientRole.CC}>
-                          <div className="flex items-center">
-                            <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
-                            Receives copy
-                          </div>
-                        </SelectItem>
+                              <TooltipContent className="text-muted-foreground z-[99999] max-w-md space-y-2 p-4">
+                                <p>
+                                  The document will be immediately sent to recipients if this is
+                                  checked.
+                                </p>
 
-                        <SelectItem value={RecipientRole.APPROVER}>
-                          <div className="flex items-center">
-                            <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
-                            Approver
-                          </div>
-                        </SelectItem>
+                                <p>Otherwise, the document will be created as a draft.</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </label>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              )}
 
-                        <SelectItem value={RecipientRole.VIEWER}>
-                          <div className="flex items-center">
-                            <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
-                            Viewer
-                          </div>
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                  )}
-                />
-              </div>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                    Close
+                  </Button>
+                </DialogClose>
 
-              <div className="w-full">
-                <FormErrorMessage className="mt-2" error={errors.recipients?.[index]?.email} />
-                <FormErrorMessage className="mt-2" error={errors.recipients?.[index]?.name} />
-              </div>
-            </div>
-          ))}
-        </div>
-
-        <DialogFooter className="justify-end">
-          <DialogClose asChild>
-            <Button type="button" variant="secondary">
-              Close
-            </Button>
-          </DialogClose>
-
-          <Button
-            type="button"
-            loading={isCreatingDocumentFromTemplate}
-            disabled={isCreatingDocumentFromTemplate}
-            onClick={onCreateDocumentFromTemplate}
-          >
-            Create Document
-          </Button>
-        </DialogFooter>
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  {form.getValues('sendDocument') ? 'Create and send' : 'Create as draft'}
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );

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

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeams } from '@documenso/lib/server-only/team/get-teams';
+
+import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
+import { NextAuthProvider } from '~/providers/next-auth';
+
+import { ProfileHeader } from './profile-header';
+
+type PublicProfileLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default async function PublicProfileLayout({ children }: PublicProfileLayoutProps) {
+  const { user, session } = await getServerComponentSession();
+
+  // I wouldn't typically do this but it's better than the `let` statement
+  const teams = user && session ? await getTeams({ userId: user.id }) : undefined;
+
+  return (
+    <NextAuthProvider session={session}>
+      <div className="min-h-screen">
+        <ProfileHeader user={user} teams={teams} />
+
+        <main className="my-8 px-4 md:my-12 md:px-8">{children}</main>
+      </div>
+
+      <RefreshOnFocus />
+    </NextAuthProvider>
+  );
+}

apps/web/src/app/(profile)/p/[url]/not-found.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import Link from 'next/link';
+
+import { ChevronLeft } from 'lucide-react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export default function NotFound() {
+  return (
+    <div className="mx-auto flex min-h-[80vh] w-full items-center justify-center py-32">
+      <div>
+        <p className="text-muted-foreground font-semibold">404 Profile not found</p>
+
+        <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+
+        <p className="text-muted-foreground mt-4 text-sm">
+          The profile you are looking for could not be found.
+        </p>
+
+        <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+          <Button asChild className="w-32">
+            <Link href="/">
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              Go Back
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(profile)/p/[url]/page.tsx

@@ -0,0 +1,194 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { notFound, redirect } from 'next/navigation';
+
+import { FileIcon } from 'lucide-react';
+import { DateTime } from 'luxon';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getPublicProfileByUrl } from '@documenso/lib/server-only/profile/get-public-profile-by-url';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+export type PublicProfilePageProps = {
+  params: {
+    url: string;
+  };
+};
+
+const BADGE_DATA = {
+  Premium: {
+    imageSrc: '/static/premium-user-badge.svg',
+    name: 'Premium',
+  },
+  EarlySupporter: {
+    imageSrc: '/static/early-supporter-badge.svg',
+    name: 'Early supporter',
+  },
+};
+
+export default async function PublicProfilePage({ params }: PublicProfilePageProps) {
+  const { url: profileUrl } = params;
+
+  if (!profileUrl) {
+    redirect('/');
+  }
+
+  const publicProfile = await getPublicProfileByUrl({
+    profileUrl,
+  }).catch(() => null);
+
+  if (!publicProfile || !publicProfile.profile.enabled) {
+    notFound();
+  }
+
+  const { user } = await getServerComponentSession();
+
+  const { profile, templates } = publicProfile;
+
+  return (
+    <div className="flex flex-col items-center justify-center py-4 sm:py-32">
+      <div className="flex flex-col items-center">
+        <Avatar className="dark:border-border h-24 w-24 border-2 border-solid">
+          {publicProfile.avatarImageId && (
+            <AvatarImage
+              src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${publicProfile.avatarImageId}`}
+            />
+          )}
+
+          <AvatarFallback className="text-sm text-gray-400">
+            {extractInitials(publicProfile.name)}
+          </AvatarFallback>
+        </Avatar>
+
+        <div className="mt-4 flex flex-row items-center justify-center">
+          <h2 className="text-xl font-semibold md:text-2xl">{publicProfile.name}</h2>
+
+          {publicProfile.badge && (
+            <Tooltip>
+              <TooltipTrigger>
+                <Image
+                  className="ml-2 flex items-center justify-center"
+                  alt="Profile badge"
+                  src={BADGE_DATA[publicProfile.badge.type].imageSrc}
+                  height={24}
+                  width={24}
+                />
+              </TooltipTrigger>
+
+              <TooltipContent className="flex flex-row items-start py-2 !pl-3 !pr-3.5">
+                <Image
+                  className="mt-0.5"
+                  alt="Profile badge"
+                  src={BADGE_DATA[publicProfile.badge.type].imageSrc}
+                  height={24}
+                  width={24}
+                />
+
+                <div className="ml-2">
+                  <p className="text-foreground text-base font-semibold">
+                    {BADGE_DATA[publicProfile.badge.type].name}
+                  </p>
+                  <p className="text-muted-foreground mt-0.5 text-sm">
+                    Since {DateTime.fromJSDate(publicProfile.badge.since).toFormat('LLL ‘yy')}
+                  </p>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+
+        <div className="text-muted-foreground mt-4 space-y-1">
+          {(profile.bio ?? '').split('\n').map((line, index) => (
+            <p
+              key={index}
+              className="max-w-[60ch] whitespace-pre-wrap break-words text-center text-sm"
+            >
+              {line}
+            </p>
+          ))}
+        </div>
+      </div>
+
+      {templates.length === 0 && (
+        <div className="mt-4 w-full max-w-xl border-t pt-4">
+          <p className="text-muted-foreground max-w-[60ch] whitespace-pre-wrap break-words text-center text-sm leading-relaxed">
+            It looks like {publicProfile.name} hasn't added any documents to their profile yet.{' '}
+            {!user?.id && (
+              <span className="mt-2 inline-block">
+                While waiting for them to do so you can create your own Documenso account and get
+                started with document signing right away.
+              </span>
+            )}
+            {'userId' in profile && user?.id === profile.userId && (
+              <span className="mt-2 inline-block">
+                Go to your{' '}
+                <Link href="/settings/public-profile" className="underline">
+                  public profile settings
+                </Link>{' '}
+                to add documents.
+              </span>
+            )}
+          </p>
+        </div>
+      )}
+
+      {templates.length > 0 && (
+        <div className="mt-8 w-full max-w-xl rounded-md border">
+          <Table className="w-full" overflowHidden>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-full rounded-tl-md bg-neutral-50 dark:bg-neutral-700">
+                  Documents
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {templates.map((template) => (
+                <TableRow key={template.id}>
+                  <TableCell className="text-muted-foreground flex flex-col justify-between overflow-hidden text-sm sm:flex-row">
+                    <div className="flex flex-1 items-start justify-start gap-2">
+                      <FileIcon
+                        className="text-muted-foreground/40 h-8 w-8 flex-shrink-0"
+                        strokeWidth={1.5}
+                      />
+
+                      <div className="flex flex-1 flex-col gap-4 overflow-hidden md:flex-row md:items-start md:justify-between">
+                        <div>
+                          <p className="text-foreground text-sm font-semibold leading-none">
+                            {template.publicTitle}
+                          </p>
+                          <p className="text-muted-foreground mt-1 line-clamp-3 max-w-[70ch] whitespace-normal text-xs">
+                            {template.publicDescription}
+                          </p>
+                        </div>
+
+                        <Button asChild className="w-20">
+                          <Link href={formatDirectTemplatePath(template.directLink.token)}>
+                            Sign
+                          </Link>
+                        </Button>
+                      </div>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/app/(profile)/profile-header.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { PlusIcon } from 'lucide-react';
+
+import LogoIcon from '@documenso/assets/logo_icon.png';
+import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import type { User } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header';
+import { Logo } from '~/components/branding/logo';
+
+type ProfileHeaderProps = {
+  user?: User | null;
+  teams?: GetTeamsResponse;
+};
+
+export const ProfileHeader = ({ user, teams = [] }: ProfileHeaderProps) => {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const onScroll = () => {
+      setScrollY(window.scrollY);
+    };
+
+    window.addEventListener('scroll', onScroll);
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  if (user) {
+    return <AuthenticatedHeader user={user} teams={teams} />;
+  }
+
+  return (
+    <header
+      className={cn(
+        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-[60] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
+        scrollY > 5 && 'border-b-border',
+      )}
+    >
+      <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:px-8">
+        <Link
+          href="/"
+          className="focus-visible:ring-ring ring-offset-background rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 md:inline"
+        >
+          <Logo className="hidden h-6 w-auto sm:block" />
+
+          <Image
+            src={LogoIcon}
+            alt="Documenso Logo"
+            width={48}
+            height={48}
+            className="h-10 w-auto dark:invert sm:hidden"
+          />
+        </Link>
+
+        <div className="flex flex-row items-center justify-center">
+          <p className="text-muted-foreground mr-4">
+            <span className="text-sm sm:hidden">Want your own public profile?</span>
+            <span className="hidden text-sm sm:block">
+              Like to have your own public profile with agreements?
+            </span>
+          </p>
+
+          <Button asChild variant="secondary">
+            <Link href="/signup">
+              <div className="hidden flex-row items-center sm:flex">
+                <PlusIcon className="mr-1 h-5 w-5" />
+                Create now
+              </div>
+
+              <span className="sm:hidden">Create</span>
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </header>
+  );
+};

apps/web/src/app/(recipient)/d/[token]/configure-direct-template.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useSession } from 'next-auth/react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { Field, Recipient } from '@documenso/prisma/client';
+import type { TemplateWithDetails } from '@documenso/prisma/types/template';
+import {
+  DocumentFlowFormContainerActions,
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerHeader,
+  DocumentFlowFormContainerStep,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { ShowFieldItem } from '@documenso/ui/primitives/document-flow/show-field-item';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useStep } from '@documenso/ui/primitives/stepper';
+
+import { useRequiredDocumentAuthContext } from '~/app/(signing)/sign/[token]/document-auth-provider';
+
+const ZConfigureDirectTemplateFormSchema = z.object({
+  email: z.string().email('Email is invalid'),
+});
+
+export type TConfigureDirectTemplateFormSchema = z.infer<typeof ZConfigureDirectTemplateFormSchema>;
+
+export type ConfigureDirectTemplateFormProps = {
+  flowStep: DocumentFlowStep;
+  isDocumentPdfLoaded: boolean;
+  template: TemplateWithDetails;
+  directTemplateRecipient: Recipient & { Field: Field[] };
+  initialEmail?: string;
+  onSubmit: (_data: TConfigureDirectTemplateFormSchema) => void;
+};
+
+export const ConfigureDirectTemplateFormPartial = ({
+  flowStep,
+  isDocumentPdfLoaded,
+  template,
+  directTemplateRecipient,
+  initialEmail,
+  onSubmit,
+}: ConfigureDirectTemplateFormProps) => {
+  const { Recipient } = template;
+  const { derivedRecipientAccessAuth } = useRequiredDocumentAuthContext();
+  const { data: session } = useSession();
+
+  const recipientsWithBlankDirectRecipientEmail = Recipient.map((recipient) => {
+    if (recipient.id === directTemplateRecipient.id) {
+      return {
+        ...recipient,
+        email: '',
+      };
+    }
+
+    return recipient;
+  });
+
+  const form = useForm<TConfigureDirectTemplateFormSchema>({
+    resolver: zodResolver(
+      ZConfigureDirectTemplateFormSchema.superRefine((items, ctx) => {
+        if (template.Recipient.map((recipient) => recipient.email).includes(items.email)) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: 'Email cannot already exist in the template',
+            path: ['email'],
+          });
+        }
+      }),
+    ),
+    defaultValues: {
+      email: initialEmail || '',
+    },
+  });
+
+  const { stepIndex, currentStep, totalSteps, previousStep } = useStep();
+
+  return (
+    <>
+      <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
+
+      <DocumentFlowFormContainerContent>
+        {isDocumentPdfLoaded &&
+          directTemplateRecipient.Field.map((field, index) => (
+            <ShowFieldItem
+              key={index}
+              field={field}
+              recipients={recipientsWithBlankDirectRecipientEmail}
+            />
+          ))}
+
+        <Form {...form}>
+          <fieldset
+            className="flex h-full flex-col space-y-6"
+            disabled={form.formState.isSubmitting}
+          >
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field, fieldState }) => (
+                <FormItem>
+                  <FormLabel required>Email</FormLabel>
+
+                  <FormControl>
+                    <Input
+                      {...field}
+                      disabled={
+                        field.disabled ||
+                        derivedRecipientAccessAuth !== null ||
+                        session?.user.email !== undefined
+                      }
+                      placeholder="recipient@documenso.com"
+                    />
+                  </FormControl>
+
+                  {!fieldState.error && (
+                    <p className="text-muted-foreground text-xs">
+                      Enter your email address to receive the completed document.
+                    </p>
+                  )}
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </fieldset>
+        </Form>
+      </DocumentFlowFormContainerContent>
+
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep
+          title={flowStep.title}
+          step={currentStep}
+          maxStep={totalSteps}
+        />
+
+        <DocumentFlowFormContainerActions
+          loading={form.formState.isSubmitting}
+          disabled={form.formState.isSubmitting}
+          canGoBack={stepIndex !== 0}
+          onGoBackClick={previousStep}
+          onGoNextClick={form.handleSubmit(onSubmit)}
+        />
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

apps/web/src/app/(recipient)/d/[token]/direct-template.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { Field } from '@documenso/prisma/client';
+import { type Recipient } from '@documenso/prisma/client';
+import type { TemplateWithDetails } from '@documenso/prisma/types/template';
+import { trpc } from '@documenso/trpc/react';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { Stepper } from '@documenso/ui/primitives/stepper';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentAuthContext } from '~/app/(signing)/sign/[token]/document-auth-provider';
+import { useRequiredSigningContext } from '~/app/(signing)/sign/[token]/provider';
+
+import type { TConfigureDirectTemplateFormSchema } from './configure-direct-template';
+import { ConfigureDirectTemplateFormPartial } from './configure-direct-template';
+import type { DirectTemplateLocalField } from './sign-direct-template';
+import { SignDirectTemplateForm } from './sign-direct-template';
+
+export type TemplatesDirectPageViewProps = {
+  template: TemplateWithDetails;
+  directTemplateToken: string;
+  directTemplateRecipient: Recipient & { Field: Field[] };
+};
+
+type DirectTemplateStep = 'configure' | 'sign';
+const DirectTemplateSteps: DirectTemplateStep[] = ['configure', 'sign'];
+
+export const DirectTemplatePageView = ({
+  template,
+  directTemplateRecipient,
+  directTemplateToken,
+}: TemplatesDirectPageViewProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const { email, setEmail } = useRequiredSigningContext();
+  const { recipient, setRecipient } = useRequiredDocumentAuthContext();
+
+  const [step, setStep] = useState<DirectTemplateStep>('configure');
+  const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
+
+  const recipientRoleDescription = RECIPIENT_ROLES_DESCRIPTION[directTemplateRecipient.role];
+
+  const directTemplateFlow: Record<DirectTemplateStep, DocumentFlowStep> = {
+    configure: {
+      title: 'General',
+      description: 'Preview and configure template.',
+      stepIndex: 1,
+    },
+    sign: {
+      title: `${recipientRoleDescription.actionVerb} document`,
+      description: `${recipientRoleDescription.actionVerb} the document to complete the process.`,
+      stepIndex: 2,
+    },
+  };
+
+  const { mutateAsync: createDocumentFromDirectTemplate } =
+    trpc.template.createDocumentFromDirectTemplate.useMutation();
+
+  /**
+   * Set the email into a temporary recipient so it can be used for reauth and signing email fields.
+   */
+  const onConfigureDirectTemplateSubmit = ({ email }: TConfigureDirectTemplateFormSchema) => {
+    setEmail(email);
+
+    setRecipient({
+      ...recipient,
+      email,
+    });
+
+    setStep('sign');
+  };
+
+  const onSignDirectTemplateSubmit = async (fields: DirectTemplateLocalField[]) => {
+    try {
+      const token = await createDocumentFromDirectTemplate({
+        directTemplateToken,
+        directRecipientEmail: recipient.email,
+        templateUpdatedAt: template.updatedAt,
+        signedFieldValues: fields.map((field) => {
+          if (!field.signedValue) {
+            throw new Error('Invalid configuration');
+          }
+
+          return field.signedValue;
+        }),
+      });
+
+      const redirectUrl = template.templateMeta?.redirectUrl;
+
+      redirectUrl ? router.push(redirectUrl) : router.push(`/sign/${token}/complete`);
+    } catch (err) {
+      toast({
+        title: 'Something went wrong',
+        description: 'We were unable to submit this document at this time. Please try again later.',
+        variant: 'destructive',
+      });
+
+      throw err;
+    }
+  };
+
+  const currentDocumentFlow = directTemplateFlow[step];
+
+  return (
+    <div className="grid w-full grid-cols-12 gap-8">
+      <Card
+        className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+        gradient
+      >
+        <CardContent className="p-2">
+          <LazyPDFViewer
+            key={template.id}
+            documentData={template.templateDocumentData}
+            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
+          />
+        </CardContent>
+      </Card>
+
+      <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+        <DocumentFlowFormContainer
+          className="lg:h-[calc(100vh-6rem)]"
+          onSubmit={(e) => e.preventDefault()}
+        >
+          <Stepper
+            currentStep={currentDocumentFlow.stepIndex}
+            setCurrentStep={(step) => setStep(DirectTemplateSteps[step - 1])}
+          >
+            <ConfigureDirectTemplateFormPartial
+              flowStep={directTemplateFlow.configure}
+              template={template}
+              directTemplateRecipient={directTemplateRecipient}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
+              onSubmit={onConfigureDirectTemplateSubmit}
+              initialEmail={email}
+            />
+
+            <SignDirectTemplateForm
+              flowStep={directTemplateFlow.sign}
+              directRecipient={recipient}
+              directRecipientFields={directTemplateRecipient.Field}
+              template={template}
+              onSubmit={onSignDirectTemplateSubmit}
+            />
+          </Stepper>
+        </DocumentFlowFormContainer>
+      </div>
+    </div>
+  );
+};

apps/web/src/app/(recipient)/d/[token]/not-found.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import Link from 'next/link';
+
+import { ChevronLeft } from 'lucide-react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export default function NotFound() {
+  return (
+    <div className="mx-auto flex min-h-[80vh] w-full items-center justify-center py-32">
+      <div>
+        <p className="text-muted-foreground font-semibold">404 Template not found</p>
+
+        <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+
+        <p className="text-muted-foreground mt-4 text-sm">
+          The template you are looking for may have been disabled, deleted or may have never
+          existed.
+        </p>
+
+        <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+          <Button asChild className="w-32">
+            <Link href="/">
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              Go Back
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(recipient)/d/[token]/page.tsx

@@ -0,0 +1,92 @@
+import { notFound, redirect } from 'next/navigation';
+
+import { UsersIcon } from 'lucide-react';
+import { match } from 'ts-pattern';
+
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTemplateByDirectLinkToken } from '@documenso/lib/server-only/template/get-template-by-direct-link-token';
+import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+
+import { DocumentAuthProvider } from '~/app/(signing)/sign/[token]/document-auth-provider';
+import { SigningProvider } from '~/app/(signing)/sign/[token]/provider';
+import { truncateTitle } from '~/helpers/truncate-title';
+
+import { DirectTemplatePageView } from './direct-template';
+import { DirectTemplateAuthPageView } from './signing-auth-page';
+
+export type TemplatesDirectPageProps = {
+  params: {
+    token: string;
+  };
+};
+
+export default async function TemplatesDirectPage({ params }: TemplatesDirectPageProps) {
+  const { token } = params;
+
+  if (!token) {
+    redirect('/');
+  }
+
+  const { user } = await getServerComponentSession();
+
+  const template = await getTemplateByDirectLinkToken({
+    token,
+  }).catch(() => null);
+
+  if (!template || !template.directLink?.enabled) {
+    notFound();
+  }
+
+  const directTemplateRecipient = template.Recipient.find(
+    (recipient) => recipient.id === template.directLink?.directTemplateRecipientId,
+  );
+
+  if (!directTemplateRecipient) {
+    notFound();
+  }
+
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: template.authOptions,
+  });
+
+  // Ensure typesafety when we add more options.
+  const isAccessAuthValid = match(derivedRecipientAccessAuth)
+    .with(DocumentAccessAuth.ACCOUNT, () => user !== null)
+    .with(null, () => true)
+    .exhaustive();
+
+  if (!isAccessAuthValid) {
+    return <DirectTemplateAuthPageView />;
+  }
+
+  return (
+    <SigningProvider email={user?.email} fullName={user?.name} signature={user?.signature}>
+      <DocumentAuthProvider
+        documentAuthOptions={template.authOptions}
+        recipient={directTemplateRecipient}
+        user={user}
+      >
+        <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+          <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>
+            {truncateTitle(template.title)}
+          </h1>
+
+          <div className="text-muted-foreground mb-8 mt-2.5 flex items-center gap-x-2">
+            <UsersIcon className="h-4 w-4" />
+            <p className="text-muted-foreground/80">
+              {template.Recipient.length}{' '}
+              {template.Recipient.length > 1 ? 'recipients' : 'recipient'}
+            </p>
+          </div>
+
+          <DirectTemplatePageView
+            directTemplateRecipient={directTemplateRecipient}
+            directTemplateToken={template.directLink.token}
+            template={template}
+          />
+        </div>
+      </DocumentAuthProvider>
+    </SigningProvider>
+  );
+}

apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx

@@ -0,0 +1,278 @@
+import { useMemo, useState } from 'react';
+
+import { DateTime } from 'luxon';
+import { match } from 'ts-pattern';
+
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
+import type { Field, Recipient, Signature } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
+import type { TemplateWithDetails } from '@documenso/prisma/types/template';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerHeader,
+  DocumentFlowFormContainerStep,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { useStep } from '@documenso/ui/primitives/stepper';
+
+import { DateField } from '~/app/(signing)/sign/[token]/date-field';
+import { EmailField } from '~/app/(signing)/sign/[token]/email-field';
+import { NameField } from '~/app/(signing)/sign/[token]/name-field';
+import { useRequiredSigningContext } from '~/app/(signing)/sign/[token]/provider';
+import { SignDialog } from '~/app/(signing)/sign/[token]/sign-dialog';
+import { SignatureField } from '~/app/(signing)/sign/[token]/signature-field';
+import { TextField } from '~/app/(signing)/sign/[token]/text-field';
+
+export type SignDirectTemplateFormProps = {
+  flowStep: DocumentFlowStep;
+  directRecipient: Recipient;
+  directRecipientFields: Field[];
+  template: TemplateWithDetails;
+  onSubmit: (_data: DirectTemplateLocalField[]) => Promise<void>;
+};
+
+export type DirectTemplateLocalField = Field & {
+  signedValue?: TSignFieldWithTokenMutationSchema;
+  Signature?: Signature;
+};
+
+export const SignDirectTemplateForm = ({
+  flowStep,
+  directRecipient,
+  directRecipientFields,
+  template,
+  onSubmit,
+}: SignDirectTemplateFormProps) => {
+  const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
+
+  const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(directRecipientFields);
+  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const { currentStep, totalSteps, previousStep } = useStep();
+
+  const onSignField = (value: TSignFieldWithTokenMutationSchema) => {
+    setLocalFields(
+      localFields.map((field) => {
+        if (field.id !== value.fieldId) {
+          return field;
+        }
+
+        const tempField: DirectTemplateLocalField = {
+          ...field,
+          customText: value.value,
+          inserted: true,
+          signedValue: value,
+        };
+
+        if (field.type === FieldType.SIGNATURE) {
+          tempField.Signature = {
+            id: 1,
+            created: new Date(),
+            recipientId: 1,
+            fieldId: 1,
+            signatureImageAsBase64: value.value,
+            typedSignature: null,
+          };
+        }
+
+        if (field.type === FieldType.DATE) {
+          tempField.customText = DateTime.now()
+            .setZone(template.templateMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE)
+            .toFormat(template.templateMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT);
+        }
+        return tempField;
+      }),
+    );
+  };
+
+  const onUnsignField = (value: TRemovedSignedFieldWithTokenMutationSchema) => {
+    setLocalFields(
+      localFields.map((field) => {
+        if (field.id !== value.fieldId) {
+          return field;
+        }
+
+        return {
+          ...field,
+          customText: '',
+          inserted: false,
+          signedValue: undefined,
+          Signature: undefined,
+        };
+      }),
+    );
+  };
+
+  const uninsertedFields = useMemo(() => {
+    return sortFieldsByPosition(localFields.filter((field) => !field.inserted));
+  }, [localFields]);
+
+  const fieldsValidated = () => {
+    setValidateUninsertedFields(true);
+    validateFieldsInserted(localFields);
+  };
+
+  const handleSubmit = async () => {
+    setValidateUninsertedFields(true);
+
+    const isFieldsValid = validateFieldsInserted(localFields);
+
+    if (!isFieldsValid) {
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      await onSubmit(localFields);
+    } catch {
+      setIsSubmitting(false);
+    }
+
+    // Do not reset to false since we do a redirect.
+  };
+
+  return (
+    <>
+      <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
+
+      <DocumentFlowFormContainerContent>
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+          {validateUninsertedFields && uninsertedFields[0] && (
+            <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
+              Click to insert field
+            </FieldToolTip>
+          )}
+
+          {localFields.map((field) =>
+            match(field.type)
+              .with(FieldType.SIGNATURE, () => (
+                <SignatureField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.NAME, () => (
+                <NameField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.DATE, () => (
+                <DateField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  dateFormat={template.templateMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT}
+                  timezone={template.templateMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.EMAIL, () => (
+                <EmailField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.TEXT, () => (
+                <TextField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .otherwise(() => null),
+          )}
+        </ElementVisible>
+
+        <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
+          <div className="flex flex-1 flex-col gap-y-4">
+            <div>
+              <Label htmlFor="full-name">Full Name</Label>
+
+              <Input
+                id="full-name"
+                value={fullName}
+                onChange={(e) => setFullName(e.target.value.trimStart())}
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="Signature">Signature</Label>
+
+              <Card className="mt-2" gradient degrees={-120}>
+                <CardContent className="p-0">
+                  <SignaturePad
+                    className="h-44 w-full"
+                    disabled={isSubmitting}
+                    defaultValue={signature ?? undefined}
+                    onChange={(value) => {
+                      setSignature(value);
+                    }}
+                  />
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </DocumentFlowFormContainerContent>
+
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep
+          title={flowStep.title}
+          step={currentStep}
+          maxStep={totalSteps}
+        />
+
+        <div className="mt-4 flex gap-x-4">
+          <Button
+            className="dark:bg-muted dark:hover:bg-muted/80 w-full bg-black/5 hover:bg-black/10"
+            size="lg"
+            variant="secondary"
+            disabled={isSubmitting}
+            onClick={previousStep}
+          >
+            Back
+          </Button>
+
+          <SignDialog
+            isSubmitting={isSubmitting}
+            onSignatureComplete={handleSubmit}
+            documentTitle={template.title}
+            fields={localFields}
+            fieldsValidated={fieldsValidated}
+            role={directRecipient.role}
+          />
+        </div>
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

apps/web/src/app/(recipient)/d/[token]/signing-auth-page.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+
+import { signOut } from 'next-auth/react';
+
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const DirectTemplateAuthPageView = () => {
+  const { toast } = useToast();
+
+  const [isSigningOut, setIsSigningOut] = useState(false);
+
+  const handleChangeAccount = async () => {
+    try {
+      setIsSigningOut(true);
+
+      await signOut({
+        callbackUrl: '/signin',
+      });
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: 'We were unable to log you out at this time.',
+        duration: 10000,
+        variant: 'destructive',
+      });
+    }
+
+    setIsSigningOut(false);
+  };
+
+  return (
+    <div className="mx-auto flex h-[70vh] w-full max-w-md flex-col items-center justify-center">
+      <div>
+        <h1 className="text-3xl font-semibold">Authentication required</h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          You need to be logged in to view this page.
+        </p>
+
+        <Button
+          className="mt-4 w-full"
+          type="submit"
+          onClick={async () => handleChangeAccount()}
+          loading={isSigningOut}
+        >
+          Login
+        </Button>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { getTeams } from '@documenso/lib/server-only/team/get-teams';
+
+import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header';
+import { NextAuthProvider } from '~/providers/next-auth';
+
+type RecipientLayoutProps = {
+  children: React.ReactNode;
+};
+
+/**
+ * A layout to handle scenarios where the user is a recipient of a given resource
+ * where we do not care whether they are authenticated or not.
+ *
+ * Such as direct template access, or signing.
+ */
+export default async function RecipientLayout({ children }: RecipientLayoutProps) {
+  const { user, session } = await getServerComponentSession();
+
+  let teams: GetTeamsResponse = [];
+
+  if (user && session) {
+    teams = await getTeams({ userId: user.id });
+  }
+
+  return (
+    <NextAuthProvider session={session}>
+      <div className="min-h-screen">
+        {user && <AuthenticatedHeader user={user} teams={teams} />}
+
+        <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]/complete/page.tsx

@@ -67,7 +67,7 @@ export default async function CompletedSigningPage({
 
   const isDocumentAccessValid = await isRecipientAuthorized({
     type: 'ACCESS',
-    document,
+    documentAuthOptions: document.authOptions,
     recipient,
     userId: user?.id,
   });
@@ -131,7 +131,7 @@ export default async function CompletedSigningPage({
               </div>
             ))
             .with({ deletedAt: null }, () => (
-              <div className="flex items-center mt-4 text-center text-blue-600">
+              <div className="mt-4 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>

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

@@ -17,6 +17,10 @@ import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { SigningFieldContainer } from './signing-field-container';
@@ -26,6 +30,8 @@ export type DateFieldProps = {
   recipient: Recipient;
   dateFormat?: string | null;
   timezone?: string | null;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
 export const DateField = ({
@@ -33,6 +39,8 @@ export const DateField = ({
   recipient,
   dateFormat = DEFAULT_DOCUMENT_DATE_FORMAT,
   timezone = DEFAULT_DOCUMENT_TIME_ZONE,
+  onSignField,
+  onUnsignField,
 }: DateFieldProps) => {
   const router = useRouter();
 
@@ -58,12 +66,19 @@ export const DateField = ({
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
-      await signFieldWithToken({
+      const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
         value: dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
         authOptions,
-      });
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {
@@ -85,10 +100,17 @@ export const DateField = ({
 
   const onRemove = async () => {
     try {
-      await removeSignedFieldWithToken({
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-      });
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {

apps/web/src/app/(signing)/sign/[token]/document-action-auth-2fa.tsx

@@ -18,7 +18,7 @@ import {
   FormLabel,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
 
 import { EnableAuthenticatorAppDialog } from '~/components/forms/2fa/enable-authenticator-app-dialog';
 
@@ -138,7 +138,15 @@ export const DocumentActionAuth2FA = ({
                   <FormLabel required>2FA token</FormLabel>
 
                   <FormControl>
-                    <Input {...field} placeholder="Token" />
+                    <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                      {Array(6)
+                        .fill(null)
+                        .map((_, i) => (
+                          <PinInputGroup key={i}>
+                            <PinInputSlot index={i} />
+                          </PinInputGroup>
+                        ))}
+                    </PinInput>
                   </FormControl>
 
                   <FormMessage />

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

@@ -34,9 +34,9 @@ type PasskeyData = {
 
 export type DocumentAuthContextValue = {
   executeActionAuthProcedure: (_value: ExecuteActionAuthProcedureOptions) => Promise<void>;
-  document: Document;
+  documentAuthOptions: Document['authOptions'];
   documentAuthOption: TDocumentAuthOptions;
-  setDocument: (_value: Document) => void;
+  setDocumentAuthOptions: (_value: Document['authOptions']) => void;
   recipient: Recipient;
   recipientAuthOption: TRecipientAuthOptions;
   setRecipient: (_value: Recipient) => void;
@@ -69,19 +69,19 @@ export const useRequiredDocumentAuthContext = () => {
 };
 
 export interface DocumentAuthProviderProps {
-  document: Document;
+  documentAuthOptions: Document['authOptions'];
   recipient: Recipient;
   user?: User | null;
   children: React.ReactNode;
 }
 
 export const DocumentAuthProvider = ({
-  document: initialDocument,
+  documentAuthOptions: initialDocumentAuthOptions,
   recipient: initialRecipient,
   user,
   children,
 }: DocumentAuthProviderProps) => {
-  const [document, setDocument] = useState(initialDocument);
+  const [documentAuthOptions, setDocumentAuthOptions] = useState(initialDocumentAuthOptions);
   const [recipient, setRecipient] = useState(initialRecipient);
 
   const [isCurrentlyAuthenticating, setIsCurrentlyAuthenticating] = useState(false);
@@ -95,10 +95,10 @@ export const DocumentAuthProvider = ({
   } = useMemo(
     () =>
       extractDocumentAuthMethods({
-        documentAuth: document.authOptions,
+        documentAuth: documentAuthOptions,
         recipientAuth: recipient.authOptions,
       }),
-    [document, recipient],
+    [documentAuthOptions, recipient],
   );
 
   const passkeyQuery = trpc.auth.findPasskeys.useQuery(
@@ -189,8 +189,8 @@ export const DocumentAuthProvider = ({
     <DocumentAuthContext.Provider
       value={{
         user,
-        document,
-        setDocument,
+        documentAuthOptions,
+        setDocumentAuthOptions,
         executeActionAuthProcedure,
         recipient,
         setRecipient,

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

@@ -12,6 +12,10 @@ import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import type { Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredSigningContext } from './provider';
@@ -20,9 +24,11 @@ import { SigningFieldContainer } from './signing-field-container';
 export type EmailFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const EmailField = ({ field, recipient }: EmailFieldProps) => {
+export const EmailField = ({ field, recipient, onSignField, onUnsignField }: EmailFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -43,13 +49,22 @@ export const EmailField = ({ field, recipient }: EmailFieldProps) => {
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
-      await signFieldWithToken({
+      const value = providedEmail ?? '';
+
+      const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-        value: providedEmail ?? '',
+        value,
         isBase64: false,
         authOptions,
-      });
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {
@@ -71,10 +86,17 @@ export const EmailField = ({ field, recipient }: EmailFieldProps) => {
 
   const onRemove = async () => {
     try {
-      await removeSignedFieldWithToken({
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-      });
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {

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

@@ -145,7 +145,7 @@ export const SigningForm = ({ document, recipient, fields, redirectUrl }: Signin
                   <SignDialog
                     isSubmitting={isSubmitting}
                     onSignatureComplete={handleSubmit(onFormSubmit)}
-                    document={document}
+                    documentTitle={document.title}
                     fields={fields}
                     fieldsValidated={fieldsValidated}
                     role={recipient.role}
@@ -208,7 +208,7 @@ export const SigningForm = ({ document, recipient, fields, redirectUrl }: Signin
                   <SignDialog
                     isSubmitting={isSubmitting}
                     onSignatureComplete={handleSubmit(onFormSubmit)}
-                    document={document}
+                    documentTitle={document.title}
                     fields={fields}
                     fieldsValidated={fieldsValidated}
                     role={recipient.role}

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

@@ -12,6 +12,10 @@ import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { type Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
 import { Input } from '@documenso/ui/primitives/input';
@@ -25,9 +29,11 @@ import { SigningFieldContainer } from './signing-field-container';
 export type NameFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const NameField = ({ field, recipient }: NameFieldProps) => {
+export const NameField = ({ field, recipient, onSignField, onUnsignField }: NameFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -83,13 +89,20 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
         return;
       }
 
-      await signFieldWithToken({
+      const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
         value,
         isBase64: false,
         authOptions,
-      });
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {
@@ -111,10 +124,17 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
 
   const onRemove = async () => {
     try {
-      await removeSignedFieldWithToken({
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-      });
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {

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

@@ -10,6 +10,7 @@ import { getCompletedFieldsForToken } from '@documenso/lib/server-only/field/get
 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 { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
+import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-email';
 import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { extractNextHeaderRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
@@ -65,13 +66,19 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
 
   const isDocumentAccessValid = await isRecipientAuthorized({
     type: 'ACCESS',
-    document,
+    documentAuthOptions: document.authOptions,
     recipient,
     userId: user?.id,
   });
 
+  let recipientHasAccount: boolean | null = null;
+
   if (!isDocumentAccessValid) {
-    return <SigningAuthPageView email={recipient.email} />;
+    recipientHasAccount = await getUserByEmail({ email: recipient?.email })
+      .then((user) => !!user)
+      .catch(() => false);
+
+    return <SigningAuthPageView email={recipient.email} emailHasAccount={!!recipientHasAccount} />;
   }
 
   await viewedDocument({
@@ -126,7 +133,11 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
       fullName={user?.email === recipient.email ? user.name : recipient.name}
       signature={user?.email === recipient.email ? user.signature : undefined}
     >
-      <DocumentAuthProvider document={document} recipient={recipient} user={user}>
+      <DocumentAuthProvider
+        documentAuthOptions={document.authOptions}
+        recipient={recipient}
+        user={user}
+      >
         <SigningPageView
           recipient={recipient}
           document={document}

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import type { Document, Field } from '@documenso/prisma/client';
+import type { Field } from '@documenso/prisma/client';
 import { RecipientRole } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -16,7 +16,7 @@ import { truncateTitle } from '~/helpers/truncate-title';
 
 export type SignDialogProps = {
   isSubmitting: boolean;
-  document: Document;
+  documentTitle: string;
   fields: Field[];
   fieldsValidated: () => void | Promise<void>;
   onSignatureComplete: () => void | Promise<void>;
@@ -25,14 +25,14 @@ export type SignDialogProps = {
 
 export const SignDialog = ({
   isSubmitting,
-  document,
+  documentTitle,
   fields,
   fieldsValidated,
   onSignatureComplete,
   role,
 }: SignDialogProps) => {
   const [showDialog, setShowDialog] = useState(false);
-  const truncatedTitle = truncateTitle(document.title);
+  const truncatedTitle = truncateTitle(documentTitle);
   const isComplete = fields.every((field) => field.inserted);
 
   const handleOpenChange = (open: boolean) => {
@@ -40,18 +40,6 @@ export const SignDialog = ({
       return;
     }
 
-    // Reauth is currently not required for signing the document.
-    // if (isAuthRedirectRequired) {
-    //   await executeActionAuthProcedure({
-    //     actionTarget: 'DOCUMENT',
-    //     onReauthFormSubmit: () => {
-    //       // Do nothing since the user should be redirected.
-    //     },
-    //   });
-
-    //   return;
-    // }
-
     setShowDialog(open);
   };
 

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

@@ -12,6 +12,10 @@ import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { type Recipient } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
 import { Label } from '@documenso/ui/primitives/label';
@@ -29,9 +33,16 @@ type SignatureFieldState = 'empty' | 'signed-image' | 'signed-text';
 export type SignatureFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
+export const SignatureField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: SignatureFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -105,13 +116,20 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
         return;
       }
 
-      await signFieldWithToken({
+      const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
         value,
         isBase64: true,
         authOptions,
-      });
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {
@@ -133,10 +151,17 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
 
   const onRemove = async () => {
     try {
-      await removeSignedFieldWithToken({
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-      });
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {

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

@@ -11,9 +11,10 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type SigningAuthPageViewProps = {
   email: string;
+  emailHasAccount?: boolean;
 };
 
-export const SigningAuthPageView = ({ email }: SigningAuthPageViewProps) => {
+export const SigningAuthPageView = ({ email, emailHasAccount }: SigningAuthPageViewProps) => {
   const { toast } = useToast();
 
   const [isSigningOut, setIsSigningOut] = useState(false);
@@ -30,7 +31,9 @@ export const SigningAuthPageView = ({ email }: SigningAuthPageViewProps) => {
       });
 
       await signOut({
-        callbackUrl: `/signin?email=${encodeURIComponent(encryptedEmail)}`,
+        callbackUrl: emailHasAccount
+          ? `/signin?email=${encodeURIComponent(encryptedEmail)}`
+          : `/signup?email=${encodeURIComponent(encryptedEmail)}`,
       });
     } catch {
       toast({
@@ -59,7 +62,7 @@ export const SigningAuthPageView = ({ email }: SigningAuthPageViewProps) => {
           onClick={async () => handleChangeAccount(email)}
           loading={isSigningOut}
         >
-          Login
+          {emailHasAccount ? 'Login' : 'Sign up'}
         </Button>
       </div>
     </div>