exp: millionjs on marketing page

When you're in the `/documents` page in the dashboard, if you hover over
a draft and a completed document, you'll see different URLs.

At the moment, the shortcut tries to go to the following URL for a
completed document `/documents/{doc-id}`.

However, that's the wrong URL, since the URL for a completed doc is
`/sign/{token}` when the user is the recipient, not the one that sent
the document for signing.

If it's the document owner & the document is completed, the URL is fine
as `/documents/{doc-id}`.

---------

Co-authored-by: Lucas Smith <me@lucasjamessmith.me>

.env.example

@@ -77,16 +77,14 @@ NEXT_PRIVATE_MAILCHANNELS_DKIM_PRIVATE_KEY=
 NEXT_PRIVATE_STRIPE_API_KEY=
 NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET=
 NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
-NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID=
-NEXT_PUBLIC_STRIPE_FREE_PLAN_ID=
 
 # [[FEATURES]]
 # OPTIONAL: Leave blank to disable PostHog and feature flags.
 NEXT_PUBLIC_POSTHOG_KEY=""
-# OPTIONAL: Defines the host to use for PostHog.
-NEXT_PUBLIC_POSTHOG_HOST="https://eu.posthog.com"
 # OPTIONAL: Leave blank to disable billing.
 NEXT_PUBLIC_FEATURE_BILLING_ENABLED=
+# OPTIONAL: Leave blank to allow users to signup through /signup page.
+NEXT_PUBLIC_DISABLE_SIGNUP=
 
 # This is only required for the marketing site
 # [[REDIS]]

.github/ISSUE_TEMPLATE/improvement.yml

@@ -1,35 +1,39 @@
-name: 'General Improvement'
-description: Suggest a minor enhancement or improvement for this project
+name: 'General Improvement Request'
+description: 'Suggest a minor enhancement or improvement for this project'
+title: '[Title for your improvement suggestion]'
 body:
-  - type: markdown
-    attributes:
-      value: Please provide a clear and concise title for your improvement suggestion
   - type: textarea
     attributes:
-      label: Improvement Description
-      description: Describe the improvement you are suggesting in detail. Explain what specific aspect of the project it addresses or enhances.
+      label: 'Describe the improvement you are suggesting in detail'
+      description: 'Explain why this improvement would be beneficial. Share any context, pain points, or reasons for suggesting this change.'
+    validations:
+      required: true
   - type: textarea
+    id: description
     attributes:
-      label: Rationale
-      description: Explain why this improvement would be beneficial. Share any context, pain points, or reasons for suggesting this change.
-  - type: textarea
+      label: 'Additional Information & Alternatives (optional)'
+      description: 'Are there any additional context or information that might be relevant to the improvement suggestion.'
+    validations:
+      required: false
+  - type: dropdown
+    id: assignee
     attributes:
-      label: Proposed Solution
-      description: If you have a suggestion for how this improvement could be implemented, describe it here. Include any technical details, design suggestions, or other relevant information.
-  - type: textarea
-    attributes:
-      label: Alternatives (optional)
-      description: Are there any alternative approaches to achieve the same improvement? Describe other ways to address the issue or enhance the project.
-  - type: textarea
-    attributes:
-      label: Additional Context
-      description: Add any additional context or information that might be relevant to the improvement suggestion.
+      label: 'Do you want to work on this improvement?'
+      multiple: false
+      options:
+        - 'No'
+        - 'Yes'
+      default: 0
+    validations:
+      required: true
   - type: checkboxes
     attributes:
-      label: Please check the boxes that apply to this improvement suggestion.
+      label: 'Please check the boxes that apply to this improvement suggestion.'
       options:
-        - label: I have searched the existing issues and improvement suggestions to avoid duplication.
-        - label: I have provided a clear description of the improvement being suggested.
-        - label: I have explained the rationale behind this improvement.
-        - label: I have included any relevant technical details or design suggestions.
-        - label: I understand that this is a suggestion and that there is no guarantee of implementation.
+        - label: 'I have searched the existing issues and improvement suggestions to avoid duplication.'
+        - label: 'I have provided a clear description of the improvement being suggested.'
+        - label: 'I have explained the rationale behind this improvement.'
+        - label: 'I have included any relevant technical details or design suggestions.'
+        - label: 'I understand that this is a suggestion and that there is no guarantee of implementation.'
+    validations:
+      required: true

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

@@ -12,6 +12,10 @@ jobs:
     if: ${{ github.event.issue.assignee }} && github.event.action == 'assigned' && github.event.sender.type == 'User'
     runs-on: ubuntu-latest
     steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:

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

@@ -12,6 +12,10 @@ jobs:
     if: ${{ github.event.pull_request.user.login }} && github.event.action == ('opened' || 'reopened' || 'ready_for_review' || 'review_requested')
     runs-on: ubuntu-latest
     steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:

.github/workflows/semantic-pull-requests.yml

@@ -16,6 +16,24 @@ jobs:
     name: Validate PR title
     runs-on: ubuntu-latest
     steps:
+      - name: Check PR creator's previous activity
+        id: check_activity
+        run: |
+          CREATOR=$(curl -s "https://api.github.com/repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}" | jq -r '.user.login')
+          ACTIVITY=$(curl -s "https://api.github.com/search/commits?q=author:${CREATOR}+repo:${{ github.repository }}" | jq -r '.total_count')
+          if [ "$ACTIVITY" -eq 0 ]; then
+            echo "::set-output name=is_new::true"
+          else
+            echo "::set-output name=is_new::false"
+          fi
+
+      - name: Count PRs created by user
+        id: count_prs
+        run: |
+          CREATOR=$(curl -s "https://api.github.com/repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}" | jq -r '.user.login')
+          PR_COUNT=$(curl -s "https://api.github.com/search/issues?q=type:pr+is:open+author:${CREATOR}+repo:${{ github.repository }}" | jq -r '.total_count')
+          echo "::set-output name=pr_count::$PR_COUNT"
+
       - uses: amannn/action-semantic-pull-request@v5
         id: lint_pr_title
         env:
@@ -36,7 +54,7 @@ jobs:
             ${{ steps.lint_pr_title.outputs.error_message }}
             ```
 
-      - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
+      - if: ${{ steps.lint_pr_title.outputs.error_message == null && steps.check_activity.outputs.is_new == 'false' && steps.count_prs.outputs.pr_count < 2}}
         uses: marocchino/sticky-pull-request-comment@v2
         with:
           header: pr-title-lint-error

.github/workflows/stale.yml

@@ -15,11 +15,10 @@ jobs:
       - uses: actions/stale@v4
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-          days-before-pr-stale: 30
-          days-before-issue-stale: 30
-          stale-issue-message: 'This issue has not seen activity for a while. It will be closed in 30 days unless further activity is detected'
+          days-before-pr-stale: 90
+          days-before-issue-stale: 90
+          days-before-issue-close: 180
           stale-pr-message: 'This PR has not seen activitiy for a while. It will be closed in 30 days unless further activity is detected.'
-          close-issue-message: 'This issue has been closed because of inactivity.'
           close-pr-message: 'This PR has been closed because of inactivity.'
           exempt-pr-labels: 'WIP,on-hold,needs review'
-          exempt-issue-labels: 'WIP,on-hold,needs review,roadmap,assigned'
+          exempt-issue-labels: 'WIP,on-hold,needs review,roadmap,assigned,needs triage'

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": ["typescript", "typescriptreact", "javascript", "javascriptreact"],
   "javascript.preferences.importModuleSpecifier": "non-relative",

README.md

@@ -1,3 +1,5 @@
+>We are nominated for a Product Hunt Gold Kitty 😺✨ and appreciate any support: https://documen.so/kitty
+
 <img src="https://github.com/documenso/documenso/assets/13398220/a643571f-0239-46a6-a73e-6bef38d1228b" alt="Documenso Logo">
 
 <p align="center" style="margin-top: 20px">
@@ -13,9 +15,9 @@
     ·
     <a href="https://github.com/documenso/documenso/issues">Issues</a>
     ·
-    <a href="https://github.com/documenso/documenso/milestones">Roadmap</a>
+    <a href="https://documen.so/live">Upcoming Releases</a>
     ·
-    <a href="https://documen.so/launches">Upcoming Launches</a>
+    <a href="https://documen.so/roadmap">Roadmap</a>
   </p>
 </p>
 
@@ -115,10 +117,12 @@ To run Documenso locally, you will need
 
 Want to get up and running quickly? Follow these steps:
 
-1. [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+1. [Fork this repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) to your GitHub account.
+
+After forking the repository, clone it to your local device by using the following command:
 
 ```sh
-git clone https://github.com/documenso/documenso
+git clone https://github.com/<your-username>/documenso
 ```
 
 2. Set up your `.env` file using the recommendations in the `.env.example` file. Alternatively, just run `cp .env.example .env` to get started with our handpicked defaults.
@@ -152,10 +156,12 @@ npm run d
 
 Follow these steps to setup Documenso on your local machine:
 
-1. [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+1. [Fork this repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/about-forks) to your GitHub account.
+
+After forking the repository, clone it to your local device by using the following command:
 
 ```sh
-git clone https://github.com/documenso/documenso
+git clone https://github.com/<your-username>/documenso
 ```
 
 2. Run `npm i` in the root directory
@@ -280,12 +286,16 @@ WantedBy=multi-user.target
 
 ### Railway
 
-[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/DjrRRX)
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/bG6D4p)
 
 ### Render
 
 [![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/documenso/documenso)
 
+### Koyeb
+
+[![Deploy to Koyeb](https://www.koyeb.com/static/images/deploy/button.svg)](https://app.koyeb.com/deploy?type=git&repository=github.com/documenso/documenso&branch=main&name=documenso-app&builder=dockerfile&dockerfile=/docker/Dockerfile)
+
 ## Troubleshooting
 
 ### I'm not receiving any emails when using the developer quickstart.

apps/marketing/content/blog/email-provider-incident-2024-01-10.mdx

@@ -0,0 +1,28 @@
+---
+title: Jan 10th Email Provider Security Incident
+description: On January 10th, 2022, we were notified by our email provider that they had experienced a security incident.
+authorName: 'Lucas Smith'
+authorImage: '/blog/blog-author-lucas.png'
+authorRole: 'Co-Founder'
+date: 2024-01-17
+tags:
+  - Security
+---
+
+On January 10th, 2024 we were notified by our email provider that a security incident had occurred. This security incident which had started on January 7th led to a bad actor obtaining access to their database which contains ours and other customer’s data.
+
+We understand that during this security incident the following has been accessed:
+
+- Email addresses.
+- Metadata on emails sent excluding the email body.
+
+While the incident is unfortunate we are pleased with the remediation and the processes that our email provider has put in place to help avoid this kind of situation in the future. Since the incident, our provider has rectified the issue and has engaged a security company to conduct an exhaustive investigation and to help improve their security posture moving forward.
+
+We remain steadfast in our commitment to our current email provider, and will not be taking any further action with relation to changing providers.
+
+We are now working with our legal counsel to ensure that we provide the appropriate notice to all our customers in each jurisdiction. If you have any further questions on this incident please feel free to contact our support team at [support@documenso.com](mailto:support@documenso.com).
+
+We appreciate your ongoing support in this matter.
+
+You can read more on the incident on our providers blog post below:
+[https://resend.com/blog/incident-report-for-january-10-2024](https://resend.com/blog/incident-report-for-january-10-2024)

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

@@ -1,6 +1,6 @@
 ---
 title: Announcing Pre-Seed and Open Metrics
-description: We are exicited to report the closing of our Pre-Seed round. You can find the juicy details on our new /open page. Yes, it was signed using Documenso.
+description: We are excited to report the closing of our Pre-Seed round. You can find the juicy details on our new /open page. Yes, it was signed using Documenso.
 authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'

apps/marketing/content/blog/shop.mdx

@@ -30,7 +30,7 @@ We kicked off [Malfunction Mania](https://documenso.com/blog/malfunction-mania)
 
 ## Documenso Merch Shop
 
-The shirt will be available in our [merch shop](https://documen.so/shop) via a unique discount code. While the shirt will be gone after Malfunction Mania, the shop is here to stay and provide a well-deserved reward for great community members and contributors. All items can be earned by contrinuting to Documenso.
+The shirt will be available in our [merch shop](https://documen.so/shop) via a unique discount code. While the shirt will be gone after Malfunction Mania, the shop is here to stay and provide a well-deserved reward for great community members and contributors. All items can be earned by contributing to Documenso.
 
 <figure>
   <MdxNextImage

apps/marketing/next.config.js

@@ -1,3 +1,4 @@
+const million = require('million/compiler');
 /* eslint-disable @typescript-eslint/no-var-requires */
 const fs = require('fs');
 const path = require('path');
@@ -5,11 +6,11 @@ const { withContentlayer } = require('next-contentlayer');
 
 const ENV_FILES = ['.env', '.env.local', `.env.${process.env.NODE_ENV || 'development'}`];
 
-ENV_FILES.forEach((file) => {
+for (file of ENV_FILES) {
   require('dotenv').config({
     path: path.join(__dirname, `../../${file}`),
   });
-});
+}
 
 // !: This is a temp hack to get caveat working without placing it back in the public directory.
 // !: By inlining this at build time we should be able to sign faster.
@@ -94,4 +95,6 @@ const config = {
   },
 };
 
-module.exports = withContentlayer(config);
+module.exports = million.next(
+  withContentlayer(config), { auto: { rsc: true } }
+);

apps/marketing/package.json

@@ -24,6 +24,7 @@
     "lucide-react": "^0.279.0",
     "luxon": "^3.4.0",
     "micro": "^10.0.1",
+    "million": "^2.6.4",
     "next": "14.0.3",
     "next-auth": "4.24.5",
     "next-contentlayer": "^0.3.4",
@@ -36,7 +37,7 @@
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.11.0",
     "recharts": "^2.7.2",
-    "sharp": "0.32.5",
+    "sharp": "0.33.1",
     "typescript": "5.2.2",
     "zod": "^3.22.4"
   },

apps/marketing/process-env.d.ts

@@ -6,8 +6,6 @@ declare namespace NodeJS {
     NEXT_PRIVATE_DATABASE_URL: string;
 
     NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID: string;
-    NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID: string;
-    NEXT_PUBLIC_STRIPE_FREE_PLAN_ID?: string;
 
     NEXT_PRIVATE_STRIPE_API_KEY: string;
     NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET: string;

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

@@ -20,7 +20,7 @@ export const generateMetadata = ({ params }: { params: { content: string } }) =>
 
 const mdxComponents: MDXComponents = {
   MdxNextImage: (props: { width: number; height: number; alt?: string; src: string }) => (
-    <Image {...props} alt={props.alt ?? ''} />
+    <Image width={props.width} height={props.height} src={props.src} alt={props.alt ?? ''} />
   ),
 };
 

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

@@ -25,7 +25,7 @@ export const generateMetadata = ({ params }: { params: { post: string } }) => {
 
 const mdxComponents: MDXComponents = {
   MdxNextImage: (props: { width: number; height: number; alt?: string; src: string }) => (
-    <Image {...props} alt={props.alt ?? ''} />
+    <Image width={props.width} height={props.height} src={props.src} alt={props.alt ?? ''} />
   ),
 };
 

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
@@ -24,7 +24,6 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
   label,
   chartHeight = 400,
   extraInfo,
-  ...props
 }: BarMetricProps<T>) => {
   const formattedData = Object.keys(data)
     .map((key) => ({
@@ -34,7 +33,7 @@ export const BarMetric = <T extends Record<string, Record<keyof T[string], unkno
     .reverse();
 
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
+    <div className={cn('flex flex-col', className)}>
       <div className="flex items-center px-4">
         <h3 className="text-lg font-semibold">{title}</h3>
         <span>{extraInfo}</span>

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

@@ -1,6 +1,7 @@
 'use client';
 
-import { HTMLAttributes, useEffect, useState } from 'react';
+import type { HTMLAttributes } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Cell, Legend, Pie, PieChart, Tooltip } from 'recharts';
 
@@ -41,14 +42,14 @@ const renderCustomizedLabel = ({
 
 export type CapTableProps = HTMLAttributes<HTMLDivElement>;
 
-export const CapTable = ({ className, ...props }: CapTableProps) => {
+export const CapTable = ({ className }: CapTableProps) => {
   const [isSSR, setIsSSR] = useState(true);
 
   useEffect(() => {
     setIsSSR(false);
   }, []);
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
+    <div className={cn('flex flex-col', className)}>
       <h3 className="px-4 text-lg font-semibold">Cap Table</h3>
 
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
@@ -76,7 +77,7 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
             />
             <Tooltip
               formatter={(percent: number, name, props) => {
-                return [`${percent}%`, name || props['name'] || props['payload']['name']];
+                return [`${percent}%`, name || props.name || props.payload.name];
               }}
             />
           </PieChart>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
@@ -11,14 +11,14 @@ export type FundingRaisedProps = HTMLAttributes<HTMLDivElement> & {
   data: Record<string, string | number>[];
 };
 
-export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps) => {
+export const FundingRaised = ({ className, data }: FundingRaisedProps) => {
   const formattedData = data.map((item) => ({
     amount: Number(item.amount),
     date: formatMonth(item.date as string),
   }));
 
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
+    <div className={cn('flex flex-col', className)}>
       <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
 
       <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">

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

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

apps/marketing/src/app/(marketing)/open/monthly-new-users-chart.tsx

@@ -3,7 +3,7 @@
 import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
-import { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
 import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyNewUsersChartProps = {
@@ -22,7 +22,7 @@ export const MonthlyNewUsersChart = ({ className, data }: MonthlyNewUsersChartPr
   return (
     <div className={cn('flex flex-col', className)}>
       <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">Monthly New Users</h3>
+        <h3 className="text-lg font-semibold">New Users</h3>
       </div>
 
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">

apps/marketing/src/app/(marketing)/open/monthly-total-users-chart.tsx

@@ -3,7 +3,7 @@
 import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
-import { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
 import { cn } from '@documenso/ui/lib/utils';
 
 export type MonthlyTotalUsersChartProps = {
@@ -22,7 +22,7 @@ export const MonthlyTotalUsersChart = ({ className, data }: MonthlyTotalUsersCha
   return (
     <div className={cn('flex flex-col', className)}>
       <div className="flex items-center px-4">
-        <h3 className="text-lg font-semibold">Monthly Total Users</h3>
+        <h3 className="text-lg font-semibold">Total Users</h3>
       </div>
 
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border p-6 pl-2 pt-12 shadow-sm hover:shadow">

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

@@ -141,7 +141,12 @@ export default async function OpenPage() {
         <p className="text-muted-foreground mt-4 max-w-[60ch] text-center text-lg leading-normal">
           All our metrics, finances, and learnings are public. We believe in transparency and want
           to share our journey with you. You can read more about why here:{' '}
-          <a className="font-bold" href="https://documenso.com/blog/pre-seed" target="_blank">
+          <a
+            className="font-bold"
+            href="https://documenso.com/blog/pre-seed"
+            target="_blank"
+            rel="noreferrer"
+          >
             Announcing Open Metrics
           </a>
         </p>

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { cn } from '@documenso/ui/lib/utils';
 import {
@@ -14,9 +14,9 @@ import { SALARY_BANDS } from '~/app/(marketing)/open/data';
 
 export type SalaryBandsProps = HTMLAttributes<HTMLDivElement>;
 
-export const SalaryBands = ({ className, ...props }: SalaryBandsProps) => {
+export const SalaryBands = ({ className }: SalaryBandsProps) => {
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
+    <div className={cn('flex flex-col', className)}>
       <h3 className="px-4 text-lg font-semibold">Global Salary Bands</h3>
 
       <div className="border-border mt-2.5 flex-1 rounded-2xl border shadow-sm hover:shadow">
@@ -30,7 +30,7 @@ export const SalaryBands = ({ className, ...props }: SalaryBandsProps) => {
           </TableHeader>
           <TableBody>
             {SALARY_BANDS.map((band, index) => (
-              <TableRow key={index}>
+              <TableRow key={band.title + index.toString()}>
                 <TableCell className="font-medium">{band.title}</TableCell>
                 <TableCell>{band.seniority}</TableCell>
                 <TableCell className="text-right">

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { cn } from '@documenso/ui/lib/utils';
 import {
@@ -14,9 +14,9 @@ import { TEAM_MEMBERS } from './data';
 
 export type TeamMembersProps = HTMLAttributes<HTMLDivElement>;
 
-export const TeamMembers = ({ className, ...props }: TeamMembersProps) => {
+export const TeamMembers = ({ className }: TeamMembersProps) => {
   return (
-    <div className={cn('flex flex-col', className)} {...props}>
+    <div className={cn('flex flex-col', className)}>
       <h2 className="px-4 text-2xl font-semibold">Team</h2>
 
       <div className="border-border mt-2.5 flex-1 rounded-2xl border shadow-sm hover:shadow">

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

@@ -29,10 +29,7 @@ export function OpenPageTooltip() {
           </svg>
         </TooltipTrigger>
         <TooltipContent>
-          <p>
-            August and earlier: Active subscribers. September and beyond: Numbers of active
-            subscriptions.
-          </p>
+          <p>Active Subscriptions.</p>
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>

apps/marketing/src/components/(marketing)/claim-plan-dialog.tsx

@@ -1,160 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-
-import { useSearchParams } from 'next/navigation';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Info } from 'lucide-react';
-import { usePlausible } from 'next-plausible';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
-import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-import { claimPlan } from '~/api/claim-plan/fetcher';
-
-import { FormErrorMessage } from '../form/form-error-message';
-
-export const ZClaimPlanDialogFormSchema = z.object({
-  name: z.string().trim().min(3, { message: 'Please enter a valid name.' }),
-  email: z.string().email(),
-});
-
-export type TClaimPlanDialogFormSchema = z.infer<typeof ZClaimPlanDialogFormSchema>;
-
-export type ClaimPlanDialogProps = {
-  className?: string;
-  planId: string;
-  children: React.ReactNode;
-};
-
-export const ClaimPlanDialog = ({ className, planId, children }: ClaimPlanDialogProps) => {
-  const params = useSearchParams();
-  const analytics = useAnalytics();
-  const event = usePlausible();
-
-  const { toast } = useToast();
-
-  const [open, setOpen] = useState(() => params?.get('cancelled') === 'true');
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-    reset,
-  } = useForm<TClaimPlanDialogFormSchema>({
-    defaultValues: {
-      name: params?.get('name') ?? '',
-      email: params?.get('email') ?? '',
-    },
-    resolver: zodResolver(ZClaimPlanDialogFormSchema),
-  });
-
-  const onFormSubmit = async ({ name, email }: TClaimPlanDialogFormSchema) => {
-    try {
-      const delay = new Promise<void>((resolve) => {
-        setTimeout(resolve, 1000);
-      });
-
-      const [redirectUrl] = await Promise.all([
-        claimPlan({ name, email, planId, signatureText: name, signatureDataUrl: null }),
-        delay,
-      ]);
-
-      event('claim-plan-pricing');
-      analytics.capture('Marketing: Claim plan', { planId, email });
-
-      window.location.href = redirectUrl;
-    } catch (error) {
-      event('claim-plan-failed');
-      analytics.capture('Marketing: Claim plan failure', { planId, email });
-
-      toast({
-        title: 'Something went wrong',
-        description: error instanceof Error ? error.message : 'Please try again later.',
-        variant: 'destructive',
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (!isSubmitting && !open) {
-      reset();
-    }
-  }, [open]);
-
-  return (
-    <Dialog open={open} onOpenChange={(value) => !isSubmitting && setOpen(value)}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Claim your plan</DialogTitle>
-
-          <DialogDescription className="mt-4">
-            We're almost there! Please enter your email address and name to claim your plan.
-          </DialogDescription>
-        </DialogHeader>
-
-        <form onSubmit={handleSubmit(onFormSubmit)}>
-          <fieldset disabled={isSubmitting} className={cn('flex flex-col gap-y-4', className)}>
-            {params?.get('cancelled') === 'true' && (
-              <div className="rounded-lg border border-yellow-400 bg-yellow-50 p-4">
-                <div className="flex">
-                  <div className="flex-shrink-0">
-                    <Info className="h-5 w-5 text-yellow-400" />
-                  </div>
-                  <div className="ml-3">
-                    <p className="text-sm leading-5 text-yellow-700">
-                      You have cancelled the payment process. If you didn't mean to do this, please
-                      try again.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            <div>
-              <Label className="text-muted-foreground">Name</Label>
-
-              <Input type="text" className="mt-2" {...register('name')} autoFocus />
-
-              <FormErrorMessage className="mt-1" error={errors.name} />
-            </div>
-
-            <div>
-              <Label className="text-muted-foreground">Email</Label>
-
-              <Input type="email" className="mt-2" {...register('email')} />
-
-              <FormErrorMessage className="mt-1" error={errors.email} />
-            </div>
-
-            <Button type="submit" size="lg" loading={isSubmitting}>
-              Claim the early adopters Plan (
-              {/* eslint-disable-next-line turbo/no-undeclared-env-vars */}
-              {planId === process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID
-                ? 'Monthly'
-                : 'Yearly'}
-              )
-            </Button>
-          </fieldset>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/marketing/src/components/(marketing)/confetti-screen.tsx

@@ -34,13 +34,7 @@ export const ConfettiScreen = ({
   }
 
   return createPortal(
-    <Confetti
-      {...props}
-      className="w-full"
-      numberOfPieces={numberOfPieces}
-      width={width}
-      height={height}
-    />,
+    <Confetti className="w-full" numberOfPieces={numberOfPieces} width={width} height={height} />,
     document.body,
   );
 };

apps/marketing/src/components/(marketing)/faster-smarter-beautiful-bento.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 
@@ -11,12 +11,9 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 
 export type FasterSmarterBeautifulBentoProps = HTMLAttributes<HTMLDivElement>;
 
-export const FasterSmarterBeautifulBento = ({
-  className,
-  ...props
-}: FasterSmarterBeautifulBentoProps) => {
+export const FasterSmarterBeautifulBento = ({ className }: FasterSmarterBeautifulBentoProps) => {
   return (
-    <div className={cn('relative', className)} {...props}>
+    <div className={cn('relative', className)}>
       <div className="absolute inset-0 -z-10 flex items-center justify-center">
         <Image
           src={backgroundPattern}

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

@@ -35,11 +35,11 @@ const FOOTER_LINKS = [
   { href: '/privacy', text: 'Privacy' },
 ];
 
-export const Footer = ({ className, ...props }: FooterProps) => {
+export const Footer = ({ className }: FooterProps) => {
   return (
-    <div className={cn('border-t py-12', className)} {...props}>
+    <div className={cn('border-t py-12', className)}>
       <div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-start justify-between gap-8 px-8">
-        <div>
+        <div className="flex-shrink-0">
           <Link href="/">
             <Image
               src={LogoImage}
@@ -53,7 +53,7 @@ export const Footer = ({ className, ...props }: FooterProps) => {
           <div className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-4">
             {SOCIAL_LINKS.map((link, index) => (
               <Link
-                key={index}
+                key={link.href + index.toString()}
                 href={link.href}
                 target="_blank"
                 className="text-muted-foreground hover:text-muted-foreground/80"
@@ -64,13 +64,13 @@ export const Footer = ({ className, ...props }: FooterProps) => {
           </div>
         </div>
 
-        <div className="grid max-w-xs flex-1 grid-cols-2 gap-x-4 gap-y-2">
+        <div className="grid w-full max-w-sm grid-cols-2 gap-x-4 gap-y-2 md:w-auto md:gap-x-8">
           {FOOTER_LINKS.map((link, index) => (
             <Link
-              key={index}
+              key={link.href + index.toString()}
               href={link.href}
               target={link.target}
-              className="text-muted-foreground hover:text-muted-foreground/80 flex-shrink-0 text-sm"
+              className="text-muted-foreground hover:text-muted-foreground/80 flex-shrink-0 break-words text-sm"
             >
               {link.text}
             </Link>

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

@@ -15,7 +15,7 @@ import { MobileNavigation } from './mobile-navigation';
 
 export type HeaderProps = HTMLAttributes<HTMLElement>;
 
-export const Header = ({ className, ...props }: HeaderProps) => {
+export const Header = ({ className }: HeaderProps) => {
   const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
 
   const { getFlag } = useFeatureFlags();
@@ -23,7 +23,7 @@ export const Header = ({ className, ...props }: HeaderProps) => {
   const isSinglePlayerModeMarketingEnabled = getFlag('marketing_header_single_player_mode');
 
   return (
-    <header className={cn('flex items-center justify-between', className)} {...props}>
+    <header className={cn('flex items-center justify-between', className)}>
       <div className="flex items-center space-x-4">
         <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
           <Image

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

@@ -3,7 +3,8 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { Variants, motion } from 'framer-motion';
+import type { Variants } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { usePlausible } from 'next-plausible';
 import { LuGithub } from 'react-icons/lu';
 import { match } from 'ts-pattern';
@@ -49,7 +50,7 @@ const HeroTitleVariants: Variants = {
   },
 };
 
-export const Hero = ({ className, ...props }: HeroProps) => {
+export const Hero = ({ className }: HeroProps) => {
   const event = usePlausible();
 
   const { getFlag } = useFeatureFlags();
@@ -74,7 +75,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
   };
 
   return (
-    <motion.div className={cn('relative', className)} {...props}>
+    <motion.div className={cn('relative', className)}>
       <div className="absolute -inset-24 -z-10">
         <motion.div
           className="flex h-full w-full origin-top-right items-center justify-center"

apps/marketing/src/components/(marketing)/open-build-template-bento.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 
@@ -11,9 +11,9 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 
 export type OpenBuildTemplateBentoProps = HTMLAttributes<HTMLDivElement>;
 
-export const OpenBuildTemplateBento = ({ className, ...props }: OpenBuildTemplateBentoProps) => {
+export const OpenBuildTemplateBento = ({ className }: OpenBuildTemplateBentoProps) => {
   return (
-    <div className={cn('relative', className)} {...props}>
+    <div className={cn('relative', className)}>
       <div className="absolute inset-0 -z-10 flex items-center justify-center">
         <Image
           src={backgroundPattern}

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

@@ -1,9 +1,9 @@
 'use client';
 
-import { HTMLAttributes, useState } from 'react';
+import type { HTMLAttributes } from 'react';
+import { useState } from 'react';
 
 import Link from 'next/link';
-import { useSearchParams } from 'next/navigation';
 
 import { AnimatePresence, motion } from 'framer-motion';
 import { usePlausible } from 'next-plausible';
@@ -15,18 +15,13 @@ export type PricingTableProps = HTMLAttributes<HTMLDivElement>;
 
 const SELECTED_PLAN_BAR_LAYOUT_ID = 'selected-plan-bar';
 
-export const PricingTable = ({ className, ...props }: PricingTableProps) => {
-  const params = useSearchParams();
+export const PricingTable = ({ className }: PricingTableProps) => {
   const event = usePlausible();
 
-  const [period, setPeriod] = useState<'MONTHLY' | 'YEARLY'>(() =>
-    params?.get('planId') === process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID
-      ? 'YEARLY'
-      : 'MONTHLY',
-  );
+  const [period, setPeriod] = useState<'MONTHLY' | 'YEARLY'>('MONTHLY');
 
   return (
-    <div className={cn('', className)} {...props}>
+    <div className={cn('', className)}>
       <div className="flex items-center justify-center gap-x-6">
         <AnimatePresence>
           <motion.button

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 
@@ -12,12 +12,9 @@ import { Card, CardContent } from '@documenso/ui/primitives/card';
 
 export type ShareConnectPaidWidgetBentoProps = HTMLAttributes<HTMLDivElement>;
 
-export const ShareConnectPaidWidgetBento = ({
-  className,
-  ...props
-}: ShareConnectPaidWidgetBentoProps) => {
+export const ShareConnectPaidWidgetBento = ({ className }: ShareConnectPaidWidgetBentoProps) => {
   return (
-    <div className={cn('relative', className)} {...props}>
+    <div className={cn('relative', className)}>
       <div className="absolute inset-0 -z-10 flex items-center justify-center">
         <Image
           src={backgroundPattern}

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

@@ -1,6 +1,7 @@
 'use client';
 
-import { HTMLAttributes, KeyboardEvent, useMemo, useState } from 'react';
+import type { HTMLAttributes, KeyboardEvent } from 'react';
+import { useMemo, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -26,6 +27,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { claimPlan } from '~/api/claim-plan/fetcher';
 
+import { STEP } from '../constants';
 import { FormErrorMessage } from '../form/form-error-message';
 
 const ZWidgetFormSchema = z
@@ -48,13 +50,16 @@ const ZWidgetFormSchema = z
 
 export type TWidgetFormSchema = z.infer<typeof ZWidgetFormSchema>;
 
+type StepKeys = keyof typeof STEP;
+type StepValues = (typeof STEP)[StepKeys];
+
 export type WidgetProps = HTMLAttributes<HTMLDivElement>;
 
-export const Widget = ({ className, children, ...props }: WidgetProps) => {
+export const Widget = ({ className, children }: WidgetProps) => {
   const { toast } = useToast();
   const event = usePlausible();
 
-  const [step, setStep] = useState<'EMAIL' | 'NAME' | 'SIGN'>('EMAIL');
+  const [step, setStep] = useState<StepValues>(STEP.EMAIL);
   const [showSigningDialog, setShowSigningDialog] = useState(false);
   const [draftSignatureDataUrl, setDraftSignatureDataUrl] = useState<string | null>(null);
 
@@ -81,28 +86,28 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
   const signatureText = watch('signatureText');
 
   const stepsRemaining = useMemo(() => {
-    if (step === 'NAME') {
+    if (step === STEP.NAME) {
       return 2;
     }
 
-    if (step === 'SIGN') {
-      return 1;
+    if (step === STEP.EMAIL) {
+      return 3;
     }
 
-    return 3;
+    return 1;
   }, [step]);
 
   const onNextStepClick = () => {
-    if (step === 'EMAIL') {
-      setStep('NAME');
+    if (step === STEP.EMAIL) {
+      setStep(STEP.NAME);
 
       setTimeout(() => {
         document.querySelector<HTMLElement>('#name')?.focus();
       }, 0);
     }
 
-    if (step === 'NAME') {
-      setStep('SIGN');
+    if (step === STEP.NAME) {
+      setStep(STEP.SIGN);
 
       setTimeout(() => {
         document.querySelector<HTMLElement>('#signatureText')?.focus();
@@ -143,19 +148,19 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
 
       const claimPlanInput = signatureDataUrl
         ? {
-            name,
-            email,
-            planId,
-            signatureDataUrl: signatureDataUrl,
-            signatureText: null,
-          }
+          name,
+          email,
+          planId,
+          signatureDataUrl: signatureDataUrl,
+          signatureText: null,
+        }
         : {
-            name,
-            email,
-            planId,
-            signatureDataUrl: null,
-            signatureText: signatureText ?? '',
-          };
+          name,
+          email,
+          planId,
+          signatureDataUrl: null,
+          signatureText: signatureText ?? '',
+        };
 
       const [result] = await Promise.all([claimPlan(claimPlanInput), delay]);
 
@@ -178,7 +183,6 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
       <Card
         className={cn('mx-auto w-full max-w-4xl rounded-3xl before:rounded-3xl', className)}
         gradient
-        {...props}
       >
         <div className="grid grid-cols-12 gap-y-8 overflow-hidden p-2 lg:gap-x-8">
           <div className="text-muted-foreground col-span-12 flex flex-col gap-y-4 p-4 text-xs leading-relaxed lg:col-span-7">
@@ -226,7 +230,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                           type="button"
                           className="bg-primary h-full w-14 rounded"
                           disabled={!field.value || !!errors.email?.message}
-                          onClick={() => step === 'EMAIL' && onNextStepClick()}
+                          onClick={() => step === STEP.EMAIL && onNextStepClick()}
                         >
                           Next
                         </Button>
@@ -238,7 +242,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                 <FormErrorMessage error={errors.email} className="mt-1" />
               </motion.div>
 
-              {(step === 'NAME' || step === 'SIGN') && (
+              {(step === STEP.NAME || step === STEP.SIGN) && (
                 <motion.div
                   key="name"
                   className="mt-4"

apps/marketing/src/components/constants.ts

@@ -0,0 +1,5 @@
+export const STEP = {
+  EMAIL: 'EMAIL',
+  NAME: 'NAME',
+  SIGN: 'SIGN',
+} as const;

apps/marketing/src/components/ui/background.tsx

@@ -1,4 +1,4 @@
-import { SVGAttributes } from 'react';
+import type { SVGAttributes } from 'react';
 
 export type BackgroundProps = Omit<SVGAttributes<SVGElement>, 'viewBox'>;
 

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

@@ -1,4 +1,4 @@
-import { NextApiRequest, NextApiResponse } from 'next';
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 import { randomBytes } from 'crypto';
 import { buffer } from 'micro';
@@ -6,7 +6,8 @@ import { buffer } from 'micro';
 import { insertImageInPDF } from '@documenso/lib/server-only/pdf/insert-image-in-pdf';
 import { insertTextInPDF } from '@documenso/lib/server-only/pdf/insert-text-in-pdf';
 import { redis } from '@documenso/lib/server-only/redis';
-import { Stripe, stripe } from '@documenso/lib/server-only/stripe';
+import type { Stripe } from '@documenso/lib/server-only/stripe';
+import { stripe } from '@documenso/lib/server-only/stripe';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { updateFile } from '@documenso/lib/universal/upload/update-file';
 import { prisma } from '@documenso/prisma';

apps/marketing/src/providers/next-theme.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import { ThemeProviderProps } from 'next-themes/dist/types';
+import type { ThemeProviderProps } from 'next-themes/dist/types';
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;

apps/web/package.json

@@ -42,7 +42,7 @@
     "react-hotkeys-hook": "^4.4.1",
     "react-icons": "^4.11.0",
     "react-rnd": "^10.4.1",
-    "sharp": "0.32.5",
+    "sharp": "0.33.1",
     "ts-pattern": "^5.0.5",
     "typescript": "5.2.2",
     "uqr": "^0.1.2",

apps/web/process-env.d.ts

@@ -6,8 +6,6 @@ declare namespace NodeJS {
     NEXT_PRIVATE_DATABASE_URL: string;
 
     NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID: string;
-    NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID: string;
-    NEXT_PUBLIC_STRIPE_FREE_PLAN_ID?: string;
 
     NEXT_PRIVATE_STRIPE_API_KEY: string;
     NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET: string;

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

@@ -9,7 +9,6 @@ import type { z } from 'zod';
 import { trpc } from '@documenso/trpc/react';
 import { ZUpdateProfileMutationByAdminSchema } from '@documenso/trpc/server/admin-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
-import { Combobox } from '@documenso/ui/primitives/combobox';
 import {
   Form,
   FormControl,
@@ -19,6 +18,7 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
+import { MultiSelectCombobox } from '@documenso/ui/primitives/multiselect-combobox';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const ZUserFormSchema = ZUpdateProfileMutationByAdminSchema.omit({ id: true });
@@ -117,7 +117,7 @@ export default function UserPage({ params }: { params: { id: number } }) {
                   <fieldset className="flex flex-col gap-2">
                     <FormLabel className="text-muted-foreground">Roles</FormLabel>
                     <FormControl>
-                      <Combobox
+                      <MultiSelectCombobox
                         listValues={roles}
                         onChange={(values: string[]) => onChange(values)}
                       />

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

@@ -8,7 +8,7 @@ import { Edit, Loader } from 'lucide-react';
 
 import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import { Document, Role, Subscription } from '@documenso/prisma/client';
+import type { Document, Role, Subscription } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
@@ -19,7 +19,7 @@ type UserData = {
   name: string | null;
   email: string;
   roles: Role[];
-  Subscription?: SubscriptionLite | null;
+  Subscription?: SubscriptionLite[] | null;
   Document: DocumentLite[];
 };
 
@@ -35,9 +35,16 @@ type UsersDataTableProps = {
   totalPages: number;
   perPage: number;
   page: number;
+  individualPriceIds: string[];
 };
 
-export const UsersDataTable = ({ users, totalPages, perPage, page }: UsersDataTableProps) => {
+export const UsersDataTable = ({
+  users,
+  totalPages,
+  perPage,
+  page,
+  individualPriceIds,
+}: UsersDataTableProps) => {
   const [isPending, startTransition] = useTransition();
   const updateSearchParams = useUpdateSearchParams();
   const [searchString, setSearchString] = useState('');
@@ -100,7 +107,13 @@ export const UsersDataTable = ({ users, totalPages, perPage, page }: UsersDataTa
           {
             header: 'Subscription',
             accessorKey: 'subscription',
-            cell: ({ row }) => row.original.Subscription?.status ?? 'NONE',
+            cell: ({ row }) => {
+              const foundIndividualSubscription = (row.original.Subscription ?? []).find((sub) =>
+                individualPriceIds.includes(sub.priceId),
+              );
+
+              return foundIndividualSubscription?.status ?? 'NONE';
+            },
           },
           {
             header: 'Documents',

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

@@ -1,3 +1,5 @@
+import { getPricesByType } from '@documenso/ee/server-only/stripe/get-prices-by-type';
+
 import { UsersDataTable } from './data-table-users';
 import { search } from './fetch-users.actions';
 
@@ -14,12 +16,23 @@ export default async function AdminManageUsers({ searchParams = {} }: AdminManag
   const perPage = Number(searchParams.perPage) || 10;
   const searchString = searchParams.search || '';
 
-  const { users, totalPages } = await search(searchString, page, perPage);
+  const [{ users, totalPages }, individualPrices] = await Promise.all([
+    search(searchString, page, perPage),
+    getPricesByType('individual'),
+  ]);
+
+  const individualPriceIds = individualPrices.map((price) => price.id);
 
   return (
     <div>
       <h2 className="text-4xl font-semibold">Manage users</h2>
-      <UsersDataTable users={users} totalPages={totalPages} page={page} perPage={perPage} />
+      <UsersDataTable
+        users={users}
+        individualPriceIds={individualPriceIds}
+        totalPages={totalPages}
+        page={page}
+        perPage={perPage}
+      />
     </div>
   );
 }

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

@@ -4,8 +4,8 @@ import { useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import type { DocumentData, DocumentMeta, Field, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
-import type { DocumentData, Field, Recipient, User } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -29,6 +29,7 @@ export type EditDocumentFormProps = {
   user: User;
   document: DocumentWithData;
   recipients: Recipient[];
+  documentMeta: DocumentMeta | null;
   fields: Field[];
   documentData: DocumentData;
 };
@@ -41,6 +42,7 @@ export const EditDocumentForm = ({
   document,
   recipients,
   fields,
+  documentMeta,
   user: _user,
   documentData,
 }: EditDocumentFormProps) => {
@@ -56,6 +58,8 @@ export const EditDocumentForm = ({
   const { mutateAsync: addFields } = trpc.field.addFields.useMutation();
   const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation();
   const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation();
+  const { mutateAsync: setPasswordForDocument } =
+    trpc.document.setPasswordForDocument.useMutation();
 
   const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
     title: {
@@ -145,14 +149,16 @@ export const EditDocumentForm = ({
   };
 
   const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
-    const { subject, message } = data.email;
+    const { subject, message, timezone, dateFormat } = data.meta;
 
     try {
       await sendDocument({
         documentId: document.id,
-        email: {
+        meta: {
           subject,
           message,
+          timezone,
+          dateFormat,
         },
       });
 
@@ -174,6 +180,13 @@ export const EditDocumentForm = ({
     }
   };
 
+  const onPasswordSubmit = async (password: string) => {
+    await setPasswordForDocument({
+      documentId: document.id,
+      password,
+    });
+  };
+
   const currentDocumentFlow = documentFlow[step];
 
   return (
@@ -183,7 +196,13 @@ export const EditDocumentForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <LazyPDFViewer key={documentData.id} documentData={documentData} />
+          <LazyPDFViewer
+            key={documentData.id}
+            documentData={documentData}
+            document={document}
+            password={documentMeta?.password}
+            onPasswordSubmit={onPasswordSubmit}
+          />
         </CardContent>
       </Card>
 

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

@@ -3,10 +3,12 @@ import { redirect } from 'next/navigation';
 
 import { ChevronLeft, Users2 } from 'lucide-react';
 
+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 { 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 { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
@@ -40,7 +42,24 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
     redirect('/documents');
   }
 
-  const { documentData } = document;
+  const { documentData, documentMeta } = document;
+
+  if (documentMeta?.password) {
+    const key = DOCUMENSO_ENCRYPTION_KEY;
+
+    if (!key) {
+      throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
+    }
+
+    const securePassword = Buffer.from(
+      symmetricDecrypt({
+        key,
+        data: documentMeta.password,
+      }),
+    ).toString('utf-8');
+
+    documentMeta.password = securePassword;
+  }
 
   const [recipients, fields] = await Promise.all([
     getRecipientsForDocument({
@@ -83,6 +102,7 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
           className="mt-8"
           document={document}
           user={user}
+          documentMeta={documentMeta}
           recipients={recipients}
           fields={fields}
           documentData={documentData}
@@ -91,7 +111,12 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
 
       {document.status === InternalDocumentStatus.COMPLETED && (
         <div className="mx-auto mt-12 max-w-2xl">
-          <LazyPDFViewer key={documentData.id} documentData={documentData} />
+          <LazyPDFViewer
+            document={document}
+            key={documentData.id}
+            documentMeta={documentMeta}
+            documentData={documentData}
+          />
         </div>
       )}
     </div>

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

@@ -6,7 +6,7 @@ import { Download, Edit, Pencil } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import type { Document, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
@@ -55,28 +55,14 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
       const documentData = document?.documentData;
 
       if (!documentData) {
-        return;
+        throw Error('No document available');
       }
 
-      const documentBytes = await getFile(documentData);
-
-      const blob = new Blob([documentBytes], {
-        type: 'application/pdf',
-      });
-
-      const link = window.document.createElement('a');
-      const baseTitle = row.title.includes('.pdf') ? row.title.split('.pdf')[0] : row.title;
-
-      link.href = window.URL.createObjectURL(blob);
-      link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
-
-      link.click();
-
-      window.URL.revokeObjectURL(link.href);
-    } catch (error) {
+      await downloadPDF({ documentData, fileName: row.title });
+    } catch (err) {
       toast({
         title: 'Something went wrong',
-        description: 'An error occurred while trying to download file.',
+        description: 'An error occurred while downloading your document.',
         variant: 'destructive',
       });
     }

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

@@ -17,7 +17,7 @@ import {
 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import type { Document, Recipient, User } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
@@ -30,6 +30,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { ResendDocumentActionItem } from './_action-items/resend-document';
 import { DeleteDocumentDialog } from './delete-document-dialog';
@@ -44,6 +45,7 @@ export type DataTableActionDropdownProps = {
 
 export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
   const { data: session } = useSession();
+  const { toast } = useToast();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
@@ -63,39 +65,33 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
   const isDocumentDeletable = isOwner;
 
   const onDownloadClick = async () => {
-    let document: DocumentWithData | null = null;
+    try {
+      let document: DocumentWithData | null = null;
 
-    if (!recipient) {
-      document = await trpcClient.document.getDocumentById.query({
-        id: row.id,
-      });
-    } else {
-      document = await trpcClient.document.getDocumentByToken.query({
-        token: recipient.token,
+      if (!recipient) {
+        document = await trpcClient.document.getDocumentById.query({
+          id: row.id,
+        });
+      } else {
+        document = await trpcClient.document.getDocumentByToken.query({
+          token: recipient.token,
+        });
+      }
+
+      const documentData = document?.documentData;
+
+      if (!documentData) {
+        return;
+      }
+
+      await downloadPDF({ documentData, fileName: row.title });
+    } catch (err) {
+      toast({
+        title: 'Something went wrong',
+        description: 'An error occurred while downloading your document.',
+        variant: 'destructive',
       });
     }
-
-    const documentData = document?.documentData;
-
-    if (!documentData) {
-      return;
-    }
-
-    const documentBytes = await getFile(documentData);
-
-    const blob = new Blob([documentBytes], {
-      type: 'application/pdf',
-    });
-
-    const link = window.document.createElement('a');
-    const baseTitle = row.title.includes('.pdf') ? row.title.split('.pdf')[0] : row.title;
-
-    link.href = window.URL.createObjectURL(blob);
-    link.download = baseTitle ? `${baseTitle}_signed.pdf` : 'document.pdf';
-
-    link.click();
-
-    window.URL.revokeObjectURL(link.href);
   };
 
   const nonSignedRecipients = row.Recipient.filter((item) => item.signingStatus !== 'SIGNED');
@@ -128,7 +124,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
           Download
         </DropdownMenuItem>
 
-        <DropdownMenuItem disabled>
+        <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
           <Copy className="mr-2 h-4 w-4" />
           Duplicate
         </DropdownMenuItem>
@@ -165,6 +161,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
         <DeleteDocumentDialog
           id={row.id}
           status={row.status}
+          documentTitle={row.title}
           open={isDeleteDialogOpen}
           onOpenChange={setDeleteDialogOpen}
         />

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
@@ -21,6 +21,7 @@ type DeleteDraftDocumentDialogProps = {
   open: boolean;
   onOpenChange: (_open: boolean) => void;
   status: DocumentStatus;
+  documentTitle: string;
 };
 
 export const DeleteDocumentDialog = ({
@@ -28,6 +29,7 @@ export const DeleteDocumentDialog = ({
   open,
   onOpenChange,
   status,
+  documentTitle,
 }: DeleteDraftDocumentDialogProps) => {
   const router = useRouter();
 
@@ -42,7 +44,7 @@ export const DeleteDocumentDialog = ({
 
       toast({
         title: 'Document deleted',
-        description: 'Your document has been successfully deleted.',
+        description: `"${documentTitle}" has been successfully deleted`,
         duration: 5000,
       });
 
@@ -50,6 +52,13 @@ export const DeleteDocumentDialog = ({
     },
   });
 
+  useEffect(() => {
+    if (open) {
+      setInputValue('');
+      setIsDeleteEnabled(status === DocumentStatus.DRAFT);
+    }
+  }, [open, status]);
+
   const onDelete = async () => {
     try {
       await deleteDocument({ id, status });
@@ -72,7 +81,7 @@ export const DeleteDocumentDialog = ({
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Do you want to delete this document?</DialogTitle>
+          <DialogTitle>Are you sure you want to delete "{documentTitle}"?</DialogTitle>
 
           <DialogDescription>
             Please note that this action is irreversible. Once confirmed, your document will be
@@ -81,7 +90,7 @@ export const DeleteDocumentDialog = ({
         </DialogHeader>
 
         {status !== DocumentStatus.DRAFT && (
-          <div className="mt-8">
+          <div className="mt-4">
             <Input
               type="text"
               value={inputValue}

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

@@ -41,6 +41,7 @@ export const DuplicateDocumentDialog = ({
     trpcReact.document.duplicateDocument.useMutation({
       onSuccess: (newId) => {
         router.push(`/documents/${newId}`);
+
         toast({
           title: 'Document Duplicated',
           description: 'Your document has been successfully duplicated.',

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

@@ -88,7 +88,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
                     <DocumentStatus status={value} />
 
                     {value !== ExtendedDocumentStatus.ALL && (
-                      <span className="ml-1 hidden opacity-50 md:inline-block">
+                      <span className="ml-1 inline-block opacity-50">
                         {Math.min(stats[value], 99)}
                         {stats[value] > 99 && '+'}
                       </span>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
@@ -25,6 +25,7 @@ export type UploadDocumentProps = {
 export const UploadDocument = ({ className }: UploadDocumentProps) => {
   const router = useRouter();
   const analytics = useAnalytics();
+
   const { data: session } = useSession();
 
   const { toast } = useToast();
@@ -35,6 +36,16 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
 
   const { mutateAsync: createDocument } = trpc.document.createDocument.useMutation();
 
+  const disabledMessage = useMemo(() => {
+    if (remaining.documents === 0) {
+      return 'You have reached your document limit.';
+    }
+
+    if (!session?.user.emailVerified) {
+      return 'Verify your email to upload documents.';
+    }
+  }, [remaining.documents, session?.user.emailVerified]);
+
   const onFileDrop = async (file: File) => {
     try {
       setIsLoading(true);
@@ -90,6 +101,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
       <DocumentDropzone
         className="min-h-[40vh]"
         disabled={remaining.documents === 0 || !session?.user.emailVerified}
+        disabledMessage={disabledMessage}
         onDrop={onFileDrop}
       />
 

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

@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import { AnimatePresence, motion } from 'framer-motion';
 
-import { PriceIntervals } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
+import type { PriceIntervals } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
 import { toHumanPrice } from '@documenso/lib/universal/stripe/to-human-price';
 import { Button } from '@documenso/ui/primitives/button';

apps/web/src/app/(dashboard)/settings/billing/create-billing-portal.action.ts

@@ -1,46 +1,13 @@
 'use server';
 
-import {
-  getStripeCustomerByEmail,
-  getStripeCustomerById,
-} from '@documenso/ee/server-only/stripe/get-customer';
+import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import type { Stripe } from '@documenso/lib/server-only/stripe';
-import { stripe } from '@documenso/lib/server-only/stripe';
-import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
 
 export const createBillingPortal = async () => {
   const { user } = await getRequiredServerComponentSession();
 
-  const existingSubscription = await getSubscriptionByUserId({ userId: user.id });
-
-  let stripeCustomer: Stripe.Customer | null = null;
-
-  // Find the Stripe customer for the current user subscription.
-  if (existingSubscription) {
-    stripeCustomer = await getStripeCustomerById(existingSubscription.customerId);
-
-    if (!stripeCustomer) {
-      throw new Error('Missing Stripe customer for subscription');
-    }
-  }
-
-  // Fallback to check if a Stripe customer already exists for the current user email.
-  if (!stripeCustomer) {
-    stripeCustomer = await getStripeCustomerByEmail(user.email);
-  }
-
-  // Create a Stripe customer if it does not exist for the current user.
-  if (!stripeCustomer) {
-    stripeCustomer = await stripe.customers.create({
-      name: user.name ?? undefined,
-      email: user.email,
-      metadata: {
-        userId: user.id,
-      },
-    });
-  }
+  const { stripeCustomer } = await getStripeCustomerByUser(user);
 
   return getPortalSession({
     customerId: stripeCustomer.id,

apps/web/src/app/(dashboard)/settings/billing/create-checkout.action.ts

@@ -1,55 +1,36 @@
 'use server';
 
-import { createCustomer } from '@documenso/ee/server-only/stripe/create-customer';
 import { getCheckoutSession } from '@documenso/ee/server-only/stripe/get-checkout-session';
-import {
-  getStripeCustomerByEmail,
-  getStripeCustomerById,
-} from '@documenso/ee/server-only/stripe/get-customer';
+import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import type { Stripe } from '@documenso/lib/server-only/stripe';
-import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
+import { getSubscriptionsByUserId } from '@documenso/lib/server-only/subscription/get-subscriptions-by-user-id';
 
 export type CreateCheckoutOptions = {
   priceId: string;
 };
 
 export const createCheckout = async ({ priceId }: CreateCheckoutOptions) => {
-  const { user } = await getRequiredServerComponentSession();
+  const session = await getRequiredServerComponentSession();
 
-  const existingSubscription = await getSubscriptionByUserId({ userId: user.id });
+  const { user, stripeCustomer } = await getStripeCustomerByUser(session.user);
 
-  let stripeCustomer: Stripe.Customer | null = null;
+  const existingSubscriptions = await getSubscriptionsByUserId({ userId: user.id });
 
-  // Find the Stripe customer for the current user subscription.
-  if (existingSubscription?.periodEnd && existingSubscription.periodEnd >= new Date()) {
-    stripeCustomer = await getStripeCustomerById(existingSubscription.customerId);
-
-    if (!stripeCustomer) {
-      throw new Error('Missing Stripe customer for subscription');
-    }
+  const foundSubscription = existingSubscriptions.find(
+    (subscription) =>
+      subscription.priceId === priceId &&
+      subscription.periodEnd &&
+      subscription.periodEnd >= new Date(),
+  );
 
+  if (foundSubscription) {
     return getPortalSession({
       customerId: stripeCustomer.id,
       returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
     });
   }
 
-  // Fallback to check if a Stripe customer already exists for the current user email.
-  if (!stripeCustomer) {
-    stripeCustomer = await getStripeCustomerByEmail(user.email);
-  }
-
-  // Create a Stripe customer if it does not exist for the current user.
-  if (!stripeCustomer) {
-    await createCustomer({
-      user,
-    });
-
-    stripeCustomer = await getStripeCustomerByEmail(user.email);
-  }
-
   return getCheckoutSession({
     customerId: stripeCustomer.id,
     priceId,

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

@@ -2,12 +2,15 @@ import { redirect } from 'next/navigation';
 
 import { match } from 'ts-pattern';
 
+import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPricesByInterval } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
+import { getPricesByType } from '@documenso/ee/server-only/stripe/get-prices-by-type';
 import { getProductByPriceId } from '@documenso/ee/server-only/stripe/get-product-by-price-id';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
-import type { Stripe } from '@documenso/lib/server-only/stripe';
-import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
+import { type Stripe } from '@documenso/lib/server-only/stripe';
+import { getSubscriptionsByUserId } from '@documenso/lib/server-only/subscription/get-subscriptions-by-user-id';
+import { SubscriptionStatus } from '@documenso/prisma/client';
 
 import { LocaleDate } from '~/components/formatter/locale-date';
 
@@ -15,7 +18,7 @@ import { BillingPlans } from './billing-plans';
 import { BillingPortalButton } from './billing-portal-button';
 
 export default async function BillingSettingsPage() {
-  const { user } = await getRequiredServerComponentSession();
+  let { user } = await getRequiredServerComponentSession();
 
   const isBillingEnabled = await getServerComponentFlag('app_billing');
 
@@ -24,20 +27,36 @@ export default async function BillingSettingsPage() {
     redirect('/settings/profile');
   }
 
-  const [subscription, prices] = await Promise.all([
-    getSubscriptionByUserId({ userId: user.id }),
-    getPricesByInterval(),
+  if (!user.customerId) {
+    user = await getStripeCustomerByUser(user).then((result) => result.user);
+  }
+
+  const [subscriptions, prices, individualPrices] = await Promise.all([
+    getSubscriptionsByUserId({ userId: user.id }),
+    getPricesByInterval({ type: 'individual' }),
+    getPricesByType('individual'),
   ]);
 
+  const individualPriceIds = individualPrices.map(({ id }) => id);
+
   let subscriptionProduct: Stripe.Product | null = null;
 
+  const individualUserSubscriptions = subscriptions.filter(({ priceId }) =>
+    individualPriceIds.includes(priceId),
+  );
+
+  const subscription =
+    individualUserSubscriptions.find(({ status }) => status === SubscriptionStatus.ACTIVE) ??
+    individualUserSubscriptions[0];
+
   if (subscription?.priceId) {
     subscriptionProduct = await getProductByPriceId({ priceId: subscription.priceId }).catch(
       () => null,
     );
   }
 
-  const isMissingOrInactiveOrFreePlan = !subscription || subscription.status === 'INACTIVE';
+  const isMissingOrInactiveOrFreePlan =
+    !subscription || subscription.status === SubscriptionStatus.INACTIVE;
 
   return (
     <div>

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

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 
 import type { DocumentData, Field, Recipient, Template, User } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import {
@@ -20,9 +21,6 @@ import { AddTemplatePlaceholderRecipientsFormPartial } from '@documenso/ui/primi
 import type { TAddTemplatePlacholderRecipientsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients.types';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { addTemplateFields } from '~/components/forms/edit-template/add-template-fields.action';
-import { addTemplatePlaceholders } from '~/components/forms/edit-template/add-template-placeholders.action';
-
 export type EditTemplateFormProps = {
   className?: string;
   user: User;
@@ -63,11 +61,14 @@ export const EditTemplateForm = ({
 
   const currentDocumentFlow = documentFlow[step];
 
+  const { mutateAsync: addTemplateFields } = trpc.field.addTemplateFields.useMutation();
+  const { mutateAsync: addTemplateSigners } = trpc.recipient.addTemplateSigners.useMutation();
+
   const onAddTemplatePlaceholderFormSubmit = async (
     data: TAddTemplatePlacholderRecipientsFormSchema,
   ) => {
     try {
-      await addTemplatePlaceholders({
+      await addTemplateSigners({
         templateId: template.id,
         signers: data.signers,
       });

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

@@ -43,11 +43,11 @@ export default async function TemplatePage({ params }: TemplatePageProps) {
   const { templateDocumentData } = template;
 
   const [templateRecipients, templateFields] = await Promise.all([
-    await getRecipientsForTemplate({
+    getRecipientsForTemplate({
       templateId,
       userId: user.id,
     }),
-    await getFieldsForTemplate({
+    getFieldsForTemplate({
       templateId,
       userId: user.id,
     }),

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

@@ -58,11 +58,13 @@ export const TemplatesDataTable = ({
       const { id } = await createDocumentFromTemplate({
         templateId,
       });
+
       toast({
         title: 'Document created',
         description: 'Your document has been created from the template successfully.',
         duration: 5000,
       });
+
       router.push(`/documents/${id}`);
     } catch (err) {
       toast({

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

@@ -23,13 +23,13 @@ export const DeleteTemplateDialog = ({ id, open, onOpenChange }: DeleteTemplateD
 
   const { toast } = useToast();
 
-  const { mutateAsync: deleteDocument, isLoading } = trpcReact.template.deleteTemplate.useMutation({
+  const { mutateAsync: deleteTemplate, isLoading } = trpcReact.template.deleteTemplate.useMutation({
     onSuccess: () => {
       router.refresh();
 
       toast({
         title: 'Template deleted',
-        description: 'Your document has been successfully deleted.',
+        description: 'Your template has been successfully deleted.',
         duration: 5000,
       });
 
@@ -37,9 +37,9 @@ export const DeleteTemplateDialog = ({ id, open, onOpenChange }: DeleteTemplateD
     },
   });
 
-  const onDraftDelete = async () => {
+  const onDeleteTemplate = async () => {
     try {
-      await deleteDocument({ id });
+      await deleteTemplate({ id });
     } catch {
       toast({
         title: 'Something went wrong',
@@ -73,7 +73,7 @@ export const DeleteTemplateDialog = ({ id, open, onOpenChange }: DeleteTemplateD
               Cancel
             </Button>
 
-            <Button type="button" loading={isLoading} onClick={onDraftDelete} className="flex-1">
+            <Button type="button" loading={isLoading} onClick={onDeleteTemplate} className="flex-1">
               Delete
             </Button>
           </div>

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

@@ -47,8 +47,6 @@ export const DuplicateTemplateDialog = ({
       await duplicateTemplate({
         templateId: id,
       });
-
-      router.refresh();
     } catch (err) {
       toast({
         title: 'Error',

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

@@ -49,10 +49,10 @@ export const NewTemplateDialog = () => {
   const { toast } = useToast();
 
   const form = useForm<TCreateTemplateFormSchema>({
-    resolver: zodResolver(ZCreateTemplateFormSchema),
     defaultValues: {
       name: '',
     },
+    resolver: zodResolver(ZCreateTemplateFormSchema),
   });
 
   const { mutateAsync: createTemplate, isLoading: isCreatingTemplate } =

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

@@ -15,6 +15,8 @@ import { DocumentDownloadButton } from '@documenso/ui/components/document/docume
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
 
+import { truncateTitle } from '~/helpers/truncate-title';
+
 export type CompletedSigningPageProps = {
   params: {
     token?: string;
@@ -36,6 +38,8 @@ export default async function CompletedSigningPage({
     return notFound();
   }
 
+  const truncatedTitle = truncateTitle(document.title);
+
   const { documentData } = document;
 
   const [fields, recipient] = await Promise.all([
@@ -89,7 +93,7 @@ export default async function CompletedSigningPage({
 
         <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
           You have signed
-          <span className="mt-1.5 block">"{document.title}"</span>
+          <span className="mt-1.5 block">"{truncatedTitle}"</span>
         </h2>
 
         {match({ status: document.status, deletedAt: document.deletedAt })

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

@@ -6,8 +6,13 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import { Recipient } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import {
+  DEFAULT_DOCUMENT_DATE_FORMAT,
+  convertToLocalSystemFormat,
+} from '@documenso/lib/constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import type { Recipient } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -16,9 +21,16 @@ import { SigningFieldContainer } from './signing-field-container';
 export type DateFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
+  dateFormat?: string | null;
+  timezone?: string | null;
 };
 
-export const DateField = ({ field, recipient }: DateFieldProps) => {
+export const DateField = ({
+  field,
+  recipient,
+  dateFormat = DEFAULT_DOCUMENT_DATE_FORMAT,
+  timezone = DEFAULT_DOCUMENT_TIME_ZONE,
+}: DateFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -35,12 +47,18 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
 
+  const localDateString = convertToLocalSystemFormat(field.customText, dateFormat, timezone);
+
+  const isDifferentTime = field.inserted && localDateString !== field.customText;
+
+  const tooltipText = `"${field.customText}" will appear on the document as it has a timezone of "${timezone}".`;
+
   const onSign = async () => {
     try {
       await signFieldWithToken({
         token: recipient.token,
         fieldId: field.id,
-        value: '',
+        value: dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
       });
 
       startTransition(() => router.refresh());
@@ -75,7 +93,13 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
   };
 
   return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
+    <SigningFieldContainer
+      field={field}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Date"
+      tooltipText={isDifferentTime ? tooltipText : undefined}
+    >
       {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" />
@@ -87,7 +111,7 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground text-sm duration-200">{field.customText}</p>
+        <p className="text-muted-foreground text-sm duration-200">{localDateString}</p>
       )}
     </SigningFieldContainer>
   );

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

@@ -6,8 +6,8 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import { Recipient } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import type { Recipient } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -79,7 +79,7 @@ export const EmailField = ({ field, recipient }: EmailFieldProps) => {
   };
 
   return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Email">
       {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" />

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

@@ -34,6 +34,7 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
   const { data: session } = useSession();
 
   const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
+
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
 
   const { mutateAsync: completeDocumentWithToken } =
@@ -48,6 +49,11 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
     return sortFieldsByPosition(fields.filter((field) => !field.inserted));
   }, [fields]);
 
+  const fieldsValidated = () => {
+    setValidateUninsertedFields(true);
+    validateFieldsInserted(fields);
+  };
+
   const onFormSubmit = async () => {
     setValidateUninsertedFields(true);
 
@@ -92,7 +98,11 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
         disabled={isSubmitting}
         className={cn('-mx-2 flex flex-1 flex-col overflow-hidden px-2')}
       >
-        <div className={cn('flex flex-1 flex-col')}>
+        <div
+          className={cn(
+            'custom-scrollbar -mx-2 flex flex-1 flex-col overflow-y-auto overflow-x-hidden px-2',
+          )}
+        >
           <h3 className="text-foreground text-2xl font-semibold">Sign Document</h3>
 
           <p className="text-muted-foreground mt-2 text-sm">
@@ -149,6 +159,7 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
                 onSignatureComplete={handleSubmit(onFormSubmit)}
                 document={document}
                 fields={fields}
+                fieldsValidated={fieldsValidated}
               />
             </div>
           </div>

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

@@ -6,8 +6,8 @@ import { useRouter } from 'next/navigation';
 
 import { Loader } from 'lucide-react';
 
-import { Recipient } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import type { Recipient } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
@@ -98,7 +98,7 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
   };
 
   return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Name">
       {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" />

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

@@ -2,18 +2,25 @@ import { notFound, redirect } from 'next/navigation';
 
 import { match } from 'ts-pattern';
 
+import { DOCUMENSO_ENCRYPTION_KEY } from '@documenso/lib/constants/crypto';
+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 { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { getDocumentMetaByDocumentId } from '@documenso/lib/server-only/document/get-document-meta-by-document-id';
 import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
+import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
 import { DocumentStatus, FieldType, SigningStatus } from '@documenso/prisma/client';
 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';
 
+import { truncateTitle } from '~/helpers/truncate-title';
+
 import { DateField } from './date-field';
 import { EmailField } from './email-field';
 import { SigningForm } from './form';
@@ -42,10 +49,14 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     viewedDocument({ token }).catch(() => null),
   ]);
 
+  const documentMeta = await getDocumentMetaByDocumentId({ id: document!.id }).catch(() => null);
+
   if (!document || !document.documentData || !recipient) {
     return notFound();
   }
 
+  const truncatedTitle = truncateTitle(document.title);
+
   const { documentData } = document;
 
   const { user } = await getServerComponentSession();
@@ -57,6 +68,23 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     redirect(`/sign/${token}/complete`);
   }
 
+  if (documentMeta?.password) {
+    const key = DOCUMENSO_ENCRYPTION_KEY;
+
+    if (!key) {
+      throw new Error('Missing DOCUMENSO_ENCRYPTION_KEY');
+    }
+
+    const securePassword = Buffer.from(
+      symmetricDecrypt({
+        key,
+        data: documentMeta.password,
+      }),
+    ).toString('utf-8');
+
+    documentMeta.password = securePassword;
+  }
+
   const [recipientSignature] = await getRecipientSignatures({ recipientId: recipient.id });
 
   if (document.deletedAt) {
@@ -77,7 +105,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     >
       <div className="mx-auto w-full max-w-screen-xl">
         <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
-          {document.title}
+          {truncatedTitle}
         </h1>
 
         <div className="mt-2.5 flex items-center gap-x-6">
@@ -92,7 +120,12 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
             gradient
           >
             <CardContent className="p-2">
-              <LazyPDFViewer key={documentData.id} documentData={documentData} />
+              <LazyPDFViewer
+                key={documentData.id}
+                documentData={documentData}
+                document={document}
+                password={documentMeta?.password}
+              />
             </CardContent>
           </Card>
 
@@ -111,7 +144,13 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
                 <NameField key={field.id} field={field} recipient={recipient} />
               ))
               .with(FieldType.DATE, () => (
-                <DateField key={field.id} field={field} recipient={recipient} />
+                <DateField
+                  key={field.id}
+                  field={field}
+                  recipient={recipient}
+                  dateFormat={documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT}
+                  timezone={documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE}
+                />
               ))
               .with(FieldType.EMAIL, () => (
                 <EmailField key={field.id} field={field} recipient={recipient} />

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Document, Field } from '@documenso/prisma/client';
+import type { Document, Field } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -9,10 +9,13 @@ import {
   DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
 
+import { truncateTitle } from '~/helpers/truncate-title';
+
 export type SignDialogProps = {
   isSubmitting: boolean;
   document: Document;
   fields: Field[];
+  fieldsValidated: () => void | Promise<void>;
   onSignatureComplete: () => void | Promise<void>;
 };
 
@@ -20,30 +23,31 @@ export const SignDialog = ({
   isSubmitting,
   document,
   fields,
+  fieldsValidated,
   onSignatureComplete,
 }: SignDialogProps) => {
   const [showDialog, setShowDialog] = useState(false);
-
+  const truncatedTitle = truncateTitle(document.title);
   const isComplete = fields.every((field) => field.inserted);
 
   return (
-    <Dialog open={showDialog} onOpenChange={setShowDialog}>
+    <Dialog open={showDialog && isComplete} onOpenChange={setShowDialog}>
       <DialogTrigger asChild>
         <Button
           className="w-full"
           type="button"
           size="lg"
-          disabled={!isComplete}
+          onClick={fieldsValidated}
           loading={isSubmitting}
         >
-          Complete
+          {isComplete ? 'Complete' : 'Next field'}
         </Button>
       </DialogTrigger>
       <DialogContent>
         <div className="text-center">
           <div className="text-xl font-semibold text-neutral-800">Sign Document</div>
           <div className="text-muted-foreground mx-auto w-4/5 py-2 text-center">
-            You are about to finish signing "{document.title}". Are you sure?
+            You are about to finish signing "{truncatedTitle}". Are you sure?
           </div>
         </div>
 

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

@@ -127,7 +127,7 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
   };
 
   return (
-    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
+    <SigningFieldContainer field={field} 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" />

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

@@ -2,8 +2,9 @@
 
 import React from 'react';
 
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 export type SignatureFieldProps = {
   field: FieldWithSignature;
@@ -11,6 +12,8 @@ export type SignatureFieldProps = {
   children: React.ReactNode;
   onSign?: () => Promise<void> | void;
   onRemove?: () => Promise<void> | void;
+  type?: 'Date' | 'Email' | 'Name' | 'Signature';
+  tooltipText?: string | null;
 };
 
 export const SigningFieldContainer = ({
@@ -19,6 +22,8 @@ export const SigningFieldContainer = ({
   onSign,
   onRemove,
   children,
+  type,
+  tooltipText,
 }: SignatureFieldProps) => {
   const onSignFieldClick = async () => {
     if (field.inserted) {
@@ -46,7 +51,22 @@ export const SigningFieldContainer = ({
         />
       )}
 
-      {field.inserted && !loading && (
+      {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>
+
+          {tooltipText && <TooltipContent className="max-w-xs">{tooltipText}</TooltipContent>}
+        </Tooltip>
+      )}
+
+      {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}

apps/web/src/app/(unauthenticated)/signin/page.tsx

@@ -13,12 +13,14 @@ export default function SignInPage() {
 
       <SignInForm className="mt-4" />
 
-      <p className="text-muted-foreground mt-6 text-center text-sm">
-        Don't have an account?{' '}
-        <Link href="/signup" className="text-primary duration-200 hover:opacity-70">
-          Sign up
-        </Link>
-      </p>
+      {process.env.NEXT_PUBLIC_DISABLE_SIGNUP !== 'true' && (
+        <p className="text-muted-foreground mt-6 text-center text-sm">
+          Don't have an account?{' '}
+          <Link href="/signup" className="text-primary duration-200 hover:opacity-70">
+            Sign up
+          </Link>
+        </p>
+      )}
 
       <p className="mt-2.5 text-center">
         <Link

apps/web/src/app/(unauthenticated)/signup/page.tsx

@@ -1,8 +1,13 @@
 import Link from 'next/link';
+import { redirect } from 'next/navigation';
 
 import { SignUpForm } from '~/components/forms/signup';
 
 export default function SignUpPage() {
+  if (process.env.NEXT_PUBLIC_DISABLE_SIGNUP === 'true') {
+    redirect('/signin');
+  }
+
   return (
     <div>
       <h1 className="text-4xl font-semibold">Create a new account</h1>

apps/web/src/components/(dashboard)/common/command-menu.tsx

@@ -5,13 +5,16 @@ import { useCallback, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 
 import { Loader, Monitor, Moon, Sun } from 'lucide-react';
+import { useSession } from 'next-auth/react';
 import { useTheme } from 'next-themes';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import {
   DOCUMENTS_PAGE_SHORTCUT,
   SETTINGS_PAGE_SHORTCUT,
+  TEMPLATES_PAGE_SHORTCUT,
 } from '@documenso/lib/constants/keyboard-shortcuts';
+import type { Document, Recipient } from '@documenso/prisma/client';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import {
   CommandDialog,
@@ -22,6 +25,7 @@ import {
   CommandList,
   CommandShortcut,
 } from '@documenso/ui/primitives/command';
+import { THEMES_TYPE } from '@documenso/ui/primitives/constants';
 
 const DOCUMENTS_PAGES = [
   {
@@ -38,6 +42,14 @@ const DOCUMENTS_PAGES = [
   { label: 'Inbox documents', path: '/documents?status=INBOX' },
 ];
 
+const TEMPLATES_PAGES = [
+  {
+    label: 'All templates',
+    path: '/templates',
+    shortcut: TEMPLATES_PAGE_SHORTCUT.replace('+', ''),
+  },
+];
+
 const SETTINGS_PAGES = [
   {
     label: 'Settings',
@@ -55,6 +67,8 @@ export type CommandMenuProps = {
 
 export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
   const { setTheme } = useTheme();
+  const { data: session } = useSession();
+
   const router = useRouter();
 
   const [isOpen, setIsOpen] = useState(() => open ?? false);
@@ -71,6 +85,17 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
       },
     );
 
+  const isOwner = useCallback(
+    (document: Document) => document.userId === session?.user.id,
+    [session?.user.id],
+  );
+
+  const getSigningLink = useCallback(
+    (recipients: Recipient[]) =>
+      `/sign/${recipients.find((r) => r.email === session?.user.email)?.token}`,
+    [session?.user.email],
+  );
+
   const searchResults = useMemo(() => {
     if (!searchDocumentsData) {
       return [];
@@ -78,10 +103,10 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
 
     return searchDocumentsData.map((document) => ({
       label: document.title,
-      path: `/documents/${document.id}`,
+      path: isOwner(document) ? `/documents/${document.id}` : getSigningLink(document.Recipient),
       value: [document.id, document.title, ...document.Recipient.map((r) => r.email)].join(' '),
     }));
-  }, [searchDocumentsData]);
+  }, [searchDocumentsData, isOwner, getSigningLink]);
 
   const currentPage = pages[pages.length - 1];
 
@@ -123,10 +148,12 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
 
   const goToSettings = useCallback(() => push(SETTINGS_PAGES[0].path), [push]);
   const goToDocuments = useCallback(() => push(DOCUMENTS_PAGES[0].path), [push]);
+  const goToTemplates = useCallback(() => push(TEMPLATES_PAGES[0].path), [push]);
 
-  useHotkeys(['ctrl+k', 'meta+k'], toggleOpen);
+  useHotkeys(['ctrl+k', 'meta+k'], toggleOpen, { preventDefault: true });
   useHotkeys(SETTINGS_PAGE_SHORTCUT, goToSettings);
   useHotkeys(DOCUMENTS_PAGE_SHORTCUT, goToDocuments);
+  useHotkeys(TEMPLATES_PAGE_SHORTCUT, goToTemplates);
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
     // Escape goes to previous page
@@ -173,6 +200,9 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
             <CommandGroup heading="Documents">
               <Commands push={push} pages={DOCUMENTS_PAGES} />
             </CommandGroup>
+            <CommandGroup heading="Templates">
+              <Commands push={push} pages={TEMPLATES_PAGES} />
+            </CommandGroup>
             <CommandGroup heading="Settings">
               <Commands push={push} pages={SETTINGS_PAGES} />
             </CommandGroup>
@@ -214,9 +244,9 @@ const Commands = ({
 const ThemeCommands = ({ setTheme }: { setTheme: (_theme: string) => void }) => {
   const THEMES = useMemo(
     () => [
-      { label: 'Light Mode', theme: 'light', icon: Sun },
-      { label: 'Dark Mode', theme: 'dark', icon: Moon },
-      { label: 'System Theme', theme: 'system', icon: Monitor },
+      { label: 'Light Mode', theme: THEMES_TYPE.LIGHT, icon: Sun },
+      { label: 'Dark Mode', theme: THEMES_TYPE.DARK, icon: Moon },
+      { label: 'System Theme', theme: THEMES_TYPE.SYSTEM, icon: Monitor },
     ],
     [],
   );

apps/web/src/components/(dashboard)/layout/header.tsx

@@ -33,7 +33,7 @@ export const Header = ({ className, user, ...props }: HeaderProps) => {
   return (
     <header
       className={cn(
-        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-[1000] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
+        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-[50] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
         scrollY > 5 && 'border-b-border',
         className,
       )}

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

@@ -1,9 +1,9 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { CheckCircle2, Clock, File } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react/dist/lucide-react';
 
-import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import type { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 import { SignatureIcon } from '@documenso/ui/icons/signature';
 import { cn } from '@documenso/ui/lib/utils';
 

apps/web/src/components/formatter/locale-date.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import { HTMLAttributes, useEffect, useState } from 'react';
+import type { HTMLAttributes } from 'react';
+import { useEffect, useState } from 'react';
 
-import { DateTime, DateTimeFormatOptions } from 'luxon';
+import type { DateTimeFormatOptions } from 'luxon';
+import { DateTime } from 'luxon';
 
 import { useLocale } from '@documenso/lib/client-only/providers/locale';
 

apps/web/src/components/forms/2fa/disable-authenticator-app-dialog.tsx

@@ -23,6 +23,7 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZDisableTwoFactorAuthenticationForm = z.object({
@@ -107,38 +108,42 @@ export const DisableAuthenticatorAppDialog = ({
             )}
             className="flex flex-col gap-y-4"
           >
-            <FormField
-              name="password"
-              control={disableTwoFactorAuthenticationForm.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-muted-foreground">Password</FormLabel>
-                  <FormControl>
-                    <Input
-                      {...field}
-                      type="password"
-                      autoComplete="current-password"
-                      value={field.value ?? ''}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+            <fieldset
+              className="flex flex-col gap-y-4"
+              disabled={isDisableTwoFactorAuthenticationSubmitting}
+            >
+              <FormField
+                name="password"
+                control={disableTwoFactorAuthenticationForm.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-muted-foreground">Password</FormLabel>
+                    <FormControl>
+                      <PasswordInput
+                        {...field}
+                        autoComplete="current-password"
+                        value={field.value ?? ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-            <FormField
-              name="backupCode"
-              control={disableTwoFactorAuthenticationForm.control}
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="text-muted-foreground">Backup Code</FormLabel>
-                  <FormControl>
-                    <Input {...field} type="text" value={field.value ?? ''} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+              <FormField
+                name="backupCode"
+                control={disableTwoFactorAuthenticationForm.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-muted-foreground">Backup Code</FormLabel>
+                    <FormControl>
+                      <Input {...field} type="text" value={field.value ?? ''} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </fieldset>
 
             <div className="flex w-full items-center justify-between">
               <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>

apps/web/src/components/forms/2fa/enable-authenticator-app-dialog.tsx

@@ -27,6 +27,7 @@ import {
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { RecoveryCodeList } from './recovery-code-list';
@@ -178,9 +179,8 @@ export const EnableAuthenticatorAppDialog = ({
                       <FormItem>
                         <FormLabel className="text-muted-foreground">Password</FormLabel>
                         <FormControl>
-                          <Input
+                          <PasswordInput
                             {...field}
-                            type="password"
                             autoComplete="current-password"
                             value={field.value ?? ''}
                           />

apps/web/src/components/forms/2fa/view-recovery-codes-dialog.tsx

@@ -22,7 +22,7 @@ import {
   FormLabel,
   FormMessage,
 } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { RecoveryCodeList } from './recovery-code-list';
@@ -108,9 +108,8 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
                       <FormItem>
                         <FormLabel className="text-muted-foreground">Password</FormLabel>
                         <FormControl>
-                          <Input
+                          <PasswordInput
                             {...field}
-                            type="password"
                             autoComplete="current-password"
                             value={field.value ?? ''}
                           />

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

@@ -1,32 +0,0 @@
-'use server';
-
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { setFieldsForTemplate } from '@documenso/lib/server-only/field/set-fields-for-template';
-import type { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
-
-export type AddTemplateFieldsActionInput = TAddTemplateFieldsFormSchema & {
-  templateId: number;
-};
-
-export const addTemplateFields = async ({ templateId, fields }: AddTemplateFieldsActionInput) => {
-  'use server';
-
-  const { user } = await getRequiredServerComponentSession();
-
-  await setFieldsForTemplate({
-    userId: user.id,
-    templateId,
-    fields: fields.map((field) => ({
-      id: field.nativeId,
-      signerEmail: field.signerEmail,
-      signerId: field.signerId,
-      signerToken: field.signerToken,
-      type: field.type,
-      pageNumber: field.pageNumber,
-      pageX: field.pageX,
-      pageY: field.pageY,
-      pageWidth: field.pageWidth,
-      pageHeight: field.pageHeight,
-    })),
-  });
-};

apps/web/src/components/forms/edit-template/add-template-placeholders.action.ts

@@ -1,28 +0,0 @@
-'use server';
-
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { setRecipientsForTemplate } from '@documenso/lib/server-only/recipient/set-recipients-for-template';
-import type { TAddTemplatePlacholderRecipientsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-placeholder-recipients.types';
-
-export type AddTemplatePlaceholdersActionInput = TAddTemplatePlacholderRecipientsFormSchema & {
-  templateId: number;
-};
-
-export const addTemplatePlaceholders = async ({
-  templateId,
-  signers,
-}: AddTemplatePlaceholdersActionInput) => {
-  'use server';
-
-  const { user } = await getRequiredServerComponentSession();
-
-  await setRecipientsForTemplate({
-    userId: user.id,
-    templateId,
-    recipients: signers.map((signer) => ({
-      id: signer.nativeId!,
-      email: signer.email,
-      name: signer.name!,
-    })),
-  });
-};

apps/web/src/components/forms/forgot-password.tsx

@@ -9,9 +9,15 @@ import { z } from 'zod';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
-import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZForgotPasswordFormSchema = z.object({
@@ -28,18 +34,15 @@ export const ForgotPasswordForm = ({ className }: ForgotPasswordFormProps) => {
   const router = useRouter();
   const { toast } = useToast();
 
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors, isSubmitting },
-  } = useForm<TForgotPasswordFormSchema>({
+  const form = useForm<TForgotPasswordFormSchema>({
     values: {
       email: '',
     },
     resolver: zodResolver(ZForgotPasswordFormSchema),
   });
 
+  const isSubmitting = form.formState.isSubmitting;
+
   const { mutateAsync: forgotPassword } = trpc.profile.forgotPassword.useMutation();
 
   const onFormSubmit = async ({ email }: TForgotPasswordFormSchema) => {
@@ -52,29 +55,37 @@ export const ForgotPasswordForm = ({ className }: ForgotPasswordFormProps) => {
       duration: 5000,
     });
 
-    reset();
+    form.reset();
 
     router.push('/check-email');
   };
 
   return (
-    <form
-      className={cn('flex w-full flex-col gap-y-4', className)}
-      onSubmit={handleSubmit(onFormSubmit)}
-    >
-      <div>
-        <Label htmlFor="email" className="text-muted-foreground">
-          Email
-        </Label>
+    <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="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input type="email" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </fieldset>
 
-        <Input id="email" type="email" className="bg-background mt-2" {...register('email')} />
-
-        <FormErrorMessage className="mt-1.5" error={errors.email} />
-      </div>
-
-      <Button size="lg" loading={isSubmitting}>
-        {isSubmitting ? 'Sending Reset Email...' : 'Reset Password'}
-      </Button>
-    </form>
+        <Button size="lg" loading={isSubmitting}>
+          {isSubmitting ? 'Sending Reset Email...' : 'Reset Password'}
+        </Button>
+      </form>
+    </Form>
   );
 };

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

@@ -1,23 +1,25 @@
 'use client';
 
-import { useState } from 'react';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Eye, EyeOff, Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { User } from '@documenso/prisma/client';
+import type { 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 { Button } from '@documenso/ui/primitives/button';
-import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { FormErrorMessage } from '../form/form-error-message';
-
 export const ZPasswordFormSchema = z
   .object({
     currentPassword: z
@@ -48,16 +50,7 @@ export type PasswordFormProps = {
 export const PasswordForm = ({ className }: PasswordFormProps) => {
   const { toast } = useToast();
 
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
-
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors, isSubmitting },
-  } = useForm<TPasswordFormSchema>({
+  const form = useForm<TPasswordFormSchema>({
     values: {
       currentPassword: '',
       password: '',
@@ -66,6 +59,8 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
     resolver: zodResolver(ZPasswordFormSchema),
   });
 
+  const isSubmitting = form.formState.isSubmitting;
+
   const { mutateAsync: updatePassword } = trpc.profile.updatePassword.useMutation();
 
   const onFormSubmit = async ({ currentPassword, password }: TPasswordFormSchema) => {
@@ -75,7 +70,7 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
         password,
       });
 
-      reset();
+      form.reset();
 
       toast({
         title: 'Password updated',
@@ -101,117 +96,61 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
   };
 
   return (
-    <form
-      className={cn('flex w-full flex-col gap-y-4', className)}
-      onSubmit={handleSubmit(onFormSubmit)}
-    >
-      <div>
-        <Label htmlFor="current-password" className="text-muted-foreground">
-          Current Password
-        </Label>
-
-        <div className="relative">
-          <Input
-            id="current-password"
-            type={showCurrentPassword ? 'text' : 'password'}
-            minLength={6}
-            maxLength={72}
-            autoComplete="current-password"
-            className="bg-background mt-2 pr-10"
-            {...register('currentPassword')}
+    <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="currentPassword"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Current Password</FormLabel>
+                <FormControl>
+                  <PasswordInput autoComplete="current-password" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
           />
 
-          <Button
-            variant="link"
-            type="button"
-            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
-            aria-label={showCurrentPassword ? 'Mask password' : 'Reveal password'}
-            onClick={() => setShowCurrentPassword((show) => !show)}
-          >
-            {showCurrentPassword ? (
-              <EyeOff className="text-muted-foreground h-5 w-5" />
-            ) : (
-              <Eye className="text-muted-foreground h-5 w-5" />
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <PasswordInput autoComplete="new-password" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
             )}
-          </Button>
-        </div>
-
-        <FormErrorMessage className="mt-1.5" error={errors.currentPassword} />
-      </div>
-      <div>
-        <Label htmlFor="password" className="text-muted-foreground">
-          Password
-        </Label>
-
-        <div className="relative">
-          <Input
-            id="password"
-            type={showPassword ? 'text' : 'password'}
-            minLength={6}
-            maxLength={72}
-            autoComplete="new-password"
-            className="bg-background mt-2 pr-10"
-            {...register('password')}
           />
 
-          <Button
-            variant="link"
-            type="button"
-            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
-            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
-            onClick={() => setShowPassword((show) => !show)}
-          >
-            {showPassword ? (
-              <EyeOff className="text-muted-foreground h-5 w-5" />
-            ) : (
-              <Eye className="text-muted-foreground h-5 w-5" />
+          <FormField
+            control={form.control}
+            name="repeatedPassword"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Repeat Password</FormLabel>
+                <FormControl>
+                  <PasswordInput autoComplete="new-password" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
             )}
-          </Button>
-        </div>
-
-        <FormErrorMessage className="mt-1.5" error={errors.password} />
-      </div>
-
-      <div>
-        <Label htmlFor="repeated-password" className="text-muted-foreground">
-          Repeat Password
-        </Label>
-
-        <div className="relative">
-          <Input
-            id="repeated-password"
-            type={showConfirmPassword ? 'text' : 'password'}
-            minLength={6}
-            maxLength={72}
-            autoComplete="new-password"
-            className="bg-background mt-2 pr-10"
-            {...register('repeatedPassword')}
           />
+        </fieldset>
 
-          <Button
-            variant="link"
-            type="button"
-            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
-            aria-label={showConfirmPassword ? 'Mask password' : 'Reveal password'}
-            onClick={() => setShowConfirmPassword((show) => !show)}
-          >
-            {showConfirmPassword ? (
-              <EyeOff className="text-muted-foreground h-5 w-5" />
-            ) : (
-              <Eye className="text-muted-foreground h-5 w-5" />
-            )}
+        <div className="mt-4">
+          <Button type="submit" loading={isSubmitting}>
+            {isSubmitting ? 'Updating password...' : 'Update password'}
           </Button>
         </div>
-
-        <FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
-      </div>
-
-      <div className="mt-4">
-        <Button type="submit" disabled={isSubmitting}>
-          {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
-          Update password
-        </Button>
-      </div>
-    </form>
+      </form>
+    </Form>
   );
 };

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

@@ -3,22 +3,27 @@
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader } from 'lucide-react';
-import { Controller, useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { User } from '@documenso/prisma/client';
+import type { 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 { 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 { Label } from '@documenso/ui/primitives/label';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { FormErrorMessage } from '../form/form-error-message';
-
 export const ZProfileFormSchema = z.object({
   name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
   signature: z.string().min(1, 'Signature Pad cannot be empty'),
@@ -36,12 +41,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
 
   const { toast } = useToast();
 
-  const {
-    register,
-    control,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TProfileFormSchema>({
+  const form = useForm<TProfileFormSchema>({
     values: {
       name: user.name ?? '',
       signature: user.signature || '',
@@ -49,6 +49,8 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
     resolver: zodResolver(ZProfileFormSchema),
   });
 
+  const isSubmitting = form.formState.isSubmitting;
+
   const { mutateAsync: updateProfile } = trpc.profile.updateProfile.useMutation();
 
   const onFormSubmit = async ({ name, signature }: TProfileFormSchema) => {
@@ -84,56 +86,57 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
   };
 
   return (
-    <form
-      className={cn('flex w-full flex-col gap-y-4', className)}
-      onSubmit={handleSubmit(onFormSubmit)}
-    >
-      <div>
-        <Label htmlFor="full-name" className="text-muted-foreground">
-          Full Name
-        </Label>
-
-        <Input id="full-name" type="text" className="bg-background mt-2" {...register('name')} />
-
-        <FormErrorMessage className="mt-1.5" error={errors.name} />
-      </div>
-
-      <div>
-        <Label htmlFor="email" className="text-muted-foreground">
-          Email
-        </Label>
-
-        <Input id="email" type="email" className="bg-muted mt-2" value={user.email} disabled />
-      </div>
-
-      <div>
-        <Label htmlFor="signature" className="text-muted-foreground">
-          Signature
-        </Label>
-
-        <div className="mt-2">
-          <Controller
-            control={control}
-            name="signature"
-            render={({ field: { onChange } }) => (
-              <SignaturePad
-                className="h-44 w-full"
-                containerClassName="rounded-lg border bg-background"
-                defaultValue={user.signature ?? undefined}
-                onChange={(v) => onChange(v ?? '')}
-              />
+    <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="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Full Name</FormLabel>
+                <FormControl>
+                  <Input type="text" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
             )}
           />
-          <FormErrorMessage className="mt-1.5" error={errors.signature} />
-        </div>
-      </div>
 
-      <div className="mt-4">
-        <Button type="submit" disabled={isSubmitting}>
-          {isSubmitting && <Loader className="mr-2 h-5 w-5 animate-spin" />}
-          Update profile
+          <div>
+            <Label htmlFor="email" className="text-muted-foreground">
+              Email
+            </Label>
+            <Input id="email" type="email" className="bg-muted mt-2" value={user.email} disabled />
+          </div>
+
+          <FormField
+            control={form.control}
+            name="signature"
+            render={({ field: { onChange } }) => (
+              <FormItem>
+                <FormLabel>Signature</FormLabel>
+                <FormControl>
+                  <SignaturePad
+                    className="h-44 w-full"
+                    containerClassName="rounded-lg border bg-background"
+                    defaultValue={user.signature ?? undefined}
+                    onChange={(v) => onChange(v ?? '')}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </fieldset>
+
+        <Button type="submit" loading={isSubmitting}>
+          {isSubmitting ? 'Updating profile...' : 'Update profile'}
         </Button>
-      </div>
-    </form>
+      </form>
+    </Form>
   );
 };

apps/web/src/components/forms/reset-password.tsx

@@ -1,11 +1,8 @@
 'use client';
 
-import { useState } from 'react';
-
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Eye, EyeOff } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -13,9 +10,15 @@ import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
-import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
-import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export const ZResetPasswordFormSchema = z
@@ -40,15 +43,7 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
 
   const { toast } = useToast();
 
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-
-  const {
-    register,
-    reset,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TResetPasswordFormSchema>({
+  const form = useForm<TResetPasswordFormSchema>({
     values: {
       password: '',
       repeatedPassword: '',
@@ -56,6 +51,8 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
     resolver: zodResolver(ZResetPasswordFormSchema),
   });
 
+  const isSubmitting = form.formState.isSubmitting;
+
   const { mutateAsync: resetPassword } = trpc.profile.resetPassword.useMutation();
 
   const onFormSubmit = async ({ password }: Omit<TResetPasswordFormSchema, 'repeatedPassword'>) => {
@@ -65,7 +62,7 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
         token,
       });
 
-      reset();
+      form.reset();
 
       toast({
         title: 'Password updated',
@@ -93,81 +90,45 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
   };
 
   return (
-    <form
-      className={cn('flex w-full flex-col gap-y-4', className)}
-      onSubmit={handleSubmit(onFormSubmit)}
-    >
-      <div>
-        <Label htmlFor="password" className="text-muted-foreground">
-          <span>Password</span>
-        </Label>
-
-        <div className="relative">
-          <Input
-            id="password"
-            type={showPassword ? 'text' : 'password'}
-            minLength={6}
-            maxLength={72}
-            autoComplete="new-password"
-            className="bg-background mt-2 pr-10"
-            {...register('password')}
+    <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="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <PasswordInput {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
           />
 
-          <Button
-            variant="link"
-            type="button"
-            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
-            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
-            onClick={() => setShowPassword((show) => !show)}
-          >
-            {showPassword ? (
-              <EyeOff className="text-muted-foreground h-5 w-5" />
-            ) : (
-              <Eye className="text-muted-foreground h-5 w-5" />
+          <FormField
+            control={form.control}
+            name="repeatedPassword"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Repeat Password</FormLabel>
+                <FormControl>
+                  <PasswordInput {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
             )}
-          </Button>
-        </div>
-
-        <FormErrorMessage className="mt-1.5" error={errors.password} />
-      </div>
-
-      <div>
-        <Label htmlFor="repeatedPassword" className="text-muted-foreground">
-          <span>Repeat Password</span>
-        </Label>
-
-        <div className="relative">
-          <Input
-            id="repeated-password"
-            type={showConfirmPassword ? 'text' : 'password'}
-            minLength={6}
-            maxLength={72}
-            autoComplete="new-password"
-            className="bg-background mt-2 pr-10"
-            {...register('repeatedPassword')}
           />
+        </fieldset>
 
-          <Button
-            variant="link"
-            type="button"
-            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
-            aria-label={showConfirmPassword ? 'Mask password' : 'Reveal password'}
-            onClick={() => setShowConfirmPassword((show) => !show)}
-          >
-            {showConfirmPassword ? (
-              <EyeOff className="text-muted-foreground h-5 w-5" />
-            ) : (
-              <Eye className="text-muted-foreground h-5 w-5" />
-            )}
-          </Button>
-        </div>
-
-        <FormErrorMessage className="mt-1.5" error={errors.repeatedPassword} />
-      </div>
-
-      <Button size="lg" loading={isSubmitting}>
-        {isSubmitting ? 'Resetting Password...' : 'Reset Password'}
-      </Button>
-    </form>
+        <Button type="submit" size="lg" loading={isSubmitting}>
+          {isSubmitting ? 'Resetting Password...' : 'Reset Password'}
+        </Button>
+      </form>
+    </Form>
   );
 };

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

@@ -12,9 +12,16 @@ import { ErrorCode, isErrorCode } from '@documenso/lib/next-auth/error-codes';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@documenso/ui/primitives/dialog';
-import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
-import { Input, PasswordInput } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 const ERROR_MESSAGES: Partial<Record<keyof typeof ErrorCode, string>> = {
@@ -52,12 +59,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
     'totp' | 'backup'
   >('totp');
 
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    formState: { errors, isSubmitting },
-  } = useForm<TSignInFormSchema>({
+  const form = useForm<TSignInFormSchema>({
     values: {
       email: '',
       password: '',
@@ -67,9 +69,11 @@ export const SignInForm = ({ className }: SignInFormProps) => {
     resolver: zodResolver(ZSignInFormSchema),
   });
 
+  const isSubmitting = form.formState.isSubmitting;
+
   const onCloseTwoFactorAuthenticationDialog = () => {
-    setValue('totpCode', '');
-    setValue('backupCode', '');
+    form.setValue('totpCode', '');
+    form.setValue('backupCode', '');
 
     setIsTwoFactorAuthenticationDialogOpen(false);
   };
@@ -78,11 +82,11 @@ export const SignInForm = ({ className }: SignInFormProps) => {
     const method = twoFactorAuthenticationMethod === 'totp' ? 'backup' : 'totp';
 
     if (method === 'totp') {
-      setValue('backupCode', '');
+      form.setValue('backupCode', '');
     }
 
     if (method === 'backup') {
-      setValue('totpCode', '');
+      form.setValue('totpCode', '');
     }
 
     setTwoFactorAuthenticationMethod(method);
@@ -113,7 +117,6 @@ export const SignInForm = ({ className }: SignInFormProps) => {
       if (result?.error && isErrorCode(result.error)) {
         if (result.error === TwoFactorEnabledErrorCode) {
           setIsTwoFactorAuthenticationDialogOpen(true);
-
           return;
         }
 
@@ -156,64 +159,68 @@ export const SignInForm = ({ className }: SignInFormProps) => {
   };
 
   return (
-    <form
-      className={cn('flex w-full flex-col gap-y-4', className)}
-      onSubmit={handleSubmit(onFormSubmit)}
-    >
-      <div>
-        <Label htmlFor="email" className="text-muted-forground">
-          Email
-        </Label>
-
-        <Input id="email" type="email" className="bg-background mt-2" {...register('email')} />
-
-        <FormErrorMessage className="mt-1.5" error={errors.email} />
-      </div>
-
-      <div>
-        <Label htmlFor="password" className="text-muted-forground">
-          <span>Password</span>
-        </Label>
-
-        <PasswordInput
-          id="password"
-          minLength={6}
-          maxLength={72}
-          className="bg-background mt-2"
-          autoComplete="current-password"
-          {...register('password')}
-        />
-
-        <FormErrorMessage className="mt-1.5" error={errors.password} />
-      </div>
-
-      <Button
-        size="lg"
-        loading={isSubmitting}
-        disabled={isSubmitting}
-        className="dark:bg-documenso dark:hover:opacity-90"
+    <Form {...form}>
+      <form
+        className={cn('flex w-full flex-col gap-y-4', className)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
       >
-        {isSubmitting ? 'Signing in...' : 'Sign In'}
-      </Button>
+        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input type="email" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-      <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
-        <div className="bg-border h-px flex-1" />
-        <span className="text-muted-foreground bg-transparent">Or continue with</span>
-        <div className="bg-border h-px flex-1" />
-      </div>
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <PasswordInput {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </fieldset>
 
-      <Button
-        type="button"
-        size="lg"
-        variant={'outline'}
-        className="bg-background text-muted-foreground border"
-        disabled={isSubmitting}
-        onClick={onSignInWithGoogleClick}
-      >
-        <FcGoogle className="mr-2 h-5 w-5" />
-        Google
-      </Button>
+        <Button
+          type="submit"
+          size="lg"
+          loading={isSubmitting}
+          className="dark:bg-documenso dark:hover:opacity-90"
+        >
+          {isSubmitting ? 'Signing in...' : 'Sign In'}
+        </Button>
 
+        <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
+          <div className="bg-border h-px flex-1" />
+          <span className="text-muted-foreground bg-transparent">Or continue with</span>
+          <div className="bg-border h-px flex-1" />
+        </div>
+
+        <Button
+          type="button"
+          size="lg"
+          variant={'outline'}
+          className="bg-background text-muted-foreground border"
+          disabled={isSubmitting}
+          onClick={onSignInWithGoogleClick}
+        >
+          <FcGoogle className="mr-2 h-5 w-5" />
+          Google
+        </Button>
+      </form>
       <Dialog
         open={isTwoFactorAuthenticationDialogOpen}
         onOpenChange={onCloseTwoFactorAuthenticationDialog}
@@ -223,40 +230,40 @@ export const SignInForm = ({ className }: SignInFormProps) => {
             <DialogTitle>Two-Factor Authentication</DialogTitle>
           </DialogHeader>
 
-          <form onSubmit={handleSubmit(onFormSubmit)}>
-            {twoFactorAuthenticationMethod === 'totp' && (
-              <div>
-                <Label htmlFor="totpCode" className="text-muted-forground">
-                  Authentication Token
-                </Label>
-
-                <Input
-                  id="totpCode"
-                  type="text"
-                  className="bg-background mt-2"
-                  {...register('totpCode')}
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset disabled={isSubmitting}>
+              {twoFactorAuthenticationMethod === 'totp' && (
+                <FormField
+                  control={form.control}
+                  name="totpCode"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Authentication Token</FormLabel>
+                      <FormControl>
+                        <Input type="text" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
                 />
+              )}
 
-                <FormErrorMessage className="mt-1.5" error={errors.totpCode} />
-              </div>
-            )}
-
-            {twoFactorAuthenticationMethod === 'backup' && (
-              <div>
-                <Label htmlFor="backupCode" className="text-muted-forground">
-                  Backup Code
-                </Label>
-
-                <Input
-                  id="backupCode"
-                  type="text"
-                  className="bg-background mt-2"
-                  {...register('backupCode')}
+              {twoFactorAuthenticationMethod === 'backup' && (
+                <FormField
+                  control={form.control}
+                  name="backupCode"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel> Backup Code</FormLabel>
+                      <FormControl>
+                        <Input type="text" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
                 />
-
-                <FormErrorMessage className="mt-1.5" error={errors.backupCode} />
-              </div>
-            )}
+              )}
+            </fieldset>
 
             <div className="mt-4 flex items-center justify-between">
               <Button
@@ -268,12 +275,12 @@ export const SignInForm = ({ className }: SignInFormProps) => {
               </Button>
 
               <Button type="submit" loading={isSubmitting}>
-                Sign In
+                {isSubmitting ? 'Signing in...' : 'Sign In'}
               </Button>
             </div>
           </form>
         </DialogContent>
       </Dialog>
-    </form>
+    </Form>
   );
 };

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

@@ -1,11 +1,8 @@
 'use client';
 
-import { useState } from 'react';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Eye, EyeOff } from 'lucide-react';
 import { signIn } from 'next-auth/react';
-import { Controller, useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
@@ -13,9 +10,16 @@ import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
-import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -38,14 +42,8 @@ export type SignUpFormProps = {
 export const SignUpForm = ({ className }: SignUpFormProps) => {
   const { toast } = useToast();
   const analytics = useAnalytics();
-  const [showPassword, setShowPassword] = useState(false);
 
-  const {
-    control,
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TSignUpFormSchema>({
+  const form = useForm<TSignUpFormSchema>({
     values: {
       name: '',
       email: '',
@@ -55,6 +53,8 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
     resolver: zodResolver(ZSignUpFormSchema),
   });
 
+  const isSubmitting = form.formState.isSubmitting;
+
   const { mutateAsync: signup } = trpc.auth.signup.useMutation();
 
   const onFormSubmit = async ({ name, email, password, signature }: TSignUpFormSchema) => {
@@ -90,93 +90,83 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
   };
 
   return (
-    <form
-      className={cn('flex w-full flex-col gap-y-4', className)}
-      onSubmit={handleSubmit(onFormSubmit)}
-    >
-      <div>
-        <Label htmlFor="name" className="text-muted-foreground">
-          Name
-        </Label>
-
-        <Input id="name" type="text" className="bg-background mt-2" {...register('name')} />
-
-        {errors.name && <span className="mt-1 text-xs text-red-500">{errors.name.message}</span>}
-      </div>
-
-      <div>
-        <Label htmlFor="email" className="text-muted-foreground">
-          Email
-        </Label>
-
-        <Input id="email" type="email" className="bg-background mt-2" {...register('email')} />
-
-        {errors.email && <span className="mt-1 text-xs text-red-500">{errors.email.message}</span>}
-      </div>
-
-      <div>
-        <Label htmlFor="password" className="text-muted-foreground">
-          Password
-        </Label>
-
-        <div className="relative">
-          <Input
-            id="password"
-            type={showPassword ? 'text' : 'password'}
-            minLength={6}
-            maxLength={72}
-            autoComplete="new-password"
-            className="bg-background mt-2 pr-10"
-            {...register('password')}
+    <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="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input type="text" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
           />
 
-          <Button
-            variant="link"
-            type="button"
-            className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
-            aria-label={showPassword ? 'Mask password' : 'Reveal password'}
-            onClick={() => setShowPassword((show) => !show)}
-          >
-            {showPassword ? (
-              <EyeOff className="text-muted-foreground h-5 w-5" />
-            ) : (
-              <Eye className="text-muted-foreground h-5 w-5" />
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input type="email" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
             )}
-          </Button>
-        </div>
-        <FormErrorMessage className="mt-1.5" error={errors.password} />
-      </div>
+          />
 
-      <div>
-        <Label htmlFor="password" className="text-muted-foreground">
-          Sign Here
-        </Label>
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <PasswordInput {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-        <div>
-          <Controller
-            control={control}
+          <FormField
+            control={form.control}
             name="signature"
             render={({ field: { onChange } }) => (
-              <SignaturePad
-                className="h-36 w-full"
-                containerClassName="mt-2 rounded-lg border bg-background"
-                onChange={(v) => onChange(v ?? '')}
-              />
+              <FormItem>
+                <FormLabel>Sign Here</FormLabel>
+                <FormControl>
+                  <SignaturePad
+                    className="h-36 w-full"
+                    containerClassName="mt-2 rounded-lg border bg-background"
+                    onChange={(v) => onChange(v ?? '')}
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
             )}
           />
-        </div>
+        </fieldset>
 
-        <FormErrorMessage className="mt-1.5" error={errors.signature} />
-      </div>
-
-      <Button
-        size="lg"
-        loading={isSubmitting}
-        disabled={isSubmitting}
-        className="dark:bg-documenso dark:hover:opacity-90"
-      >
-        {isSubmitting ? 'Signing up...' : 'Sign Up'}
-      </Button>
-    </form>
+        <Button
+          type="submit"
+          size="lg"
+          loading={isSubmitting}
+          className="dark:bg-documenso dark:hover:opacity-90"
+        >
+          {isSubmitting ? 'Signing up...' : 'Sign Up'}
+        </Button>
+      </form>
+    </Form>
   );
 };

apps/web/src/helpers/truncate-title.ts

@@ -0,0 +1,10 @@
+export const truncateTitle = (title: string, maxLength: number = 16) => {
+  if (title.length <= maxLength) {
+    return title;
+  }
+
+  const start = title.slice(0, maxLength / 2);
+  const end = title.slice(-maxLength / 2);
+
+  return `${start}.....${end}`;
+};

apps/web/src/providers/next-auth.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { Session } from 'next-auth';
+import type { Session } from 'next-auth';
 import { SessionProvider } from 'next-auth/react';
 
 export type NextAuthProviderProps = {

docker/compose.yml

@@ -33,7 +33,6 @@ services:
       - SMTP_MAIL_USER=username
       - SMTP_MAIL_PASSWORD=password
       - MAIL_FROM=admin@example.com
-      - NEXT_PUBLIC_ALLOW_SIGNUP=true
     ports:
       - 3000:3000
     volumes:

lint-staged.config.cjs

@@ -1,6 +1,7 @@
+/** @type {import('lint-staged').Config} */
 module.exports = {
-  '**/*.{ts,tsx,cts,mts}': ['eslint --fix'],
-  '**/*.{js,jsx,cjs,mjs}': ['prettier --write'],
-  '**/*.{yml,mdx}': ['prettier --write'],
-  '**/*/package.json': ['npm run precommit'],
+  '**/*.{ts,tsx,cts,mts}': (files) => `eslint --fix ${files.join(' ')}`,
+  '**/*.{js,jsx,cjs,mjs}': (files) => `prettier --write ${files.join(' ')}`,
+  '**/*.{yml,mdx}': (files) => `prettier --write ${files.join(' ')}`,
+  '**/*/package.json': 'npm run precommit',
 };

package.json

@@ -43,7 +43,6 @@
     "turbo": "^1.9.3"
   },
   "name": "@documenso/root",
-  "packageManager": "npm@8.19.2",
   "workspaces": [
     "apps/*",
     "packages/*"

packages/ee/server-only/limits/server.ts

@@ -1,10 +1,10 @@
 import { DateTime } from 'luxon';
 
-import { stripe } from '@documenso/lib/server-only/stripe';
 import { getFlag } from '@documenso/lib/universal/get-feature-flag';
 import { prisma } from '@documenso/prisma';
 import { SubscriptionStatus } from '@documenso/prisma/client';
 
+import { getPricesByType } from '../stripe/get-prices-by-type';
 import { FREE_PLAN_LIMITS, SELFHOSTED_PLAN_LIMITS } from './constants';
 import { ERROR_CODES } from './errors';
 import { ZLimitsSchema } from './schema';
@@ -43,23 +43,29 @@ export const getServerLimits = async ({ email }: GetServerLimitsOptions) => {
   let quota = structuredClone(FREE_PLAN_LIMITS);
   let remaining = structuredClone(FREE_PLAN_LIMITS);
 
-  // Since we store details and allow for past due plans we need to check if the subscription is active.
-  if (user.Subscription?.status !== SubscriptionStatus.INACTIVE && user.Subscription?.priceId) {
-    const { product } = await stripe.prices
-      .retrieve(user.Subscription.priceId, {
-        expand: ['product'],
-      })
-      .catch((err) => {
-        console.error(err);
-        throw err;
-      });
+  const activeSubscriptions = user.Subscription.filter(
+    ({ status }) => status === SubscriptionStatus.ACTIVE,
+  );
 
-    if (typeof product === 'string') {
-      throw new Error(ERROR_CODES.SUBSCRIPTION_FETCH_FAILED);
+  if (activeSubscriptions.length > 0) {
+    const individualPrices = await getPricesByType('individual');
+
+    for (const subscription of activeSubscriptions) {
+      const price = individualPrices.find((price) => price.id === subscription.priceId);
+      if (!price || typeof price.product === 'string' || price.product.deleted) {
+        continue;
+      }
+
+      const currentQuota = ZLimitsSchema.parse(
+        'metadata' in price.product ? price.product.metadata : {},
+      );
+
+      // Use the subscription with the highest quota.
+      if (currentQuota.documents > quota.documents && currentQuota.recipients > quota.recipients) {
+        quota = currentQuota;
+        remaining = structuredClone(quota);
+      }
     }
-
-    quota = ZLimitsSchema.parse('metadata' in product ? product.metadata : {});
-    remaining = structuredClone(quota);
   }
 
   const documents = await prisma.document.count({

packages/ee/server-only/stripe/create-customer.ts

@@ -1,31 +0,0 @@
-import { stripe } from '@documenso/lib/server-only/stripe';
-import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
-import { prisma } from '@documenso/prisma';
-import { User } from '@documenso/prisma/client';
-
-export type CreateCustomerOptions = {
-  user: User;
-};
-
-export const createCustomer = async ({ user }: CreateCustomerOptions) => {
-  const existingSubscription = await getSubscriptionByUserId({ userId: user.id });
-
-  if (existingSubscription) {
-    throw new Error('User already has a subscription');
-  }
-
-  const customer = await stripe.customers.create({
-    name: user.name ?? undefined,
-    email: user.email,
-    metadata: {
-      userId: user.id,
-    },
-  });
-
-  return await prisma.subscription.create({
-    data: {
-      userId: user.id,
-      customerId: customer.id,
-    },
-  });
-};

packages/ee/server-only/stripe/get-customer.ts

@@ -1,4 +1,8 @@
 import { stripe } from '@documenso/lib/server-only/stripe';
+import { prisma } from '@documenso/prisma';
+import type { User } from '@documenso/prisma/client';
+
+import { onSubscriptionUpdated } from './webhook/on-subscription-updated';
 
 export const getStripeCustomerByEmail = async (email: string) => {
   const foundStripeCustomers = await stripe.customers.list({
@@ -17,3 +21,74 @@ export const getStripeCustomerById = async (stripeCustomerId: string) => {
     return null;
   }
 };
+
+/**
+ * Get a stripe customer by user.
+ *
+ * Will create a Stripe customer and update the relevant user if one does not exist.
+ */
+export const getStripeCustomerByUser = async (user: User) => {
+  if (user.customerId) {
+    const stripeCustomer = await getStripeCustomerById(user.customerId);
+
+    if (!stripeCustomer) {
+      throw new Error('Missing Stripe customer');
+    }
+
+    return {
+      user,
+      stripeCustomer,
+    };
+  }
+
+  let stripeCustomer = await getStripeCustomerByEmail(user.email);
+
+  const isSyncRequired = Boolean(stripeCustomer && !stripeCustomer.deleted);
+
+  if (!stripeCustomer) {
+    stripeCustomer = await stripe.customers.create({
+      name: user.name ?? undefined,
+      email: user.email,
+      metadata: {
+        userId: user.id,
+      },
+    });
+  }
+
+  const updatedUser = await prisma.user.update({
+    where: {
+      id: user.id,
+    },
+    data: {
+      customerId: stripeCustomer.id,
+    },
+  });
+
+  // Sync subscriptions if the customer already exists for back filling the DB
+  // and local development.
+  if (isSyncRequired) {
+    await syncStripeCustomerSubscriptions(user.id, stripeCustomer.id).catch((e) => {
+      console.error(e);
+    });
+  }
+
+  return {
+    user: updatedUser,
+    stripeCustomer,
+  };
+};
+
+const syncStripeCustomerSubscriptions = async (userId: number, stripeCustomerId: string) => {
+  const stripeSubscriptions = await stripe.subscriptions.list({
+    customer: stripeCustomerId,
+  });
+
+  await Promise.all(
+    stripeSubscriptions.data.map(async (subscription) =>
+      onSubscriptionUpdated({
+        userId,
+        subscription,
+      }),
+    ),
+  );
+};

packages/ee/server-only/stripe/get-prices-by-interval.ts

@@ -1,4 +1,4 @@
-import Stripe from 'stripe';
+import type Stripe from 'stripe';
 
 import { stripe } from '@documenso/lib/server-only/stripe';
 
@@ -7,7 +7,14 @@ type PriceWithProduct = Stripe.Price & { product: Stripe.Product };
 
 export type PriceIntervals = Record<Stripe.Price.Recurring.Interval, PriceWithProduct[]>;
 
-export const getPricesByInterval = async () => {
+export type GetPricesByIntervalOptions = {
+  /**
+   * Filter products by their meta 'type' attribute.
+   */
+  type?: 'individual';
+};
+
+export const getPricesByInterval = async ({ type }: GetPricesByIntervalOptions = {}) => {
   let { data: prices } = await stripe.prices.search({
     query: `active:'true' type:'recurring'`,
     expand: ['data.product'],
@@ -19,8 +26,10 @@ export const getPricesByInterval = async () => {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const product = price.product as Stripe.Product;
 
+    const filter = !type || product.metadata?.type === type;
+
     // Filter out prices for products that are not active.
-    return product.active;
+    return product.active && filter;
   });
 
   const intervals: PriceIntervals = {

packages/ee/server-only/stripe/get-prices-by-type.ts

@@ -0,0 +1,11 @@
+import { stripe } from '@documenso/lib/server-only/stripe';
+
+export const getPricesByType = async (type: 'individual') => {
+  const { data: prices } = await stripe.prices.search({
+    query: `metadata['type']:'${type}' type:'recurring'`,
+    expand: ['data.product'],
+    limit: 100,
+  });
+
+  return prices;
+};