v1.6.0-rc.3

vial 21 cfr blogpost

.env.example

@@ -78,6 +78,8 @@ NEXT_PRIVATE_SMTP_APIKEY_USER=
 NEXT_PRIVATE_SMTP_APIKEY=
 # OPTIONAL: Defines whether to force the use of TLS.
 NEXT_PRIVATE_SMTP_SECURE=
+# OPTIONAL: if this is true and NEXT_PRIVATE_SMTP_SECURE is false then TLS is not used even if the server supports STARTTLS extension
+NEXT_PRIVATE_SMTP_UNSAFE_IGNORE_TLS=
 # REQUIRED: Defines the sender name to use for the from address.
 NEXT_PRIVATE_SMTP_FROM_NAME="Documenso"
 # REQUIRED: Defines the email address to use as the from address.
@@ -103,6 +105,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: {

.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/announcing-profiles.mdx

@@ -0,0 +1,68 @@
+---
+title: Documenso Profiles Are Here
+description: Today, we are launching Documenso Profiles, a new way to let your peers sign your documents.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-07-01
+tags:
+  - Announcement
+  - Direct Links
+  - Profiles
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/profile1.png"
+    width="1260"
+    height="1260"
+    alt="Documenso Profile of Timur"
+  />
+
+  <figcaption className="text-center">Let people sign anytime with Documenso Profiles. Try it [with my profile](https://app.documenso.com/p/timur).</figcaption>
+</figure>
+
+> TLDR; We are launching a Documenso Profile where you can display your templates for everyone to sign at any time.
+
+## Introducing Documenso Profiles
+
+Today, I’m excited to announce that we are launching Documenso Profiles 🎉 While we have been focussing on the conventional signing experience so far, Direct Links and now profiles are our first steps to bring some long-awaited innovation back to digital signatures.
+
+Documenso Profiles allows you to share any template with a public link in a very easy-to-understand way. Adding templates to your profiles allows everyone to sign your documents just when they need to. Forms, NDAs, Disclaimers, and even contracts are now available anytime they are needed. Profiles turn the classic signing flow on its head by letting the recipient sign first before the document’s owner becomes active. Booking links (e.g., Cal.com) and customer self-service portals (e.g., Stripe Billing Portal) are becoming the norm, so it’s time we did the same for signing.
+
+## The Best Way to Share Your Singing Links
+
+With profiles, we want to offer you the best way to share your standing Documenso Template Links in a public place. You can add your Documenso Profile to your social profiles, Email footer, Video Description, or wherever your audience, customers, and partners interact with you. The profile will be a public, trusted place to ensure you know who you are dealing with.
+
+Looking at the classical social media fake profile problem, we know this is tricky to achieve. We will pay close attention to how profiles are used and how we can help the community use them easily and securely. As a first step towards this direction, we are introducing a trust badge next to your name. There will be 3 levels to start:
+
+- Free Users: No Badge
+- Paid Users: Green Badge
+- Early Adopters: Gold Badge
+
+<figure>
+  <MdxNextImage
+    src="/blog/profile2.png"
+    width="1260"
+    height="1260"
+    alt="Documenso Profile Edit Screen"
+  />
+
+  <figcaption className="text-center">Add and remove templates anytime.</figcaption>
+</figure>
+
+## An Open Economy built on Documenso
+
+We see offering profiles as a first step towards creating a full economy on top of the open signing ecosystem we envision. While we want to keep building the product with the community, we also want an economy to grow on the open tech we create. This includes using the tech (profiles) or offering service on top of the tech (hosting and customization). Our ecosystem is still young, and the goal is not to have Documenso Inc. as the only commercial actor but to fill our own niche in a global and thriving open ecosystem. One of our guiding principles is solving things once and for all. While our focus will be on the core signing product, we want to enable others to offer templates for use on profiles or privately. A lot of contracts, forms, and other paperwork have been recreated countless times. Offering high-quality, peer-reviewed templates is a natural extension of the current platform. There will be free templates, offered as marketing for their creators, and paid templates, offered as actual products.
+
+## What's next
+
+While an open signing economy is really exciting, we know it will take time to mature. Building out a mature ecosystem for builders and entrepreneurs takes time. While this aspect of Documenso matures, we will be focussing on the core of the platform: Letting you integrate and embed Documenso wherever you want it.
+
+If you already have a Documenso account, you can [activate your profile here](https://app.documenso.com/settings/public-profile).
+Don’t have an account and want to check out profiles? You can do so using our [free plan](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/announcing-vial-21-cfr-part-11.mdx

@@ -0,0 +1,73 @@
+---
+title: 21 CFR Part 11 is here, and so is Vial.com
+description: We launched Vial.com with a 21 CFR Part 11 compliant setup. Reach out if 21 CFR Part 11 compliance is among your needs.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-07-18
+tags:
+  - Vial.com
+  - 21 CFR Part 11
+  - Compliance
+---
+
+<video
+  id="vid"
+  width="100%"
+  src="/blog/vial.webm"
+  autoPlay
+  loop
+  muted
+></video>
+<figcaption className="text-center">
+  Vial.com uses Documenso for 21 CFR Part 11 compliant signing.
+</figcaption>
+
+> TLDR; We launched Vial.com on Documenso and are open for 21 CFR Part 11 business.
+
+# What is 21 CFR
+You have never heard of 21 CFR Part 11? You are in good company since most people haven't. If you have, you probably work in an industry regulated by the  U.S. Food and Drug Administration (FDA). Title 21 of the Code of Federal Regulations (CFR) is dedicated to detailing FDA-regulated business, and sub-part 11 sets out guidelines for using electronic signatures in this highly regulated field. Hence, 21 CFR Part 11 is highly relevant for regulated industries that aim to employ digital signatures. The guidelines set out in 21 CFR Part 11 aim to provide trustworthy, reliable, and equivalent to paper records and handwritten signatures. All Industries that fall under the FDA's regulation, e.g. pharmaceuticals, biotechnology, medical devices, and biologics, must comply with these rules when choosing or creating systems for electronic signatures.
+
+Compliance with 21 CFR Part 11 is crucial for companies to use electronic records and signatures in their operations legally. It affects how companies manage documentation, conduct audits, and maintain regulatory submissions. Non-compliance can result in legal penalties, rejected submissions, and delays in product approvals, emphasizing the importance of adhering to these guidelines in FDA-regulated activities.
+
+# Vial.com
+Vial is a technology company on a mission to advance programs to market through computationally designed therapeutics and cost-effective clinical trials. It is imperative that Vial manages this process securely, effectively, and highly compliant. By leveraging it's modern platform, Vial aims to accelerate drug development and, ultimately, time to market for new therapies. You can learn more about them [here](https://vial.com/about-us).
+
+[Together](https://documen.so/vial-documenso), Documenso and Vial set out to create the first open-source, 21 CFR Part 11 compliant signing solution. After iterating over the product together, Vial moved their operation from DocuSign, a known legacy signing provider, to a Documenso Enterprise plan. We are very happy to be able to support Vial’s mission by fulfilling our own: bringing open signing and all its innovation to where it's needed.
+
+# 21 CFR Part 11 on Documenso Highlights
+21 CFR Part 11 is a highly complex statute, and going into the all design rationales and the following implementation details, deserves its own article later. For now, I want to share a few notable highlights.
+
+## The Full Experience
+We implemented 21 CFR Part 11, keeping the main user experience of Documenso intact. Our 21 CFR module is not separate but natively integrated into all Documenso flows, thus not sacrificing usability for compliance. This also means most (if not all) advanced features we offer are usable in a compliant way. This prevents customers from being trapped in an anti-innovation bubble, not allowing access to new features for fear of non-compliance.
+
+## Action Reauth Using Passkeys
+<video
+  id="vid"
+  width="100%"
+  src="/blog/vial2.webm"
+  autoPlay
+  loop
+  muted
+  controls
+></video>
+<figcaption className="text-center">
+  Using passkeys (used here via fingerprint scanner) is the smoothest way to re-authenticate.
+</figcaption>
+
+
+One of the requirements affecting day-to-day life the most is the requirement to actually reauthenticate every signature placed on a document. While we can't change that, we can help make the reauthentication as painless as possible. To this end, we opted for passkeys. While Documenso supports passkeys to log in, they are also supported to authenticate signing on a per-signature level as part of the Documenso Enterprise Plan. The user still has to authenticate every signature but can now do so from the comfort of their passkey provider, be that 1Password, their browser, or any other provider.
+
+## Direct Links
+We recently launched [Direct Template Links](https://documen.so/direct-links), a new way to let people sign and fill out forms. Links can be completed anytime, creating a new document in the process. Direct Links are also 21 CFR part 11 compliant, using action reauthentication, audit log, and all other compliance requirements.
+
+# Documenso Enterprise Plan
+With the successful launch of Vial, we are now open for business. 21 CFR Part 11 compliance is part of the Documenso Enterprise plan, which includes all regulations we currently support and upcoming additions. While the pricing depends heavily on your needs and scale, we offer fixed-price plans for better predictability for both sides. In our experience, volume-based pricing is a legacy headache we want to avoid.
+
+If you are FDA-regulated and looking for a modern signing solution, we are happy to discuss your requirements in detail. You can write us (hi@documenso.com) or contact [our enterprise team](https://documen.so/21cfr) at any time or stage.
+
+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/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,95 @@
+---
+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
+  - Productivity
+---
+
+<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

@@ -7,7 +7,7 @@ authorRole: 'Co-Founder'
 date: 2024-06-12
 tags:
   - Early Adopters
-  - Pricing 
+  - Pricing
   - Open Startup
 ---
 
@@ -27,9 +27,11 @@ tags:
 > 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. 
+
+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.
@@ -39,6 +41,7 @@ Our **Free Plan** stays unchanged, offering coverage to casual users and an easy
 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.
@@ -46,4 +49,4 @@ We also have a lot in the pipeline, and we are excited to share everything with
 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
+Timur

apps/marketing/content/blog/top-3-efficiency-hacks-for-freelancers.mdx

@@ -0,0 +1,51 @@
+---
+title: Top 3 Signing Efficiency Hacks for Freelancers
+description: Streamlining signing contracts and paperwork is crucial for freelancers looking to save time and focus on their business. Take a look at these 3 tips on how Documenso can help you.
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-07-04
+tags:
+  - Productivity
+  - Zapier
+  - Direct Links
+---
+
+<figure>
+  <MdxNextImage
+    src="/blog/zen.webp"
+    width="1400"
+    height="884"
+    alt="Direct Links in Templates List View"
+  />
+
+  <figcaption className="text-center">Documenso helps you reduce your cognitive load while running your business.</figcaption>
+</figure>
+
+> TLDR; Set up notifications using Zapier, use a redirect to send users to the next step, and start working async with direct links.
+
+Signing all the paperwork of a freelance business can be a headache. Besides adding to the daily workload, it can pull much focus from your core tasks. Let's take a look at how Documenso can help you keep the cognitive load of admin tasks to a minimum:
+
+## Tip 1: Set Up Notifications
+> At Documenso, we pipe almost everything relevant into Discord. This helps us naturally keep track and start conversations.
+
+Getting customers and partners to sign off on critical agreements is no easy feat. It's even harder when keeping track forces you to switch between channels (email, WhatsApp, Discord, Slack, Notion, etc.). Setting up custom notifications for read or signed documents can help you keep track naturally. Using the Documenso [Zapier Integration](https://documen.so/zapier) lets you funnel important document events to the place where your focus is. Pipe send, read, and sign notifications directly to your Telegram account. Keep up to date on the go. Sync document completion events to your CRM. Ideally, a signed document does not give you any "homework”. Besides, you are already busy getting started on the actual work.
+
+## Tip 2: Use Redirects
+Your client signed the deal? Your designer signed their statement of work? Great. Don't risk losing steam getting from one step to the next. Your customers and partners have just as much noise around them as you. Help them to stay on task by doing the next thing easily. Documenso lets you set up redirects to send signers to where they need to go next. Send your newest customer to a booking page for onboarding. Forward your designer to the next briefing you prepared. Keeping up flow is critical; sending everyone where they need to go while in focus mode helps get things done faster.
+
+## Tip 3: Go Async with Direct Links
+> Try Direct Links by signing our [Supporters Pledge](https://documen.so/pledge)
+
+Your customer wanting to approve an additional budget is great. It’s so great. In fact, you want to get on it as soon as possible and not have a calm moment until you send them something to sign. Even if you are fast, you are not mind-ready, though. So, what if your customers could do it whenever they like?
+
+Direct Links lets you set up proposal templates and contracts, which are ready to sign anytime. You can include them in your [initial proposal](https://documen.so/freelance-proposal) or on your [public profile](https://documen.so/profiles). This way, customers can get more of your offering whenever they want. 
+
+## Conclusion
+Setting up notifications, redirects, and direct signing links using your favorite open source DocuSign alternative helps streamline your business and reduce the cognitive load of managing it. You can get everything mentioned here plus 5 free monthly signatures in the [Documenso Free Plan](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/changelog.mdx

@@ -0,0 +1,75 @@
+---
+title: Changelog - Documenso
+---
+
+# Changelog
+
+Check out what's new in the latest version and read our thoughts on it. For more technical details, you can find our releases on GitHub [here](https://github.com/documenso/documenso/releases). You can find our [release candidates here](https://github.com/documenso/documenso/tags).
+
+---
+
+## v1.5.6 (latest)
+
+### <small>Released 28th June 2024</small>
+
+> This release contains [11 fixes](https://github.com/documenso/documenso/releases/tag/v1.5.6)
+
+### 🕗 Show Creation Time
+
+We are now displaying the document creation time in the documents view. This allows for easier identification of multiple documents created on the same day.
+
+### 🔗 Direct Template Links
+
+With this release, we are introducing direct link templates. This allows you to statically link to any template and let anyone with the link sign it at any time. A new document is created in your account when a template is signed. Templates with direct links still support all other template features, allowing you to create intricate workflows triggered by the signers.
+
+Learn more about Direct Links [on our blog](https://documenso.com/blog/announcing-direct-links) or try them by signing the [Documenso Supporters Pledge](https://documen.so/pledge).
+
+### 🛂 OpenID Connect (OIDC) Support
+
+Thanks to [Matt Kilgore](https://github.com/tankerkiller125), Documenso now supports OIDC as an authentication provider. This allows self-hosted users to define whatever identity provider they want as long as it supports the OIDC. Azure, Zitadel, Authentik, KeyCloak, and Google all support OIDC.
+
+---
+
+## v1.5.5
+
+### <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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/marketing",
-  "version": "1.2.3",
+  "version": "1.6.0-rc.3",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
@@ -41,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"
   },

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)/singleplayer/client.tsx

@@ -98,6 +98,7 @@ export const SinglePlayerClient = () => {
         height: new Prisma.Decimal(field.pageHeight),
         customText: '',
         inserted: false,
+        fieldMeta: field.fieldMeta ?? {},
       })),
     );
 
@@ -131,7 +132,9 @@ export const SinglePlayerClient = () => {
           positionY: field.positionY.toNumber(),
           width: field.width.toNumber(),
           height: field.height.toNumber(),
+          fieldMeta: field.fieldMeta,
         })),
+        fieldMeta: { type: undefined },
       });
 
       analytics.capture('Marketing: SPM - Document signed', {

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

@@ -30,6 +30,12 @@ const SLIDES = [
     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',
@@ -235,16 +241,16 @@ export const Carousel = () => {
           </div>
         </div>
 
-        <div className="dark:bg-background absolute bottom-2 right-2 flex w-[5%] flex-col items-center space-y-1 rounded-lg bg-white  p-1.5">
-          <span className="text-foreground dark:text-muted-foreground text-xs">
+        <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-12 max-w-4xl px-2">
-        <div className="mt-2 flex justify-between" ref={emblaThumbsRef}>
+      <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}

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)/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 or $100
+              Save $60 or $120
             </div>
             {period === 'YEARLY' && (
               <motion.div
@@ -143,7 +143,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           <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">$500</motion.div>}
+              {period === 'YEARLY' && <motion.div layoutId="pricingTeams">$480</motion.div>}
             </AnimatePresence>
           </div>
 
@@ -166,7 +166,9 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
             <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 $10/ mo.</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)/slide.tsx

@@ -17,7 +17,7 @@ export const Slide: React.FC<SlideProps> = (props) => {
       onClick={onClick}
       type="button"
       className={cn(
-        'text-muted-foreground dark:text-muted-foreground/60 border-b-2 border-transparent py-4',
+        '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,
         },

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/web",
-  "version": "1.2.3",
+  "version": "1.6.0-rc.3",
   "private": true,
   "license": "AGPL-3.0",
   "scripts": {
@@ -48,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",

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/nav.tsx

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { BarChart3, FileStack, Settings, User2, Wallet2 } from 'lucide-react';
+import { BarChart3, FileStack, Settings, Users, Wallet2 } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -46,7 +46,7 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
         asChild
       >
         <Link href="/admin/users">
-          <User2 className="mr-2 h-5 w-5" />
+          <Users className="mr-2 h-5 w-5" />
           Users
         </Link>
       </Button>

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

@@ -2,30 +2,49 @@ import {
   File,
   FileCheck,
   FileClock,
+  FileCog,
   FileEdit,
   Mail,
   MailOpen,
   PenTool,
-  User as UserIcon,
-  UserPlus2,
+  UserPlus,
   UserSquare2,
+  Users,
 } from 'lucide-react';
 
 import { getDocumentStats } from '@documenso/lib/server-only/admin/get-documents-stats';
 import { getRecipientsStats } from '@documenso/lib/server-only/admin/get-recipients-stats';
 import {
+  getUserWithSignedDocumentMonthlyGrowth,
   getUsersCount,
   getUsersWithSubscriptionsCount,
 } from '@documenso/lib/server-only/admin/get-users-stats';
+import { getSignerConversionMonthly } from '@documenso/lib/server-only/user/get-signer-conversion';
 
 import { CardMetric } from '~/components/(dashboard)/metric-card/metric-card';
 
+import { SignerConversionChart } from './signer-conversion-chart';
+import { UserWithDocumentChart } from './user-with-document';
+
 export default async function AdminStatsPage() {
-  const [usersCount, usersWithSubscriptionsCount, docStats, recipientStats] = await Promise.all([
+  const [
+    usersCount,
+    usersWithSubscriptionsCount,
+    docStats,
+    recipientStats,
+    signerConversionMonthly,
+    // userWithAtLeastOneDocumentPerMonth,
+    // userWithAtLeastOneDocumentSignedPerMonth,
+    MONTHLY_USERS_SIGNED,
+  ] = await Promise.all([
     getUsersCount(),
     getUsersWithSubscriptionsCount(),
     getDocumentStats(),
     getRecipientsStats(),
+    getSignerConversionMonthly(),
+    // getUserWithAtLeastOneDocumentPerMonth(),
+    // getUserWithAtLeastOneDocumentSignedPerMonth(),
+    getUserWithSignedDocumentMonthlyGrowth(),
   ]);
 
   return (
@@ -33,22 +52,22 @@ export default async function AdminStatsPage() {
       <h2 className="text-4xl font-semibold">Instance Stats</h2>
 
       <div className="mt-8 grid flex-1 grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <CardMetric icon={UserIcon} title="Total Users" value={usersCount} />
+        <CardMetric icon={Users} title="Total Users" value={usersCount} />
         <CardMetric icon={File} title="Total Documents" value={docStats.ALL} />
         <CardMetric
-          icon={UserPlus2}
+          icon={UserPlus}
           title="Active Subscriptions"
           value={usersWithSubscriptionsCount}
         />
-        <CardMetric icon={UserPlus2} title="App Version" value={`v${process.env.APP_VERSION}`} />
+
+        <CardMetric icon={FileCog} 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 +77,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 +89,29 @@ 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-8">
+          <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"
+          />
+          <SignerConversionChart title="Signers that Signed Up" data={signerConversionMonthly} />
+          <SignerConversionChart
+            title="Total Signers that Signed Up"
+            data={signerConversionMonthly}
+            cummulative
+          />
+        </div>
+      </div>
     </div>
   );
 }

apps/web/src/app/(dashboard)/admin/stats/signer-conversion-chart.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetSignerConversionMonthlyResult } from '@documenso/lib/server-only/user/get-signer-conversion';
+
+export type SignerConversionChartProps = {
+  className?: string;
+  title: string;
+  cummulative?: boolean;
+  data: GetSignerConversionMonthlyResult;
+};
+
+export const SignerConversionChart = ({
+  className,
+  data,
+  title,
+  cummulative = false,
+}: SignerConversionChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, count, cume_count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('MMM yyyy'),
+      count: Number(count),
+      signed_count: Number(cume_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 px-4">
+          <h3 className="text-lg font-semibold">{title}</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value, name) => [
+                Number(value).toLocaleString('en-US'),
+                name === 'Recipients',
+              ]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey={cummulative ? 'signed_count' : 'count'}
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Recipients"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </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 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)/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

@@ -172,6 +172,7 @@ export const EditDocumentForm = ({
         teamId: team?.id,
         data: {
           title: data.title,
+          externalId: data.externalId || null,
           globalAccessAuth: data.globalAccessAuth ?? null,
           globalActionAuth: data.globalActionAuth ?? null,
         },
@@ -231,6 +232,14 @@ export const EditDocumentForm = ({
         fields: data.fields,
       });
 
+      // Clear all field data from localStorage
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key && key.startsWith('field_')) {
+          localStorage.removeItem(key);
+        }
+      }
+
       // Router refresh is here to clear the router cache for when navigating to /documents.
       router.refresh();
 
@@ -240,7 +249,7 @@ export const EditDocumentForm = ({
 
       toast({
         title: 'Error',
-        description: 'An error occurred while adding signers.',
+        description: 'An error occurred while adding the fields.',
         variant: 'destructive',
       });
     }
@@ -350,6 +359,7 @@ export const EditDocumentForm = ({
               fields={fields}
               onSubmit={onAddFieldsFormSubmit}
               isDocumentPdfLoaded={isDocumentPdfLoaded}
+              teamId={team?.id}
             />
 
             <AddSubjectFormPartial

apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx

@@ -150,7 +150,7 @@ export const ResendDocumentActionItem = ({
 
                       <FormControl>
                         <Checkbox
-                          className="h-5 w-5 rounded-full data-[state=checked]:border-black data-[state=checked]:bg-black "
+                          className="h-5 w-5 rounded-full data-[state=checked]:border-black data-[state=checked]:bg-black"
                           checkClassName="text-white"
                           value={recipient.id}
                           checked={value.includes(recipient.id)}

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

@@ -12,6 +12,7 @@ import {
   EyeIcon,
   Loader,
   MoreHorizontal,
+  MoveRight,
   Pencil,
   Share,
   Trash2,
@@ -37,6 +38,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { ResendDocumentActionItem } from './_action-items/resend-document';
 import { DeleteDocumentDialog } from './delete-document-dialog';
 import { DuplicateDocumentDialog } from './duplicate-document-dialog';
+import { MoveDocumentDialog } from './move-document-dialog';
 
 export type DataTableActionDropdownProps = {
   row: Document & {
@@ -53,6 +55,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
+  const [isMoveDialogOpen, setMoveDialogOpen] = useState(false);
 
   if (!session) {
     return null;
@@ -157,6 +160,14 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
           Duplicate
         </DropdownMenuItem>
 
+        {/* We don't want to allow teams moving documents across at the moment. */}
+        {!team && (
+          <DropdownMenuItem onClick={() => setMoveDialogOpen(true)}>
+            <MoveRight className="mr-2 h-4 w-4" />
+            Move to Team
+          </DropdownMenuItem>
+        )}
+
         {/* No point displaying this if there's no functionality. */}
         {/* <DropdownMenuItem disabled>
           <XCircle className="mr-2 h-4 w-4" />
@@ -199,6 +210,12 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
         canManageDocument={canManageDocument}
       />
 
+      <MoveDocumentDialog
+        documentId={row.id}
+        open={isMoveDialogOpen}
+        onOpenChange={setMoveDialogOpen}
+      />
+
       {isDuplicateDialogOpen && (
         <DuplicateDocumentDialog
           id={row.id}

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

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
 import type { PeriodSelectorValue } from '@documenso/lib/server-only/document/find-documents';
@@ -10,7 +11,7 @@ import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Team, TeamEmail } from '@documenso/prisma/client';
 import { isExtendedDocumentStatus } from '@documenso/prisma/guards/is-extended-document-status';
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
-import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
 import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
 
 import { PeriodSelector } from '~/components/(dashboard)/period-selector/period-selector';
@@ -94,6 +95,9 @@ export const DocumentsPageView = async ({ searchParams = {}, team }: DocumentsPa
         <div className="flex flex-row items-center">
           {team && (
             <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+              {team.avatarImageId && (
+                <AvatarImage src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${team.avatarImageId}`} />
+              )}
               <AvatarFallback className="text-xs text-gray-400">
                 {team.name.slice(0, 1)}
               </AvatarFallback>

apps/web/src/app/(dashboard)/documents/move-document-dialog.tsx

@@ -0,0 +1,117 @@
+import { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { trpc } from '@documenso/trpc/react';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type MoveDocumentDialogProps = {
+  documentId: number;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+};
+
+export const MoveDocumentDialog = ({ documentId, open, onOpenChange }: MoveDocumentDialogProps) => {
+  const router = useRouter();
+  const { toast } = useToast();
+  const [selectedTeamId, setSelectedTeamId] = useState<number | null>(null);
+
+  const { data: teams, isLoading: isLoadingTeams } = trpc.team.getTeams.useQuery();
+  const { mutateAsync: moveDocument, isLoading } = trpc.document.moveDocumentToTeam.useMutation({
+    onSuccess: () => {
+      router.refresh();
+      toast({
+        title: 'Document moved',
+        description: 'The document has been successfully moved to the selected team.',
+        duration: 5000,
+      });
+      onOpenChange(false);
+    },
+    onError: (error) => {
+      toast({
+        title: 'Error',
+        description: error.message || 'An error occurred while moving the document.',
+        variant: 'destructive',
+        duration: 7500,
+      });
+    },
+  });
+
+  const onMove = async () => {
+    if (!selectedTeamId) return;
+    await moveDocument({ documentId, teamId: selectedTeamId });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Move Document to Team</DialogTitle>
+          <DialogDescription>
+            Select a team to move this document to. This action cannot be undone.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Select onValueChange={(value) => setSelectedTeamId(Number(value))}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select a team" />
+          </SelectTrigger>
+          <SelectContent>
+            {isLoadingTeams ? (
+              <SelectItem value="loading" disabled>
+                Loading teams...
+              </SelectItem>
+            ) : (
+              teams?.map((team) => (
+                <SelectItem key={team.id} value={team.id.toString()}>
+                  <div className="flex items-center gap-4">
+                    <Avatar className="h-8 w-8">
+                      {team.avatarImageId && (
+                        <AvatarImage
+                          src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${team.avatarImageId}`}
+                        />
+                      )}
+
+                      <AvatarFallback className="text-sm text-gray-400">
+                        {team.name.slice(0, 1).toUpperCase()}
+                      </AvatarFallback>
+                    </Avatar>
+
+                    <span>{team.name}</span>
+                  </div>
+                </SelectItem>
+              ))
+            )}
+          </SelectContent>
+        </Select>
+
+        <DialogFooter>
+          <Button variant="secondary" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={onMove} loading={isLoading} disabled={!selectedTeamId || isLoading}>
+            {isLoading ? 'Moving...' : 'Move'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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)/settings/teams/team-invitations.tsx

@@ -3,6 +3,7 @@
 import { AnimatePresence } from 'framer-motion';
 import { BellIcon } from 'lucide-react';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { formatTeamUrl } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
@@ -55,6 +56,9 @@ export const TeamInvitations = () => {
                     {data.map((invitation) => (
                       <li key={invitation.teamId}>
                         <AvatarWithText
+                          avatarSrc={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${
+                            invitation.team.avatarImageId
+                          }`}
                           className="w-full max-w-none py-4"
                           avatarFallback={invitation.team.name.slice(0, 1)}
                           primaryText={

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

@@ -12,10 +12,7 @@ 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';
-import {
-  DocumentFlowFormContainer,
-  DocumentFlowFormContainerHeader,
-} from '@documenso/ui/primitives/document-flow/document-flow-root';
+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';
@@ -132,6 +129,7 @@ export const EditTemplateForm = ({
         teamId: team?.id,
         data: {
           title: data.title,
+          externalId: data.externalId || null,
           globalAccessAuth: data.globalAccessAuth ?? null,
           globalActionAuth: data.globalActionAuth ?? null,
         },
@@ -183,6 +181,14 @@ export const EditTemplateForm = ({
         fields: data.fields,
       });
 
+      // Clear all field data from localStorage
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key && key.startsWith('field_')) {
+          localStorage.removeItem(key);
+        }
+      }
+
       toast({
         title: 'Template saved',
         description: 'Your templates has been saved successfully.',
@@ -231,11 +237,6 @@ export const EditTemplateForm = ({
           className="lg:h-[calc(100vh-6rem)]"
           onSubmit={(e) => e.preventDefault()}
         >
-          <DocumentFlowFormContainerHeader
-            title={currentDocumentFlow.title}
-            description={currentDocumentFlow.description}
-          />
-
           <Stepper
             currentStep={currentDocumentFlow.stepIndex}
             setCurrentStep={(step) => setStep(EditTemplateSteps[step - 1])}
@@ -268,6 +269,7 @@ export const EditTemplateForm = ({
               recipients={recipients}
               fields={fields}
               onSubmit={onAddFieldsFormSubmit}
+              teamId={team?.id}
             />
           </Stepper>
         </DocumentFlowFormContainer>

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

@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import Link from 'next/link';
 
-import { Copy, Edit, MoreHorizontal, Share2Icon, Trash2 } from 'lucide-react';
+import { Copy, Edit, MoreHorizontal, MoveRight, Share2Icon, Trash2 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
 import { type FindTemplateRow } from '@documenso/lib/server-only/template/find-templates';
@@ -18,6 +18,7 @@ import {
 
 import { DeleteTemplateDialog } from './delete-template-dialog';
 import { DuplicateTemplateDialog } from './duplicate-template-dialog';
+import { MoveTemplateDialog } from './move-template-dialog';
 import { TemplateDirectLinkDialog } from './template-direct-link-dialog';
 
 export type DataTableActionDropdownProps = {
@@ -36,6 +37,7 @@ export const DataTableActionDropdown = ({
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isTemplateDirectLinkDialogOpen, setTemplateDirectLinkDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
+  const [isMoveDialogOpen, setMoveDialogOpen] = useState(false);
 
   if (!session) {
     return null;
@@ -73,6 +75,13 @@ export const DataTableActionDropdown = ({
           Direct link
         </DropdownMenuItem>
 
+        {!teamId && (
+          <DropdownMenuItem onClick={() => setMoveDialogOpen(true)}>
+            <MoveRight className="mr-2 h-4 w-4" />
+            Move to Team
+          </DropdownMenuItem>
+        )}
+
         <DropdownMenuItem
           disabled={!isOwner && !isTeamTemplate}
           onClick={() => setDeleteDialogOpen(true)}
@@ -95,8 +104,15 @@ export const DataTableActionDropdown = ({
         onOpenChange={setTemplateDirectLinkDialogOpen}
       />
 
+      <MoveTemplateDialog
+        templateId={row.id}
+        open={isMoveDialogOpen}
+        onOpenChange={setMoveDialogOpen}
+      />
+
       <DeleteTemplateDialog
         id={row.id}
+        teamId={row.teamId || undefined}
         open={isDeleteDialogOpen}
         onOpenChange={setDeleteDialogOpen}
       />

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/move-template-dialog.tsx

@@ -0,0 +1,120 @@
+import { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { trpc } from '@documenso/trpc/react';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type MoveTemplateDialogProps = {
+  templateId: number;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+};
+
+export const MoveTemplateDialog = ({ templateId, open, onOpenChange }: MoveTemplateDialogProps) => {
+  const router = useRouter();
+  const { toast } = useToast();
+  const [selectedTeamId, setSelectedTeamId] = useState<number | null>(null);
+
+  const { data: teams, isLoading: isLoadingTeams } = trpc.team.getTeams.useQuery();
+  const { mutateAsync: moveTemplate, isLoading } = trpc.template.moveTemplateToTeam.useMutation({
+    onSuccess: () => {
+      router.refresh();
+      toast({
+        title: 'Template moved',
+        description: 'The template has been successfully moved to the selected team.',
+        duration: 5000,
+      });
+      onOpenChange(false);
+    },
+    onError: (error) => {
+      toast({
+        title: 'Error',
+        description: error.message || 'An error occurred while moving the template.',
+        variant: 'destructive',
+        duration: 7500,
+      });
+    },
+  });
+
+  const onMove = async () => {
+    if (!selectedTeamId) {
+      return;
+    }
+
+    await moveTemplate({ templateId, teamId: selectedTeamId });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Move Template to Team</DialogTitle>
+          <DialogDescription>
+            Select a team to move this template to. This action cannot be undone.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Select onValueChange={(value) => setSelectedTeamId(Number(value))}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select a team" />
+          </SelectTrigger>
+          <SelectContent>
+            {isLoadingTeams ? (
+              <SelectItem value="loading" disabled>
+                Loading teams...
+              </SelectItem>
+            ) : (
+              teams?.map((team) => (
+                <SelectItem key={team.id} value={team.id.toString()}>
+                  <div className="flex items-center gap-4">
+                    <Avatar className="h-8 w-8">
+                      {team.avatarImageId && (
+                        <AvatarImage
+                          src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${team.avatarImageId}`}
+                        />
+                      )}
+
+                      <AvatarFallback className="text-sm text-gray-400">
+                        {team.name.slice(0, 1).toUpperCase()}
+                      </AvatarFallback>
+                    </Avatar>
+
+                    <span>{team.name}</span>
+                  </div>
+                </SelectItem>
+              ))
+            )}
+          </SelectContent>
+        </Select>
+
+        <DialogFooter>
+          <Button variant="secondary" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={onMove} loading={isLoading} disabled={!selectedTeamId || isLoading}>
+            {isLoading ? 'Moving...' : 'Move'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -383,7 +383,7 @@ export const TemplateDirectLinkDialog = ({
                   </div>
                 </div>
 
-                <DialogFooter className='mt-4'>
+                <DialogFooter className="mt-4">
                   <Button
                     type="button"
                     variant="destructive"

apps/web/src/app/(dashboard)/templates/templates-page-view.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { findTemplates } from '@documenso/lib/server-only/template/find-templates';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import type { Team } from '@documenso/prisma/client';
-import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
 
 import { TemplatesDataTable } from './data-table-templates';
 import { EmptyTemplateState } from './empty-state';
@@ -39,6 +40,9 @@ export const TemplatesPageView = async ({ searchParams = {}, team }: TemplatesPa
         <div className="flex flex-row items-center">
           {team && (
             <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+              {team.avatarImageId && (
+                <AvatarImage src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${team.avatarImageId}`} />
+              )}
               <AvatarFallback className="text-xs text-gray-400">
                 {team.name.slice(0, 1)}
               </AvatarFallback>

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]/direct-template.tsx

@@ -42,7 +42,7 @@ export const DirectTemplatePageView = ({
 
   const { toast } = useToast();
 
-  const { email, setEmail } = useRequiredSigningContext();
+  const { email, fullName, setEmail } = useRequiredSigningContext();
   const { recipient, setRecipient } = useRequiredDocumentAuthContext();
 
   const [step, setStep] = useState<DirectTemplateStep>('configure');
@@ -84,6 +84,7 @@ export const DirectTemplatePageView = ({
     try {
       const token = await createDocumentFromDirectTemplate({
         directTemplateToken,
+        directRecipientName: fullName,
         directRecipientEmail: recipient.email,
         templateUpdatedAt: template.updatedAt,
         signedFieldValues: fields.map((field) => {

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

@@ -6,6 +6,13 @@ 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 {
+  ZCheckboxFieldMeta,
+  ZDropdownFieldMeta,
+  ZNumberFieldMeta,
+  ZRadioFieldMeta,
+  ZTextFieldMeta,
+} from '@documenso/lib/types/field-meta';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type { Field, Recipient, Signature } from '@documenso/prisma/client';
 import { FieldType } from '@documenso/prisma/client';
@@ -30,10 +37,14 @@ import { Label } from '@documenso/ui/primitives/label';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useStep } from '@documenso/ui/primitives/stepper';
 
+import { CheckboxField } from '~/app/(signing)/sign/[token]/checkbox-field';
 import { DateField } from '~/app/(signing)/sign/[token]/date-field';
+import { DropdownField } from '~/app/(signing)/sign/[token]/dropdown-field';
 import { EmailField } from '~/app/(signing)/sign/[token]/email-field';
 import { NameField } from '~/app/(signing)/sign/[token]/name-field';
+import { NumberField } from '~/app/(signing)/sign/[token]/number-field';
 import { useRequiredSigningContext } from '~/app/(signing)/sign/[token]/provider';
+import { RadioField } from '~/app/(signing)/sign/[token]/radio-field';
 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';
@@ -200,15 +211,96 @@ export const SignDirectTemplateForm = ({
                   onUnsignField={onUnsignField}
                 />
               ))
-              .with(FieldType.TEXT, () => (
-                <TextField
-                  key={field.id}
-                  field={field}
-                  recipient={directRecipient}
-                  onSignField={onSignField}
-                  onUnsignField={onUnsignField}
-                />
-              ))
+              .with(FieldType.TEXT, () => {
+                const parsedFieldMeta = field.fieldMeta
+                  ? ZTextFieldMeta.parse(field.fieldMeta)
+                  : null;
+
+                return (
+                  <TextField
+                    key={field.id}
+                    field={{
+                      ...field,
+                      fieldMeta: parsedFieldMeta,
+                    }}
+                    recipient={directRecipient}
+                    onSignField={onSignField}
+                    onUnsignField={onUnsignField}
+                  />
+                );
+              })
+              .with(FieldType.NUMBER, () => {
+                const parsedFieldMeta = field.fieldMeta
+                  ? ZNumberFieldMeta.parse(field.fieldMeta)
+                  : null;
+
+                return (
+                  <NumberField
+                    key={field.id}
+                    field={{
+                      ...field,
+                      fieldMeta: parsedFieldMeta,
+                    }}
+                    recipient={directRecipient}
+                    onSignField={onSignField}
+                    onUnsignField={onUnsignField}
+                  />
+                );
+              })
+              .with(FieldType.DROPDOWN, () => {
+                const parsedFieldMeta = field.fieldMeta
+                  ? ZDropdownFieldMeta.parse(field.fieldMeta)
+                  : null;
+
+                return (
+                  <DropdownField
+                    key={field.id}
+                    field={{
+                      ...field,
+                      fieldMeta: parsedFieldMeta,
+                    }}
+                    recipient={directRecipient}
+                    onSignField={onSignField}
+                    onUnsignField={onUnsignField}
+                  />
+                );
+              })
+              .with(FieldType.RADIO, () => {
+                const parsedFieldMeta = field.fieldMeta
+                  ? ZRadioFieldMeta.parse(field.fieldMeta)
+                  : null;
+
+                return (
+                  <RadioField
+                    key={field.id}
+                    field={{
+                      ...field,
+                      fieldMeta: parsedFieldMeta,
+                    }}
+                    recipient={directRecipient}
+                    onSignField={onSignField}
+                    onUnsignField={onUnsignField}
+                  />
+                );
+              })
+              .with(FieldType.CHECKBOX, () => {
+                const parsedFieldMeta = field.fieldMeta
+                  ? ZCheckboxFieldMeta.parse(field.fieldMeta)
+                  : null;
+
+                return (
+                  <CheckboxField
+                    key={field.id}
+                    field={{
+                      ...field,
+                      fieldMeta: parsedFieldMeta,
+                    }}
+                    recipient={directRecipient}
+                    onSignField={onSignField}
+                    onUnsignField={onUnsignField}
+                  />
+                );
+              })
               .otherwise(() => null),
           )}
         </ElementVisible>

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

@@ -0,0 +1,292 @@
+'use client';
+
+import { useEffect, useMemo, useState, useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Loader } from 'lucide-react';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZCheckboxFieldMeta } from '@documenso/lib/types/field-meta';
+import type { Recipient } from '@documenso/prisma/client';
+import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import { checkboxValidationSigns } from '@documenso/ui/primitives/document-flow/field-items-advanced-settings/constants';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentAuthContext } from './document-auth-provider';
+import { SigningFieldContainer } from './signing-field-container';
+
+export type CheckboxFieldProps = {
+  field: FieldWithSignatureAndFieldMeta;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const CheckboxField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: CheckboxFieldProps) => {
+  const router = useRouter();
+  const { toast } = useToast();
+  const [isPending, startTransition] = useTransition();
+  const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
+
+  const parsedFieldMeta = ZCheckboxFieldMeta.parse(field.fieldMeta);
+
+  const values = parsedFieldMeta.values?.map((item) => ({
+    ...item,
+    value: item.value.length > 0 ? item.value : `empty-value-${item.id}`,
+  }));
+  const [checkedValues, setCheckedValues] = useState(
+    values
+      ?.map((item) =>
+        item.checked ? (item.value.length > 0 ? item.value : `empty-value-${item.id}`) : '',
+      )
+      .filter(Boolean) || [],
+  );
+
+  const isReadOnly = parsedFieldMeta.readOnly;
+
+  const checkboxValidationRule = parsedFieldMeta.validationRule;
+  const checkboxValidationLength = parsedFieldMeta.validationLength;
+  const validationSign = checkboxValidationSigns.find(
+    (sign) => sign.label === checkboxValidationRule,
+  );
+
+  const isLengthConditionMet = useMemo(() => {
+    if (!validationSign) return true;
+    return (
+      (validationSign.value === '>=' && checkedValues.length >= (checkboxValidationLength || 0)) ||
+      (validationSign.value === '=' && checkedValues.length === (checkboxValidationLength || 0)) ||
+      (validationSign.value === '<=' && checkedValues.length <= (checkboxValidationLength || 0))
+    );
+  }, [checkedValues, validationSign, checkboxValidationLength]);
+
+  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isLoading: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const shouldAutoSignField =
+    (!field.inserted && checkedValues.length > 0 && isLengthConditionMet) ||
+    (!field.inserted && isReadOnly && isLengthConditionMet);
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value: checkedValues.join(','),
+        isBase64: true,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+      } else {
+        await signFieldWithToken(payload);
+      }
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while signing the document.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async (fieldType?: string) => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+      } else {
+        await removeSignedFieldWithToken(payload);
+      }
+
+      if (fieldType === 'Checkbox') {
+        setCheckedValues([]);
+      }
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while removing the signature.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleCheckboxChange = (value: string, itemId: number) => {
+    const updatedValue = value || `empty-value-${itemId}`;
+    const updatedValues = checkedValues.includes(updatedValue)
+      ? checkedValues.filter((v) => v !== updatedValue)
+      : [...checkedValues, updatedValue];
+
+    setCheckedValues(updatedValues);
+  };
+
+  const handleCheckboxOptionClick = async (item: {
+    id: number;
+    checked: boolean;
+    value: string;
+  }) => {
+    let updatedValues: string[] = [];
+
+    try {
+      const isChecked = checkedValues.includes(
+        item.value.length > 0 ? item.value : `empty-value-${item.id}`,
+      );
+
+      if (!isChecked) {
+        updatedValues = [
+          ...checkedValues,
+          item.value.length > 0 ? item.value : `empty-value-${item.id}`,
+        ];
+
+        await removeSignedFieldWithToken({
+          token: recipient.token,
+          fieldId: field.id,
+        });
+
+        if (isLengthConditionMet) {
+          await signFieldWithToken({
+            token: recipient.token,
+            fieldId: field.id,
+            value: updatedValues.join(','),
+            isBase64: true,
+          });
+        }
+      } else {
+        updatedValues = checkedValues.filter(
+          (v) => v !== item.value && v !== `empty-value-${item.id}`,
+        );
+
+        await removeSignedFieldWithToken({
+          token: recipient.token,
+          fieldId: field.id,
+        });
+      }
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while updating the signature.',
+        variant: 'destructive',
+      });
+    } finally {
+      setCheckedValues(updatedValues);
+      startTransition(() => router.refresh());
+    }
+  };
+
+  useEffect(() => {
+    if (shouldAutoSignField) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, [checkedValues, isLengthConditionMet, field.inserted]);
+
+  return (
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Checkbox">
+      {isLoading && (
+        <div className="bg-background absolute inset-0 z-20 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <>
+          {!isLengthConditionMet && (
+            <FieldToolTip key={field.id} field={field} color="warning" className="">
+              {validationSign?.label} {checkboxValidationLength}
+            </FieldToolTip>
+          )}
+          <div className="z-50 flex flex-col gap-y-2">
+            {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
+              const itemValue = item.value || `empty-value-${item.id}`;
+
+              return (
+                <div key={index} className="flex items-center gap-x-1.5">
+                  <Checkbox
+                    className="h-4 w-4"
+                    checkClassName="text-white"
+                    id={`checkbox-${index}`}
+                    checked={checkedValues.includes(itemValue)}
+                    onCheckedChange={() => handleCheckboxChange(item.value, item.id)}
+                  />
+                  <Label htmlFor={`checkbox-${index}`}>
+                    {item.value.includes('empty-value-') ? '' : item.value}
+                  </Label>
+                </div>
+              );
+            })}
+          </div>
+        </>
+      )}
+
+      {field.inserted && (
+        <div className="flex flex-col gap-y-2">
+          {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
+            const itemValue = item.value || `empty-value-${item.id}`;
+
+            return (
+              <div key={index} className="flex items-center gap-x-1.5">
+                <Checkbox
+                  className="h-4 w-4"
+                  checkClassName="text-white"
+                  id={`checkbox-${index}`}
+                  checked={field.customText
+                    .split(',')
+                    .some((customValue) => customValue === itemValue)}
+                  disabled={isLoading}
+                  onCheckedChange={() => void handleCheckboxOptionClick(item)}
+                />
+                <Label htmlFor={`checkbox-${index}`}>
+                  {item.value.includes('empty-value-') ? '' : item.value}
+                </Label>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </SigningFieldContainer>
+  );
+};

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

@@ -139,11 +139,15 @@ export const DateField = ({
       )}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Date</p>
+        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
+          Date
+        </p>
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground text-sm duration-200">{localDateString}</p>
+        <p className="text-muted-foreground dark:text-background/80 text-sm duration-200">
+          {localDateString}
+        </p>
       )}
     </SigningFieldContainer>
   );

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

@@ -0,0 +1,209 @@
+'use client';
+
+import { useEffect, useState, useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Loader } from 'lucide-react';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZDropdownFieldMeta } from '@documenso/lib/types/field-meta';
+import type { Recipient } from '@documenso/prisma/client';
+import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentAuthContext } from './document-auth-provider';
+import { SigningFieldContainer } from './signing-field-container';
+
+export type DropdownFieldProps = {
+  field: FieldWithSignatureAndFieldMeta;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DropdownField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: DropdownFieldProps) => {
+  const router = useRouter();
+  const { toast } = useToast();
+  const [isPending, startTransition] = useTransition();
+
+  const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
+
+  const parsedFieldMeta = ZDropdownFieldMeta.parse(field.fieldMeta);
+  const isReadOnly = parsedFieldMeta?.readOnly;
+  const defaultValue = parsedFieldMeta?.defaultValue;
+  const [localChoice, setLocalChoice] = useState(parsedFieldMeta.defaultValue ?? '');
+
+  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isLoading: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const shouldAutoSignField =
+    (!field.inserted && localChoice) || (!field.inserted && isReadOnly && defaultValue);
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      if (!localChoice) {
+        return;
+      }
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value: localChoice,
+        isBase64: true,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+      } else {
+        await signFieldWithToken(payload);
+      }
+
+      setLocalChoice('');
+      startTransition(() => router.refresh());
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while signing the document.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onPreSign = () => {
+    return true;
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      } else {
+        await removeSignedFieldWithToken(payload);
+      }
+
+      setLocalChoice(parsedFieldMeta.defaultValue ?? '');
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while removing the signature.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleSelectItem = (val: string) => {
+    setLocalChoice(val);
+  };
+
+  useEffect(() => {
+    if (!field.inserted && localChoice) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, [localChoice]);
+
+  useEffect(() => {
+    if (shouldAutoSignField) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, []);
+
+  return (
+    <div className="pointer-events-none">
+      <SigningFieldContainer
+        field={field}
+        onPreSign={onPreSign}
+        onSign={onSign}
+        onRemove={onRemove}
+        type="Dropdown"
+      >
+        {isLoading && (
+          <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+            <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+          </div>
+        )}
+
+        {!field.inserted && (
+          <p className="group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200">
+            <Select value={parsedFieldMeta.defaultValue} onValueChange={handleSelectItem}>
+              <SelectTrigger
+                className={cn(
+                  'text-muted-foreground z-10 h-full w-full border-none ring-0 focus:ring-0',
+                  {
+                    'hover:text-red-300': parsedFieldMeta.required,
+                    'hover:text-yellow-300': !parsedFieldMeta.required,
+                  },
+                )}
+              >
+                <SelectValue placeholder={'-- Select --'} />
+              </SelectTrigger>
+              <SelectContent className="w-full ring-0 focus:ring-0" position="popper">
+                {parsedFieldMeta?.values?.map((item, index) => (
+                  <SelectItem key={index} value={item.value} className="ring-0 focus:ring-0">
+                    {item.value}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </p>
+        )}
+
+        {field.inserted && (
+          <p className="text-muted-foreground dark:text-background/80 flex items-center justify-center gap-x-1 duration-200">
+            {field.customText}
+          </p>
+        )}
+      </SigningFieldContainer>
+    </div>
+  );
+};

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

@@ -119,10 +119,16 @@ export const EmailField = ({ field, recipient, onSignField, onUnsignField }: Ema
       )}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Email</p>
+        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
+          Email
+        </p>
       )}
 
-      {field.inserted && <p className="text-muted-foreground duration-200">{field.customText}</p>}
+      {field.inserted && (
+        <p className="text-muted-foreground dark:text-background/80 truncate duration-200">
+          {field.customText}
+        </p>
+      )}
     </SigningFieldContainer>
   );
 };

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

@@ -163,10 +163,16 @@ export const NameField = ({ field, recipient, onSignField, onUnsignField }: Name
       )}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Name</p>
+        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
+          Name
+        </p>
       )}
 
-      {field.inserted && <p className="text-muted-foreground duration-200">{field.customText}</p>}
+      {field.inserted && (
+        <p className="text-muted-foreground dark:text-background/80 truncate duration-200">
+          {field.customText}
+        </p>
+      )}
 
       <Dialog open={showFullNameModal} onOpenChange={setShowFullNameModal}>
         <DialogContent>

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

@@ -0,0 +1,337 @@
+'use client';
+
+import { useEffect, useState, useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Hash, Loader } from 'lucide-react';
+
+import { validateNumberField } from '@documenso/lib/advanced-fields-validation/validate-number';
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZNumberFieldMeta } from '@documenso/lib/types/field-meta';
+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 { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentAuthContext } from './document-auth-provider';
+import { SigningFieldContainer } from './signing-field-container';
+
+type ValidationErrors = {
+  isNumber: string[];
+  required: string[];
+  minValue: string[];
+  maxValue: string[];
+  numberFormat: string[];
+};
+
+export type NumberFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const NumberField = ({ field, recipient, onSignField, onUnsignField }: NumberFieldProps) => {
+  const router = useRouter();
+  const { toast } = useToast();
+  const [isPending, startTransition] = useTransition();
+  const [showRadioModal, setShowRadioModal] = useState(false);
+
+  const parsedFieldMeta = field.fieldMeta ? ZNumberFieldMeta.parse(field.fieldMeta) : null;
+  const isReadOnly = parsedFieldMeta?.readOnly;
+  const defaultValue = parsedFieldMeta?.value;
+  const [localNumber, setLocalNumber] = useState(
+    parsedFieldMeta?.value ? String(parsedFieldMeta.value) : '0',
+  );
+
+  const initialErrors: ValidationErrors = {
+    isNumber: [],
+    required: [],
+    minValue: [],
+    maxValue: [],
+    numberFormat: [],
+  };
+
+  const [errors, setErrors] = useState(initialErrors);
+
+  const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
+
+  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isLoading: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+
+  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value;
+    setLocalNumber(text);
+
+    if (parsedFieldMeta) {
+      const validationErrors = validateNumberField(text, parsedFieldMeta, true);
+      setErrors({
+        isNumber: validationErrors.filter((error) => error.includes('valid number')),
+        required: validationErrors.filter((error) => error.includes('required')),
+        minValue: validationErrors.filter((error) => error.includes('minimum value')),
+        maxValue: validationErrors.filter((error) => error.includes('maximum value')),
+        numberFormat: validationErrors.filter((error) => error.includes('number format')),
+      });
+    } else {
+      const validationErrors = validateNumberField(text);
+      setErrors((prevErrors) => ({
+        ...prevErrors,
+        isNumber: validationErrors.filter((error) => error.includes('valid number')),
+      }));
+    }
+  };
+
+  const onDialogSignClick = () => {
+    setShowRadioModal(false);
+
+    void executeActionAuthProcedure({
+      onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+      actionTarget: field.type,
+    });
+  };
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      if (!localNumber || Object.values(errors).some((error) => error.length > 0)) {
+        return;
+      }
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value: localNumber,
+        isBase64: true,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
+
+      setLocalNumber('');
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while signing the document.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onPreSign = () => {
+    setShowRadioModal(true);
+
+    if (localNumber && parsedFieldMeta) {
+      const validationErrors = validateNumberField(localNumber, parsedFieldMeta, true);
+      setErrors({
+        isNumber: validationErrors.filter((error) => error.includes('valid number')),
+        required: validationErrors.filter((error) => error.includes('required')),
+        minValue: validationErrors.filter((error) => error.includes('minimum value')),
+        maxValue: validationErrors.filter((error) => error.includes('maximum value')),
+        numberFormat: validationErrors.filter((error) => error.includes('number format')),
+      });
+    }
+
+    return false;
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
+
+      setLocalNumber(parsedFieldMeta?.value ? String(parsedFieldMeta?.value) : '');
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while removing the signature.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!showRadioModal) {
+      setLocalNumber(parsedFieldMeta?.value ? String(parsedFieldMeta.value) : '0');
+      setErrors(initialErrors);
+    }
+  }, [showRadioModal]);
+
+  useEffect(() => {
+    if (
+      (!field.inserted && defaultValue && localNumber) ||
+      (!field.inserted && isReadOnly && defaultValue)
+    ) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, []);
+
+  let fieldDisplayName = 'Number';
+
+  if (parsedFieldMeta?.label) {
+    fieldDisplayName = parsedFieldMeta.label.length > 10 ? parsedFieldMeta.label.substring(0, 10) + '...' : parsedFieldMeta.label;
+  }
+
+  const userInputHasErrors = Object.values(errors).some((error) => error.length > 0);
+
+  return (
+    <SigningFieldContainer
+      field={field}
+      onPreSign={onPreSign}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Signature"
+    >
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p
+          className={cn(
+            'group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200',
+            {
+              'group-hover:text-yellow-300': !field.inserted && !parsedFieldMeta?.required,
+              'group-hover:text-red-300': !field.inserted && parsedFieldMeta?.required,
+            },
+          )}
+        >
+          <span className="flex items-center justify-center gap-x-1 text-sm">
+            <Hash className='h-4 w-4' /> {fieldDisplayName}
+          </span>
+        </p>
+      )}
+
+      {field.inserted && (
+        <p className="text-muted-foreground dark:text-background/80 flex items-center justify-center gap-x-1 duration-200">
+          {field.customText}
+        </p>
+      )}
+
+      <Dialog open={showRadioModal} onOpenChange={setShowRadioModal}>
+        <DialogContent>
+          <DialogTitle>
+            {parsedFieldMeta?.label ? parsedFieldMeta?.label : 'Add number'}
+          </DialogTitle>
+
+          <div>
+            <Input
+              type="text"
+              placeholder={parsedFieldMeta?.placeholder ?? ''}
+              className={cn('mt-2 w-full rounded-md', {
+                'border-2 border-red-300 ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
+                  userInputHasErrors,
+              })}
+              value={localNumber}
+              onChange={handleNumberChange}
+            />
+          </div>
+
+          {userInputHasErrors && (
+            <div>
+              {errors.isNumber?.map((error, index) => (
+                <p key={index} className="mt-2 text-sm text-red-500">
+                  {error}
+                </p>
+              ))}
+              {errors.required?.map((error, index) => (
+                <p key={index} className="mt-2 text-sm text-red-500">
+                  {error}
+                </p>
+              ))}
+              {errors.minValue?.map((error, index) => (
+                <p key={index} className="mt-2 text-sm text-red-500">
+                  {error}
+                </p>
+              ))}
+              {errors.maxValue?.map((error, index) => (
+                <p key={index} className="mt-2 text-sm text-red-500">
+                  {error}
+                </p>
+              ))}
+              {errors.numberFormat?.map((error, index) => (
+                <p key={index} className="mt-2 text-sm text-red-500">
+                  {error}
+                </p>
+              ))}
+            </div>
+          )}
+
+          <DialogFooter>
+            <div className="flex w-full flex-1 flex-nowrap gap-4">
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                onClick={() => {
+                  setShowRadioModal(false);
+                  setLocalNumber('');
+                }}
+              >
+                Cancel
+              </Button>
+
+              <Button
+                type="button"
+                className="flex-1"
+                disabled={!localNumber || userInputHasErrors}
+                onClick={() => onDialogSignClick()}
+              >
+                Save
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </SigningFieldContainer>
+  );
+};

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';
@@ -70,8 +71,14 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     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({

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

@@ -0,0 +1,190 @@
+'use client';
+
+import { useEffect, useState, useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Loader } from 'lucide-react';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZRadioFieldMeta } from '@documenso/lib/types/field-meta';
+import type { Recipient } from '@documenso/prisma/client';
+import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { Label } from '@documenso/ui/primitives/label';
+import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentAuthContext } from './document-auth-provider';
+import { SigningFieldContainer } from './signing-field-container';
+
+export type RadioFieldProps = {
+  field: FieldWithSignatureAndFieldMeta;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const RadioField = ({ field, recipient, onSignField, onUnsignField }: RadioFieldProps) => {
+  const router = useRouter();
+  const { toast } = useToast();
+  const [isPending, startTransition] = useTransition();
+
+  const parsedFieldMeta = ZRadioFieldMeta.parse(field.fieldMeta);
+  const values = parsedFieldMeta.values?.map((item) => ({
+    ...item,
+    value: item.value.length > 0 ? item.value : `empty-value-${item.id}`,
+  }));
+  const checkedItem = values?.find((item) => item.checked);
+  const defaultValue = !field.inserted && !!checkedItem ? checkedItem.value : '';
+
+  const [selectedOption, setSelectedOption] = useState(defaultValue);
+
+  const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
+
+  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isLoading: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const shouldAutoSignField =
+    (!field.inserted && selectedOption) ||
+    (!field.inserted && defaultValue) ||
+    (!field.inserted && parsedFieldMeta.readOnly && defaultValue);
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      if (!selectedOption) {
+        return;
+      }
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value: selectedOption,
+        isBase64: true,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+      } else {
+        await signFieldWithToken(payload);
+      }
+
+      setSelectedOption('');
+      startTransition(() => router.refresh());
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while signing the document.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+      } else {
+        await removeSignedFieldWithToken(payload);
+      }
+
+      setSelectedOption('');
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while removing the signature.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleSelectItem = (selectedOption: string) => {
+    setSelectedOption(selectedOption);
+  };
+
+  useEffect(() => {
+    if (shouldAutoSignField) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, [selectedOption, field]);
+
+  return (
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Radio">
+      {isLoading && (
+        <div className="bg-background absolute inset-0 z-20 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <RadioGroup onValueChange={(value) => handleSelectItem(value)} className="z-10">
+          {values?.map((item, index) => (
+            <div key={index} className="flex items-center gap-x-1.5">
+              <RadioGroupItem
+                className="h-4 w-4 shrink-0"
+                value={item.value}
+                id={`option-${index}`}
+                checked={item.checked}
+              />
+
+              <Label htmlFor={`option-${index}`}>
+                {item.value.includes('empty-value-') ? '' : item.value}
+              </Label>
+            </div>
+          ))}
+        </RadioGroup>
+      )}
+
+      {field.inserted && (
+        <RadioGroup>
+          {values?.map((item, index) => (
+            <div key={index} className="flex items-center gap-x-1.5">
+                <RadioGroupItem
+                  className=""
+                  value={item.value}
+                  id={`option-${index}`}
+                  checked={item.value === field.customText}
+                />
+                <Label htmlFor={`option-${index}`}>
+                  {item.value.includes('empty-value-') ? '' : item.value}
+                </Label>
+            </div>
+          ))}
+        </RadioGroup>
+      )}
+    </SigningFieldContainer>
+  );
+};

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

@@ -190,7 +190,7 @@ export const SignatureField = ({
       )}
 
       {state === 'empty' && (
-        <p className="group-hover:text-primary font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
+        <p className="group-hover:text-primary font-signature text-muted-foreground duration-200 group-hover:text-yellow-300 text-xl">
           Signature
         </p>
       )}
@@ -199,12 +199,12 @@ export const SignatureField = ({
         <img
           src={signature.signatureImageAsBase64}
           alt={`Signature for ${recipient.name}`}
-          className="h-full w-full object-contain dark:invert"
+          className="h-full w-full object-contain"
         />
       )}
 
       {state === 'signed-text' && (
-        <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
+        <p className="font-signature text-muted-foreground dark:text-background text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
           {/* This optional chaining is intentional, we don't want to move the check into the condition above */}
           {signature?.typedSignature}
         </p>

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>

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

@@ -2,10 +2,14 @@
 
 import React from 'react';
 
+import { X } from 'lucide-react';
+
 import { type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import { FieldType } from '@documenso/prisma/client';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { cn } from '@documenso/ui/lib/utils';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 import { useRequiredDocumentAuthContext } from './document-auth-provider';
@@ -34,8 +38,8 @@ export type SignatureFieldProps = {
    * The auth values will be passed in if available.
    */
   onSign?: (documentAuthValue?: TRecipientActionAuth) => Promise<void> | void;
-  onRemove?: () => Promise<void> | void;
-  type?: 'Date' | 'Email' | 'Name' | 'Signature';
+  onRemove?: (fieldType?: string) => Promise<void> | void;
+  type?: 'Date' | 'Email' | 'Name' | 'Signature' | 'Radio' | 'Dropdown' | 'Number' | 'Checkbox';
   tooltipText?: string | null;
 };
 
@@ -51,6 +55,9 @@ export const SigningFieldContainer = ({
 }: SignatureFieldProps) => {
   const { executeActionAuthProcedure, isAuthRedirectRequired } = useRequiredDocumentAuthContext();
 
+  const parsedFieldMeta = field.fieldMeta ? ZFieldMetaSchema.parse(field.fieldMeta) : undefined;
+  const readOnlyField = parsedFieldMeta?.readOnly || false;
+
   const handleInsertField = async () => {
     if (field.inserted || !onSign) {
       return;
@@ -102,41 +109,70 @@ export const SigningFieldContainer = ({
     await onRemove?.();
   };
 
+  const onClearCheckBoxValues = async (fieldType?: string) => {
+    if (!field.inserted) {
+      return;
+    }
+
+    await onRemove?.(fieldType);
+  };
+
   return (
-    <FieldRootContainer field={field}>
-      {!field.inserted && !loading && (
-        <button
-          type="submit"
-          className="absolute inset-0 z-10 h-full w-full"
-          onClick={async () => handleInsertField()}
-        />
-      )}
+    <div className={cn(type === 'Checkbox' ? 'group' : '')}>
+      <FieldRootContainer field={field}>
+        {!field.inserted && !loading && !readOnlyField && (
+          <button
+            type="submit"
+            className="absolute inset-0 z-10 h-full w-full rounded-md border"
+            onClick={async () => handleInsertField()}
+          />
+        )}
 
-      {type === 'Date' && field.inserted && !loading && (
-        <Tooltip delayDuration={0}>
-          <TooltipTrigger asChild>
-            <button
-              className="text-destructive bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 backdrop-blur-sm duration-200 group-hover:opacity-100"
-              onClick={onRemoveSignedFieldClick}
-            >
-              Remove
-            </button>
-          </TooltipTrigger>
+        {readOnlyField && (
+          <button className="bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100">
+            <span className="bg-foreground/50 dark:bg-background/50 text-background dark:text-foreground rounded-xl p-2">
+              Read only field
+            </span>
+          </button>
+        )}
 
-          {tooltipText && <TooltipContent className="max-w-xs">{tooltipText}</TooltipContent>}
-        </Tooltip>
-      )}
+        {type === 'Date' && field.inserted && !loading && !readOnlyField && (
+          <Tooltip delayDuration={0}>
+            <TooltipTrigger asChild>
+              <button
+                className="text-destructive bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
+                onClick={onRemoveSignedFieldClick}
+              >
+                Remove
+              </button>
+            </TooltipTrigger>
 
-      {type !== 'Date' && field.inserted && !loading && (
-        <button
-          className="text-destructive bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 backdrop-blur-sm duration-200 group-hover:opacity-100"
-          onClick={onRemoveSignedFieldClick}
-        >
-          Remove
-        </button>
-      )}
+            {tooltipText && <TooltipContent className="max-w-xs">{tooltipText}</TooltipContent>}
+          </Tooltip>
+        )}
 
-      {children}
-    </FieldRootContainer>
+        {type === 'Checkbox' && field.inserted && !loading && !readOnlyField && (
+          <button
+            className="dark:bg-background absolute -bottom-10 flex items-center justify-evenly rounded-md border bg-gray-900 opacity-0 group-hover:opacity-100"
+            onClick={() => void onClearCheckBoxValues(type)}
+          >
+            <span className="dark:text-muted-foreground/50 dark:hover:text-muted-foreground dark:hover:bg-foreground/10 rounded-md p-1 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100">
+              <X className="h-4 w-4" />
+            </span>
+          </button>
+        )}
+
+        {type !== 'Date' && type !== 'Checkbox' && field.inserted && !loading && !readOnlyField && (
+          <button
+            className="text-destructive bg-background/50 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
+            onClick={onRemoveSignedFieldClick}
+          >
+            Remove
+          </button>
+        )}
+
+        {children}
+      </FieldRootContainer>
+    </div>
   );
 };

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

@@ -4,9 +4,17 @@ import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-form
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
 import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
+import {
+  ZCheckboxFieldMeta,
+  ZDropdownFieldMeta,
+  ZNumberFieldMeta,
+  ZRadioFieldMeta,
+  ZTextFieldMeta,
+} from '@documenso/lib/types/field-meta';
 import type { CompletedField } from '@documenso/lib/types/fields';
 import type { Field, Recipient } from '@documenso/prisma/client';
 import { FieldType, RecipientRole } from '@documenso/prisma/client';
+import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
@@ -14,10 +22,14 @@ import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 import { DocumentReadOnlyFields } from '~/components/document/document-read-only-fields';
 import { truncateTitle } from '~/helpers/truncate-title';
 
+import { CheckboxField } from './checkbox-field';
 import { DateField } from './date-field';
+import { DropdownField } from './dropdown-field';
 import { EmailField } from './email-field';
 import { SigningForm } from './form';
 import { NameField } from './name-field';
+import { NumberField } from './number-field';
+import { RadioField } from './radio-field';
 import { SignatureField } from './signature-field';
 import { TextField } from './text-field';
 
@@ -101,9 +113,41 @@ export const SigningPageView = ({
             .with(FieldType.EMAIL, () => (
               <EmailField key={field.id} field={field} recipient={recipient} />
             ))
-            .with(FieldType.TEXT, () => (
-              <TextField key={field.id} field={field} recipient={recipient} />
-            ))
+            .with(FieldType.TEXT, () => {
+              const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                ...field,
+                fieldMeta: field.fieldMeta ? ZTextFieldMeta.parse(field.fieldMeta) : null,
+              };
+              return <TextField key={field.id} field={fieldWithMeta} recipient={recipient} />;
+            })
+            .with(FieldType.NUMBER, () => {
+              const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                ...field,
+                fieldMeta: field.fieldMeta ? ZNumberFieldMeta.parse(field.fieldMeta) : null,
+              };
+              return <NumberField key={field.id} field={fieldWithMeta} recipient={recipient} />;
+            })
+            .with(FieldType.RADIO, () => {
+              const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                ...field,
+                fieldMeta: field.fieldMeta ? ZRadioFieldMeta.parse(field.fieldMeta) : null,
+              };
+              return <RadioField key={field.id} field={fieldWithMeta} recipient={recipient} />;
+            })
+            .with(FieldType.CHECKBOX, () => {
+              const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                ...field,
+                fieldMeta: field.fieldMeta ? ZCheckboxFieldMeta.parse(field.fieldMeta) : null,
+              };
+              return <CheckboxField key={field.id} field={fieldWithMeta} recipient={recipient} />;
+            })
+            .with(FieldType.DROPDOWN, () => {
+              const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                ...field,
+                fieldMeta: field.fieldMeta ? ZDropdownFieldMeta.parse(field.fieldMeta) : null,
+              };
+              return <DropdownField key={field.id} field={fieldWithMeta} recipient={recipient} />;
+            })
             .otherwise(() => null),
         )}
       </ElementVisible>

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

@@ -4,29 +4,31 @@ import { useEffect, useState, useTransition } from 'react';
 
 import { useRouter } from 'next/navigation';
 
-import { Loader } from 'lucide-react';
+import { Loader, Type } from 'lucide-react';
 
+import { validateTextField } from '@documenso/lib/advanced-fields-validation/validate-text';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZTextFieldMeta } from '@documenso/lib/types/field-meta';
 import type { Recipient } from '@documenso/prisma/client';
-import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
 import { trpc } from '@documenso/trpc/react';
 import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
-import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
+import { Textarea } from '@documenso/ui/primitives/textarea';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentAuthContext } from './document-auth-provider';
 import { SigningFieldContainer } from './signing-field-container';
 
 export type TextFieldProps = {
-  field: FieldWithSignature;
+  field: FieldWithSignatureAndFieldMeta;
   recipient: Recipient;
   onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
   onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
@@ -34,9 +36,16 @@ export type TextFieldProps = {
 
 export const TextField = ({ field, recipient, onSignField, onUnsignField }: TextFieldProps) => {
   const router = useRouter();
-
   const { toast } = useToast();
 
+  const initialErrors: Record<string, string[]> = {
+    required: [],
+    characterLimit: [],
+  };
+
+  const [errors, setErrors] = useState(initialErrors);
+  const userInputHasErrors = Object.values(errors).some((error) => error.length > 0);
+
   const { executeActionAuthProcedure } = useRequiredDocumentAuthContext();
 
   const [isPending, startTransition] = useTransition();
@@ -49,21 +58,52 @@ export const TextField = ({ field, recipient, onSignField, onUnsignField }: Text
     isLoading: isRemoveSignedFieldWithTokenLoading,
   } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
 
+  const parsedFieldMeta = field.fieldMeta ? ZTextFieldMeta.parse(field.fieldMeta) : null;
+
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+  const shouldAutoSignField =
+    (!field.inserted && parsedFieldMeta?.text) ||
+    (!field.inserted && parsedFieldMeta?.text && parsedFieldMeta?.readOnly);
 
   const [showCustomTextModal, setShowCustomTextModal] = useState(false);
-  const [localText, setLocalCustomText] = useState('');
+  const [localText, setLocalCustomText] = useState(parsedFieldMeta?.text ?? '');
 
   useEffect(() => {
     if (!showCustomTextModal) {
-      setLocalCustomText('');
+      setLocalCustomText(parsedFieldMeta?.text ?? '');
+      setErrors(initialErrors);
     }
   }, [showCustomTextModal]);
 
+  const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const text = e.target.value;
+    setLocalCustomText(text);
+
+    if (parsedFieldMeta) {
+      const validationErrors = validateTextField(text, parsedFieldMeta, true);
+      setErrors({
+        required: validationErrors.filter((error) => error.includes('required')),
+        characterLimit: validationErrors.filter((error) => error.includes('character limit')),
+      });
+    }
+  };
+
   /**
    * When the user clicks the sign button in the dialog where they enter the text field.
    */
   const onDialogSignClick = () => {
+    if (parsedFieldMeta) {
+      const validationErrors = validateTextField(localText, parsedFieldMeta, true);
+
+      if (validationErrors.length > 0) {
+        setErrors({
+          required: validationErrors.filter((error) => error.includes('required')),
+          characterLimit: validationErrors.filter((error) => error.includes('character limit')),
+        });
+        return;
+      }
+    }
+
     setShowCustomTextModal(false);
 
     void executeActionAuthProcedure({
@@ -73,17 +113,22 @@ export const TextField = ({ field, recipient, onSignField, onUnsignField }: Text
   };
 
   const onPreSign = () => {
-    if (!localText) {
-      setShowCustomTextModal(true);
-      return false;
+    setShowCustomTextModal(true);
+
+    if (localText && parsedFieldMeta) {
+      const validationErrors = validateTextField(localText, parsedFieldMeta, true);
+      setErrors({
+        required: validationErrors.filter((error) => error.includes('required')),
+        characterLimit: validationErrors.filter((error) => error.includes('character limit')),
+      });
     }
 
-    return true;
+    return false;
   };
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
-      if (!localText) {
+      if (!localText || userInputHasErrors) {
         return;
       }
 
@@ -136,6 +181,8 @@ export const TextField = ({ field, recipient, onSignField, onUnsignField }: Text
 
       await removeSignedFieldWithToken(payload);
 
+      setLocalCustomText(parsedFieldMeta?.text ?? '');
+
       startTransition(() => router.refresh());
     } catch (err) {
       console.error(err);
@@ -148,6 +195,34 @@ export const TextField = ({ field, recipient, onSignField, onUnsignField }: Text
     }
   };
 
+  useEffect(() => {
+    if (shouldAutoSignField) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, []);
+
+  const parsedField = field.fieldMeta ? ZTextFieldMeta.parse(field.fieldMeta) : undefined;
+
+  const labelDisplay =
+    parsedField?.label && parsedField.label.length < 20
+      ? parsedField.label
+      : parsedField?.label
+      ? parsedField?.label.substring(0, 20) + '...'
+      : undefined;
+
+  const textDisplay =
+    parsedField?.text && parsedField.text.length < 20
+      ? parsedField.text
+      : parsedField?.text
+      ? parsedField?.text.substring(0, 20) + '...'
+      : undefined;
+
+  const fieldDisplayName = labelDisplay ? labelDisplay : textDisplay ? textDisplay : 'Add text';
+  const charactersRemaining = (parsedFieldMeta?.characterLimit ?? 0) - (localText.length ?? 0);
+
   return (
     <SigningFieldContainer
       field={field}
@@ -163,27 +238,69 @@ export const TextField = ({ field, recipient, onSignField, onUnsignField }: Text
       )}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Text</p>
+        <p
+          className={cn(
+            'group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200',
+            {
+              'group-hover:text-yellow-300': !field.inserted && !parsedFieldMeta?.required,
+              'group-hover:text-red-300': !field.inserted && parsedFieldMeta?.required,
+            },
+          )}
+        >
+          <span className="flex items-center justify-center gap-x-1">
+            <Type />
+            {fieldDisplayName}
+          </span>
+        </p>
       )}
 
-      {field.inserted && <p className="text-muted-foreground duration-200">{field.customText}</p>}
+      {field.inserted && (
+        <p className="text-muted-foreground dark:text-background/80 flex items-center justify-center gap-x-1 duration-200">
+          {field.customText.length < 20
+            ? field.customText
+            : field.customText.substring(0, 15) + '...'}
+        </p>
+      )}
 
       <Dialog open={showCustomTextModal} onOpenChange={setShowCustomTextModal}>
         <DialogContent>
-          <DialogTitle>
-            Enter your Text <span className="text-muted-foreground">({recipient.email})</span>
-          </DialogTitle>
+          <DialogTitle>{parsedFieldMeta?.label ? parsedFieldMeta?.label : 'Add Text'}</DialogTitle>
 
-          <div className="">
-            <Label htmlFor="custom-text">Custom Text</Label>
-
-            <Input
+          <div>
+            <Textarea
               id="custom-text"
-              className="border-border mt-2 w-full rounded-md border"
-              onChange={(e) => setLocalCustomText(e.target.value)}
+              placeholder={parsedFieldMeta?.placeholder ?? 'Enter your text here'}
+              className={cn('mt-2 w-full rounded-md', {
+                'border-2 border-red-300 ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
+                  userInputHasErrors,
+              })}
+              value={localText}
+              onChange={handleTextChange}
             />
           </div>
 
+          {parsedFieldMeta?.characterLimit !== undefined && parsedFieldMeta?.characterLimit > 0 && !userInputHasErrors && (
+            <div className="text-muted-foreground text-sm">
+              {charactersRemaining} characters remaining
+            </div>
+          )}
+
+          {userInputHasErrors && (
+            <div className="text-sm">
+              {errors.required.map((error, index) => (
+                <p key={index} className="text-red-500">
+                  {error}
+                </p>
+              ))}
+              {errors.characterLimit.map((error, index) => (
+                <p key={index} className="text-red-500">
+                  {error}{' '}
+                  {charactersRemaining < 0 && `(${Math.abs(charactersRemaining)} characters over)`}
+                </p>
+              ))}
+            </div>
+          )}
+
           <DialogFooter>
             <div className="mt-4 flex w-full flex-1 flex-nowrap gap-4">
               <Button
@@ -201,10 +318,10 @@ export const TextField = ({ field, recipient, onSignField, onUnsignField }: Text
               <Button
                 type="button"
                 className="flex-1"
-                disabled={!localText}
+                disabled={!localText || userInputHasErrors}
                 onClick={() => onDialogSignClick()}
               >
-                Save Text
+                Save
               </Button>
             </div>
           </DialogFooter>

apps/web/src/app/(teams)/t/[teamUrl]/settings/page.tsx

@@ -1,6 +1,7 @@
 import { CheckCircle2, Clock } from 'lucide-react';
 import { P, match } from 'ts-pattern';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
@@ -13,6 +14,7 @@ import { AddTeamEmailDialog } from '~/components/(teams)/dialogs/add-team-email-
 import { DeleteTeamDialog } from '~/components/(teams)/dialogs/delete-team-dialog';
 import { TransferTeamDialog } from '~/components/(teams)/dialogs/transfer-team-dialog';
 import { UpdateTeamForm } from '~/components/(teams)/forms/update-team-form';
+import { AvatarImageForm } from '~/components/forms/avatar-image';
 
 import { TeamEmailDropdown } from './team-email-dropdown';
 import { TeamTransferStatus } from './team-transfer-status';
@@ -35,7 +37,7 @@ export default async function TeamsSettingsPage({ params }: TeamsSettingsPagePro
 
   return (
     <div>
-      <SettingsHeader title="Team Profile" subtitle="Here you can edit your team's details." />
+      <SettingsHeader title="General settings" subtitle="Here you can edit your team's details." />
 
       <TeamTransferStatus
         className="mb-4"
@@ -44,6 +46,8 @@ export default async function TeamsSettingsPage({ params }: TeamsSettingsPagePro
         transferVerification={team.transferVerification}
       />
 
+      <AvatarImageForm className="mb-8" team={team} user={session.user} />
+
       <UpdateTeamForm teamId={team.id} teamName={team.name} teamUrl={team.url} />
 
       <section className="mt-6 space-y-6">
@@ -61,6 +65,7 @@ export default async function TeamsSettingsPage({ params }: TeamsSettingsPagePro
             <div className="flex flex-row items-center justify-between pt-4">
               <AvatarWithText
                 avatarClass="h-12 w-12"
+                avatarSrc={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${team.avatarImageId}`}
                 avatarFallback={extractInitials(
                   (team.teamEmail?.name || team.emailVerification?.name) ?? '',
                 )}

apps/web/src/app/(teams)/t/[teamUrl]/settings/public-profile/page.tsx

@@ -0,0 +1,28 @@
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { getTeamPublicProfile } from '@documenso/lib/server-only/team/get-team-public-profile';
+
+import { PublicProfilePageView } from '~/app/(dashboard)/settings/public-profile/public-profile-page-view';
+
+export type TeamsSettingsPublicProfilePageProps = {
+  params: {
+    teamUrl: string;
+  };
+};
+
+export default async function TeamsSettingsPublicProfilePage({
+  params,
+}: TeamsSettingsPublicProfilePageProps) {
+  const { teamUrl } = params;
+
+  const { user } = await getRequiredServerComponentSession();
+
+  const team = await getTeamByUrl({ userId: user.id, teamUrl });
+
+  const { profile } = await getTeamPublicProfile({
+    userId: user.id,
+    teamId: team.id,
+  });
+
+  return <PublicProfilePageView user={user} team={team} profile={profile} />;
+}

apps/web/src/components/(dashboard)/layout/menu-switcher.tsx

@@ -7,6 +7,7 @@ import { motion } from 'framer-motion';
 import { CheckCircle2, ChevronsUpDown, Plus, Settings2 } from 'lucide-react';
 import { signOut } from 'next-auth/react';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { TEAM_MEMBER_ROLE_MAP, TEAM_URL_REGEX } from '@documenso/lib/constants/teams';
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
@@ -99,6 +100,9 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
           className="relative flex h-12 flex-row items-center px-0 py-2 ring-0 focus:outline-none focus-visible:border-0 focus-visible:ring-0 focus-visible:ring-transparent md:px-2"
         >
           <AvatarWithText
+            avatarSrc={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${
+              selectedTeam ? selectedTeam.avatarImageId : user.avatarImageId
+            }`}
             avatarFallback={formatAvatarFallback(selectedTeam?.name)}
             primaryText={selectedTeam ? selectedTeam.name : user.name}
             secondaryText={formatSecondaryAvatarText(selectedTeam)}
@@ -122,6 +126,11 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
             <DropdownMenuItem asChild>
               <Link href={formatRedirectUrlOnSwitch()}>
                 <AvatarWithText
+                  avatarSrc={
+                    user.avatarImageId
+                      ? `${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${user.avatarImageId}`
+                      : undefined
+                  }
                   avatarFallback={formatAvatarFallback()}
                   primaryText={user.name}
                   secondaryText={formatSecondaryAvatarText()}
@@ -180,10 +189,15 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
                     href={formatRedirectUrlOnSwitch(team.url)}
                   >
                     <AvatarWithText
+                      avatarSrc={
+                        team.avatarImageId
+                          ? `${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${team.avatarImageId}`
+                          : undefined
+                      }
                       avatarFallback={formatAvatarFallback(team.name)}
                       primaryText={team.name}
                       secondaryText={
-                        <div className="relative">
+                        <div className="relative w-full">
                           <motion.span
                             className="overflow-hidden"
                             variants={{

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

@@ -25,7 +25,7 @@ export const CardMetric = ({ icon: Icon, title, value, className }: CardMetricPr
             </div>
           )}
 
-          <h3 className="text-primary-forground flex items-end text-sm font-medium leading-tight">
+          <h3 className="text-primary-forground mb-2 flex items-end text-sm font-medium leading-tight">
             {title}
           </h3>
         </div>

apps/web/src/components/(dashboard)/settings/layout/desktop-nav.tsx

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { Braces, CreditCard, Lock, User, Users, Webhook } from 'lucide-react';
+import { Braces, CreditCard, Globe2Icon, Lock, User, Users, Webhook } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -19,6 +19,7 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
   const { getFlag } = useFeatureFlags();
 
   const isBillingEnabled = getFlag('app_billing');
+  const isPublicProfileEnabled = getFlag('app_public_profile');
 
   return (
     <div className={cn('flex flex-col gap-y-2', className)} {...props}>
@@ -35,6 +36,21 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
+      {isPublicProfileEnabled && (
+        <Link href="/settings/public-profile">
+          <Button
+            variant="ghost"
+            className={cn(
+              'w-full justify-start',
+              pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
+            )}
+          >
+            <Globe2Icon className="mr-2 h-5 w-5" />
+            Public Profile
+          </Button>
+        </Link>
+      )}
+
       <Link href="/settings/teams">
         <Button
           variant="ghost"

apps/web/src/components/(dashboard)/settings/layout/mobile-nav.tsx

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { Braces, CreditCard, Lock, User, Users, Webhook } from 'lucide-react';
+import { Braces, CreditCard, Globe2Icon, Lock, User, Users, Webhook } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -19,6 +19,7 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
   const { getFlag } = useFeatureFlags();
 
   const isBillingEnabled = getFlag('app_billing');
+  const isPublicProfileEnabled = getFlag('app_public_profile');
 
   return (
     <div
@@ -38,6 +39,21 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
+      {isPublicProfileEnabled && (
+        <Link href="/settings/public-profile">
+          <Button
+            variant="ghost"
+            className={cn(
+              'w-full justify-start',
+              pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
+            )}
+          >
+            <Globe2Icon className="mr-2 h-5 w-5" />
+            Public Profile
+          </Button>
+        </Link>
+      )}
+
       <Link href="/settings/teams">
         <Button
           variant="ghost"

apps/web/src/components/(teams)/dialogs/create-team-checkout-dialog.tsx

@@ -158,7 +158,6 @@ export const CreateTeamCheckoutDialog = ({
 
               <Button
                 type="submit"
-                disabled={selectedPrice.interval === 'yearly'}
                 loading={isCreatingCheckout}
                 onClick={async () =>
                   createCheckout({
@@ -167,7 +166,7 @@ export const CreateTeamCheckoutDialog = ({
                   })
                 }
               >
-                {selectedPrice.interval === 'monthly' ? 'Checkout' : 'Coming soon'}
+                Checkout
               </Button>
             </DialogFooter>
           </div>

apps/web/src/components/(teams)/dialogs/leave-team-dialog.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
 import type { TeamMemberRole } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
@@ -22,11 +23,18 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 export type LeaveTeamDialogProps = {
   teamId: number;
   teamName: string;
+  teamAvatarImageId?: string | null;
   role: TeamMemberRole;
   trigger?: React.ReactNode;
 };
 
-export const LeaveTeamDialog = ({ trigger, teamId, teamName, role }: LeaveTeamDialogProps) => {
+export const LeaveTeamDialog = ({
+  trigger,
+  teamId,
+  teamName,
+  teamAvatarImageId,
+  role,
+}: LeaveTeamDialogProps) => {
   const [open, setOpen] = useState(false);
 
   const { toast } = useToast();
@@ -70,6 +78,7 @@ export const LeaveTeamDialog = ({ trigger, teamId, teamName, role }: LeaveTeamDi
         <Alert variant="neutral" padding="tight">
           <AvatarWithText
             avatarClass="h-12 w-12"
+            avatarSrc={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${teamAvatarImageId}`}
             avatarFallback={teamName.slice(0, 1).toUpperCase()}
             primaryText={teamName}
             secondaryText={TEAM_MEMBER_ROLE_MAP[role]}

apps/web/src/components/(teams)/settings/layout/desktop-nav.tsx

@@ -5,8 +5,9 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { useParams, usePathname } from 'next/navigation';
 
-import { Braces, CreditCard, Settings, Users, Webhook } from 'lucide-react';
+import { Braces, CreditCard, Globe2Icon, Settings, Users, Webhook } from 'lucide-react';
 
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -17,9 +18,14 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
   const pathname = usePathname();
   const params = useParams();
 
+  const { getFlag } = useFeatureFlags();
+
+  const isPublicProfileEnabled = getFlag('app_public_profile');
+
   const teamUrl = typeof params?.teamUrl === 'string' ? params?.teamUrl : '';
 
   const settingsPath = `/t/${teamUrl}/settings`;
+  const publicProfilePath = `/t/${teamUrl}/settings/public-profile`;
   const membersPath = `/t/${teamUrl}/settings/members`;
   const tokensPath = `/t/${teamUrl}/settings/tokens`;
   const webhooksPath = `/t/${teamUrl}/settings/webhooks`;
@@ -37,6 +43,21 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
+      {isPublicProfileEnabled && (
+        <Link href={publicProfilePath}>
+          <Button
+            variant="ghost"
+            className={cn(
+              'w-full justify-start',
+              pathname?.startsWith(publicProfilePath) && 'bg-secondary',
+            )}
+          >
+            <Globe2Icon className="mr-2 h-5 w-5" />
+            Public Profile
+          </Button>
+        </Link>
+      )}
+
       <Link href={membersPath}>
         <Button
           variant="ghost"

apps/web/src/components/(teams)/settings/layout/mobile-nav.tsx

@@ -5,8 +5,9 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { useParams, usePathname } from 'next/navigation';
 
-import { Braces, CreditCard, Key, User, Webhook } from 'lucide-react';
+import { Braces, CreditCard, Globe2Icon, Key, User, Webhook } from 'lucide-react';
 
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -17,9 +18,14 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
   const pathname = usePathname();
   const params = useParams();
 
+  const { getFlag } = useFeatureFlags();
+
+  const isPublicProfileEnabled = getFlag('app_public_profile');
+
   const teamUrl = typeof params?.teamUrl === 'string' ? params?.teamUrl : '';
 
   const settingsPath = `/t/${teamUrl}/settings`;
+  const publicProfilePath = `/t/${teamUrl}/settings/public-profile`;
   const membersPath = `/t/${teamUrl}/settings/members`;
   const tokensPath = `/t/${teamUrl}/settings/tokens`;
   const webhooksPath = `/t/${teamUrl}/settings/webhooks`;
@@ -45,6 +51,21 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
+      {isPublicProfileEnabled && (
+        <Link href={publicProfilePath}>
+          <Button
+            variant="ghost"
+            className={cn(
+              'w-full justify-start',
+              pathname?.startsWith(publicProfilePath) && 'bg-secondary',
+            )}
+          >
+            <Globe2Icon className="mr-2 h-5 w-5" />
+            Public Profile
+          </Button>
+        </Link>
+      )}
+
       <Link href={membersPath}>
         <Button
           variant="ghost"

apps/web/src/components/(teams)/tables/current-user-teams-data-table.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { NEXT_PUBLIC_WEBAPP_URL, WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
 import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
 import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
 import { canExecuteTeamAction } from '@documenso/lib/utils/teams';
@@ -62,6 +62,7 @@ export const CurrentUserTeamsDataTable = () => {
           cell: ({ row }) => (
             <Link href={`/t/${row.original.url}`} scroll={false}>
               <AvatarWithText
+                avatarSrc={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${row.original.avatarImageId}`}
                 avatarClass="h-12 w-12"
                 avatarFallback={row.original.name.slice(0, 1).toUpperCase()}
                 primaryText={
@@ -98,6 +99,7 @@ export const CurrentUserTeamsDataTable = () => {
               <LeaveTeamDialog
                 teamId={row.original.id}
                 teamName={row.original.name}
+                teamAvatarImageId={row.original.avatarImageId}
                 role={row.original.currentTeamMember.role}
                 trigger={
                   <Button

apps/web/src/components/document/document-history-sheet.tsx

@@ -157,6 +157,7 @@ export const DocumentHistorySheet = ({
                     { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED },
                     { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED },
                     { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_SENT },
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_MOVED_TO_TEAM },
                     () => null,
                   )
                   .with(
@@ -270,6 +271,23 @@ export const DocumentHistorySheet = ({
                       ]}
                     />
                   ))
+                  .with(
+                    { type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_EXTERNAL_ID_UPDATED },
+                    ({ data }) => (
+                      <DocumentHistorySheetChanges
+                        values={[
+                          {
+                            key: 'Old',
+                            value: data.from,
+                          },
+                          {
+                            key: 'New',
+                            value: data.to,
+                          },
+                        ]}
+                      />
+                    ),
+                  )
                   .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_INSERTED }, ({ data }) => (
                     <DocumentHistorySheetChanges
                       values={[
@@ -304,7 +322,6 @@ export const DocumentHistorySheet = ({
                       ]}
                     />
                   ))
-
                   .exhaustive()}
 
                 {isUserDetailsVisible && (

apps/web/src/components/document/document-read-only-fields.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 
+import { EyeOffIcon } from 'lucide-react';
 import { P, match } from 'ts-pattern';
 
 import {
@@ -10,19 +11,19 @@ import {
 } 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 type { CompletedField } from '@documenso/lib/types/fields';
+import type { DocumentField } from '@documenso/lib/server-only/field/get-fields-for-document';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import type { DocumentMeta } from '@documenso/prisma/client';
-import { FieldType } from '@documenso/prisma/client';
+import { FieldType, SigningStatus } from '@documenso/prisma/client';
 import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { cn } from '@documenso/ui/lib/utils';
 import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
-import { Button } from '@documenso/ui/primitives/button';
 import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { PopoverHover } from '@documenso/ui/primitives/popover';
 
 export type DocumentReadOnlyFieldsProps = {
-  fields: CompletedField[];
+  fields: DocumentField[];
   documentMeta?: DocumentMeta;
 };
 
@@ -41,68 +42,93 @@ export const DocumentReadOnlyFields = ({ documentMeta, fields }: DocumentReadOnl
             <FieldRootContainer
               field={field}
               key={field.id}
-              cardClassName="border-gray-100/50 !shadow-none backdrop-blur-[1px] bg-background/90"
+              cardClassName="border-gray-300/50 !shadow-none backdrop-blur-[1px] bg-gray-50 ring-0 ring-offset-0"
             >
               <div className="absolute -right-3 -top-3">
                 <PopoverHover
                   trigger={
-                    <Avatar className="dark:border-border h-8 w-8 border-2 border-solid border-gray-200/50 transition-colors hover:border-gray-200">
+                    <Avatar className="dark:border-foreground h-8 w-8 border-2 border-solid border-gray-200/50 transition-colors hover:border-gray-200">
                       <AvatarFallback className="bg-neutral-50 text-xs text-gray-400">
                         {extractInitials(field.Recipient.name || field.Recipient.email)}
                       </AvatarFallback>
                     </Avatar>
                   }
                   contentProps={{
-                    className: 'flex w-fit flex-col py-2.5 text-sm',
+                    className: 'relative flex w-fit flex-col p-2.5 text-sm',
                   }}
                 >
-                  <p>
-                    <span className="font-semibold">
-                      {field.Recipient.name
-                        ? `${field.Recipient.name} (${field.Recipient.email})`
-                        : field.Recipient.email}{' '}
-                    </span>
-                    inserted a {FRIENDLY_FIELD_TYPE[field.type].toLowerCase()}
+                  <p className="font-semibold">
+                    {field.Recipient.signingStatus === SigningStatus.SIGNED ? 'Signed' : 'Pending'}{' '}
+                    {FRIENDLY_FIELD_TYPE[field.type].toLowerCase()} field
                   </p>
 
-                  <Button
-                    variant="outline"
-                    className="mt-2.5 h-6 text-xs focus:outline-none focus-visible:ring-0"
+                  <p className="text-muted-foreground text-xs">
+                    {field.Recipient.name
+                      ? `${field.Recipient.name} (${field.Recipient.email})`
+                      : field.Recipient.email}{' '}
+                  </p>
+
+                  <button
+                    className="absolute right-0 top-0 my-1 p-2 focus:outline-none focus-visible:ring-0"
                     onClick={() => handleHideField(field.secondaryId)}
+                    title="Hide field"
                   >
-                    Hide field
-                  </Button>
+                    <EyeOffIcon className="h-3 w-3" />
+                  </button>
                 </PopoverHover>
               </div>
 
-              <div className="text-muted-foreground break-all text-sm">
-                {match(field)
-                  .with({ type: FieldType.SIGNATURE }, (field) =>
-                    field.Signature?.signatureImageAsBase64 ? (
-                      <img
-                        src={field.Signature.signatureImageAsBase64}
-                        alt="Signature"
-                        className="h-full w-full object-contain dark:invert"
-                      />
-                    ) : (
-                      <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
-                        {field.Signature?.typedSignature}
-                      </p>
-                    ),
-                  )
-                  .with(
-                    { type: P.union(FieldType.NAME, FieldType.TEXT, FieldType.EMAIL) },
-                    () => field.customText,
-                  )
-                  .with({ type: FieldType.DATE }, () =>
-                    convertToLocalSystemFormat(
-                      field.customText,
-                      documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
-                      documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
-                    ),
-                  )
-                  .with({ type: FieldType.FREE_SIGNATURE }, () => null)
-                  .exhaustive()}
+              <div className="text-muted-foreground dark:text-background/70 break-all text-sm">
+                {field.Recipient.signingStatus === SigningStatus.SIGNED &&
+                  match(field)
+                    .with({ type: FieldType.SIGNATURE }, (field) =>
+                      field.Signature?.signatureImageAsBase64 ? (
+                        <img
+                          src={field.Signature.signatureImageAsBase64}
+                          alt="Signature"
+                          className="h-full w-full object-contain dark:invert"
+                        />
+                      ) : (
+                        <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
+                          {field.Signature?.typedSignature}
+                        </p>
+                      ),
+                    )
+                    .with(
+                      {
+                        type: P.union(
+                          FieldType.NAME,
+                          FieldType.EMAIL,
+                          FieldType.NUMBER,
+                          FieldType.RADIO,
+                          FieldType.CHECKBOX,
+                          FieldType.DROPDOWN,
+                        ),
+                      },
+                      () => field.customText,
+                    )
+                    .with({ type: FieldType.TEXT }, () => field.customText.substring(0, 20) + '...')
+                    .with({ type: FieldType.DATE }, () =>
+                      convertToLocalSystemFormat(
+                        field.customText,
+                        documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
+                        documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
+                      ),
+                    )
+                    .with({ type: FieldType.FREE_SIGNATURE }, () => null)
+                    .exhaustive()}
+
+                {field.Recipient.signingStatus === SigningStatus.NOT_SIGNED && (
+                  <p
+                    className={cn('text-muted-foreground text-lg duration-200', {
+                      'font-signature sm:text-xl md:text-2xl lg:text-3xl':
+                        field.type === FieldType.SIGNATURE ||
+                        field.type === FieldType.FREE_SIGNATURE,
+                    })}
+                  >
+                    {FRIENDLY_FIELD_TYPE[field.type]}
+                  </p>
+                )}
               </div>
             </FieldRootContainer>
           ),

apps/web/src/components/forms/avatar-image.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ErrorCode, useDropzone } from 'react-dropzone';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { base64 } from '@documenso/lib/universal/base64';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { Team, User } from '@documenso/prisma/client';
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZAvatarImageFormSchema = z.object({
+  bytes: z.string().nullish(),
+});
+
+export type TAvatarImageFormSchema = z.infer<typeof ZAvatarImageFormSchema>;
+
+export type AvatarImageFormProps = {
+  className?: string;
+  user: User;
+  team?: Team;
+};
+
+export const AvatarImageForm = ({ className, user, team }: AvatarImageFormProps) => {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const { mutateAsync: setProfileImage } = trpc.profile.setProfileImage.useMutation();
+
+  const initials = extractInitials(team?.name || user.name || '');
+
+  const hasAvatarImage = useMemo(() => {
+    if (team) {
+      return team.avatarImageId !== null;
+    }
+
+    return user.avatarImageId !== null;
+  }, [team, user.avatarImageId]);
+
+  const avatarImageId = team ? team.avatarImageId : user.avatarImageId;
+
+  const form = useForm<TAvatarImageFormSchema>({
+    values: {
+      bytes: null,
+    },
+    resolver: zodResolver(ZAvatarImageFormSchema),
+  });
+
+  const { getRootProps, getInputProps } = useDropzone({
+    maxSize: 1024 * 1024,
+    accept: {
+      'image/*': ['.png', '.jpg', '.jpeg'],
+    },
+    multiple: false,
+    onDropAccepted: ([file]) => {
+      void file.arrayBuffer().then((buffer) => {
+        const contents = base64.encode(new Uint8Array(buffer));
+
+        form.setValue('bytes', contents);
+        void form.handleSubmit(onFormSubmit)();
+      });
+    },
+    onDropRejected: ([file]) => {
+      form.setError('bytes', {
+        type: 'onChange',
+        message: match(file.errors[0].code)
+          .with(ErrorCode.FileTooLarge, () => 'Uploaded file is too large')
+          .with(ErrorCode.FileTooSmall, () => 'Uploaded file is too small')
+          .with(ErrorCode.FileInvalidType, () => 'Uploaded file not an allowed file type')
+          .otherwise(() => 'An unknown error occurred'),
+      });
+    },
+  });
+
+  const onFormSubmit = async (data: TAvatarImageFormSchema) => {
+    try {
+      await setProfileImage({
+        bytes: data.bytes,
+        teamId: team?.id,
+      });
+
+      toast({
+        title: 'Avatar Updated',
+        description: 'Your avatar has been updated successfully.',
+        duration: 5000,
+      });
+
+      router.refresh();
+    } catch (err) {
+      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: err.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            'We encountered an unknown error while attempting to update the avatar. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        className={cn('flex w-full flex-col gap-y-4', className)}
+        // onSubmit={form.handleSubmit(onFormSubmit)}
+      >
+        <fieldset className="flex w-full flex-col gap-y-4" disabled={form.formState.isSubmitting}>
+          <FormField
+            control={form.control}
+            name="bytes"
+            render={() => (
+              <FormItem>
+                <FormLabel>Avatar</FormLabel>
+
+                <FormControl>
+                  <div className="flex items-center gap-8">
+                    <div className="relative">
+                      <Avatar className="h-16 w-16 border-2 border-solid">
+                        {avatarImageId && (
+                          <AvatarImage
+                            src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${avatarImageId}`}
+                          />
+                        )}
+                        <AvatarFallback className="text-sm text-gray-400">
+                          {initials}
+                        </AvatarFallback>
+                      </Avatar>
+
+                      {hasAvatarImage && (
+                        <button
+                          type="button"
+                          className="bg-background/70 text-destructive absolute inset-0 flex cursor-pointer items-center justify-center text-xs opacity-0 transition-opacity hover:opacity-100"
+                          disabled={form.formState.isSubmitting}
+                          onClick={() => void onFormSubmit({ bytes: null })}
+                        >
+                          Remove
+                        </button>
+                      )}
+                    </div>
+
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      size="sm"
+                      {...getRootProps()}
+                      loading={form.formState.isSubmitting}
+                      disabled={form.formState.isSubmitting}
+                    >
+                      Upload Avatar
+                      <input {...getInputProps()} />
+                    </Button>
+                  </div>
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/web/src/components/forms/public-profile-form.tsx

@@ -0,0 +1,265 @@
+'use client';
+
+import { useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { motion } from 'framer-motion';
+import { AnimatePresence } from 'framer-motion';
+import { CheckSquareIcon, CopyIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { formatUserProfilePath } from '@documenso/lib/utils/public-profiles';
+import type { TeamProfile, UserProfile } from '@documenso/prisma/client';
+import {
+  MAX_PROFILE_BIO_LENGTH,
+  ZUpdatePublicProfileMutationSchema,
+} from '@documenso/trpc/server/profile-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZPublicProfileFormSchema = ZUpdatePublicProfileMutationSchema.pick({
+  bio: true,
+  enabled: true,
+  url: true,
+});
+
+export type TPublicProfileFormSchema = z.infer<typeof ZPublicProfileFormSchema>;
+
+export type PublicProfileFormProps = {
+  className?: string;
+  profileUrl?: string | null;
+  teamUrl?: string;
+  onProfileUpdate: (data: TPublicProfileFormSchema) => Promise<unknown>;
+  profile: UserProfile | TeamProfile;
+};
+export const PublicProfileForm = ({
+  className,
+  profileUrl,
+  profile,
+  teamUrl,
+  onProfileUpdate,
+}: PublicProfileFormProps) => {
+  const { toast } = useToast();
+
+  const [, copy] = useCopyToClipboard();
+
+  const [copiedTimeout, setCopiedTimeout] = useState<NodeJS.Timeout | null>(null);
+
+  const form = useForm<TPublicProfileFormSchema>({
+    values: {
+      url: profileUrl ?? '',
+      bio: profile?.bio ?? '',
+    },
+    resolver: zodResolver(ZPublicProfileFormSchema),
+  });
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const onFormSubmit = async (data: TPublicProfileFormSchema) => {
+    try {
+      await onProfileUpdate(data);
+
+      toast({
+        title: 'Success',
+        description: 'Your public profile has been updated.',
+        duration: 5000,
+      });
+
+      form.reset({
+        url: data.url,
+        bio: data.bio,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      switch (error.code) {
+        case AppErrorCode.PREMIUM_PROFILE_URL:
+        case AppErrorCode.PROFILE_URL_TAKEN:
+          form.setError('url', {
+            type: 'manual',
+            message: error.message,
+          });
+
+          break;
+
+        default:
+          toast({
+            title: 'An unknown error occurred',
+            variant: 'destructive',
+            description:
+              'We encountered an unknown error while attempting to update your public profile. Please try again later.',
+          });
+      }
+    }
+  };
+
+  const onCopy = async () => {
+    await copy(formatUserProfilePath(form.getValues('url') ?? '')).then(() => {
+      toast({
+        title: 'Copied to clipboard',
+        description: 'The profile link has been copied to your clipboard',
+      });
+    });
+
+    if (copiedTimeout) {
+      clearTimeout(copiedTimeout);
+    }
+
+    setCopiedTimeout(
+      setTimeout(() => {
+        setCopiedTimeout(null);
+      }, 2000),
+    );
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        className={cn('flex w-full flex-col gap-y-4', className)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
+      >
+        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+          <FormField
+            control={form.control}
+            name="url"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Public profile URL</FormLabel>
+                <FormControl>
+                  <Input {...field} disabled={field.disabled || teamUrl !== undefined} />
+                </FormControl>
+
+                {teamUrl && (
+                  <p className="text-muted-foreground text-xs">
+                    You can update the profile URL by updating the team URL in the general settings
+                    page.
+                  </p>
+                )}
+
+                <div className="h-8">
+                  {!form.formState.errors.url && (
+                    <div className="text-muted-foreground h-8 text-sm">
+                      {field.value ? (
+                        <div>
+                          <Button
+                            type="button"
+                            variant="none"
+                            className="h-7 rounded bg-neutral-50 pl-2 pr-0.5 font-normal dark:border dark:border-neutral-500 dark:bg-neutral-600"
+                            onClick={async () => onCopy()}
+                          >
+                            <p>
+                              {formatUserProfilePath('').replace(/https?:\/\//, '')}
+                              <span className="font-semibold">{field.value}</span>
+                            </p>
+
+                            <div className="ml-1 flex h-6 w-6 items-center justify-center rounded transition-all hover:bg-neutral-200 hover:active:bg-neutral-300 dark:hover:bg-neutral-500 dark:hover:active:bg-neutral-400">
+                              <AnimatePresence mode="wait" initial={false}>
+                                <motion.div
+                                  key={copiedTimeout ? 'copied' : 'copy'}
+                                  initial={{ opacity: 0 }}
+                                  animate={{ opacity: 1 }}
+                                  exit={{ opacity: 0, transition: { duration: 0.1 } }}
+                                  className="absolute"
+                                >
+                                  {copiedTimeout ? (
+                                    <CheckSquareIcon className="h-3.5 w-3.5" />
+                                  ) : (
+                                    <CopyIcon className="h-3.5 w-3.5" />
+                                  )}
+                                </motion.div>
+                              </AnimatePresence>
+                            </div>
+                          </Button>
+                        </div>
+                      ) : (
+                        <p>A unique URL to access your profile</p>
+                      )}
+                    </div>
+                  )}
+
+                  <FormMessage />
+                </div>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="bio"
+            render={({ field }) => {
+              const remaningLength = MAX_PROFILE_BIO_LENGTH - (field.value || '').length;
+              const pluralWord = Math.abs(remaningLength) === 1 ? 'character' : 'characters';
+
+              return (
+                <FormItem>
+                  <FormLabel>Bio</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      {...field}
+                      placeholder={teamUrl ? 'Write about the team' : 'Write about yourself'}
+                    />
+                  </FormControl>
+
+                  {!form.formState.errors.bio && (
+                    <p className="text-muted-foreground text-sm">
+                      {remaningLength >= 0
+                        ? `${remaningLength} ${pluralWord} remaining`
+                        : `${Math.abs(remaningLength)} ${pluralWord} over the limit`}
+                    </p>
+                  )}
+
+                  <FormMessage />
+                </FormItem>
+              );
+            }}
+          />
+
+          <div className="flex flex-row justify-end space-x-4">
+            <AnimatePresence>
+              {form.formState.isDirty && (
+                <motion.div
+                  initial={{
+                    opacity: 0,
+                  }}
+                  animate={{
+                    opacity: 1,
+                  }}
+                  exit={{
+                    opacity: 0,
+                  }}
+                >
+                  <Button type="button" variant="secondary" onClick={() => form.reset()}>
+                    Reset
+                  </Button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            <Button
+              type="submit"
+              className="transition-opacity"
+              disabled={!form.formState.isDirty}
+              loading={form.formState.isSubmitting}
+            >
+              Update
+            </Button>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/web/src/components/templates/manage-public-template-dialog.tsx

@@ -0,0 +1,429 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { CheckCircle2Icon, CircleIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { P, match } from 'ts-pattern';
+import { z } from 'zod';
+
+import type { Template, TemplateDirectLink } from '@documenso/prisma/client';
+import { TemplateType } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import {
+  MAX_TEMPLATE_PUBLIC_DESCRIPTION_LENGTH,
+  MAX_TEMPLATE_PUBLIC_TITLE_LENGTH,
+} from '@documenso/trpc/server/template-router/schema';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+import { LocaleDate } from '../formatter/locale-date';
+
+export type ManagePublicTemplateDialogProps = {
+  directTemplates: (Template & {
+    directLink: Pick<TemplateDirectLink, 'token' | 'enabled'>;
+  })[];
+  initialTemplateId?: number | null;
+  initialStep?: ProfileTemplateStep;
+  trigger?: React.ReactNode;
+  isOpen?: boolean;
+  onIsOpenChange?: (value: boolean) => unknown;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZUpdatePublicTemplateFormSchema = z.object({
+  publicTitle: z
+    .string()
+    .min(1, { message: 'Title is required' })
+    .max(MAX_TEMPLATE_PUBLIC_TITLE_LENGTH, {
+      message: `Title cannot be longer than ${MAX_TEMPLATE_PUBLIC_TITLE_LENGTH} characters`,
+    }),
+  publicDescription: z
+    .string()
+    .min(1, { message: 'Description is required' })
+    .max(MAX_TEMPLATE_PUBLIC_DESCRIPTION_LENGTH, {
+      message: `Description cannot be longer than ${MAX_TEMPLATE_PUBLIC_DESCRIPTION_LENGTH} characters`,
+    }),
+});
+
+type TUpdatePublicTemplateFormSchema = z.infer<typeof ZUpdatePublicTemplateFormSchema>;
+
+type ProfileTemplateStep = 'SELECT_TEMPLATE' | 'MANAGE' | 'CONFIRM_DISABLE';
+
+export const ManagePublicTemplateDialog = ({
+  directTemplates,
+  trigger,
+  initialTemplateId = null,
+  initialStep = 'SELECT_TEMPLATE',
+  isOpen = false,
+  onIsOpenChange,
+  ...props
+}: ManagePublicTemplateDialogProps) => {
+  const { toast } = useToast();
+
+  const [open, onOpenChange] = useState(isOpen);
+
+  const team = useOptionalCurrentTeam();
+
+  const [selectedTemplateId, setSelectedTemplateId] = useState<number | null>(initialTemplateId);
+
+  const [currentStep, setCurrentStep] = useState<ProfileTemplateStep>(() => {
+    if (initialStep) {
+      return initialStep;
+    }
+
+    return selectedTemplateId ? 'MANAGE' : 'SELECT_TEMPLATE';
+  });
+
+  const form = useForm({
+    resolver: zodResolver(ZUpdatePublicTemplateFormSchema),
+    defaultValues: {
+      publicTitle: '',
+      publicDescription: '',
+    },
+  });
+
+  const { mutateAsync: updateTemplateSettings, isLoading: isUpdatingTemplateSettings } =
+    trpc.template.updateTemplateSettings.useMutation();
+
+  const setTemplateToPrivate = async (templateId: number) => {
+    try {
+      await updateTemplateSettings({
+        templateId,
+        teamId: team?.id,
+        data: {
+          type: TemplateType.PRIVATE,
+        },
+      });
+
+      toast({
+        title: 'Success',
+        description: 'Template has been removed from your public profile.',
+        duration: 5000,
+      });
+
+      handleOnOpenChange(false);
+    } catch {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to remove this template from your profile. Please try again later.',
+      });
+    }
+  };
+
+  const onFormSubmit = async ({
+    publicTitle,
+    publicDescription,
+  }: TUpdatePublicTemplateFormSchema) => {
+    if (!selectedTemplateId) {
+      return;
+    }
+
+    try {
+      await updateTemplateSettings({
+        templateId: selectedTemplateId,
+        teamId: team?.id,
+        data: {
+          type: TemplateType.PUBLIC,
+          publicTitle,
+          publicDescription,
+        },
+      });
+
+      toast({
+        title: 'Success',
+        description: 'Template has been updated.',
+        duration: 5000,
+      });
+
+      onOpenChange(false);
+    } catch {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to update the template. Please try again later.',
+      });
+    }
+  };
+
+  const selectedTemplate = useMemo(
+    () => directTemplates.find((template) => template.id === selectedTemplateId),
+    [directTemplates, selectedTemplateId],
+  );
+
+  const onManageStep = () => {
+    if (!selectedTemplate) {
+      return;
+    }
+
+    form.reset({
+      publicTitle: selectedTemplate.publicTitle,
+      publicDescription: selectedTemplate.publicDescription,
+    });
+
+    setCurrentStep('MANAGE');
+  };
+
+  const isLoading = isUpdatingTemplateSettings || form.formState.isSubmitting;
+
+  useEffect(() => {
+    const initialTemplate = directTemplates.find((template) => template.id === initialTemplateId);
+
+    if (initialTemplate) {
+      setSelectedTemplateId(initialTemplate.id);
+
+      form.reset({
+        publicTitle: initialTemplate.publicTitle,
+        publicDescription: initialTemplate.publicDescription,
+      });
+    } else {
+      setSelectedTemplateId(null);
+    }
+
+    const step = initialStep || (selectedTemplateId ? 'MANAGE' : 'SELECT_TEMPLATE');
+
+    setCurrentStep(step);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialTemplateId, initialStep, open, isOpen]);
+
+  const handleOnOpenChange = (value: boolean) => {
+    if (isLoading || typeof value !== 'boolean') {
+      return;
+    }
+
+    onOpenChange(value);
+    onIsOpenChange?.(value);
+  };
+
+  return (
+    <Dialog {...props} open={isOpen || open} onOpenChange={handleOnOpenChange}>
+      <fieldset disabled={isLoading} className="relative flex-shrink-0">
+        <DialogTrigger asChild>{trigger}</DialogTrigger>
+
+        <AnimateGenericFadeInOut motionKey={currentStep}>
+          {match({ templateId: selectedTemplateId, currentStep })
+            .with({ currentStep: 'SELECT_TEMPLATE' }, () => (
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>{team?.name || 'Your'} direct signing templates</DialogTitle>
+
+                  <DialogDescription>
+                    Select a template you'd like to display on your {team && `team's`} public
+                    profile
+                  </DialogDescription>
+                </DialogHeader>
+
+                <div className="custom-scrollbar max-h-[60vh] overflow-y-auto rounded-md border">
+                  <Table overflowHidden>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Template</TableHead>
+                        <TableHead>Created</TableHead>
+                        <TableHead></TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {directTemplates.length === 0 && (
+                        <TableRow>
+                          <TableCell colSpan={3} className="h-16 text-center">
+                            <p className="text-muted-foreground">No valid direct templates found</p>
+                          </TableCell>
+                        </TableRow>
+                      )}
+
+                      {directTemplates.map((row) => (
+                        <TableRow
+                          className="w-full cursor-pointer"
+                          key={row.id}
+                          onClick={() => setSelectedTemplateId(row.id)}
+                        >
+                          <TableCell className="text-muted-foreground max-w-[30ch] text-sm">
+                            {row.title}
+                          </TableCell>
+
+                          <TableCell className="text-muted-foreground text-sm">
+                            <LocaleDate date={row.createdAt} />
+                          </TableCell>
+
+                          <TableCell>
+                            {selectedTemplateId === row.id ? (
+                              <CheckCircle2Icon className="h-5 w-5 text-neutral-600 dark:text-neutral-200" />
+                            ) : (
+                              <CircleIcon className="h-5 w-5 text-neutral-300 dark:text-neutral-600" />
+                            )}
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button type="button" variant="secondary">
+                      Close
+                    </Button>
+                  </DialogClose>
+
+                  <Button
+                    type="button"
+                    disabled={selectedTemplateId === null}
+                    onClick={() => onManageStep()}
+                  >
+                    Continue
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            ))
+            .with({ templateId: P.number, currentStep: 'MANAGE' }, () => (
+              <DialogContent className="relative">
+                <DialogHeader>
+                  <DialogTitle>Configure template</DialogTitle>
+
+                  <DialogDescription>Manage details for this public template</DialogDescription>
+                </DialogHeader>
+
+                <Form {...form}>
+                  <form
+                    className="flex h-full flex-col space-y-4"
+                    onSubmit={form.handleSubmit(onFormSubmit)}
+                  >
+                    <FormField
+                      control={form.control}
+                      name="publicTitle"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel required>Title</FormLabel>
+                          <FormControl>
+                            <Input placeholder="The public name for your template" {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="publicDescription"
+                      render={({ field }) => {
+                        const remaningLength =
+                          MAX_TEMPLATE_PUBLIC_DESCRIPTION_LENGTH - (field.value || '').length;
+                        const pluralWord =
+                          Math.abs(remaningLength) === 1 ? 'character' : 'characters';
+
+                        return (
+                          <FormItem>
+                            <FormLabel required>Description</FormLabel>
+                            <FormControl>
+                              <Textarea
+                                placeholder="The public description that will be displayed with this template"
+                                {...field}
+                              />
+                            </FormControl>
+
+                            {!form.formState.errors.publicDescription && (
+                              <p className="text-muted-foreground text-sm">
+                                {remaningLength >= 0
+                                  ? `${remaningLength} ${pluralWord} remaining`
+                                  : `${Math.abs(remaningLength)} ${pluralWord} over the limit`}
+                              </p>
+                            )}
+
+                            <FormMessage />
+                          </FormItem>
+                        );
+                      }}
+                    />
+
+                    <DialogFooter>
+                      {selectedTemplate?.type === TemplateType.PUBLIC && (
+                        <Button
+                          variant="destructive"
+                          className="mr-auto w-full sm:w-auto"
+                          onClick={() => setCurrentStep('CONFIRM_DISABLE')}
+                        >
+                          Disable
+                        </Button>
+                      )}
+
+                      <DialogClose asChild>
+                        <Button variant="secondary">Close</Button>
+                      </DialogClose>
+
+                      <Button type="submit" loading={isUpdatingTemplateSettings}>
+                        Update
+                      </Button>
+                    </DialogFooter>
+                  </form>
+                </Form>
+              </DialogContent>
+            ))
+            .with({ templateId: P.number, currentStep: 'CONFIRM_DISABLE' }, ({ templateId }) => (
+              <DialogContent className="relative">
+                <DialogHeader>
+                  <DialogTitle>Are you sure?</DialogTitle>
+
+                  <DialogDescription>
+                    The template will be removed from your profile
+                  </DialogDescription>
+                </DialogHeader>
+
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button type="button" variant="secondary">
+                      Cancel
+                    </Button>
+                  </DialogClose>
+
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    loading={isUpdatingTemplateSettings}
+                    onClick={() => void setTemplateToPrivate(templateId)}
+                  >
+                    Confirm
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            ))
+            .otherwise(() => null)}
+        </AnimateGenericFadeInOut>
+      </fieldset>
+    </Dialog>
+  );
+};

apps/web/src/pages/api/avatar/[id].tsx

@@ -0,0 +1,34 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { getAvatarImage } from '@documenso/lib/server-only/profile/get-avatar-image';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== 'GET') {
+    return res.status(405).json({
+      status: 'error',
+      message: 'Method not allowed',
+    });
+  }
+
+  const { id } = req.query;
+
+  if (typeof id !== 'string') {
+    return res.status(400).json({
+      status: 'error',
+      message: 'Missing id',
+    });
+  }
+
+  const result = await getAvatarImage({ id });
+
+  if (!result) {
+    return res.status(404).json({
+      status: 'error',
+      message: 'Not found',
+    });
+  }
+
+  res.setHeader('Content-Type', result.contentType);
+  res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
+  res.send(result.content);
+}

apps/web/src/pages/api/jobs/[[...handler]].ts

@@ -0,0 +1,10 @@
+import { jobsClient } from '@documenso/lib/jobs/client';
+
+export const config = {
+  maxDuration: 300,
+  api: {
+    bodyParser: false,
+  },
+};
+
+export default jobsClient.getApiHandler();

docker/Dockerfile

@@ -15,8 +15,7 @@ WORKDIR /app
 
 COPY . .
 
-RUN TURBO_VERSION="$(npm list --package-lock-only --json turbo | jq -r '.dependencies.turbo.version')"
-RUN npm install -g "turbo@$TURBO_VERSION"
+RUN npm install -g "turbo@^1.9.3"
 
 # Outputs to the /out folder
 # source: https://turbo.build/repo/docs/reference/command-line-reference/prune#--docker
@@ -66,8 +65,7 @@ COPY --from=builder /app/out/full/ .
 # Finally copy the turbo.json file so that we can run turbo commands
 COPY turbo.json turbo.json
 
-RUN TURBO_VERSION="$(npm list --package-lock-only --json turbo | jq -r '.dependencies.turbo.version')"
-RUN npm install -g "turbo@$TURBO_VERSION"
+RUN npm install -g "turbo@^1.9.3"
 
 RUN turbo run build --filter=@documenso/web...
 

docker/README.md

@@ -128,6 +128,7 @@ Here's a markdown table documenting all the provided environment variables:
 | `NEXT_PRIVATE_SMTP_APIKEY_USER`              | The API key user for the SMTP server for the `smtp-api` transport.                                  |
 | `NEXT_PRIVATE_SMTP_APIKEY`                   | The API key for the SMTP server for the `smtp-api` transport.                                       |
 | `NEXT_PRIVATE_SMTP_SECURE`                   | Whether to force the use of TLS for the SMTP server for SMTP transports.                            |
+| `NEXT_PRIVATE_SMTP_UNSAFE_IGNORE_TLS`        | If true, then no TLS will be used (even if STARTTLS is supported)                                   |
 | `NEXT_PRIVATE_SMTP_FROM_ADDRESS`             | The email address for the "from" address.                                                           |
 | `NEXT_PRIVATE_SMTP_FROM_NAME`                | The sender name for the "from" address.                                                             |
 | `NEXT_PRIVATE_RESEND_API_KEY`                | The API key for Resend.com for the `resend` transport.                                              |

docker/development/compose.yml

@@ -4,6 +4,13 @@ services:
   database:
     image: postgres:15
     container_name: database
+    volumes:
+      - documenso_database:/var/lib/postgresql/data
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U ${POSTGRES_USER}']
+      interval: 10s
+      timeout: 5s
+      retries: 5
     environment:
       - POSTGRES_USER=documenso
       - POSTGRES_PASSWORD=password
@@ -33,5 +40,43 @@ services:
     entrypoint: sh
     command: -c 'mkdir -p /data/documenso && minio server /data --console-address ":9001" --address ":9002"'
 
+  triggerdotdev:
+    image: ghcr.io/triggerdotdev/trigger.dev:latest
+    container_name: triggerdotdev
+    environment:
+      - LOGIN_ORIGIN=http://localhost:3030
+      - APP_ORIGIN=http://localhost:3030
+      - PORT=3030
+      - REMIX_APP_PORT=3030
+      - MAGIC_LINK_SECRET=secret
+      - SESSION_SECRET=secret
+      - ENCRYPTION_KEY=deadbeefcafefeed
+      - DATABASE_URL=postgresql://trigger:password@triggerdotdev_database:5432/trigger
+      - DIRECT_URL=postgresql://trigger:password@triggerdotdev_database:5432/trigger
+      - RUNTIME_PLATFORM=docker-compose
+    ports:
+      - 3030:3030
+    depends_on:
+      - triggerdotdev_database
+
+  triggerdotdev_database:
+    container_name: triggerdotdev_database
+    image: postgres:15
+    volumes:
+      - triggerdotdev_database:/var/lib/postgresql/data
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -U ${POSTGRES_USER}']
+      interval: 10s
+      timeout: 5s
+      retries: 5
+    environment:
+      - POSTGRES_USER=trigger
+      - POSTGRES_PASSWORD=password
+      - POSTGRES_DB=trigger
+    ports:
+      - 54321:5432
+
 volumes:
   minio:
+  documenso_database:
+  triggerdotdev_database:

package.json

@@ -1,5 +1,6 @@
 {
   "private": true,
+  "version": "1.6.0-rc.3",
   "scripts": {
     "build": "turbo run build",
     "build:web": "turbo run build --filter=@documenso/web",
@@ -24,15 +25,20 @@
     "prisma:studio": "npm run with:env -- npm run prisma:studio -w @documenso/prisma",
     "with:env": "dotenv -e .env -e .env.local --",
     "reset:hard": "npm run clean && npm i && npm run prisma:generate",
-    "precommit": "npm install && git add package.json package-lock.json"
+    "precommit": "npm install && git add package.json package-lock.json",
+    "trigger:dev": "npm run with:env -- npx trigger-cli dev --handler-path=\"/api/jobs\"",
+    "inngest:dev": "inngest dev -u http://localhost:3000/api/jobs",
+    "make:version": " npm version --workspace @documenso/web --workspace @documenso/marketing --include-workspace-root --no-git-tag-version -m \"v%s\""
   },
+  "packageManager": "npm@10.7.0",
   "engines": {
-    "npm": ">=8.6.0",
+    "npm": ">=10.7.0",
     "node": ">=18.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
+    "@trigger.dev/cli": "^2.3.18",
     "dotenv": "^16.3.1",
     "dotenv-cli": "^7.3.0",
     "eslint": "^8.40.0",
@@ -51,7 +57,9 @@
   ],
   "dependencies": {
     "@documenso/pdf-sign": "^0.1.0",
-    "next-runtime-env": "^3.2.0"
+    "inngest-cli": "^0.29.1",
+    "next-runtime-env": "^3.2.0",
+    "react": "18.2.0"
   },
   "overrides": {
     "next-auth": {
@@ -59,6 +67,10 @@
     },
     "next-contentlayer": {
       "next": "14.0.3"
-    }
+    },
+    "react": "18.2.0"
+  },
+  "trigger.dev": {
+    "endpointId": "documenso-app"
   }
 }

packages/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@documenso/api",
-  "version": "1.0.0",
+  "version": "0.0.0",
   "main": "./index.ts",
   "types": "./index.ts",
   "license": "MIT",
@@ -27,4 +27,4 @@
     "ts-pattern": "^5.0.5",
     "zod": "^3.22.4"
   }
-}
+}

packages/api/v1/contract.ts

@@ -15,11 +15,18 @@ import {
   ZGenerateDocumentFromTemplateMutationResponseSchema,
   ZGenerateDocumentFromTemplateMutationSchema,
   ZGetDocumentsQuerySchema,
+  ZGetTemplatesQuerySchema,
+  ZNoBodyMutationSchema,
+  ZResendDocumentForSigningMutationSchema,
   ZSendDocumentForSigningMutationSchema,
+  ZSuccessfulDeleteTemplateResponseSchema,
   ZSuccessfulDocumentResponseSchema,
   ZSuccessfulFieldResponseSchema,
   ZSuccessfulGetDocumentResponseSchema,
+  ZSuccessfulGetTemplateResponseSchema,
+  ZSuccessfulGetTemplatesResponseSchema,
   ZSuccessfulRecipientResponseSchema,
+  ZSuccessfulResendDocumentResponseSchema,
   ZSuccessfulResponseSchema,
   ZSuccessfulSigningResponseSchema,
   ZUnsuccessfulResponseSchema,
@@ -77,6 +84,41 @@ export const ApiContractV1 = c.router(
       summary: 'Upload a new document and get a presigned URL',
     },
 
+    deleteTemplate: {
+      method: 'DELETE',
+      path: '/api/v1/templates/:id',
+      body: ZNoBodyMutationSchema,
+      responses: {
+        200: ZSuccessfulDeleteTemplateResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Delete a template',
+    },
+
+    getTemplate: {
+      method: 'GET',
+      path: '/api/v1/templates/:id',
+      responses: {
+        200: ZSuccessfulGetTemplateResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Get a single template',
+    },
+
+    getTemplates: {
+      method: 'GET',
+      path: '/api/v1/templates',
+      query: ZGetTemplatesQuerySchema,
+      responses: {
+        200: ZSuccessfulGetTemplatesResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Get all templates',
+    },
+
     createDocumentFromTemplate: {
       method: 'POST',
       path: '/api/v1/templates/:templateId/create-document',
@@ -121,6 +163,20 @@ export const ApiContractV1 = c.router(
       summary: 'Send a document for signing',
     },
 
+    resendDocument: {
+      method: 'POST',
+      path: '/api/v1/documents/:id/resend',
+      body: ZResendDocumentForSigningMutationSchema,
+      responses: {
+        200: ZSuccessfulResendDocumentResponseSchema,
+        400: ZUnsuccessfulResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+        500: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Re-send a document for signing',
+    },
+
     deleteDocument: {
       method: 'DELETE',
       path: '/api/v1/documents/:id',