Merge branch 'main' into feat/DOC-170-add-name-field

Update README.md

.dockerignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+**/node_modules
+**/.pnp
+**.pnp.js
+
+# testing
+**/coverage
+
+# next.js
+**/.next/
+**/out/
+
+# production
+**/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+.env
+.env.example

.env.example

@@ -1,6 +1,9 @@
 # Database
 # Option 1: You can use the provided remote test database, courtesy of the documenso team: postgres://documenso_test_user:GnmLG14u12sd9zHsd4vVWwP40WneFJMo@dpg-cf2hljh4reb5o45oqpq0-a.oregon-postgres.render.com/documenso_test_e2i3
 # Option 2: Set up a local Postgres SQL instance (RECOMMENDED)
+# Option 3: Use the provided dx setup (RECOMMENDED)
+#   => postgres://documenso:password@127.0.0.1:54320/documenso
+#
 # ⚠ WARNING: The test database can be resetted or taken offline at any point.
 # ⚠ WARNING: Please be aware that nothing written to the test databae is private.
 DATABASE_URL=''
@@ -20,6 +23,12 @@ SENDGRID_API_KEY=''
 
 # SMTP
 # Set SMTP credentials to use SMTP instead of the Sendgrid API.
+# If you're using the dx setup you can use the following values:
+#
+# SMTP_MAIL_HOST='127.0.0.1'
+# SMTP_MAIL_PORT='2500'
+# SMTP_MAIL_USER='documenso'
+# SMTP_MAIL_PASSWORD='documenso'
 SMTP_MAIL_HOST=''
 SMTP_MAIL_PORT=''
 SMTP_MAIL_USER=''
@@ -28,6 +37,13 @@ SMTP_MAIL_PASSWORD=''
 # Sender for signing requests and completion mails.
 MAIL_FROM='documenso@localhost.com'
 
+# STRIPE
+STRIPE_API_KEY=
+STRIPE_WEBHOOK_SECRET=
+NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID=
+NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID=
+
 #FEATURE FLAGS
 # Allow users to register via the /signup page. Otherwise they will be redirect to the home page.
-ALLOW_SIGNUP=true
+NEXT_PUBLIC_ALLOW_SIGNUP=true
+NEXT_PUBLIC_ALLOW_SUBSCRIPTIONS=true

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "apps/website/documenso/website"]
-	path = apps/website/documenso/website
-	url = http://github.com/documenso/website.git

.vscode/settings.json

@@ -13,7 +13,7 @@
   "editor.codeActionsOnSave": {
     "source.removeUnusedImports": false
   },
-  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "typescript.tsdk": "node_modules/typescript/lib",
   "spellright.language": ["de"],
   "spellright.documentTypes": ["markdown", "latex", "plaintext"]
 }

README.md

@@ -1,6 +1,9 @@
+> We are launching on Product Hunt soon! Sign up to support the launch: 
+> <center><a href="https://dub.sh/documenso-launch"><img src="https://img.shields.io/badge/Documenso%20on%20Product%20Hunt-Notify%20Me-orange" alt="Product Hunt"></a></center>
+
 <p align="center" style="margin-top: 12px">
   <a href="https://github.com/documenso/documenso.com">
-   <img width="250px" src="https://user-images.githubusercontent.com/1309312/224986248-5b8a5cdc-2dc1-46b9-a354-985bb6808ee0.png" alt="Documenso Logo">
+   <img width="250px" src="https://github.com/documenso/documenso/assets/1309312/cd7823ec-4baa-40b9-be78-4acb3b1c73cb" alt="Documenso Logo">
   </a>
 
   <h3 align="center">Open Source Signing Infrastructure</h3>
@@ -71,14 +74,14 @@ The current project goal is to <b>[release a production ready version](https://g
 
 - To contribute please see our [contribution guide](https://github.com/documenso/documenso/blob/main/CONTRIBUTING.md).
 
-## Tools
+
 
 # Tech
 
 Documenso is built using awesome open source tech including:
 
 - [Typescript](https://www.typescriptlang.org/)
-- [Javascript (when neccessary)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+- [Javascript (when necessary)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
 - [NextJS (JS Fullstack Framework)](https://nextjs.org/)
 - [Postgres SQL (Database)](https://www.postgresql.org/)
 - [Prisma (ORM - Object-relational mapping)](https://www.prisma.io/)
@@ -86,7 +89,7 @@ Documenso is built using awesome open source tech including:
 - [Node SignPDF (Digital Signature)](https://github.com/vbuch/node-signpdf)
 - [React-PDF for viewing PDFs](https://github.com/wojtekmaj/react-pdf)
 - [PDF-Lib for PDF manipulation](https://github.com/Hopding/pdf-lib)
-- Check out /packages.json and /apps/web/package.json for more
+- Check out `/package.json` and `/apps/web/package.json` for more
 - Support for [opensignpdf (requires Java on server)](https://github.com/open-pdf-sign) is currently planned.
 
 # Getting Started
@@ -96,12 +99,39 @@ Documenso is built using awesome open source tech including:
 To run Documenso locally you need
 
 - [Node.js (Version: >=18.x)](https://nodejs.org/en/download/)
-- Node Package Manger NPM - included in Node.js
+- Node Package Manager NPM - included in Node.js
 - [PostgreSQL (local or remote)](https://www.postgresql.org/download/)
 
+## Developer Quickstart
+
+> **Note**: This is a quickstart for developers. It assumes that you have both [docker](https://docs.docker.com/get-docker/) and [docker-compose](https://docs.docker.com/compose/) installed on your machine.
+
+Want to get up and running quickly? Follow these steps:
+
+- [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+
+  ```sh
+  git clone https://github.com/documenso/documenso
+  ```
+
+- Set up your `.env` file using the recommendations in the `.env.example` file.
+- Run `npm run dx` in the root directory
+  - This will spin up a postgres database and inbucket mail server in docker containers.
+- Run `npm run dev` in the root directory
+- Want it even faster? Just use
+    ```sh
+  npm run d
+  ```
+
+That's it! You should now be able to access the app at http://localhost:3000
+
+Incoming mail will be available at http://localhost:9000
+
+Your database will also be available on port `54320`. You can connect to it using your favorite database client.
+
 ## Developer Setup
 
-Follow these steps to setup documenso on you local machnine:
+Follow these steps to setup documenso on you local machine:
 
 - [Clone the repository](https://help.github.com/articles/cloning-a-repository/) it to your local device.
   ```sh
@@ -111,35 +141,36 @@ Follow these steps to setup documenso on you local machnine:
 - Rename <code>.env.example</code> to <code>.env</code>
 - Set DATABASE_URL value in .env file
   - You can use the provided test database url (may be wiped at any point)
-  - Or setup a local postgres sql instance (recommened)
+  - Or setup a local postgres sql instance (recommended)
 - Create the database scheme by running <code>db-migrate:dev</code>
 - Setup your mail provider
   - Set <code>SENDGRID_API_KEY</code> value in .env file
   - You need a SendGrid account, which you can create [here](https://signup.sendgrid.com/).
-  - Documenso uses [Nodemailer](https://nodemailer.com/about/) so you can easily use your own SMTP server by setting the <code>SMTP\_\* varibles</code> in your .env
+  - Documenso uses [Nodemailer](https://nodemailer.com/about/) so you can easily use your own SMTP server by setting the <code>SMTP\_\* variables</code> in your .env
 - Run <code>npm run dev</code> root directory to start
 - Register a new user at http://localhost:3000/signup
 
 ---
+
 - Optional: Seed the database using <code>npm run db-seed</code> to create a test user and document
-- Optional: Upload and sign <code>apps\web\ressources\example.pdf</code> manually to test your setup
+- Optional: Upload and sign <code>apps/web/ressources/example.pdf</code> manually to test your setup
 
 - Optional: Create your own signing certificate
-  - A demo certificate is provided in /app/web/ressources/certificate.p12
-  - To generate you own using these steps and a linux Terminal or Windows Linux Subsystem see **Create your own signging certificate**.
+  - A demo certificate is provided in `/app/web/ressources/certificate.p12`
+  - To generate your own using these steps and a Linux Terminal or Windows Subsystem for Linux (WSL) see **[Create your own signing certificate](#creating-your-own-signing-certificate)**.
 
 ## Updating
 
-- If you pull the newest version from main, using <code>git pull</code>, it may be neccessary to regenerate your database client
-- You can do this by running the generate command in /packages/prisma:
+- If you pull the newest version from main, using <code>git pull</code>, it may be necessary to regenerate your database client
+- You can do this by running the generate command in `/packages/prisma`:
   ```sh
   npx prisma generate
   ```
-- This is not neccessary on first clone
+- This is not necessary on first clone.
 
-# Creating your own signging certificate
+# Creating your own signing certificate
 
-For the digital signature of you documents you need a signign certificate in .p12 formate (public and private key). You can buy one (not recommended for dev) or use the steps to create a self-signed one:
+For the digital signature of your documents you need a signing certificate in .p12 format (public and private key). You can buy one (not recommended for dev) or use the steps to create a self-signed one:
 
 1. Generate a private key using the OpenSSL command. You can run the following command to generate a 2048-bit RSA key:\
    <code>openssl genrsa -out private.key 2048</code>
@@ -152,6 +183,15 @@ For the digital signature of you documents you need a signign certificate in .p1
 4. You will be prompted to enter a password for the p12 file. Choose a strong password and remember it, as you will need it to use the certificate (**can be empty for dev certificates**)
 5. Place the certificate <code>/apps/web/ressource/certificate.p12</code>
 
+# Docker
+
+> We are still working on the publishing of docker images, in the meantime you can follow the steps below to create a production ready docker image.
+
+Want to create a production ready docker image? Follow these steps:
+
+- Run `./docker/build.sh` in the root directory.
+- Publish the image to your docker registry of choice.
+
 # Deploying - Coming Soon™
 
 - Docker support

apps/web/.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["next/babel"],
-  "plugins": []
-}

apps/web/.eslintrc.json

@@ -1,3 +1,8 @@
 {
-  "extends": ["next/babel", "next/core-web-vitals"]
-}
+  "extends": [
+    "next/core-web-vitals"
+  ],
+  "rules": {
+    "react/no-unescaped-entities": "off"
+  }
+}

apps/web/components/billing-plans.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import { classNames } from "@documenso/lib";
+import { STRIPE_PLANS, fetchCheckoutSession, useSubscription } from "@documenso/lib/stripe";
+import { Button } from "@documenso/ui";
+import { Switch } from "@headlessui/react";
+
+export const BillingPlans = () => {
+  const { subscription, isLoading } = useSubscription();
+  const [isAnnual, setIsAnnual] = useState(false);
+
+  return (
+    <div>
+      {!subscription &&
+        STRIPE_PLANS.map((plan) => (
+          <div key={plan.name} className="rounded-lg border py-4 px-6">
+            <h3 className="text-center text-lg font-medium leading-6 text-gray-900">{plan.name}</h3>
+
+            <div className="my-4 flex justify-center">
+              <Switch.Group as="div" className="flex items-center">
+                <Switch
+                  checked={isAnnual}
+                  onChange={setIsAnnual}
+                  className={classNames(
+                    isAnnual ? "bg-neon-600" : "bg-gray-200",
+                    "focus:ring-neon-600 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
+                  )}>
+                  <span
+                    aria-hidden="true"
+                    className={classNames(
+                      isAnnual ? "translate-x-5" : "translate-x-0",
+                      "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                    )}
+                  />
+                </Switch>
+                <Switch.Label as="span" className="ml-3 text-sm">
+                  <span className="font-medium text-gray-900">Annual billing</span>{" "}
+                  <span className="text-gray-500">(Save $60)</span>
+                </Switch.Label>
+              </Switch.Group>
+            </div>
+
+            <p className="mt-2 text-center text-gray-500">
+              ${(isAnnual ? plan.prices.yearly.price : plan.prices.monthly.price).toFixed(2)}{" "}
+              <span className="text-sm text-gray-400">{isAnnual ? "/yr" : "/mo"}</span>
+            </p>
+
+            <p className="mt-4 text-center text-sm text-gray-500">
+              All you need for easy signing. <br></br>Includes everthing we build this year.
+            </p>
+            <div className="mt-4">
+              <Button
+                className="w-full"
+                disabled={isLoading}
+                onClick={() =>
+                  fetchCheckoutSession({
+                    priceId: isAnnual ? plan.prices.yearly.priceId : plan.prices.monthly.priceId,
+                  }).then((res) => {
+                    if (res.success) {
+                      window.location.href = res.url;
+                    }
+                  })
+                }>
+                Subscribe
+              </Button>
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+};

apps/web/components/billing-warning.tsx

@@ -0,0 +1,51 @@
+import { useSubscription } from "@documenso/lib/stripe"
+import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
+import { SubscriptionStatus } from '@prisma/client'
+import Link from "next/link";
+
+export const BillingWarning = () => {
+    const { subscription } = useSubscription();
+
+    return (
+        <>
+        {subscription?.status === SubscriptionStatus.PAST_DUE && (
+            <div className="bg-yellow-50 p-4 sm:px-6 lg:px-8">
+              <div className="mx-auto flex max-w-3xl items-start justify-center">
+                <div className="flex-shrink-0">
+                  <PaperAirplaneIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
+                </div>
+
+                <div className="ml-3">
+                  <p className="text-sm text-yellow-700">
+                    Your subscription is past due.{" "}
+                    <Link href="/account/billing" className="text-yellow-700 underline">
+                      Please update your payment information to avoid any service interruptions.
+                    </Link>
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {subscription?.status === SubscriptionStatus.INACTIVE && (
+            <div className="bg-red-50 p-4 sm:px-6 lg:px-8">
+              <div className="mx-auto flex max-w-3xl items-center justify-center">
+                <div className="flex-shrink-0">
+                  <PaperAirplaneIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+                </div>
+
+                <div className="ml-3">
+                  <p className="text-sm text-red-700">
+                    Your subscription is inactive. You can continue to view and edit your documents,
+                    but you will not be able to send them or create new ones.{" "}
+                    <Link href="/account/billing" className="text-red-700 underline">
+                      You can update your payment information here
+                    </Link>
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+        </>
+    )
+}

apps/web/components/editor/editable-field.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from "react";
-import Draggable from "react-draggable";
-import Logo from "../logo";
 import { IconButton } from "@documenso/ui";
+import Logo from "../logo";
 import { XCircleIcon } from "@heroicons/react/20/solid";
+import Draggable from "react-draggable";
+
 const stc = require("string-to-color");
 
 type FieldPropsType = {
@@ -51,21 +52,19 @@ export default function EditableField(props: FieldPropsType) {
       onMouseDown={(e: any) => {
         e.preventDefault();
         e.stopPropagation();
-      }}
-    >
+      }}>
       {/* width: 192 height 96 */}
       <div
         hidden={props.hidden}
         ref={nodeRef}
-        className="cursor-move opacity-80 p-2 m-auto w-48 h-16 flex-row-reverse text-lg font-bold text-center absolute top-0 left-0 select-none"
+        className="absolute top-0 left-0 m-auto h-16 w-48 cursor-move select-none flex-row-reverse p-2 text-center text-lg font-bold opacity-80"
         style={{
           background: stc(props.field.Recipient.email),
-        }}
-      >
-        <div className="m-auto overflow-hidden flex-row-reverse text-lg font-bold text-center">
+        }}>
+        <div className="m-auto flex-row-reverse overflow-hidden text-center text-lg font-bold">
           {field.type}
           {field.type === "SIGNATURE" ? (
-            <div className="text-xs text-center">
+            <div className="text-center text-xs">
               {`${props.field.Recipient?.name} <${props.field.Recipient?.email}>`}
             </div>
           ) : (
@@ -79,8 +78,7 @@ export default function EditableField(props: FieldPropsType) {
             icon={XCircleIcon}
             onClick={(event: any) => {
               props.onDelete(props.field.id);
-            }}
-          ></IconButton>
+            }}></IconButton>
         </strong>
       </div>
     </Draggable>

apps/web/components/editor/field-type-selector.tsx

@@ -1,16 +1,24 @@
 import { useEffect, useState } from "react";
-import { RadioGroup } from "@headlessui/react";
 import { classNames } from "@documenso/lib";
+import { RadioGroup } from "@headlessui/react";
 import { FieldType } from "@prisma/client";
+
 const stc = require("string-to-color");
 
 export default function FieldTypeSelector(props: any) {
   const fieldTypes = [
     {
-      name: "Signature",
       id: FieldType.SIGNATURE,
+      name: "Signature",
+    },
+    {
+      id: FieldType.NAME,
+      name: "Name",
+    },
+    {
+      id: FieldType.DATE,
+      name: "Date",
     },
-    { name: "Date", id: FieldType.DATE },
   ];
 
   const [selectedFieldType, setSelectedFieldType] = useState(fieldTypes[0].id);
@@ -24,8 +32,7 @@ export default function FieldTypeSelector(props: any) {
       value={selectedFieldType}
       onChange={(e: any) => {
         setSelectedFieldType(e);
-      }}
-    >
+      }}>
       <div className="space-y-4">
         {fieldTypes.map((fieldType) => (
           <RadioGroup.Option
@@ -37,30 +44,23 @@ export default function FieldTypeSelector(props: any) {
             className={({ checked, active }) =>
               classNames(
                 checked ? "border-neon border-2" : "border-transparent",
-                "hover:bg-slate-100 select-none relative block cursor-pointer rounded-lg border bg-white px-3 py-2 focus:outline-none sm:flex sm:justify-between"
+                "relative block cursor-pointer select-none rounded-lg border bg-white px-3 py-2 hover:bg-slate-100 focus:outline-none sm:flex sm:justify-between"
               )
-            }
-          >
+            }>
             {({ active, checked }) => (
               <>
                 <span className="flex items-center">
                   <span className="flex flex-col text-sm">
-                    <RadioGroup.Label
-                      as="span"
-                      className="font-medium text-gray-900"
-                    >
+                    <RadioGroup.Label as="span" className="font-medium text-gray-900">
                       <span
-                        className="inline-block h-4 w-4 flex-shrink-0 rounded-full mr-3 align-middle"
+                        className="mr-3 inline-block h-4 w-4 flex-shrink-0 rounded-full align-middle"
                         style={{
                           background: stc(props.selectedRecipient?.email),
                         }}
                       />
                       <span className="align-middle">
                         {" "}
-                        {
-                          fieldTypes.filter((e) => e.id === fieldType.id)[0]
-                            .name
-                        }
+                        {fieldTypes.filter((e) => e.id === fieldType.id)[0].name}
                       </span>
                     </RadioGroup.Label>
                   </span>

apps/web/components/editor/name-dialog.tsx

@@ -0,0 +1,95 @@
+import { Fragment, useEffect, useState } from "react";
+import { classNames, localStorage } from "@documenso/lib";
+import { Button } from "@documenso/ui";
+import { Dialog, Transition } from "@headlessui/react";
+
+export default function NameDialog(props: any) {
+  const [name, setName] = useState(props.defaultName);
+
+  useEffect(() => {
+    const nameFromStorage = localStorage.getItem("typedName");
+
+    if (nameFromStorage) {
+      setName(nameFromStorage);
+    }
+  }, []);
+
+  return (
+    <Transition.Root show={props.open} as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={() => {
+          props.setOpen(false);
+        }}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0">
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+              <Dialog.Panel className="relative min-h-[350px] transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+                <div>
+                  <h4 className="text-center text-2xl font-medium">
+                    Enter your name in the input below!
+                  </h4>
+
+                  <div className="my-3 border-b border-gray-300">
+                    <input
+                      value={name}
+                      onChange={(e) => {
+                        setName(e.target.value);
+                      }}
+                      className={classNames(
+                        "focus:border-neon focus:ring-neon mt-14 block h-10 w-full text-center align-bottom font-sans text-2xl leading-none"
+                      )}
+                      placeholder="Kindly type your name"
+                    />
+                  </div>
+
+                  <div className="flex flex-row-reverse items-center gap-x-4">
+                    <Button
+                      color="secondary"
+                      onClick={() => {
+                        props.onClose();
+                        props.setOpen(false);
+                      }}>
+                      Cancel
+                    </Button>
+                    <Button
+                      className="ml-3"
+                      disabled={!name}
+                      onClick={() => {
+                        localStorage.setItem("typedName", name);
+                        props.onClose({
+                          type: "type",
+                          typedSignature: name,
+                        });
+                      }}>
+                      Sign
+                    </Button>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}

apps/web/components/editor/pdf-editor.tsx

@@ -1,13 +1,14 @@
-import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
-import { useRouter } from "next/router";
-import dynamic from "next/dynamic";
 import { useState } from "react";
-import { createOrUpdateField, deleteField } from "@documenso/lib/api";
-import { createField } from "@documenso/features/editor";
-import RecipientSelector from "./recipient-selector";
-import FieldTypeSelector from "./field-type-selector";
-import { InformationCircleIcon } from "@heroicons/react/24/outline";
+import dynamic from "next/dynamic";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import { createField } from "@documenso/features/editor";
+import { createOrUpdateField, deleteField } from "@documenso/lib/api";
+import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
+import FieldTypeSelector from "./field-type-selector";
+import RecipientSelector from "./recipient-selector";
+import { InformationCircleIcon } from "@heroicons/react/24/outline";
+
 const stc = require("string-to-color");
 
 const PDFViewer = dynamic(() => import("./pdf-viewer"), {
@@ -20,8 +21,7 @@ export default function PDFEditor(props: any) {
   const [selectedRecipient, setSelectedRecipient]: any = useState();
   const [selectedFieldType, setSelectedFieldType] = useState();
   const noRecipients =
-    props?.document.Recipient.length === 0 ||
-    props?.document.Recipient.every((e: any) => !e.email);
+    props?.document.Recipient.length === 0 || props?.document.Recipient.every((e: any) => !e.email);
 
   function onPositionChangedHandler(position: any, id: any) {
     if (!position) return;
@@ -53,26 +53,16 @@ export default function PDFEditor(props: any) {
         <div hidden={!noRecipients} className="rounded-md bg-yellow-50 p-4">
           <div className="flex">
             <div className="flex-shrink-0">
-              <InformationCircleIcon
-                className="h-5 w-5 text-yellow-400"
-                aria-hidden="true"
-              />
+              <InformationCircleIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
             </div>
             <div className="ml-3 flex-1 md:flex md:justify-between">
               <p className="text-sm text-yellow-700">
-                This document does not have any recipients. Add recipients to
-                create fields.
+                This document does not have any recipients. Add recipients to create fields.
               </p>
               <p className="mt-3 text-sm md:mt-0 md:ml-6">
                 <Link
-                  href={
-                    NEXT_PUBLIC_WEBAPP_URL +
-                    "/documents/" +
-                    props.document.id +
-                    "/recipients"
-                  }
-                  className="whitespace-nowrap font-medium text-yellow-700 hover:text-yellow-600"
-                >
+                  href={NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id + "/recipients"}
+                  className="whitespace-nowrap font-medium text-yellow-700 hover:text-yellow-600">
                   Add Recipients
                   <span aria-hidden="true"> &rarr;</span>
                 </Link>
@@ -98,12 +88,10 @@ export default function PDFEditor(props: any) {
           }}
           onMouseDown={(e: any, page: number) => {
             if (e.button === 0) addField(e, page);
-          }}
-        ></PDFViewer>
+          }}></PDFViewer>
         <div
           hidden={noRecipients}
-          className="fixed left-0 top-1/3 max-w-xs border border-slate-300 bg-white py-4 pr-5 rounded-md"
-        >
+          className="fixed left-0 top-1/3 max-w-xs rounded-md border border-slate-300 bg-white py-4 pr-5">
           <RecipientSelector
             recipients={props?.document?.Recipient}
             onChange={setSelectedRecipient}
@@ -123,12 +111,7 @@ export default function PDFEditor(props: any) {
     if (!selectedFieldType) return;
     if (noRecipients) return;
 
-    const signatureField = createField(
-      e,
-      page,
-      selectedRecipient,
-      selectedFieldType
-    );
+    const signatureField = createField(e, page, selectedRecipient, selectedFieldType);
 
     createOrUpdateField(props?.document, signatureField).then((res) => {
       setFields((prevState) => [...prevState, res]);

apps/web/components/editor/pdf-signer.tsx

@@ -1,21 +1,15 @@
-import Logo from "../logo";
-import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
-import { useRouter } from "next/router";
+import { useEffect, useMemo, useState } from "react";
 import dynamic from "next/dynamic";
-import SignatureDialog from "./signature-dialog";
-import { useEffect, useState } from "react";
-import { Button } from "@documenso/ui";
-import {
-  CheckBadgeIcon,
-  InformationCircleIcon,
-} from "@heroicons/react/24/outline";
-import { FieldType } from "@prisma/client";
-import {
-  createOrUpdateField,
-  deleteField,
-  signDocument,
-} from "@documenso/lib/api";
+import { useRouter } from "next/router";
 import { createField } from "@documenso/features/editor";
+import { createOrUpdateField, deleteField, signDocument } from "@documenso/lib/api";
+import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
+import { Button } from "@documenso/ui";
+import Logo from "../logo";
+import NameDialog from "./name-dialog";
+import SignatureDialog from "./signature-dialog";
+import { CheckBadgeIcon, InformationCircleIcon } from "@heroicons/react/24/outline";
+import { FieldType } from "@prisma/client";
 
 const PDFViewer = dynamic(() => import("./pdf-viewer"), {
   ssr: false,
@@ -23,23 +17,62 @@ const PDFViewer = dynamic(() => import("./pdf-viewer"), {
 
 export default function PDFSigner(props: any) {
   const router = useRouter();
-  const [open, setOpen] = useState(false);
+  const [signatureDialogOpen, setSignatureDialogOpen] = useState(false);
+  const [nameDialogOpen, setNameDialogOpen] = useState(false);
   const [signingDone, setSigningDone] = useState(false);
   const [localSignatures, setLocalSignatures] = useState<any[]>([]);
   const [fields, setFields] = useState<any[]>(props.fields);
-  const signatureFields = fields.filter(
-    (field) => field.type === FieldType.SIGNATURE
+  const signatureFields = useMemo(
+    () => fields.filter((field) => [FieldType.SIGNATURE].includes(field.type)),
+    [fields]
   );
   const [dialogField, setDialogField] = useState<any>();
 
-  useEffect(() => {
-    setSigningDone(checkIfSigningIsDone());
-  }, [fields]);
+  function signField(options: {
+    fieldId: string;
+    type: string;
+    typedSignature?: string;
+    signatureImage?: string;
+  }) {
+    const { fieldId, type, typedSignature, signatureImage } = options;
+
+    const signature = {
+      fieldId,
+      type,
+      typedSignature,
+      signatureImage,
+    };
+
+    const field = fields.find((e) => e.id == fieldId);
+
+    if (!field) {
+      return;
+    }
+
+    setLocalSignatures((s) => [...s.filter((e) => e.fieldId !== fieldId), signature]);
+
+    setFields((prevState) => {
+      const newState = [...prevState];
+      const index = newState.findIndex((e) => e.id == fieldId);
+
+      newState[index] = {
+        ...newState[index],
+        signature,
+      };
+
+      return newState;
+    });
+  }
 
   function onClick(item: any) {
-    if (item.type === "SIGNATURE") {
+    if (item.type === FieldType.SIGNATURE) {
       setDialogField(item);
-      setOpen(true);
+      setSignatureDialogOpen(true);
+    }
+
+    if (item.type === FieldType.NAME) {
+      setDialogField(item);
+      setNameDialogOpen(true);
     }
   }
 
@@ -52,107 +85,18 @@ export default function PDFSigner(props: any) {
 
     if (!dialogResult) return;
 
-    const signature = {
+    signField({
       fieldId: dialogField.id,
       type: dialogResult.type,
       typedSignature: dialogResult.typedSignature,
       signatureImage: dialogResult.signatureImage,
-    };
+    });
 
-    setLocalSignatures(localSignatures.concat(signature));
-
-    fields.splice(
-      fields.findIndex(function (i) {
-        return i.id === signature.fieldId;
-      }),
-      1
-    );
-    const signedField = { ...dialogField };
-    signedField.signature = signature;
-    setFields((prevState) => [...prevState, signedField]);
-    setOpen(false);
+    setSignatureDialogOpen(false);
+    setNameDialogOpen(false);
     setDialogField(null);
   }
 
-  return (
-    <>
-      <SignatureDialog open={open} setOpen={setOpen} onClose={onDialogClose} />
-      <div className="bg-neon p-4">
-        <div className="flex">
-          <div className="flex-shrink-0">
-            <Logo className="h-12 w-12 -mt-2.5"></Logo>
-          </div>
-          <div className="ml-3 flex-1 md:flex md:justify-between text-center justify-start items-center">
-            <p className="text-lg text-slate-700">
-              {props.document.User.name
-                ? `${props.document.User.name} (${props.document.User.email})`
-                : props.document.User.email}{" "}
-              would like you to sign this document.
-            </p>
-            <p className="mt-3 text-sm md:mt-0 md:ml-6">
-              <Button
-                disabled={!signingDone}
-                color="secondary"
-                icon={CheckBadgeIcon}
-                className="float-right"
-                onClick={() => {
-                  signDocument(
-                    props.document,
-                    localSignatures,
-                    `${router.query.token}`
-                  ).then(() => {
-                    router.push(
-                      `/documents/${props.document.id}/signed?token=${router.query.token}`
-                    );
-                  });
-                }}
-              >
-                Done
-              </Button>
-            </p>
-          </div>
-        </div>
-      </div>
-      {signatureFields.length === 0 ? (
-        <div className="bg-yellow-50 p-4">
-          <div className="flex">
-            <div className="flex-shrink-0">
-              <InformationCircleIcon
-                className="h-5 w-5 text-yellow-400"
-                aria-hidden="true"
-              />
-            </div>
-            <div className="ml-3 flex-1 md:flex md:justify-between">
-              <p className="text-sm text-yellow-700">
-                You can sign this document anywhere you like, but maybe look for
-                a signature line.
-              </p>
-            </div>
-          </div>
-        </div>
-      ) : null}
-      <PDFViewer
-        style={{
-          cursor:
-            signatureFields.length === 0
-              ? `url("https://place-hold.it/110x64/37f095/ffffff&text=Signature") 55 32, auto`
-              : "",
-        }}
-        readonly={true}
-        document={props.document}
-        fields={fields}
-        pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}?token=${router.query.token}`}
-        onClick={onClick}
-        onMouseDown={function onMouseDown(e: any, page: number) {
-          if (signatureFields.length === 0)
-            addFreeSignature(e, page, props.recipient);
-        }}
-        onMouseUp={() => {}}
-        onDelete={onDeleteHandler}
-      ></PDFViewer>
-    </>
-  );
-
   function checkIfSigningIsDone(): boolean {
     // Check if all fields are signed..
     if (signatureFields.length > 0) {
@@ -161,26 +105,21 @@ export default function PDFSigner(props: any) {
         .filter((field) => field.type === FieldType.SIGNATURE)
         .every((field) => field.signature);
     } else {
-      return localSignatures.length > 0;
+      // If we don't have a signature field, we need at least one free signature
+      // to be able to complete signing
+      const freeSignatureFields = fields.filter((field) => field.type === FieldType.FREE_SIGNATURE);
+
+      return freeSignatureFields.length > 0 && freeSignatureFields.every((field) => field.signature);
     }
   }
 
   function addFreeSignature(e: any, page: number, recipient: any): any {
-    const freeSignatureField = createField(
-      e,
-      page,
-      recipient,
-      FieldType.FREE_SIGNATURE
-    );
+    const freeSignatureField = createField(e, page, recipient, FieldType.FREE_SIGNATURE);
 
-    createOrUpdateField(
-      props.document,
-      freeSignatureField,
-      recipient.token
-    ).then((res) => {
+    createOrUpdateField(props.document, freeSignatureField, recipient.token).then((res) => {
       setFields((prevState) => [...prevState, res]);
       setDialogField(res);
-      setOpen(true);
+      setSignatureDialogOpen(true);
     });
 
     return freeSignatureField;
@@ -209,4 +148,107 @@ export default function PDFSigner(props: any) {
       });
     }
   }
+
+  useEffect(() => {
+    setSigningDone(checkIfSigningIsDone());
+  }, [fields]);
+
+  useEffect(() => {
+    const nameFields = fields.filter((field) => field.type === FieldType.NAME);
+
+    if (nameFields.length > 0) {
+      nameFields.forEach((field) => {
+        if (!field.signature && props.recipient?.name) {
+          signField({
+            fieldId: field.id,
+            type: "type",
+            typedSignature: props.recipient.name,
+          });
+        }
+      });
+    }
+    // We are intentionally not specifying deps here
+    // because we want to run this effect on the initial render
+  }, []);
+
+  return (
+    <>
+      <SignatureDialog
+        open={signatureDialogOpen}
+        setOpen={setSignatureDialogOpen}
+        onClose={onDialogClose}
+      />
+
+      <NameDialog
+        open={nameDialogOpen}
+        setOpen={setNameDialogOpen}
+        onClose={onDialogClose}
+        defaultName={props.recipient?.name ?? ""}
+      />
+
+      <div className="bg-neon p-4">
+        <div className="flex">
+          <div className="flex-shrink-0">
+            <Logo className="-mt-2.5 h-12 w-12"></Logo>
+          </div>
+          <div className="ml-3 flex-1 items-center justify-start text-center md:flex md:justify-between">
+            <p className="text-lg text-slate-700">
+              {props.document.User.name
+                ? `${props.document.User.name} (${props.document.User.email})`
+                : props.document.User.email}{" "}
+              would like you to sign this document.
+            </p>
+            <p className="mt-3 text-sm md:mt-0 md:ml-6 text-right md:text-inherit">
+              <Button
+                disabled={!signingDone}
+                color="secondary"
+                icon={CheckBadgeIcon}
+                onClick={() => {
+                  signDocument(props.document, localSignatures, `${router.query.token}`).then(
+                    () => {
+                      router.push(
+                        `/documents/${props.document.id}/signed?token=${router.query.token}`
+                      );
+                    }
+                  );
+                }}>
+                Done
+              </Button>
+            </p>
+          </div>
+        </div>
+      </div>
+      {signatureFields.length === 0 ? (
+        <div className="bg-yellow-50 p-4">
+          <div className="flex">
+            <div className="flex-shrink-0">
+              <InformationCircleIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
+            </div>
+            <div className="ml-3 flex-1 md:flex md:justify-between">
+              <p className="text-sm text-yellow-700">
+                You can sign this document anywhere you like, but maybe look for a signature line.
+              </p>
+            </div>
+          </div>
+        </div>
+      ) : null}
+      <PDFViewer
+        style={{
+          cursor:
+            signatureFields.length === 0
+              ? `url("https://place-hold.it/110x64/37f095/ffffff&text=Signature") 55 32, auto`
+              : "",
+        }}
+        readonly={true}
+        document={props.document}
+        fields={fields}
+        pdfUrl={`${NEXT_PUBLIC_WEBAPP_URL}/api/documents/${router.query.id}?token=${router.query.token}`}
+        onClick={onClick}
+        onMouseDown={function onMouseDown(e: any, page: number) {
+          if (signatureFields.length === 0) addFreeSignature(e, page, props.recipient);
+        }}
+        onMouseUp={() => {}}
+        onDelete={onDeleteHandler}></PDFViewer>
+    </>
+  );
 }

apps/web/components/editor/pdf-viewer.jsx

@@ -1,9 +1,9 @@
 import { Fragment, useState } from "react";
-import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
 import EditableField from "./editable-field";
 import SignableField from "./signable-field";
-import short from "short-uuid";
 import { FieldType } from "@prisma/client";
+import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
+import short from "short-uuid";
 
 export default function PDFViewer(props) {
   const [numPages, setNumPages] = useState(null);
@@ -33,16 +33,14 @@ export default function PDFViewer(props) {
       <div
         hidden={loading}
         onMouseUp={props.onMouseUp}
-        style={{ height: numPages * pageHeight + 1000 }}
-      >
-        <div className="max-w-xs mt-6"></div>
+        style={{ height: numPages * pageHeight + 1000 }}>
+        <div className="mt-6 max-w-xs"></div>
         <Document
           file={props.pdfUrl}
           onLoadSuccess={onDocumentLoadSuccess}
           options={options}
           renderMode="canvas"
-          className="absolute w-auto mx-auto left-0 right-0"
-        >
+          className="absolute left-0 right-0 mx-auto w-auto">
           {Array.from({ length: numPages }, (_, index) => (
             <Fragment key={short.generate().toString()}>
               <div
@@ -57,8 +55,7 @@ export default function PDFViewer(props) {
                   position: "relative",
                   ...props.style,
                 }}
-                className="mx-auto w-fit"
-              >
+                className="mx-auto w-fit">
                 <Page
                   className="mt-5"
                   key={`page_${index + 1}`}
@@ -69,8 +66,7 @@ export default function PDFViewer(props) {
                     if (e.height) setPageHeight(e.height);
                     setLoading(false);
                   }}
-                  onRenderError={() => setLoading(false)}
-                ></Page>
+                  onRenderError={() => setLoading(false)}></Page>
                 {props?.fields
                   .filter((field) => field.page === index)
                   .map((field) =>
@@ -80,8 +76,7 @@ export default function PDFViewer(props) {
                         key={field.id}
                         field={field}
                         className="absolute"
-                        onDelete={onDeleteHandler}
-                      ></SignableField>
+                        onDelete={onDeleteHandler}></SignableField>
                     ) : (
                       <EditableField
                         hidden={
@@ -93,8 +88,7 @@ export default function PDFViewer(props) {
                         field={field}
                         className="absolute"
                         onPositionChanged={onPositionChangedHandler}
-                        onDelete={onDeleteHandler}
-                      ></EditableField>
+                        onDelete={onDeleteHandler}></EditableField>
                     )
                   )}
               </div>

apps/web/components/editor/recipient-selector.tsx

@@ -1,13 +1,12 @@
 import { Fragment, useEffect, useState } from "react";
+import { classNames } from "@documenso/lib";
 import { Listbox, Transition } from "@headlessui/react";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/24/outline";
-import { classNames } from "@documenso/lib";
+
 const stc = require("string-to-color");
 
 export default function RecipientSelector(props: any) {
-  const [selectedRecipient, setSelectedRecipient]: any = useState(
-    props?.recipients[0]
-  );
+  const [selectedRecipient, setSelectedRecipient]: any = useState(props?.recipients[0]);
 
   useEffect(() => {
     props.onChange(selectedRecipient);
@@ -18,11 +17,10 @@ export default function RecipientSelector(props: any) {
       value={selectedRecipient}
       onChange={(e: any) => {
         setSelectedRecipient(e);
-      }}
-    >
+      }}>
       {({ open }) => (
         <div className="relative mt-1 mb-2">
-          <Listbox.Button className="select-none relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left focus:border-neon focus:outline-none focus:ring-1 focus:ring-neon sm:text-sm">
+          <Listbox.Button className="focus:border-neon focus:ring-neon relative w-full cursor-default select-none rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-1 sm:text-sm">
             <span className="flex items-center">
               <span
                 className="inline-block h-4 w-4 flex-shrink-0 rounded-full"
@@ -33,10 +31,7 @@ export default function RecipientSelector(props: any) {
               </span>
             </span>
             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-              <ChevronUpDownIcon
-                className="h-5 w-5 text-gray-400"
-                aria-hidden="true"
-              />
+              <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
             </span>
           </Listbox.Button>
 
@@ -45,20 +40,19 @@ export default function RecipientSelector(props: any) {
             as={Fragment}
             leave="transition ease-in duration-100"
             leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
+            leaveTo="opacity-0">
             <Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
               {props?.recipients.map((recipient: any) => (
                 <Listbox.Option
                   key={recipient?.id}
+                  disabled={!recipient?.email}
                   className={({ active }) =>
                     classNames(
-                      active ? "text-white bg-neon-dark" : "text-gray-900",
-                      "relative cursor-default select-none py-2 pl-3 pr-9"
+                      active ? "bg-neon-dark text-white" : "text-gray-900",
+                      "relative cursor-default select-none py-2 pl-3 pr-9 aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"
                     )
                   }
-                  value={recipient}
-                >
+                  value={recipient}>
                   {({ selected, active }) => (
                     <>
                       <div className="flex items-center">
@@ -72,9 +66,8 @@ export default function RecipientSelector(props: any) {
                           className={classNames(
                             selected ? "font-semibold" : "font-normal",
                             "ml-3 block truncate"
-                          )}
-                        >
-                          {`${selectedRecipient?.name} <${selectedRecipient?.email}>`}
+                          )}>
+                          {`${recipient?.name} <${recipient?.email || 'unknown'}>`}
                         </span>
                       </div>
 
@@ -83,9 +76,8 @@ export default function RecipientSelector(props: any) {
                           className={classNames(
                             active ? "text-white" : "text-neon-dark",
                             "absolute inset-y-0 right-0 flex items-center pr-4"
-                          )}
-                        >
-                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                          )}>
+                          <CheckIcon className="h-5 w-5" strokeWidth={3} aria-hidden="true" />
                         </span>
                       ) : null}
                     </>

apps/web/components/editor/signable-field.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from "react";
-import Draggable from "react-draggable";
+import { classNames } from "@documenso/lib";
 import { IconButton } from "@documenso/ui";
 import { XCircleIcon } from "@heroicons/react/20/solid";
-import { classNames } from "@documenso/lib";
+import { FieldType } from "@prisma/client";
+import Draggable from "react-draggable";
+
 const stc = require("string-to-color");
 
 type FieldPropsType = {
@@ -37,31 +39,33 @@ export default function SignableField(props: FieldPropsType) {
       onMouseDown={(e: any) => {
         // e.preventDefault();
         e.stopPropagation();
-      }}
-    >
+      }}>
       <div
         onClick={(e: any) => {
           if (!field?.signature) props.onClick(props.field);
         }}
         ref={nodeRef}
         className={classNames(
-          "opacity-80 m-auto w-48 h-16 flex-row-reverse text-lg font-bold text-center absolute top-0 left-0 select-none",
-          field.type === "SIGNATURE"
+          "absolute top-0 left-0 m-auto h-16 w-48 select-none flex-row-reverse text-center text-lg font-bold opacity-80",
+          [FieldType.SIGNATURE, FieldType.NAME].includes(field.type)
             ? "cursor-pointer hover:brightness-50"
             : "cursor-not-allowed"
         )}
         style={{
           background: stc(props.field.Recipient.email),
-        }}
-      >
-        <div hidden={field?.signature} className="font-medium my-4">
+        }}>
+        <div hidden={field?.signature} className="my-4 font-medium">
           {field.type === "SIGNATURE" ? "SIGN HERE" : ""}
           {field.type === "DATE" ? <small>Date (filled on sign)</small> : ""}
+          {field.type === "NAME" ? "ENTER NAME HERE" : ""}
         </div>
         <div
           hidden={!field?.signature}
-          className="font-qwigley text-5xl m-auto w-auto flex-row-reverse font-medium text-center"
-        >
+          className={classNames(
+            "m-auto w-auto flex-row-reverse text-center font-medium",
+            field.type === FieldType.SIGNATURE && "font-qwigley text-5xl",
+            field.type === FieldType.NAME && "font-sans text-3xl"
+          )}>
           {field?.signature?.type === "type" ? (
             <div className="my-4">{field?.signature.typedSignature}</div>
           ) : (
@@ -69,7 +73,7 @@ export default function SignableField(props: FieldPropsType) {
           )}
 
           {field?.signature?.type === "draw" ? (
-            <img className="w-48 h-16" src={field?.signature?.signatureImage} />
+            <img className="h-16 w-48" src={field?.signature?.signatureImage} />
           ) : (
             ""
           )}

apps/web/components/editor/signature-dialog.tsx

@@ -1,14 +1,11 @@
+import { Fragment, useEffect, useState } from "react";
 import { classNames } from "@documenso/lib";
+import { localStorage } from "@documenso/lib";
 import { Button, IconButton } from "@documenso/ui";
 import { Dialog, Transition } from "@headlessui/react";
-import {
-  LanguageIcon,
-  PencilIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-import { Fragment, useEffect, useState } from "react";
+import { LanguageIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
 import SignatureCanvas from "react-signature-canvas";
-import { localStorage } from "@documenso/lib";
+import { useDebouncedValue } from "../../hooks/use-debounced-value";
 
 const tabs = [
   { name: "Type", icon: LanguageIcon, current: true },
@@ -19,6 +16,9 @@ export default function SignatureDialog(props: any) {
   const [currentTab, setCurrentTab] = useState(tabs[0]);
   const [typedSignature, setTypedSignature] = useState("");
   const [signatureEmpty, setSignatureEmpty] = useState(true);
+  // This is a workaround to prevent the canvas from being rendered when the dialog is closed
+  // we also need the debounce to avoid rendering while transitions are occuring.
+  const showCanvas = useDebouncedValue<boolean>(props.open, 1);
   let signCanvasRef: any | undefined;
 
   useEffect(() => {
@@ -34,8 +34,7 @@ export default function SignatureDialog(props: any) {
           onClose={() => {
             props.setOpen(false);
             setCurrent(tabs[0]);
-          }}
-        >
+          }}>
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -43,8 +42,7 @@ export default function SignatureDialog(props: any) {
             enterTo="opacity-100"
             leave="ease-in duration-200"
             leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
+            leaveTo="opacity-0">
             <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
           </Transition.Child>
 
@@ -57,11 +55,10 @@ export default function SignatureDialog(props: any) {
                 enterTo="opacity-100 translate-y-0 sm:scale-100"
                 leave="ease-in duration-200"
                 leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <Dialog.Panel className="min-h-[350px] relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+                <Dialog.Panel className="relative min-h-[350px] transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
                   <div className="">
-                    <div className="border-b border-gray-200 mb-3">
+                    <div className="mb-3 border-b border-gray-200">
                       <nav className="-mb-px flex space-x-8" aria-label="Tabs">
                         {tabs.map((tab) => (
                           <a
@@ -72,11 +69,10 @@ export default function SignatureDialog(props: any) {
                             className={classNames(
                               tab.current
                                 ? "border-neon text-neon"
-                                : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-                              "group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm cursor-pointer"
+                                : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+                              "group inline-flex cursor-pointer items-center border-b-2 py-4 px-1 text-sm font-medium"
                             )}
-                            aria-current={tab.current ? "page" : undefined}
-                          >
+                            aria-current={tab.current ? "page" : undefined}>
                             <tab.icon
                               className={classNames(
                                 tab.current
@@ -93,7 +89,7 @@ export default function SignatureDialog(props: any) {
                     </div>
                     {isCurrentTab("Type") ? (
                       <div>
-                        <div className="my-8 border-b border-gray-300 mb-3">
+                        <div className="my-7 mb-3 border-b border-gray-300">
                           <input
                             value={typedSignature}
                             onChange={(e) => {
@@ -101,36 +97,31 @@ export default function SignatureDialog(props: any) {
                             }}
                             className={classNames(
                               typedSignature ? "font-qwigley text-4xl" : "",
-                              "leading-none h-10 align-bottom mt-14 text-center block w-full focus:border-neon focus:ring-neon text-2xl"
+                              "focus:border-neon focus:ring-neon mt-14 block h-10 w-full text-center align-bottom text-2xl leading-none"
                             )}
                             placeholder="Kindly type your name"
                           />
                         </div>
-                        <div className="float-right">
+                        <div className="flex flex-row-reverse items-center gap-x-3">
                           <Button
                             color="secondary"
                             onClick={() => {
                               props.onClose();
                               props.setOpen(false);
                               setCurrent(tabs[0]);
-                            }}
-                          >
+                            }}>
                             Cancel
                           </Button>
                           <Button
                             className="ml-3"
                             disabled={!typedSignature}
                             onClick={() => {
-                              localStorage.setItem(
-                                "typedSignature",
-                                typedSignature
-                              );
+                              localStorage.setItem("typedSignature", typedSignature);
                               props.onClose({
                                 type: "type",
                                 typedSignature: typedSignature,
                               });
-                            }}
-                          >
+                            }}>
                             Sign
                           </Button>
                         </div>
@@ -139,52 +130,55 @@ export default function SignatureDialog(props: any) {
                       ""
                     )}
                     {isCurrentTab("Draw") ? (
-                      <div className="">
-                        <SignatureCanvas
-                          ref={(ref) => {
-                            signCanvasRef = ref;
-                          }}
-                          canvasProps={{
-                            className:
-                              "sigCanvas border-b b-2 border-slate w-full h-full mb-3",
-                          }}
-                          clearOnResize={true}
-                          onEnd={() => {
-                            setSignatureEmpty(signCanvasRef?.isEmpty());
-                          }}
-                        />
-                        <IconButton
-                          className="block float-left"
-                          icon={TrashIcon}
-                          onClick={() => {
-                            signCanvasRef?.clear();
-                            setSignatureEmpty(signCanvasRef?.isEmpty());
-                          }}
-                        ></IconButton>
-                        <div className="mt-10 float-right">
-                          <Button
-                            color="secondary"
-                            onClick={() => {
-                              props.onClose();
-                              props.setOpen(false);
-                              setCurrent(tabs[0]);
+                      <div className="" key={props.open ? "closed" : "open"}>
+                        {showCanvas && (
+                          <SignatureCanvas
+                            ref={(ref) => {
+                              signCanvasRef = ref;
                             }}
-                          >
-                            Cancel
-                          </Button>
-                          <Button
-                            className="ml-3"
-                            onClick={() => {
-                              props.onClose({
-                                type: "draw",
-                                signatureImage:
-                                  signCanvasRef.toDataURL("image/png"),
-                              });
+                            canvasProps={{
+                              className: "sigCanvas border-b b-2 border-slate w-full h-full mb-3",
                             }}
-                            disabled={signatureEmpty}
-                          >
-                            Sign
-                          </Button>
+                            clearOnResize={true}
+                            onEnd={() => {
+                              setSignatureEmpty(signCanvasRef?.isEmpty());
+                            }}
+                          />
+                        )}
+                        
+                        <div className="flex items-center justify-between">
+                          <IconButton
+                            className="block"
+                            icon={TrashIcon}
+                            onClick={() => {
+                              signCanvasRef?.clear();
+                              setSignatureEmpty(signCanvasRef?.isEmpty());
+                            }}
+                          />
+
+                          <div className="flex flex-row-reverse items-center gap-x-3">
+                            <Button
+                              color="secondary"
+                              onClick={() => {
+                                props.onClose();
+                                props.setOpen(false);
+                                setCurrent(tabs[0]);
+                              }}>
+                              Cancel
+                            </Button>
+
+                            <Button
+                              className="ml-3"
+                              onClick={() => {
+                                props.onClose({
+                                  type: "draw",
+                                  signatureImage: signCanvasRef.toDataURL("image/png"),
+                                });
+                              }}
+                              disabled={signatureEmpty}>
+                              Sign
+                            </Button>
+                          </div>
                         </div>
                       </div>
                     ) : (
@@ -200,11 +194,11 @@ export default function SignatureDialog(props: any) {
     </>
   );
 
-      function isCurrentTab(tabName: string): boolean {
+  function isCurrentTab(tabName: string): boolean {
     return currentTab.name === tabName;
   }
 
-        function setCurrent(t: any) {
+  function setCurrent(t: any) {
     tabs.forEach((tab) => {
       tab.current = tab.name === t.name;
     });

apps/web/components/layout.tsx

@@ -1,9 +1,13 @@
 import { useEffect } from "react";
+import Link from "next/link";
 import { useRouter } from "next/router";
-import { useSession } from "next-auth/react";
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
-
+import { useSubscription } from "@documenso/lib/stripe";
 import Navigation from "./navigation";
+import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
+import { SubscriptionStatus } from "@prisma/client";
+import { useSession } from "next-auth/react";
+import { BillingWarning } from "./billing-warning";
 
 function useRedirectToLoginIfUnauthenticated() {
   const { data: session, status } = useSession();
@@ -31,11 +35,16 @@ function useRedirectToLoginIfUnauthenticated() {
 export default function Layout({ children }: any) {
   useRedirectToLoginIfUnauthenticated();
 
+  const { subscription } = useSubscription();
+
   return (
     <>
       <div className="min-h-full">
-        <Navigation></Navigation>
+        <Navigation />
+
         <main>
+          <BillingWarning />
+
           <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">{children}</div>
         </main>
       </div>

apps/web/components/login.tsx

@@ -1,14 +1,13 @@
-import { LockClosedIcon } from "@heroicons/react/20/solid";
-import Link from "next/link";
-import { FormProvider, useForm } from "react-hook-form";
-
-import Logo from "./logo";
-import { signIn } from "next-auth/react";
 import { useState } from "react";
+import Link from "next/link";
 import { useRouter } from "next/router";
-import { toast } from "react-hot-toast";
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
 import { Button } from "@documenso/ui";
+import Logo from "./logo";
+import { LockClosedIcon } from "@heroicons/react/20/solid";
+import { signIn } from "next-auth/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { toast } from "react-hot-toast";
 
 interface LoginValues {
   email: string;
@@ -22,10 +21,7 @@ export default function Login(props: any) {
   const methods = useForm<LoginValues>();
   const { register, formState } = methods;
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  let callbackUrl =
-    typeof router.query?.callbackUrl === "string"
-      ? router.query.callbackUrl
-      : "";
+  let callbackUrl = typeof router.query?.callbackUrl === "string" ? router.query.callbackUrl : "";
 
   // If not absolute URL, make it absolute
   if (!/^https?:\/\//.test(callbackUrl)) {
@@ -79,10 +75,7 @@ export default function Login(props: any) {
             </h2>
           </div>
           <FormProvider {...methods}>
-            <form
-              className="mt-8 space-y-6"
-              onSubmit={methods.handleSubmit(onSubmit)}
-            >
+            <form className="mt-8 space-y-6" onSubmit={methods.handleSubmit(onSubmit)}>
               <input type="hidden" name="remember" defaultValue="true" />
               <div className="-space-y-px rounded-md shadow-sm">
                 <div>
@@ -96,7 +89,7 @@ export default function Login(props: any) {
                     type="email"
                     autoComplete="email"
                     required
-                    className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
+                    className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
                     placeholder="Email"
                   />
                 </div>
@@ -111,14 +104,14 @@ export default function Login(props: any) {
                     type="password"
                     autoComplete="current-password"
                     required
-                    className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
+                    className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
                     placeholder="Password"
                   />
                 </div>
               </div>
               <div className="flex items-center justify-between">
                 <div className="text-sm">
-                  <a href="#" className="font-medium text-neon hover:text-neon">
+                  <a href="#" className="text-gray-500 hover:text-neon-700 font-medium">
                     Forgot your password?
                   </a>
                 </div>
@@ -127,11 +120,10 @@ export default function Login(props: any) {
                 <Button
                   type="submit"
                   disabled={formState.isSubmitting}
-                  className="group relative flex w-full"
-                >
+                  className="group relative flex w-full">
                   <span className="absolute inset-y-0 left-0 flex items-center pl-3">
                     <LockClosedIcon
-                      className="h-5 w-5 text-neon-dark group-hover:text-neon disabled:group-hover:bg-gray-600 disabled:disabled:bg-gray-600"
+                      className="text-neon-700 group-hover:text-neon-dark-700 h-5 w-5 disabled:disabled:bg-gray-600 disabled:group-hover:bg-gray-600 duration-200"
                       aria-hidden="true"
                     />
                   </span>
@@ -140,10 +132,7 @@ export default function Login(props: any) {
               </div>
               <div>
                 <div className="relative">
-                  <div
-                    className="absolute inset-0 flex items-center"
-                    aria-hidden="true"
-                  >
+                  <div className="absolute inset-0 flex items-center" aria-hidden="true">
                     <div className="w-full border-t border-gray-300" />
                   </div>
                   <div className="relative flex justify-center"></div>
@@ -152,10 +141,7 @@ export default function Login(props: any) {
               {props.allowSignup ? (
                 <p className="mt-2 text-center text-sm text-gray-600">
                   Are you new here?{" "}
-                  <Link
-                    href="/signup"
-                    className="font-medium text-neon hover:text-neon"
-                  >
+                  <Link href="/signup" className="text-gray-500 hover:text-neon-700 duration-200 font-medium">
                     Create a new Account
                   </Link>
                 </p>
@@ -164,9 +150,8 @@ export default function Login(props: any) {
                   Like Documenso{" "}
                   <Link
                     href="https://documenso.com"
-                    className="font-medium text-neon hover:text-neon"
-                  >
-                    Hosted Documenso will be availible soon™
+                    className="text-neon hover:text-neon font-medium">
+                    Hosted Documenso will be available soon™
                   </Link>
                 </p>
               )}

apps/web/components/logo.tsx

@@ -1,25 +1,16 @@
-import { classNames } from "@documenso/lib";
 import Link from "next/link";
+import { classNames } from "@documenso/lib";
 
 export default function Logo(props: any) {
   return (
     <>
       <Link href="/dashboard">
-        <svg
-          className="w-12"
-          viewBox="0 0 88.6758041381836 32.18000030517578"
-          {...props}
-        >
-          <rect
-            width="88.6758041381836"
-            height="32.18000030517578"
-            fill="transparent"
-          ></rect>
+        <svg className="w-12" viewBox="0 0 88.6758041381836 32.18000030517578" {...props}>
+          <rect width="88.6758041381836" height="32.18000030517578" fill="transparent"></rect>
           <g transform="matrix(1,0,0,1,-25.98720359802246,-66.41200256347656)">
             <path
               d="M99.004,68.26l-.845-1.848-23.226,2.299c-1.437,.142-2.876,.089-4.3-.156-2.949-.51-6.32-1.717-9.073-2.099-1.477-.206-2.934,.448-3.789,1.67-1.174,1.678-2.308,3.888-3.501,5.622-1.518,2.207-3.032,4.418-4.531,6.638-1.693,2.499-3.365,5.013-5.061,7.51-.103,.153-.333,.221-.503,.329-.079-.279-.306-.636-.206-.824,1.006-1.928,1.845-4,3.165-5.694,1.908-2.449,2.914-5.445,5.007-7.745,.342-.777,.845-1.466,1.151-2.244,.915-2.341-1.295-5.305-2.935-5.305h-.613c-1.196,0-2.526,.357-4.092,1.716-.986,.856-2.391,2.432-2.97,3.326-3.424,5.286-7.177,10.382-10.15,15.932-.365,.682-1.719,3.722-2.013,3.606-.214-.077-.159-.458-.041-.823,1.312-4.065,4.163-9.851,5.843-13.777,.41-.962,.635-1.516-.305-2.361-1.016-.913-2.669,.084-3.084,1.052-1.784,4.174-2.631,8.08-4.038,12.396-.466,1.43-.916,2.865-1.386,4.294-.273,.831-.548,1.661-.836,2.488-.112,.321-.226,.642-.345,.962-.032,.082-.064,.165-.095,.248-.006,.011-.003,.002-.009,.017-.005,.008-.003,.015-.006,.023-.011,.026-.021,.05-.03,.076-.024,.067-.012,.044,.009-.002-.691,1.577,.417,3.002,2.091,3.002,.808,0,1.552-1.431,1.943-2.055,1.224-1.957,3.28-5.125,4.36-7.163,.894-1.69,2.078-3.14,3.209-4.615,1.857-2.42,3.065-5.242,5.025-7.575,.33-.394,.694-.772,1.093-1.093,.121-.098,.473-.05,.618,.062,.124,.098,.2,.432,.127,.577-.397,.788-.863,1.542-1.278,2.322-1.481,2.79-2.953,5.582-4.425,8.377-1.16,2.204-2.659,5.055-3.551,6.755-.438,.833-.176,1.857,.604,2.382,0,0-.383,2.028,1.908,2.028,1.896,0,2.711-1.145,3.053-1.624,.348-.486,.748-.951,1.202-1.334,.151-.13,.563-.018,.821,.079,.076,.029,.085,.406,.03,.582-.398,1.272-.323,2.283,1.879,2.283,.784,0,2.218-1.283,2.904-2.213,.794-1.075,.731-1.1,1.415-2.244,1.678-2.821,3.132-5.055,4.751-7.91,1.083-1.91,2.175-3.854,3.294-5.516,.685-1.015,1.446-1.252,2.188-1.252s.409,.686,.336,1.025c-.071,.341-.677,1.545-2.531,4.35-1.115,1.687-2.244,3.367-3.308,5.084-1.075,1.736-2.141,3.48-3.205,5.225-.88,1.445,.162,3.467,1.854,3.467h2.765c2.653,0,5.302-.397,7.916-.851l7.41-1.287c1.421-.245,2.868-.298,4.303-.158l23.161,2.296,.845-1.849c4.61-9.858,15.211-11.322,15.66-11.38v-5.717c-.448-.058-11.05-1.522-15.66-11.381Zm-40.143,6.165c-.164,.465-.491,.922-.86,1.255-.918,.828-1.451,1.842-1.911,2.977-.512,1.269-1.829,2.119-1.966,3.65-.027,.3-.627,.577-1.006,.797-.109,.062-.357-.114-.524-.174,.015-.229-.024-.401,.039-.515,.848-1.495,1.678-3.002,2.584-4.462,.775-1.254,1.642-2.453,2.469-3.677,.085-.126,.158-.273,.27-.365,.457-.368,.93-.719,1.399-1.075,.497,.721-.312,1.071-.494,1.589Zm30.047,12.011c1.736,0,3.162-1.137,3.686-2.693h10.547c-3.02,1.916-6.1,4.684-8.402,8.716l-21.902-2.17v-15.584l21.902-2.167c2.302,4.032,5.382,6.802,8.402,8.714h-10.547c-.524-1.554-1.951-2.691-3.686-2.691-2.172,0-3.938,1.763-3.938,3.938s1.766,3.938,3.938,3.938Z"
-              className={classNames(props.dark ? "fill-white" : "fill-brown")}
-            ></path>
+              className={classNames(props.dark ? "fill-white" : "fill-brown")}></path>
           </g>
         </svg>
       </Link>

apps/web/components/navigation.tsx

@@ -1,23 +1,22 @@
 import { Fragment, useEffect, useState } from "react";
-import { Disclosure, Menu, Transition } from "@headlessui/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { signOut, useSession } from "next-auth/react";
-import avatarFromInitials from "avatar-from-initials";
-import { toast } from "react-hot-toast";
-
+import { getUser } from "@documenso/lib/api";
+import Logo from "./logo";
+import { Disclosure, Menu, Transition } from "@headlessui/react";
 import {
+  ArrowRightOnRectangleIcon,
   Bars3Icon,
   BellIcon,
-  XMarkIcon,
-  UserCircleIcon,
-  ArrowRightOnRectangleIcon,
-  DocumentTextIcon,
   ChartBarIcon,
+  DocumentTextIcon,
+  UserCircleIcon,
   WrenchIcon,
+  XMarkIcon,
 } from "@heroicons/react/24/outline";
-import Logo from "./logo";
-import { getUser } from "@documenso/lib/api";
+import avatarFromInitials from "avatar-from-initials";
+import { signOut, useSession } from "next-auth/react";
+import { toast } from "react-hot-toast";
 
 const navigation = [
   {
@@ -125,14 +124,12 @@ export default function TopNavigation() {
                           item.current
                             ? "border-neon text-brown"
                             : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
-                          "inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+                          "inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
                         )}
-                        aria-current={item.current ? "page" : undefined}
-                      >
+                        aria-current={item.current ? "page" : undefined}>
                         <item.icon
-                          className="flex-shrink-0 -ml-1 mr-3 h-6 w-6 inline"
-                          aria-hidden="true"
-                        ></item.icon>
+                          className="-ml-1 mr-3 inline h-6 w-6 flex-shrink-0"
+                          aria-hidden="true"></item.icon>
                         {item.name}
                       </Link>
                     ))}
@@ -142,8 +139,7 @@ export default function TopNavigation() {
                   onClick={() => {
                     document?.getElementById("mb")?.click();
                   }}
-                  className="hidden sm:ml-6 sm:flex sm:items-center hover:bg-gray-200 px-3 cursor-pointer"
-                >
+                  className="hidden cursor-pointer px-3 hover:bg-gray-200 sm:ml-6 sm:flex sm:items-center">
                   <span className="text-sm">
                     <p className="font-bold">{user?.name || ""}</p>
                     <p>{user?.email}</p>
@@ -152,8 +148,7 @@ export default function TopNavigation() {
                     <div>
                       <Menu.Button
                         id="mb"
-                        className="flex max-w-xs items-center rounded-full bg-white text-sm"
-                      >
+                        className="flex max-w-xs items-center rounded-full bg-white text-sm">
                         <span className="sr-only">Open user menu</span>
                         <div
                           key={user?.email}
@@ -170,8 +165,7 @@ export default function TopNavigation() {
                       enterTo="transform opacity-100 scale-100"
                       leave="transition ease-in duration-75"
                       leaveFrom="transform opacity-100 scale-100"
-                      leaveTo="transform opacity-0 scale-95"
-                    >
+                      leaveTo="transform opacity-0 scale-95">
                       <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                         {userNavigation.map((item) => (
                           <Menu.Item key={item.name}>
@@ -182,12 +176,10 @@ export default function TopNavigation() {
                                 className={classNames(
                                   active ? "bg-gray-100" : "",
                                   "block px-4 py-2 text-sm text-gray-700"
-                                )}
-                              >
+                                )}>
                                 <item.icon
-                                  className="flex-shrink-0 -ml-1 mr-3 h-6 w-6 inline"
-                                  aria-hidden="true"
-                                ></item.icon>
+                                  className="-ml-1 mr-3 inline h-6 w-6 flex-shrink-0"
+                                  aria-hidden="true"></item.icon>
                                 {item.name}
                               </Link>
                             )}
@@ -219,15 +211,14 @@ export default function TopNavigation() {
                     href={item.href}
                     className={classNames(
                       item.current
-                        ? "bg-teal-50 border-teal-500 text-teal-700"
-                        : "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800",
-                      "block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
+                        ? "border-teal-500 bg-teal-50 text-teal-700"
+                        : "border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800",
+                      "block border-l-4 py-2 pl-3 pr-4 text-base font-medium"
                     )}
                     aria-current={item.current ? "page" : undefined}
                     onClick={() => {
                       close();
-                    }}
-                  >
+                    }}>
                     {item.name}
                   </Link>
                 ))}
@@ -259,8 +250,7 @@ export default function TopNavigation() {
                           : item.click
                       }
                       href={item.href}
-                      className="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
-                    >
+                      className="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">
                       {item.name}
                     </Link>
                   ))}

apps/web/components/settings.tsx

@@ -1,12 +1,15 @@
 import { ChangeEvent, useEffect, useState } from "react";
-import { KeyIcon, UserCircleIcon } from "@heroicons/react/24/outline";
-import { useRouter } from "next/router";
-import Link from "next/link";
 import Head from "next/head";
-import { useSession } from "next-auth/react";
+import Link from "next/link";
+import { useRouter } from "next/router";
 import { updateUser } from "@documenso/features";
-import { Button } from "@documenso/ui";
 import { getUser } from "@documenso/lib/api";
+import { fetchPortalSession, isSubscriptionsEnabled, useSubscription } from "@documenso/lib/stripe";
+import { Button } from "@documenso/ui";
+import { BillingPlans } from "./billing-plans";
+import { CreditCardIcon, KeyIcon, UserCircleIcon } from "@heroicons/react/24/outline";
+import { SubscriptionStatus } from "@prisma/client";
+import { useSession } from "next-auth/react";
 
 const subNavigation = [
   {
@@ -20,20 +23,29 @@ const subNavigation = [
     href: "/settings/password",
     icon: KeyIcon,
     current: false,
-  },
+  }
 ];
 
+if (process.env.NEXT_PUBLIC_ALLOW_SUBSCRIPTIONS === "true") {
+  subNavigation.push({
+    name: "Billing",
+    href: "/settings/billing",
+    icon: CreditCardIcon,
+    current: false,
+  });
+}
+
 function classNames(...classes: any) {
   return classes.filter(Boolean).join(" ");
 }
 
 export default function Setttings() {
   const session = useSession();
+  const { subscription, hasSubscription } = useSubscription();
   const [user, setUser] = useState({
     email: "",
     name: "",
   });
-
   useEffect(() => {
     getUser().then((res: any) => {
       res.json().then((j: any) => {
@@ -74,15 +86,12 @@ export default function Setttings() {
       </Head>
       <header className="py-10">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <h1 className="text-3xl font-bold leading-tight tracking-tight text-brown">
-            Settings
-          </h1>
+          <h1 className="text-brown text-3xl font-bold leading-tight tracking-tight">Settings</h1>
         </div>
       </header>
       <div
         className="mx-auto max-w-screen-xl px-4 pb-6 sm:px-6 lg:px-8 lg:pb-16"
-        hidden={!user.email}
-      >
+        hidden={!user.email}>
         <div className="overflow-hidden rounded-lg bg-white shadow">
           <div className="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">
             <aside className="py-6 lg:col-span-3">
@@ -93,18 +102,17 @@ export default function Setttings() {
                     href={item.href}
                     className={classNames(
                       item.current
-                        ? "bg-teal-50 border-neon-dark text-teal-700 hover:bg-teal-50 hover:text-teal-700"
+                        ? "border-neon-dark bg-teal-50 text-teal-700 hover:bg-teal-50 hover:text-teal-700"
                         : "border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900",
-                      "group border-l-4 px-3 py-2 flex items-center text-sm font-medium"
+                      "group flex items-center border-l-4 px-3 py-2 text-sm font-medium"
                     )}
-                    aria-current={item.current ? "page" : undefined}
-                  >
+                    aria-current={item.current ? "page" : undefined}>
                     <item.icon
                       className={classNames(
                         item.current
                           ? "text-teal-500 group-hover:text-teal-500"
                           : "text-gray-400 group-hover:text-gray-500",
-                        "flex-shrink-0 -ml-1 mr-3 h-6 w-6"
+                        "-ml-1 mr-3 h-6 w-6 flex-shrink-0"
                       )}
                       aria-hidden="true"
                     />
@@ -115,20 +123,14 @@ export default function Setttings() {
             </aside>
 
             <form
-              className="divide-y divide-gray-200 lg:col-span-9 min-h-[251px]"
+              className="min-h-[251px] divide-y divide-gray-200 lg:col-span-9"
               action="#"
               method="POST"
-              hidden={
-                subNavigation.filter((e) => e.current)[0]?.name !==
-                subNavigation[0].name
-              }
-            >
+              hidden={subNavigation.filter((e) => e.current)[0]?.name !== subNavigation[0].name}>
               {/* Profile section */}
               <div className="py-6 px-4 sm:p-6 lg:pb-8">
                 <div>
-                  <h2 className="text-lg font-medium leading-6 text-gray-900">
-                    Profile
-                  </h2>
+                  <h2 className="text-lg font-medium leading-6 text-gray-900">Profile</h2>
                   <p className="mt-1 text-sm text-gray-500">
                     Let people know who they are dealing with builds trust.
                   </p>
@@ -136,10 +138,7 @@ export default function Setttings() {
 
                 <div className="my-6 grid grid-cols-12 gap-6">
                   <div className="col-span-12 sm:col-span-6">
-                    <label
-                      htmlFor="first-name"
-                      className="block text-sm font-medium text-gray-700"
-                    >
+                    <label htmlFor="first-name" className="block text-sm font-medium text-gray-700">
                       Full Name
                     </label>
                     <input
@@ -150,14 +149,11 @@ export default function Setttings() {
                       onChange={(e) => handleNameChange(e)}
                       onKeyDown={handleKeyPress}
                       autoComplete="given-name"
-                      className="mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
+                      className="focus:border-neon focus:ring-neon mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:outline-none sm:text-sm"
                     />
                   </div>
                   <div className="col-span-12 sm:col-span-6">
-                    <label
-                      htmlFor="first-name"
-                      className="block text-sm font-medium text-gray-700"
-                    >
+                    <label htmlFor="first-name" className="block text-sm font-medium text-gray-700">
                       Email
                     </label>
                     <input
@@ -167,36 +163,93 @@ export default function Setttings() {
                       name="first-name"
                       id="first-name"
                       autoComplete="given-name"
-                      className="mt-1 block w-full rounded-md border disabled:bg-neutral-100 border-gray-300 py-2 px-3 shadow-sm focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
+                      className="focus:border-neon focus:ring-neon mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:outline-none disabled:bg-neutral-100 sm:text-sm"
                     />
                   </div>
                 </div>
                 <Button onClick={() => updateUser(user)}>Save</Button>
               </div>
             </form>
+
             <div
-              hidden={
-                subNavigation.filter((e) => e.current)[0]?.name !==
-                subNavigation[1].name
-              }
-              className="divide-y divide-gray-200 lg:col-span-9 min-h-[251px]"
-            >
+              hidden={subNavigation.filter((e) => e.current)[0]?.name !== subNavigation[1].name}
+              className="min-h-[251px] divide-y divide-gray-200 lg:col-span-9">
               {/* Passwords section */}
               <div className="py-6 px-4 sm:p-6 lg:pb-8">
                 <div>
-                  <h2 className="text-lg font-medium leading-6 text-gray-900">
-                    Password
-                  </h2>
+                  <h2 className="text-lg font-medium leading-6 text-gray-900">Password</h2>
                   <p className="mt-1 text-sm text-gray-500">
-                    Forgot your passwort? Email <b>hi@documenso.com</b> to reset
-                    it.
+                    Forgot your passwort? Email <b>hi@documenso.com</b> to reset it.
                   </p>
                 </div>
               </div>
             </div>
+
+            <div
+              hidden={!subNavigation.at(2) || subNavigation.find((e) => e.current)?.name !== subNavigation.at(2)?.name}
+              className="min-h-[251px] divide-y divide-gray-200 lg:col-span-9">
+              {/* Billing section */}
+              <div className="py-6 px-4 sm:p-6 lg:pb-8">
+                <div>
+                  <h2 className="text-lg font-medium leading-6 text-gray-900">Billing</h2>
+
+                  {!isSubscriptionsEnabled() && (
+                    <p className="mt-2 text-sm text-gray-500">
+                      Subscriptions are not enabled on this instance, you have nothing to do here.
+                    </p>
+                  )}
+
+                  {isSubscriptionsEnabled() && (
+                    <>
+                      <p className="mt-1 text-sm text-gray-500">
+                        Your subscription is currently{" "}
+                        <strong>
+                          {subscription?.status &&
+                          subscription?.status !== SubscriptionStatus.INACTIVE
+                            ? "Active"
+                            : "Inactive"}
+                        </strong>
+                        .
+                      </p>
+
+                      {subscription?.status === SubscriptionStatus.PAST_DUE && (
+                        <p className="mt-1 text-sm text-red-500">
+                          Your subscription is past due. Please update your payment details to
+                          continue using the service without interruption.
+                        </p>
+                      )}
+
+                      <div className="mt-8">
+                        <div className="grid grid-cols-1 lg:grid-cols-2">
+                          <BillingPlans />
+                        </div>
+
+                        {subscription && (
+                          <Button
+                            onClick={() => {
+                              if (isSubscriptionsEnabled() && subscription?.customerId) {
+                                fetchPortalSession({
+                                  id: subscription.customerId,
+                                }).then((res) => {
+                                  if (res.success) {
+                                    window.location.href = res.url;
+                                  }
+                                });
+                              }
+                            }}>
+                            Manage my subscription
+                          </Button>
+                        )}
+                      </div>
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
+
       <div className="mt-10 max-w-[1100px]" hidden={!!user.email}>
         <div className="ph-item">
           <div className="ph-col-12">

apps/web/components/signup.tsx

@@ -1,9 +1,9 @@
+import Link from "next/link";
 import { signup } from "@documenso/lib/api";
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
 import { Button } from "@documenso/ui";
 import { XCircleIcon } from "@heroicons/react/24/outline";
 import { signIn } from "next-auth/react";
-import Link from "next/link";
 import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 
@@ -107,8 +107,7 @@ export default function Signup(props: { source: string }) {
                 viewBox="0 0 24 24"
                 strokeWidth={1.5}
                 stroke="rgb(17 24 39 / var(--tw-text-opacity))"
-                className="w-8 h-8 inline mb-1"
-              >
+                className="mb-1 inline h-8 w-8">
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
@@ -130,8 +129,7 @@ export default function Signup(props: { source: string }) {
                 form.clearErrors();
                 trigger();
               }}
-              className="mt-8 space-y-6"
-            >
+              className="mt-8 space-y-6">
               <input type="hidden" name="remember" defaultValue="true" />
               <div className="-space-y-px rounded-md shadow-sm">
                 <div>
@@ -145,7 +143,7 @@ export default function Signup(props: { source: string }) {
                     type="email"
                     autoComplete="email"
                     required
-                    className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
+                    className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
                     placeholder="Email"
                   />
                 </div>
@@ -157,8 +155,7 @@ export default function Signup(props: { source: string }) {
                     {...register("password", {
                       minLength: {
                         value: 7,
-                        message:
-                          "Your password has to be at least 7 characters long.",
+                        message: "Your password has to be at least 7 characters long.",
                       },
                     })}
                     id="password"
@@ -166,7 +163,7 @@ export default function Signup(props: { source: string }) {
                     type="password"
                     autoComplete="current-password"
                     required
-                    className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
+                    className="focus:border-neon focus:ring-neon relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:outline-none sm:text-sm"
                     placeholder="Password"
                   />
                 </div>
@@ -177,16 +174,12 @@ export default function Signup(props: { source: string }) {
                 onClick={() => {
                   form.clearErrors();
                 }}
-                className="sgroup relative flex w-full"
-              >
+                className="sgroup relative flex w-full">
                 Create Account
               </Button>
               <div className="pt-2">
                 <div className="relative">
-                  <div
-                    className="absolute inset-0 flex items-center"
-                    aria-hidden="true"
-                  >
+                  <div className="absolute inset-0 flex items-center" aria-hidden="true">
                     <div className="w-full border-t border-gray-300" />
                   </div>
                   <div className="relative flex justify-center"></div>
@@ -194,10 +187,7 @@ export default function Signup(props: { source: string }) {
               </div>
               <p className="mt-2 text-center text-sm text-gray-600">
                 Already have an account?{" "}
-                <Link
-                  href="/login"
-                  className="font-medium text-neon hover:text-neon"
-                >
+                <Link href="/login" className="text-gray-500 hover:text-neon-700 font-medium">
                   Sign In
                 </Link>
               </p>

apps/web/hooks/use-debounced-value.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+export function useDebouncedValue<T>(value: T, delay: number) {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

apps/web/next.config.js

@@ -1,12 +1,16 @@
-/** @type {import('next').NextConfig} */
 require("dotenv").config({ path: "../../.env" });
 
+/** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: false,
+  env: {
+    IS_PULL_REQUEST: process.env.IS_PULL_REQUEST,
+    RENDER_EXTERNAL_URL: process.env.RENDER_EXTERNAL_URL,
+  },
 };
 
-const withTM = require("next-transpile-modules")([
+const transpileModules = require("next-transpile-modules")([
   "@documenso/prisma",
   "@documenso/lib",
   "@documenso/ui",
@@ -15,10 +19,11 @@ const withTM = require("next-transpile-modules")([
   "@documenso/signing",
   "react-signature-canvas",
 ]);
-const plugins = [];
-plugins.push(withTM);
 
-const moduleExports = () =>
-  plugins.reduce((acc, next) => next(acc), nextConfig);
+const plugins = [
+  transpileModules
+];
+
+const moduleExports = () => plugins.reduce((acc, next) => next(acc), nextConfig);
 
 module.exports = moduleExports;

apps/web/package.json

@@ -7,36 +7,27 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "db-studio": "prisma db studio"
+    "db-studio": "prisma db studio",
+    "stripe:listen": "stripe listen --forward-to localhost:3000/api/stripe/webhook"
   },
   "dependencies": {
+    "@documenso/lib": "*",
     "@documenso/pdf": "*",
     "@documenso/prisma": "*",
     "@documenso/ui": "*",
     "@headlessui/react": "^1.7.4",
     "@heroicons/react": "^2.0.13",
     "@pdf-lib/fontkit": "^1.1.1",
-    "@tailwindcss/forms": "^0.5.3",
-    "@types/bcryptjs": "^2.4.2",
-    "@types/filesystem": "^0.0.32",
-    "@types/react-dom": "18.0.9",
     "avatar-from-initials": "^1.0.3",
     "base64-arraybuffer": "^1.0.2",
     "bcryptjs": "^2.4.3",
-    "dotenv": "^16.0.3",
-    "eslint": "8.27.0",
-    "eslint-config-next": "13.0.3",
-    "file-loader": "^6.2.0",
     "formidable": "^3.2.5",
-    "install": "^0.13.0",
-    "next": "13.0.3",
-    "next-auth": ">=4.20.1",
-    "next-transpile-modules": "^10.0.0",
+    "next": "13.2.4",
+    "next-auth": "^4.22.0",
     "node-forge": "^1.3.1",
     "node-signpdf": "^1.5.0",
     "nodemailer": "^6.9.0",
     "nodemailer-sendgrid": "^1.0.3",
-    "npm": "^9.1.3",
     "pdf-lib": "^1.17.1",
     "placeholder-loading": "^0.6.0",
     "react": "18.2.0",
@@ -46,20 +37,30 @@
     "react-pdf": "^6.2.2",
     "react-resizable": "^3.0.4",
     "react-tooltip": "^5.7.2",
-    "sass": "^1.57.1",
     "short-uuid": "^4.2.2",
-    "string-to-color": "^2.2.2",
-    "typescript": "4.8.4"
+    "string-to-color": "^2.2.2"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.3",
+    "@types/bcryptjs": "^2.4.2",
+    "@types/filesystem": "^0.0.32",
     "@types/formidable": "^2.0.5",
     "@types/node": "^18.11.18",
     "@types/nodemailer": "^6.4.7",
     "@types/nodemailer-sendgrid": "^1.0.0",
+    "@types/react-dom": "18.0.9",
     "@types/react-pdf": "^6.2.0",
     "@types/react-resizable": "^3.0.3",
     "autoprefixer": "^10.4.13",
+    "dotenv": "^16.0.3",
+    "eslint": "8.27.0",
+    "eslint-config-next": "13.0.3",
+    "file-loader": "^6.2.0",
+    "next-transpile-modules": "^10.0.0",
     "postcss": "^8.4.19",
-    "tailwindcss": "^3.2.4"
+    "sass": "^1.57.1",
+    "stripe-cli": "^0.1.0",
+    "tailwindcss": "^3.2.4",
+    "typescript": "4.8.4"
   }
-}
+}

apps/web/pages/404.jsx

@@ -1,31 +1,29 @@
-import { ArrowSmallLeftIcon } from "@heroicons/react/20/solid";
-
 import { Button } from "@documenso/ui";
 import Logo from "../components/logo";
+import { ArrowSmallLeftIcon } from "@heroicons/react/20/solid";
 
 export default function Custom404() {
   return (
     <>
-      <main className="relative min-h-full bg-gray-100 isolate">
+      <main className="relative isolate min-h-full bg-gray-100">
         <div className="absolute top-10 left-10">
           <Logo className="w-10 md:w-20" />
         </div>
 
-        <div className="px-6 py-48 mx-auto text-center max-w-7xl sm:py-40 lg:px-8">
-          <p className="text-base font-semibold leading-8 text-brown">404</p>
-          <h1 className="mt-4 text-3xl font-bold tracking-tight text-brown sm:text-5xl">
+        <div className="mx-auto max-w-7xl px-6 py-48 text-center sm:py-40 lg:px-8">
+          <p className="text-brown text-base font-semibold leading-8">404</p>
+          <h1 className="text-brown mt-4 text-3xl font-bold tracking-tight sm:text-5xl">
             Page not found
           </h1>
           <p className="mt-4 text-base text-gray-700 sm:mt-6">
             Sorry, we couldn’t find the page you’re looking for.
           </p>
-          <div className="flex justify-center mt-10">
+          <div className="mt-10 flex justify-center">
             <Button
               color="secondary"
               href="/"
               icon={ArrowSmallLeftIcon}
-              className="text-base font-semibold leading-7 text-brown"
-            >
+              className="text-brown text-base font-semibold leading-7">
               Back to home
             </Button>
           </div>

apps/web/pages/500.jsx

@@ -1,27 +1,25 @@
-import Logo from "../components/logo";
 import { Button } from "@documenso/ui";
+import Logo from "../components/logo";
 import { ArrowSmallLeftIcon } from "@heroicons/react/20/solid";
 import { EllipsisVerticalIcon } from "@heroicons/react/20/solid";
 
 export default function Custom500() {
   return (
     <>
-      <div className="relative flex flex-col items-center justify-center min-h-full text-white bg-black">
+      <div className="relative flex min-h-full flex-col items-center justify-center bg-black text-white">
         <div className="absolute top-10 left-10">
           <Logo dark className="w-10 md:w-20" />
         </div>
 
-        <div className="px-4 py-10 mt-20 max-w-7xl">
+        <div className="mt-20 max-w-7xl px-4 py-10">
           <p className="inline-flex items-center text-3xl font-bold sm:text-5xl">
             500
-            <span className="relative px-3 font-thin sm:text-6xl -top-1.5">
-              |
-            </span>{" "}
-            <span className="text-base font-semibold align-middle sm:text-2xl">
+            <span className="relative -top-1.5 px-3 font-thin sm:text-6xl">|</span>{" "}
+            <span className="align-middle text-base font-semibold sm:text-2xl">
               Something went wrong.
             </span>
           </p>
-          <div className="flex justify-center mt-10">
+          <div className="mt-10 flex justify-center">
             <Button color="secondary" href="/" icon={ArrowSmallLeftIcon}>
               Back to home
             </Button>

apps/web/pages/_app.tsx

@@ -1,13 +1,15 @@
-import "../styles/tailwind.css";
+import { ReactElement, ReactNode } from "react";
+import { NextPage } from "next";
+import type { AppProps } from "next/app";
+import { SubscriptionProvider } from "@documenso/lib/stripe/providers/subscription-provider";
 import "../../../node_modules/placeholder-loading/src/scss/placeholder-loading.scss";
 import "../../../node_modules/react-resizable/css/styles.css";
-import "react-tooltip/dist/react-tooltip.css";
-import { ReactElement, ReactNode } from "react";
-import type { AppProps } from "next/app";
-import { NextPage } from "next";
+import "../styles/tailwind.css";
 import { SessionProvider } from "next-auth/react";
-export { coloredConsole } from "@documenso/lib";
 import { Toaster } from "react-hot-toast";
+import "react-tooltip/dist/react-tooltip.css";
+
+export { coloredConsole } from "@documenso/lib";
 
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: ReactElement) => ReactNode;
@@ -19,13 +21,15 @@ type AppPropsWithLayout = AppProps & {
 
 export default function App({
   Component,
-  pageProps: { session, ...pageProps },
+  pageProps: { session, initialSubscription, ...pageProps },
 }: AppPropsWithLayout) {
   const getLayout = Component.getLayout || ((page: any) => page);
   return (
     <SessionProvider session={session}>
-      <Toaster position="top-center"></Toaster>
-      {getLayout(<Component {...pageProps} />)}
+      <SubscriptionProvider initialSubscription={initialSubscription}>
+        <Toaster position="top-center" />
+        {getLayout(<Component {...pageProps} />)}
+      </SubscriptionProvider>
     </SessionProvider>
   );
 }

apps/web/pages/_document.tsx

@@ -1,14 +1,8 @@
 import { Head, Html, Main, NextScript } from "next/document";
-import Script from "next/script";
-
-export default function Document(props) {
-  let pageProps = props.__NEXT_DATA__?.props?.pageProps;
 
+export default function Document() {
   return (
-    <Html
-      className="h-full bg-gray-100 scroll-smooth font-normal antialiased"
-      lang="en"
-    >
+    <Html className="h-full scroll-smooth bg-gray-100 font-normal antialiased" lang="en">
       <Head>
         <meta name="color-scheme"></meta>
       </Head>

apps/web/pages/api/auth/[...nextauth].ts

@@ -1,9 +1,9 @@
-import NextAuth, { Session } from "next-auth";
-import GitHubProvider from "next-auth/providers/github";
-import CredentialsProvider from "next-auth/providers/credentials";
 import { ErrorCode } from "@documenso/lib/auth";
-import prisma from "@documenso/prisma";
 import { verifyPassword } from "@documenso/lib/auth";
+import prisma from "@documenso/prisma";
+import NextAuth, { Session } from "next-auth";
+import CredentialsProvider from "next-auth/providers/credentials";
+import GitHubProvider from "next-auth/providers/github";
 
 export default NextAuth({
   secret: process.env.AUTH_SECRET,
@@ -27,8 +27,7 @@ export default NextAuth({
         password: {
           label: "Password",
           type: "password",
-          placeholder:
-            "Select a password. Here is some inspiration: https://xkcd.com/936/",
+          placeholder: "Select a password. Here is some inspiration: https://xkcd.com/936/",
         },
       },
       async authorize(credentials: any) {
@@ -57,10 +56,7 @@ export default NextAuth({
           throw new Error(ErrorCode.UserMissingPassword);
         }
 
-        const isCorrectPassword = await verifyPassword(
-          credentials.password,
-          user.password
-        );
+        const isCorrectPassword = await verifyPassword(credentials.password, user.password);
 
         if (!isCorrectPassword) {
           throw new Error(ErrorCode.IncorrectPassword);

apps/web/pages/api/auth/signup.ts

@@ -1,9 +1,8 @@
-import { IdentityProvider } from "@prisma/client";
 import { NextApiRequest, NextApiResponse } from "next";
-
-import prisma from "@documenso/prisma";
 import { hashPassword } from "@documenso/lib/auth";
 import { defaultHandler, defaultResponder } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
+import { IdentityProvider } from "@prisma/client";
 
 async function postHandler(req: NextApiRequest, res: NextApiResponse) {
   const { email, password, source } = req.body;

apps/web/pages/api/documents/[id].ts

@@ -1,13 +1,9 @@
-import {
-  defaultHandler,
-  defaultResponder,
-  getUserFromToken,
-} from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
 import { NextApiRequest, NextApiResponse } from "next";
-import { Document as PrismaDocument } from "@prisma/client";
 import { getDocument } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
 import { addDigitalSignature } from "@documenso/signing/addDigitalSignature";
+import { Document as PrismaDocument } from "@prisma/client";
 
 async function getHandler(req: NextApiRequest, res: NextApiResponse) {
   const { id: documentId } = req.query;
@@ -46,8 +42,7 @@ async function getHandler(req: NextApiRequest, res: NextApiResponse) {
     document = await getDocument(+documentId, req, res);
   }
 
-  if (!document)
-    res.status(404).end(`No document with id ${documentId} found.`);
+  if (!document) res.status(404).end(`No document with id ${documentId} found.`);
 
   const signaturesCount = await prisma.signature.count({
     where: {
@@ -61,18 +56,13 @@ async function getHandler(req: NextApiRequest, res: NextApiResponse) {
 
   // No need to add a signature, if no one signed yet.
   if (signaturesCount > 0) {
-    signedDocumentAsBase64 = await addDigitalSignature(
-      document?.document || ""
-    );
+    signedDocumentAsBase64 = await addDigitalSignature(document?.document || "");
   }
 
   const buffer: Buffer = Buffer.from(signedDocumentAsBase64, "base64");
   res.setHeader("Content-Type", "application/pdf");
   res.setHeader("Content-Length", buffer.length);
-  res.setHeader(
-    "Content-Disposition",
-    `attachment; filename=${document?.title}`
-  );
+  res.setHeader("Content-Disposition", `attachment; filename=${document?.title}`);
 
   return res.status(200).send(buffer);
 }

apps/web/pages/api/documents/[id]/fields/[fid].ts

@@ -1,13 +1,9 @@
-import {
-  defaultHandler,
-  defaultResponder,
-  getUserFromToken,
-} from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
 import { NextApiRequest, NextApiResponse } from "next";
-import short from "short-uuid";
-import { Document as PrismaDocument, FieldType } from "@prisma/client";
 import { getDocument } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
+import { FieldType, Document as PrismaDocument } from "@prisma/client";
+import short from "short-uuid";
 
 async function deleteHandler(req: NextApiRequest, res: NextApiResponse) {
   const user = await getUserFromToken(req, res);

apps/web/pages/api/documents/[id]/fields/index.ts

@@ -1,12 +1,8 @@
-import {
-  defaultHandler,
-  defaultResponder,
-  getUserFromToken,
-} from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
 import { NextApiRequest, NextApiResponse } from "next";
-import { Document as PrismaDocument, FieldType } from "@prisma/client";
 import { getDocument } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
+import { FieldType, Document as PrismaDocument } from "@prisma/client";
 
 async function getHandler(req: NextApiRequest, res: NextApiResponse) {
   const user = await getUserFromToken(req, res);
@@ -61,18 +57,14 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
     });
 
     if (!recipient || recipient?.documentId !== +documentId)
-      return res
-        .status(401)
-        .send("Recipient does not have access to this document.");
+      return res.status(401).send("Recipient does not have access to this document.");
   }
 
   if (user) {
     const document: PrismaDocument = await getDocument(+documentId, req, res);
     // todo entity ownerships checks
     if (document.userId !== user.id) {
-      return res
-        .status(401)
-        .send("User does not have access to this document.");
+      return res.status(401).send("User does not have access to this document.");
     }
   }
 

apps/web/pages/api/documents/[id]/recipients/[rid].ts

@@ -1,13 +1,9 @@
-import {
-  defaultHandler,
-  defaultResponder,
-  getUserFromToken,
-} from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
 import { NextApiRequest, NextApiResponse } from "next";
-import short from "short-uuid";
-import { Document as PrismaDocument } from "@prisma/client";
 import { getDocument } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
+import { Document as PrismaDocument } from "@prisma/client";
+import short from "short-uuid";
 
 async function deleteHandler(req: NextApiRequest, res: NextApiResponse) {
   const user = await getUserFromToken(req, res);

apps/web/pages/api/documents/[id]/recipients/index.ts

@@ -1,13 +1,9 @@
-import {
-  defaultHandler,
-  defaultResponder,
-  getUserFromToken,
-} from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
 import { NextApiRequest, NextApiResponse } from "next";
-import short from "short-uuid";
-import { Document as PrismaDocument } from "@prisma/client";
 import { getDocument } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
+import { Document as PrismaDocument } from "@prisma/client";
+import short from "short-uuid";
 
 async function postHandler(req: NextApiRequest, res: NextApiResponse) {
   const user = await getUserFromToken(req, res);

apps/web/pages/api/documents/[id]/send.ts

@@ -1,12 +1,8 @@
-import {
-  defaultHandler,
-  defaultResponder,
-  getUserFromToken,
-} from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
 import { NextApiRequest, NextApiResponse } from "next";
 import { sendSigningRequest } from "@documenso/lib/mail";
 import { getDocument } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
 import { Document as PrismaDocument, SendStatus } from "@prisma/client";
 
 async function postHandler(req: NextApiRequest, res: NextApiResponse) {
@@ -23,8 +19,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
 
   const document: PrismaDocument = await getDocument(+documentId, req, res);
 
-  if (!document)
-    res.status(404).end(`No document with id ${documentId} found.`);
+  if (!document) res.status(404).end(`No document with id ${documentId} found.`);
 
   let recipientCondition: any = {
     documentId: +documentId,

apps/web/pages/api/documents/[id]/sign.ts

@@ -1,11 +1,11 @@
-import { defaultHandler, defaultResponder } from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
 import { NextApiRequest, NextApiResponse } from "next";
-import { SigningStatus, DocumentStatus } from "@prisma/client";
-import { getDocument } from "@documenso/lib/query";
-import { Document as PrismaDocument, FieldType } from "@prisma/client";
-import { insertImageInPDF, insertTextInPDF } from "@documenso/pdf";
 import { sendSigningDoneMail } from "@documenso/lib/mail";
+import { getDocument } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder } from "@documenso/lib/server";
+import { insertImageInPDF, insertTextInPDF } from "@documenso/pdf";
+import prisma from "@documenso/prisma";
+import { DocumentStatus, SigningStatus } from "@prisma/client";
+import { FieldType, Document as PrismaDocument } from "@prisma/client";
 
 async function postHandler(req: NextApiRequest, res: NextApiResponse) {
   const { token: recipientToken } = req.query;
@@ -63,6 +63,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
     },
     data: {
       signingStatus: SigningStatus.SIGNED,
+      signedAt: new Date(),
     },
   });
 
@@ -73,13 +74,24 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
     },
   });
 
+  const signedRecipients = await prisma.recipient.findMany({
+    where: {
+      documentId: recipient.documentId,
+      signingStatus: SigningStatus.SIGNED,
+    },
+  });
+
   // Don't check for inserted, because currently no "sign again" scenarios exist and
   // this is probably the expected behaviour in unclean states.
   const nonSignatureFields = await prisma.field.findMany({
     where: {
       documentId: document.id,
       type: { in: [FieldType.DATE, FieldType.TEXT] },
+      recipientId: { in: signedRecipients.map((r) => r.id) },
     },
+    include: {
+      Recipient: true,
+    }
   });
 
   // Insert fields other than signatures
@@ -91,7 +103,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
             month: "long",
             day: "numeric",
             year: "numeric",
-          }).format(new Date())
+          }).format(field.Recipient?.signedAt ?? new Date())
         : field.customText || "",
       field.positionX,
       field.positionY,
@@ -115,10 +127,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
     },
     data: {
       document: documentWithInserts,
-      status:
-        unsignedRecipients.length > 0
-          ? DocumentStatus.PENDING
-          : DocumentStatus.COMPLETED,
+      status: unsignedRecipients.length > 0 ? DocumentStatus.PENDING : DocumentStatus.COMPLETED,
     },
   });
 
@@ -129,8 +138,11 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
     });
 
     document.document = documentWithInserts;
-    if (documentOwner)
-      await sendSigningDoneMail(recipient, document, documentOwner);
+    if (documentOwner) await sendSigningDoneMail(document, documentOwner);
+
+    for (const signer of signedRecipients) {
+      await sendSigningDoneMail(document, signer);
+    }
   }
 
   return res.status(200).end();
@@ -139,9 +151,7 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
     if (signedField?.Signature?.signatureImageAsBase64) {
       documentWithInserts = await insertImageInPDF(
         documentWithInserts,
-        signedField.Signature
-          ? signedField.Signature?.signatureImageAsBase64
-          : "",
+        signedField.Signature ? signedField.Signature?.signatureImageAsBase64 : "",
         signedField.positionX,
         signedField.positionY,
         signedField.page
@@ -152,7 +162,11 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
         signedField.Signature.typedSignature,
         signedField.positionX,
         signedField.positionY,
-        signedField.page
+        signedField.page,
+        // useHandwritingFont only for typed signatures
+        signedField.type === FieldType.SIGNATURE,
+        // fontSize only for name field
+        signedField.type === FieldType.NAME ? 30 : undefined
       );
     } else {
       documentWithInserts = document.document;
@@ -169,12 +183,8 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
       create: {
         recipientId: recipient.id,
         fieldId: signature.fieldId,
-        signatureImageAsBase64: signature.signatureImage
-          ? signature.signatureImage
-          : null,
-        typedSignature: signature.typedSignature
-          ? signature.typedSignature
-          : null,
+        signatureImageAsBase64: signature.signatureImage ? signature.signatureImage : null,
+        typedSignature: signature.typedSignature ? signature.typedSignature : null,
       },
     });
   }

apps/web/pages/api/documents/index.ts

@@ -1,9 +1,10 @@
-import { defaultHandler, defaultResponder } from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
 import { NextApiRequest, NextApiResponse } from "next";
-import { getUserFromToken } from "@documenso/lib/server";
-import formidable from "formidable";
 import { getDocumentsForUserFromToken } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder } from "@documenso/lib/server";
+import { getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
+import formidable from "formidable";
+import { isSubscribedServer } from "@documenso/lib/stripe";
 
 export const config = {
   api: {
@@ -15,7 +16,17 @@ async function postHandler(req: NextApiRequest, res: NextApiResponse) {
   const form = formidable();
 
   const user = await getUserFromToken(req, res);
-  if (!user) return;
+  if (!user) {
+    return res.status(401).end();
+  };
+
+  const isSubscribed = await isSubscribedServer(req);
+
+  if (!isSubscribed) {
+    throw new Error("User is not subscribed.");
+  }
+
+
   form.parse(req, async (err, fields, files) => {
     if (err) throw err;
 

apps/web/pages/api/health.ts

@@ -1,5 +1,4 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-
 import { defaultHandler, defaultResponder } from "@documenso/lib/server";
 import prisma from "@documenso/prisma";
 

apps/web/pages/api/stripe/checkout-session.ts

@@ -0,0 +1 @@
+export { checkoutSessionHandler as default } from '@documenso/lib/stripe/handlers/checkout-session'

apps/web/pages/api/stripe/portal-session.ts

@@ -0,0 +1 @@
+export { portalSessionHandler as default } from "@documenso/lib/stripe/handlers/portal-session";

apps/web/pages/api/stripe/subscription.ts

@@ -0,0 +1 @@
+export { getSubscriptionHandler as default } from '@documenso/lib/stripe/handlers/get-subscription'

apps/web/pages/api/stripe/webhook.ts

@@ -0,0 +1,5 @@
+export const config = {
+  api: { bodyParser: false },
+};
+
+export { webhookHandler as default } from "@documenso/lib/stripe/handlers/webhook";

apps/web/pages/api/test-sign/[id].ts

@@ -1,8 +1,9 @@
-import { defaultHandler, defaultResponder } from "@documenso/lib/server";
 import { NextApiRequest, NextApiResponse } from "next";
-import { Document as PrismaDocument } from "@prisma/client";
 import { getDocument } from "@documenso/lib/query";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
 import { addDigitalSignature } from "@documenso/signing/addDigitalSignature";
+import { Document as PrismaDocument } from "@prisma/client";
 
 // todo remove before launch
 
@@ -12,10 +13,7 @@ async function getHandler(req: NextApiRequest, res: NextApiResponse) {
   const signedDocument = await addDigitalSignature(document.document);
   res.setHeader("Content-Type", "application/pdf");
   res.setHeader("Content-Length", signedDocument.length);
-  res.setHeader(
-    "Content-Disposition",
-    `attachment; filename=${document.title}`
-  );
+  res.setHeader("Content-Disposition", `attachment; filename=${document.title}`);
 
   return res.status(200).send(signedDocument);
 }

apps/web/pages/api/users/index.ts

@@ -1,11 +1,6 @@
-import {
-  defaultHandler,
-  defaultResponder,
-  getUserFromToken,
-} from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
-
 import type { NextApiRequest, NextApiResponse } from "next";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
 
 async function postHandler(req: NextApiRequest, res: NextApiResponse) {
   const { method, body } = req;

apps/web/pages/api/users/me.ts

@@ -1,11 +1,6 @@
-import {
-  defaultHandler,
-  defaultResponder,
-  getUserFromToken,
-} from "@documenso/lib/server";
-import prisma from "@documenso/prisma";
-
 import type { NextApiRequest, NextApiResponse } from "next";
+import { defaultHandler, defaultResponder, getUserFromToken } from "@documenso/lib/server";
+import prisma from "@documenso/prisma";
 
 async function getHandler(req: NextApiRequest, res: NextApiResponse) {
   const user = await getUserFromToken(req, res);

apps/web/pages/dashboard.tsx

@@ -1,7 +1,10 @@
+import { ChangeEvent, ReactElement } from "react";
 import Head from "next/head";
-import { ReactElement } from "react";
-import Layout from "../components/layout";
 import Link from "next/link";
+import { uploadDocument } from "@documenso/features";
+import { getDocumentsForUserFromToken } from "@documenso/lib/query";
+import { getUserFromToken } from "@documenso/lib/server";
+import Layout from "../components/layout";
 import type { NextPageWithLayout } from "./_app";
 import {
   CheckBadgeIcon,
@@ -9,23 +12,23 @@ import {
   ExclamationTriangleIcon,
   UsersIcon,
 } from "@heroicons/react/24/outline";
-import { uploadDocument } from "@documenso/features";
 import {
   DocumentStatus,
+  Document as PrismaDocument,
   SendStatus,
   SigningStatus,
-  Document as PrismaDocument,
 } from "@prisma/client";
-import { getUserFromToken } from "@documenso/lib/server";
-import { getDocumentsForUserFromToken } from "@documenso/lib/query";
 import { truncate } from "fs";
 import { Tooltip as ReactTooltip } from "react-tooltip";
+import { useSubscription } from "@documenso/lib/stripe";
 
 type FormValues = {
   document: File;
 };
 
 const DashboardPage: NextPageWithLayout = (props: any) => {
+  const { hasSubscription } = useSubscription();
+
   const stats = [
     {
       name: "Draft",
@@ -59,30 +62,30 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
             Dashboard
           </h1>
         </header>
-        <dl className="grid gap-5 mt-8 md:grid-cols-3 ">
+        <dl className="mt-8 grid gap-5 md:grid-cols-3 ">
           {stats.map((item) => (
             <Link href={item.link} key={item.name}>
-              <div className="px-4 py-3 overflow-hidden bg-white rounded-lg shadow md:p-6 sm:py-5">
-                <dt className="text-sm font-medium text-gray-500 truncate ">
+              <div className="overflow-hidden rounded-lg bg-white px-4 py-3 shadow hover:shadow-lg duration-300 sm:py-5 md:p-6">
+                <dt className="truncate text-sm font-medium text-gray-700 ">
                   <item.icon
-                    className="flex-shrink-0 inline w-5 h-5 mr-3 text-neon sm:w-6 sm:h-6"
-                    aria-hidden="true"
-                  ></item.icon>
+                    className="text-neon-600 mr-3 inline h-5 w-5 flex-shrink-0 sm:h-6 sm:w-6"
+                    aria-hidden="true"></item.icon>
                   {item.name}
                 </dt>
-                <dd className="mt-1 text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">
+                <dd className="mt-3 text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">
                   {getStat(item.name, props)}
                 </dd>
               </div>
             </Link>
           ))}
         </dl>
+
         <div className="mt-12">
           <input
             id="fileUploadHelper"
             type="file"
             accept="application/pdf"
-            onChange={(event: any) => {
+            onChange={(event: ChangeEvent) => {
               uploadDocument(event);
             }}
             hidden
@@ -90,27 +93,27 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
         </div>
         <div
           onClick={() => {
-            document?.getElementById("fileUploadHelper")?.click();
+            if (hasSubscription) {
+              document?.getElementById("fileUploadHelper")?.click();
+            }
           }}
-          className="relative block w-full p-12 text-center border-2 border-gray-300 border-dashed rounded-lg cursor-pointer hover:border-neon focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-        >
+          aria-disabled={!hasSubscription}
+          className="group hover:border-neon-600 duration-200 relative block w-full cursor-pointer rounded-lg border-2 border-dashed border-gray-300 p-12 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 aria-disabled:opacity-50 aria-disabled:pointer-events-none">
+          
           <svg
-            className="w-12 h-12 mx-auto text-gray-400"
+            className="mx-auto h-12 w-12 text-gray-400 group-hover:text-gray-700 duration-200"
             stroke="currentColor"
             fill="none"
             viewBox="0 00 20 25"
-            aria-hidden="true"
-          >
+            aria-hidden="true">
             <path
               strokeLinecap="round"
               strokeLinejoin="round"
               d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
             />
           </svg>
-          <span
-            id="add_document"
-            className="mt-2 block text-sm font-medium text-neon"
-          >
+
+          <span id="add_document" className="text-gray-500 group-hover:text-neon-700 mt-2 block text-sm font-medium duration-200">
             Add a new PDF document.
           </span>
         </div>
@@ -147,9 +150,7 @@ export async function getServerSideProps(context: any) {
 
   const documents: any[] = await getDocumentsForUserFromToken(context);
 
-  const drafts: PrismaDocument[] = documents.filter(
-    (d) => d.status === DocumentStatus.DRAFT
-  );
+  const drafts: PrismaDocument[] = documents.filter((d) => d.status === DocumentStatus.DRAFT);
 
   const waiting: any[] = documents.filter(
     (e) =>

apps/web/pages/documents.tsx

@@ -1,7 +1,12 @@
 import { ReactElement, useEffect, useState } from "react";
+import { NextPageContext } from "next";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { uploadDocument } from "@documenso/features";
+import { deleteDocument, getDocuments } from "@documenso/lib/api";
+import { Button, IconButton, SelectBox } from "@documenso/ui";
 import Layout from "../components/layout";
 import type { NextPageWithLayout } from "./_app";
-import Head from "next/head";
 import {
   ArrowDownTrayIcon,
   CheckBadgeIcon,
@@ -13,21 +18,24 @@ import {
   PlusIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
-import { useRouter } from "next/router";
-import { uploadDocument } from "@documenso/features";
 import { DocumentStatus } from "@prisma/client";
-import { Button, IconButton, SelectBox } from "@documenso/ui";
-import { NextPageContext } from "next";
-import { deleteDocument, getDocuments } from "@documenso/lib/api";
 import { Tooltip as ReactTooltip } from "react-tooltip";
+import { useSubscription } from "@documenso/lib/stripe";
 
 const DocumentsPage: NextPageWithLayout = (props: any) => {
   const router = useRouter();
+  const { hasSubscription } = useSubscription();
   const [documents, setDocuments]: any[] = useState([]);
   const [filteredDocuments, setFilteredDocuments] = useState([]);
 
   const [loading, setLoading] = useState(true);
-  const statusFilters = [
+
+  type statusFilterType = {
+    label: string;
+    value: DocumentStatus | "ALL";
+  };
+
+  const statusFilters: statusFilterType[] = [
     { label: "All", value: "ALL" },
     { label: "Draft", value: "DRAFT" },
     { label: "Waiting for others", value: "PENDING" },
@@ -42,12 +50,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
     { label: "Last 12 months", value: 366 },
   ];
 
-  const [selectedStatusFilter, setSelectedStatusFilter] = useState(
-    statusFilters[0]
-  );
-  const [selectedCreatedFilter, setSelectedCreatedFilter] = useState(
-    createdFilter[0]
-  );
+  const [selectedStatusFilter, setSelectedStatusFilter] = useState(statusFilters[0]);
+  const [selectedCreatedFilter, setSelectedCreatedFilter] = useState(createdFilter[0]);
 
   const loadDocuments = async () => {
     if (!documents.length) setLoading(true);
@@ -62,9 +66,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
   useEffect(() => {
     loadDocuments().finally(() => {
       setSelectedStatusFilter(
-        statusFilters.filter(
-          (status) => status.value === props.filter.toUpperCase()
-        )[0]
+        statusFilters.filter((status) => status.value === props.filter.toUpperCase())[0]
       );
     });
   }, []);
@@ -79,9 +81,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
 
   function filterDocumentes(documents: []): any {
     let filteredDocuments = documents.filter(
-      (d: any) =>
-        d.status === selectedStatusFilter.value ||
-        selectedStatusFilter.value === "ALL"
+      (d: any) => d.status === selectedStatusFilter.value || selectedStatusFilter.value === "ALL"
     );
 
     filteredDocuments = filteredDocuments.filter((document: any) =>
@@ -91,6 +91,20 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
     return filteredDocuments;
   }
 
+  function handleStatusFilterChange(status: statusFilterType) {
+    router.replace(
+      {
+        pathname: router.pathname,
+        query: { filter: status.value },
+      },
+      undefined,
+      {
+        shallow: true, // Perform a shallow update, without reloading the page
+      }
+    );
+    setSelectedStatusFilter(status);
+  }
+
   function wasXDaysAgoOrLess(documentDate: Date, lastXDays: number): boolean {
     if (lastXDays < 0) return true;
 
@@ -98,9 +112,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
     const today: Date = new Date(); // Today's date
 
     // Calculate the difference between the two dates in days
-    const diffInDays = Math.floor(
-      (today.getTime() - documentDate.getTime()) / millisecondsInDay
-    );
+    const diffInDays = Math.floor((today.getTime() - documentDate.getTime()) / millisecondsInDay);
 
     console.log(diffInDays);
 
@@ -114,7 +126,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
         <title>Documents | Documenso</title>
       </Head>
       <div className="px-4 sm:px-6 lg:px-8">
-        <div className="sm:flex sm:items-center mt-10">
+        <div className="mt-10 sm:flex sm:items-center">
           <div className="sm:flex-auto">
             <header>
               <h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
@@ -125,36 +137,34 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
           <div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
             <Button
               icon={DocumentPlusIcon}
+              disabled={!hasSubscription}
               onClick={() => {
                 document?.getElementById("fileUploadHelper")?.click();
-              }}
-            >
+              }}>
               Add Document
             </Button>
           </div>
         </div>
-        <div className="mt-3 mb-12">
-          <div className="w-fit block float-right ml-3 mt-7">
-            {filteredDocuments.length != 1
-              ? filteredDocuments.length + " Documents"
-              : "1 Document"}
+        <div className="mt-3 mb-12 flex flex-row-reverse items-center gap-x-4">
+          <div className="pt-5 block w-fit">
+            {filteredDocuments.length != 1 ? filteredDocuments.length + " Documents" : "1 Document"}
           </div>
           <SelectBox
-            className="w-1/4 block float-right"
+            className="block w-1/4"
             label="Created"
             options={createdFilter}
             value={selectedCreatedFilter}
             onChange={setSelectedCreatedFilter}
           />
           <SelectBox
-            className="w-1/4 block float-right ml-3"
+            className="block w-1/4"
             label="Status"
             options={statusFilters}
             value={selectedStatusFilter}
-            onChange={setSelectedStatusFilter}
+            onChange={handleStatusFilterChange}
           />
         </div>
-        <div className="mt-20 max-w-[1100px]" hidden={!loading}>
+        <div className="mt-8 max-w-[1100px]" hidden={!loading}>
           <div className="ph-item">
             <div className="ph-col-12">
               <div className="ph-picture"></div>
@@ -171,14 +181,10 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
             </div>
           </div>
         </div>
-        <div
-          className="mt-28 flex flex-col"
-          hidden={!documents.length || loading}
-        >
+        <div className="mt-8 flex flex-col" hidden={!documents.length || loading}>
           <div
             className="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8"
-            hidden={!documents.length || loading}
-          >
+            hidden={!documents.length || loading}>
             <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
               <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                 <table className="min-w-full divide-y divide-gray-300">
@@ -186,32 +192,25 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                     <tr>
                       <th
                         scope="col"
-                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                      >
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                         Title
                       </th>
                       <th
                         scope="col"
-                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                      >
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                         Recipients
                       </th>
                       <th
                         scope="col"
-                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                      >
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                         Status
                       </th>
                       <th
                         scope="col"
-                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                      >
+                        className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
                         Created
                       </th>
-                      <th
-                        scope="col"
-                        className="relative py-3.5 pl-3 pr-4 sm:pr-6"
-                      >
+                      <th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
                         <span className="sr-only">Delete</span>
                       </th>
                     </tr>
@@ -220,38 +219,30 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                     {filteredDocuments.map((document: any, index: number) => (
                       <tr
                         key={document.id}
-                        className="hover:bg-gray-100 cursor-pointer"
-                        onClick={(event) => showDocument(document.id)}
-                      >
+                        className="cursor-pointer hover:bg-gray-100"
+                        onClick={(event) => showDocument(document.id)}>
                         <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                           {document.title || "#" + document.id}
                         </td>
-                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                        <td className="whitespace-nowrap inline-flex py-3 gap-x-2 gap-y-1 flex-wrap max-w-[250px] text-sm text-gray-500">
                           {document.Recipient.map((item: any) => (
                             <div key={item.id}>
                               {item.sendStatus === "NOT_SENT" ? (
                                 <span
                                   id="sent_icon"
-                                  className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"
-                                >
-                                  {item.name
-                                    ? item.name + " <" + item.email + ">"
-                                    : item.email}
+                                  className="flex-shrink-0 h-6 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
+                                  {item.name ? item.name + " <" + item.email + ">" : item.email}
                                 </span>
                               ) : (
                                 ""
                               )}
-                              {item.sendStatus === "SENT" &&
-                              item.readStatus !== "OPENED" ? (
+                              {item.sendStatus === "SENT" && item.readStatus !== "OPENED" ? (
                                 <span id="sent_icon">
                                   <span
                                     id="sent_icon"
-                                    className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800"
-                                  >
-                                    <EnvelopeIcon className="inline h-5 mr-1"></EnvelopeIcon>
-                                    {item.name
-                                      ? item.name + " <" + item.email + ">"
-                                      : item.email}
+                                    className="flex-shrink-0 h-6 inline-flex items-center rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-yellow-800">
+                                    <EnvelopeIcon className="mr-1 inline h-4"></EnvelopeIcon>
+                                    {item.name ? item.name + " <" + item.email + ">" : item.email}
                                   </span>
                                 </span>
                               ) : (
@@ -262,13 +253,10 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                                 <span id="read_icon">
                                   <span
                                     id="sent_icon"
-                                    className="inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-green-800"
-                                  >
-                                    <CheckIcon className="inline h-5 -mr-2"></CheckIcon>
-                                    <CheckIcon className="inline h-5 mr-1"></CheckIcon>
-                                    {item.name
-                                      ? item.name + " <" + item.email + ">"
-                                      : item.email}
+                                    className="flex-shrink-0 h-6 inline-flex items-center rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-yellow-800">
+                                    <CheckIcon className="-mr-2 inline h-4"></CheckIcon>
+                                    <CheckIcon className="mr-1 inline h-4"></CheckIcon>
+                                    {item.name ? item.name + " <" + item.email + ">" : item.email}
                                   </span>
                                 </span>
                               ) : (
@@ -276,8 +264,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                               )}
                               {item.signingStatus === "SIGNED" ? (
                                 <span id="signed_icon">
-                                  <span className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
-                                    <CheckBadgeIcon className="inline h-5 mr-1"></CheckBadgeIcon>{" "}
+                                  <span className="flex-shrink-0 h-6 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
+                                    <CheckBadgeIcon className="mr-1 inline h-5"></CheckBadgeIcon>{" "}
                                     {item.email}
                                   </span>
                                 </span>
@@ -307,9 +295,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                           {formatDocumentStatus(document.status)}
                           <p>
                             <small hidden={document.Recipient.length === 0}>
-                              {document.Recipient.filter(
-                                (r: any) => r.signingStatus === "SIGNED"
-                              ).length || 0}
+                              {document.Recipient.filter((r: any) => r.signingStatus === "SIGNED")
+                                .length || 0}
                               /{document.Recipient.length || 0}
                             </small>
                           </p>
@@ -327,6 +314,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                                 event.stopPropagation();
                                 router.push("/documents/" + document.id);
                               }}
+                              disabled={document.status === "COMPLETED"}
                             />
                             <IconButton
                               icon={ArrowDownTrayIcon}
@@ -342,30 +330,20 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                               onClick={(event: any) => {
                                 event.preventDefault();
                                 event.stopPropagation();
-                                if (
-                                  confirm(
-                                    "Are you sure you want to delete this document"
-                                  )
-                                ) {
+                                if (confirm("Are you sure you want to delete this document")) {
                                   const documentsWithoutIndex = [...documents];
-                                  const removedItem: any =
-                                    documentsWithoutIndex.splice(index, 1);
+                                  const removedItem: any = documentsWithoutIndex.splice(index, 1);
                                   setDocuments(documentsWithoutIndex);
                                   deleteDocument(document.id)
                                     .catch((err) => {
-                                      documentsWithoutIndex.splice(
-                                        index,
-                                        0,
-                                        removedItem
-                                      );
+                                      documentsWithoutIndex.splice(index, 0, removedItem);
                                       setDocuments(documentsWithoutIndex);
                                     })
                                     .then(() => {
                                       loadDocuments();
                                     });
                                 }
-                              }}
-                            ></IconButton>
+                              }}></IconButton>
                             <span className="sr-only">, {document.name}</span>
                           </div>
                         </td>
@@ -374,29 +352,21 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                   </tbody>
                 </table>
               </div>
-              <div
-                hidden={filteredDocuments.length > 0}
-                className="mx-auto w-fit mt-12 p-3"
-              >
-                <FunnelIcon className="w-5 inline mr-1 align-middle" /> Nothing
-                here. Maybe try a different filter.
+              <div hidden={filteredDocuments.length > 0} className="mx-auto mt-12 w-fit p-3">
+                <FunnelIcon className="mr-1 inline w-5 align-middle" /> Nothing here. Maybe try a
+                different filter.
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div
-        className="text-center mt-24"
-        id="empty"
-        hidden={documents.length > 0 || loading}
-      >
+      <div className="mt-24 text-center" id="empty" hidden={documents.length > 0 || loading}>
         <svg
           className="mx-auto h-12 w-12 text-gray-400"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
-          aria-hidden="true"
-        >
+          aria-hidden="true">
           <path
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -413,8 +383,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
             icon={PlusIcon}
             onClick={() => {
               document?.getElementById("fileUploadHelper")?.click();
-            }}
-          >
+            }}>
             Add Document
           </Button>
           <input

apps/web/pages/documents/[id]/index.tsx

@@ -1,23 +1,21 @@
 import { ReactElement } from "react";
-import Layout from "../../../components/layout";
-import { NextPageWithLayout } from "../../_app";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
-import { getUserFromToken } from "@documenso/lib/server";
-import Link from "next/link";
-import { DocumentStatus } from "@prisma/client";
-import {
-  InformationCircleIcon,
-  PaperAirplaneIcon,
-  UsersIcon,
-} from "@heroicons/react/24/outline";
 import { getDocument } from "@documenso/lib/query";
-import { Document as PrismaDocument } from "@prisma/client";
-import { Button, Breadcrumb } from "@documenso/ui";
+import { getUserFromToken } from "@documenso/lib/server";
+import { useSubscription } from "@documenso/lib/stripe";
+import { Breadcrumb, Button } from "@documenso/ui";
 import PDFEditor from "../../../components/editor/pdf-editor";
+import Layout from "../../../components/layout";
+import { NextPageWithLayout } from "../../_app";
+import { InformationCircleIcon, PaperAirplaneIcon, UsersIcon } from "@heroicons/react/24/outline";
+import { DocumentStatus } from "@prisma/client";
+import { Document as PrismaDocument } from "@prisma/client";
 
 const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
   const router = useRouter();
+  const { hasSubscription } = useSubscription();
 
   return (
     <div className="mt-4">
@@ -32,8 +30,7 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
               },
               {
                 title: props.document.title,
-                href:
-                  NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id,
+                href: NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id,
               },
             ]}
           />
@@ -67,21 +64,13 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
             <Button
               icon={PaperAirplaneIcon}
               className="ml-3"
-              href={
-                NEXT_PUBLIC_WEBAPP_URL +
-                "/documents/" +
-                props.document.id +
-                "/recipients"
-              }
+              href={NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id + "/recipients"}
               onClick={() => {
                 if (
-                  confirm(
-                    `Send document out to ${props?.document?.Recipient?.length} recipients?`
-                  )
+                  confirm(`Send document out to ${props?.document?.Recipient?.length} recipients?`)
                 ) {
                 }
-              }}
-            >
+              }}>
               Prepare to Send
             </Button>
           </div>
@@ -120,11 +109,7 @@ export async function getServerSideProps(context: any) {
   const { id: documentId } = context.query;
 
   try {
-    const document: PrismaDocument = await getDocument(
-      +documentId,
-      context.req,
-      context.res
-    );
+    const document: PrismaDocument = await getDocument(+documentId, context.req, context.res);
 
     return {
       props: {

apps/web/pages/documents/[id]/recipients.tsx

@@ -1,32 +1,36 @@
-import Head from "next/head";
 import { ReactElement, useRef, useState } from "react";
+import Head from "next/head";
+import { NEXT_PUBLIC_WEBAPP_URL, classNames } from "@documenso/lib";
+import { createOrUpdateRecipient, deleteRecipient, sendSigningRequests } from "@documenso/lib/api";
+import { getDocument } from "@documenso/lib/query";
+import { getUserFromToken } from "@documenso/lib/server";
+import { Breadcrumb, Button, Dialog, IconButton, Tooltip } from "@documenso/ui";
 import Layout from "../../../components/layout";
 import { NextPageWithLayout } from "../../_app";
-import { classNames, NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
 import {
   ArrowDownTrayIcon,
   CheckBadgeIcon,
   CheckIcon,
+  EnvelopeIcon,
   PaperAirplaneIcon,
   PencilSquareIcon,
   TrashIcon,
   UserPlusIcon,
-  EnvelopeIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
-import { getUserFromToken } from "@documenso/lib/server";
-import { getDocument } from "@documenso/lib/query";
-import { Document as PrismaDocument, DocumentStatus } from "@prisma/client";
-import { Breadcrumb, Button, Dialog, IconButton } from "@documenso/ui";
-import { createOrUpdateRecipient, deleteRecipient, sendSigningRequests } from "@documenso/lib/api";
-
+import { DocumentStatus, Document as PrismaDocument, Recipient } from "@prisma/client";
 import { FormProvider, useFieldArray, useForm, useWatch } from "react-hook-form";
+import { toast } from "react-hot-toast";
+import { useSubscription } from "@documenso/lib/stripe";
 
 export type FormValues = {
-  signers: { id: number; email: string; name: string }[];
+  signers: Array<Pick<Recipient, 'id' | 'email' | 'name' | 'sendStatus' | 'readStatus' | 'signingStatus'>>;
 };
 
+type FormSigner = FormValues["signers"][number];
+
 const RecipientsPage: NextPageWithLayout = (props: any) => {
+  const { hasSubscription } = useSubscription();
   const title: string = `"` + props?.document?.title + `"` + "Recipients | Documenso";
   const breadcrumbItems = [
     {
@@ -35,7 +39,10 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
     },
     {
       title: props.document.title,
-      href: NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id,
+      href:
+        props.document.status !== DocumentStatus.COMPLETED
+          ? NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id
+          : NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id + "/recipients",
     },
     {
       title: "Recipients",
@@ -61,7 +68,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
   });
   const formValues = useWatch({ control, name: "signers" });
   const cancelButtonRef = useRef(null);
-  const hasEmailError = (formValue: any): boolean => {
+  const hasEmailError = (formValue: FormSigner): boolean => {
     const index = formValues.findIndex((e) => e.id === formValue.id);
     return !!errors?.signers?.[index]?.email;
   };
@@ -71,80 +78,85 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
       <Head>
         <title>{title}</title>
       </Head>
-      <div className="px-6 mt-10 sm:px-0">
+      <div className="mt-10 px-6 sm:px-0">
         <div>
           <Breadcrumb document={props.document} items={breadcrumbItems} />
         </div>
         <div className="mt-2 md:flex md:items-center md:justify-between">
-          <div className="flex-1 min-w-0">
+          <div className="min-w-0 flex-1">
             <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
               {props.document.title}
             </h2>
           </div>
-          <div className="flex flex-shrink-0 mt-4 md:mt-0 md:ml-4">
+          <div className="mt-4 flex flex-shrink-0 md:mt-0 md:ml-4">
             <Button
               icon={ArrowDownTrayIcon}
               color="secondary"
               className="mr-2"
-              href={"/api/documents/" + props.document.id}
-            >
+              href={"/api/documents/" + props.document.id}>
               Download
             </Button>
-            <Button
-              icon={PencilSquareIcon}
-              disabled={props.document.status === DocumentStatus.COMPLETED}
-              color={props.document.status === DocumentStatus.COMPLETED ? "primary" : "secondary"}
-              className="mr-2"
-              href={breadcrumbItems[1].href}
-            >
-              Edit Document
-            </Button>
-            <Button
-              className="min-w-[125px]"
-              color="primary"
-              icon={PaperAirplaneIcon}
-              onClick={() => {
-                setOpen(true);
-              }}
-              disabled={
-                (formValues.length || 0) === 0 ||
-                !formValues.some(
-                  (r: any) => r.email && !hasEmailError(r) && r.sendStatus === "NOT_SENT"
-                ) ||
-                loading
-              }
-            >
-              Send
-            </Button>
+            {props.document.status !== DocumentStatus.COMPLETED && (
+              <>
+                <Button
+                  icon={PencilSquareIcon}
+                  disabled={props.document.status === DocumentStatus.COMPLETED}
+                  color={
+                    props.document.status === DocumentStatus.COMPLETED ? "primary" : "secondary"
+                  }
+                  className="mr-2"
+                  href={breadcrumbItems[1].href}>
+                  Edit Document
+                </Button>
+                <Button
+                  className="min-w-[125px]"
+                  color="primary"
+                  icon={PaperAirplaneIcon}
+                  onClick={() => {
+                    formValues.some((r) => r.email && hasEmailError(r))
+                      ? toast.error("Please enter a valid email address.", { id: "invalid email" })
+                      : setOpen(true);
+                  }}
+                  disabled={
+                    !hasSubscription || 
+                    (formValues.length || 0) === 0 ||
+                    !formValues.some(
+                      (r) => r.email && !hasEmailError(r) && r.sendStatus === "NOT_SENT"
+                    ) ||
+                    loading
+                  }>
+                  Send
+                </Button>
+              </>
+            )}
           </div>
         </div>
-        <div className="p-4 mt-10 overflow-hidden bg-white rounded-md shadow sm:p-6">
-          <div className="pb-3 border-b border-gray-200 sm:pb-5">
+        <div className="mt-10 overflow-hidden rounded-md bg-white p-4 shadow sm:p-6">
+          <div className="border-b border-gray-200 pb-3 sm:pb-5">
             <h3 className="text-lg font-medium leading-6 text-gray-900 ">Signers</h3>
-            <p className="max-w-4xl mt-2 text-sm text-gray-500">
-              The people who will sign the document.
+            <p className="mt-2 max-w-4xl text-sm text-gray-500">
+              {props.document.status !== DocumentStatus.COMPLETED
+                ? "The people who will sign the document."
+                : "The people who signed the document."}
             </p>
           </div>
           <FormProvider {...form}>
             <form
               onChange={() => {
                 trigger();
-              }}
-            >
+              }}>
               <ul role="list" className="divide-y divide-gray-200">
-                {fields.map((item: any, index: number) => (
+                {fields.map((item, index) => (
                   <li
                     key={index}
-                    className="w-full px-2 py-3 border-0 hover:bg-green-50 group sm:py-4"
-                  >
+                    className="group w-full border-0 px-2 py-3 hover:bg-green-50 sm:py-4">
                     <div id="container" className="block w-full lg:flex lg:justify-between">
-                      <div className="block space-y-2 md:space-x-2 md:space-y-0 md:flex">
+                      <div className="block space-y-2 md:flex md:space-x-2 md:space-y-0">
                         <div
                           className={classNames(
-                            "md:w-[250px] rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:border-neon focus-within:ring-1 focus-within:ring-neon",
+                            "focus-within:border-neon focus-within:ring-neon rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:ring-1 md:w-[250px]",
                             item.sendStatus === "SENT" ? "bg-gray-100" : ""
-                          )}
-                        >
+                          )}>
                           <label htmlFor="name" className="block text-xs font-medium text-gray-900">
                             Email
                           </label>
@@ -170,8 +182,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                                     documentId: props.document.id,
                                   });
                             }}
-                            className="block w-full p-0  text-gray-900 placeholder-gray-500 disabled:bg-neutral-100 border-0 outline-none sm:text-sm bg-inherit"
-                            placeholder="john.dorian@loremipsum.com"
+                            className="block w-full border-0  bg-inherit p-0 text-gray-900 placeholder-gray-500 outline-none disabled:bg-neutral-100 sm:text-sm"
                           />
                           {errors?.signers?.[index] ? (
                             <p className="mt-2 text-sm text-red-600" id="email-error">
@@ -183,10 +194,9 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                         </div>
                         <div
                           className={classNames(
-                            "md:w-[250px] rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:border-neon focus-within:ring-1 focus-within:ring-neon",
+                            "focus-within:border-neon focus-within:ring-neon rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:ring-1 md:w-[250px]",
                             item.sendStatus === "SENT" ? "bg-gray-100" : ""
-                          )}
-                        >
+                          )}>
                           <label htmlFor="name" className="block text-xs font-medium text-gray-900">
                             Name (optional)
                           </label>
@@ -209,121 +219,118 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
                                   documentId: props.document.id,
                                 });
                             }}
-                            className="block w-full p-0 text-gray-900 placeholder-gray-500 disabled:bg-neutral-100 border-0 outline-none sm:text-sm bg-inherit"
-                            placeholder="John Dorian"
+                            className="block w-full border-0 bg-inherit p-0 text-gray-900 placeholder-gray-500 outline-none disabled:bg-neutral-100 sm:text-sm"
                           />
                         </div>
                       </div>
                       <div className="flex items-center space-x-2 lg:ml-2">
-                        <div className="flex mb-2 mr-2 lg:mr-0">
+                        <div className="mb-2 mr-2 flex lg:mr-0">
                           <div key={item.id} className="space-x-2">
                             {item.sendStatus === "NOT_SENT" ? (
                               <span
                                 id="sent_icon"
-                                className="inline-block mt-3 flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800"
-                              >
+                                className="mt-3 inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800">
                                 Not Sent
                               </span>
-                            ) : (
-                              ""
-                            )}
+                            ) : null}
                             {item.sendStatus === "SENT" && item.readStatus !== "OPENED" ? (
                               <span id="sent_icon">
                                 <span
                                   id="sent_icon"
-                                  className="inline-block mt-3 flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800 "
-                                >
-                                  <CheckIcon className="inline h-5 mr-1" /> Sent
+                                  className="mt-3 inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800 ">
+                                  <CheckIcon className="mr-1 inline h-5" /> Sent
                                 </span>
                               </span>
-                            ) : (
-                              ""
-                            )}
+                            ) : null}
                             {item.readStatus === "OPENED" && item.signingStatus === "NOT_SIGNED" ? (
                               <span id="read_icon">
                                 <span
                                   id="sent_icon"
-                                  className="inline-block mt-3 flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800"
-                                >
-                                  <CheckIcon className="inline h-5 -mr-2"></CheckIcon>
-                                  <CheckIcon className="inline h-5 mr-1"></CheckIcon>
+                                  className="mt-3 inline-block flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800">
+                                  <CheckIcon className="-mr-2 inline h-5"></CheckIcon>
+                                  <CheckIcon className="mr-1 inline h-5"></CheckIcon>
                                   Seen
                                 </span>
                               </span>
-                            ) : (
-                              ""
-                            )}
+                            ) : null}
                             {item.signingStatus === "SIGNED" ? (
                               <span id="signed_icon">
                                 <span
                                   id="sent_icon"
-                                  className="inline-block mt-3 flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"
-                                >
-                                  <CheckBadgeIcon className="inline h-5 mr-1"></CheckBadgeIcon>
+                                  className="mt-3  inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium  text-green-800">
+                                  <CheckBadgeIcon className="mr-1 inline h-5"></CheckBadgeIcon>
                                   Signed
                                 </span>
                               </span>
-                            ) : (
-                              ""
-                            )}
+                            ) : null}
                           </div>
                         </div>
-                        <div className="flex mr-1">
-                          <IconButton
-                            icon={PaperAirplaneIcon}
-                            disabled={
-                              !item.id ||
-                              item.sendStatus !== "SENT" ||
-                              item.signingStatus === "SIGNED" ||
-                              loading
-                            }
-                            color="secondary"
-                            className="my-auto mr-4 h-9"
-                            onClick={() => {
-                              if (confirm("Resend this signing request?")) {
-                                setLoading(true);
-                                sendSigningRequests(props.document, [item.id]).finally(() => {
-                                  setLoading(false);
-                                });
-                              }
-                            }}
-                          >
-                            Resend
-                          </IconButton>
-                          <IconButton
-                            icon={TrashIcon}
-                            disabled={!item.id || item.sendStatus === "SENT" || loading}
-                            onClick={() => {
-                              const removedItem = { ...fields }[index];
-                              remove(index);
-                              deleteRecipient(item)?.catch((err) => {
-                                append(removedItem);
-                              });
-                            }}
-                            className="group-hover:text-neon-dark group-hover:disabled:text-gray-400"
-                          />
-                        </div>
+                        {props.document.status !== DocumentStatus.COMPLETED && (
+                          <div className="mr-1 flex">
+                            <Tooltip label="Resend">
+                              <IconButton
+                                icon={PaperAirplaneIcon}
+                                disabled={
+                                  !item.id ||
+                                  item.sendStatus !== "SENT" ||
+                                  item.signingStatus === "SIGNED" ||
+                                  loading
+                                }
+                                onClick={(event: any) => {
+                                  event.preventDefault();
+                                  event.stopPropagation();
+                                  if (confirm("Resend this signing request?")) {
+                                    setLoading(true);
+                                    sendSigningRequests(props.document, [item.id]).finally(() => {
+                                      setLoading(false);
+                                    });
+                                  }
+                                }}
+                                className="mx-1 group-hover:text-neon-dark group-hover:disabled:text-gray-400"
+                              />
+                            </Tooltip>
+                            <Tooltip label="Delete">
+                              <IconButton
+                                icon={TrashIcon}
+                                disabled={!item.id || item.sendStatus === "SENT" || loading}
+                                onClick={(event: any) => {
+                                  event.preventDefault();
+                                  event.stopPropagation();
+                                  if (confirm("Delete this signing request?")) {
+                                    const removedItem = { ...fields }[index];
+                                    remove(index);
+                                    deleteRecipient(item)?.catch((err) => {
+                                      append(removedItem);
+                                    });
+                                  }
+                                }}
+                                className="mx-1 group-hover:text-neon-dark group-hover:disabled:text-gray-400"
+                              />
+                            </Tooltip>
+                          </div>
+                        )}
                       </div>
                     </div>
                   </li>
                 ))}
               </ul>
-              <Button
-                icon={UserPlusIcon}
-                className="mt-3"
-                onClick={() => {
-                  createOrUpdateRecipient({
-                    id: "",
-                    email: "",
-                    name: "",
-                    documentId: props.document.id,
-                  }).then((res) => {
-                    append(res);
-                  });
-                }}
-              >
-                Add Signer
-              </Button>
+              {props.document.status !== "COMPLETED" && (
+                <Button
+                  icon={UserPlusIcon}
+                  className="mt-3"
+                  onClick={() => {
+                    createOrUpdateRecipient({
+                      id: "",
+                      email: "",
+                      name: "",
+                      documentId: props.document.id,
+                    }).then((res) => {
+                      append(res);
+                    });
+                  }}>
+                  Add Signer
+                </Button>
+              )}
             </form>
           </FormProvider>
         </div>
@@ -336,7 +343,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
         open={open}
         setLoading={setLoading}
         setOpen={setOpen}
-        icon={<EnvelopeIcon className="w-6 h-6 text-green-600" aria-hidden="true" />}
+        icon={<EnvelopeIcon className="h-6 w-6 text-green-600" aria-hidden="true" />}
       />
     </>
   );

apps/web/pages/documents/[id]/sign.tsx

@@ -1,11 +1,11 @@
-import prisma from "@documenso/prisma";
 import Head from "next/head";
-import { NextPageWithLayout } from "../../_app";
-import { ReadStatus } from "@prisma/client";
-import PDFSigner from "../../../components/editor/pdf-signer";
 import Link from "next/link";
+import prisma from "@documenso/prisma";
+import PDFSigner from "../../../components/editor/pdf-signer";
+import { NextPageWithLayout } from "../../_app";
 import { ClockIcon } from "@heroicons/react/24/outline";
-import { FieldType, DocumentStatus } from "@prisma/client";
+import { ReadStatus } from "@prisma/client";
+import { DocumentStatus, FieldType } from "@prisma/client";
 
 const SignPage: NextPageWithLayout = (props: any) => {
   return (
@@ -14,36 +14,22 @@ const SignPage: NextPageWithLayout = (props: any) => {
         <title>Sign | Documenso</title>
       </Head>
       {!props.expired ? (
-        <PDFSigner
-          document={props.document}
-          recipient={props.recipient}
-          fields={props.fields}
-        />
+        <PDFSigner document={props.document} recipient={props.recipient} fields={props.fields} />
       ) : (
         <>
           <div className="mx-auto w-fit px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
-            <ClockIcon className="text-neon w-10 inline mr-1"></ClockIcon>
-            <h1 className="text-base font-medium text-neon inline align-middle">
-              Time flies.
-            </h1>
-            <p className="mt-2 text-4xl font-bold tracking-tight">
-              This signing link is expired.
-            </p>
+            <ClockIcon className="text-neon mr-1 inline w-10"></ClockIcon>
+            <h1 className="text-neon inline align-middle text-base font-medium">Time flies.</h1>
+            <p className="mt-2 text-4xl font-bold tracking-tight">This signing link is expired.</p>
             <p className="mt-2 text-base text-gray-500">
-              Please ask{" "}
-              {props.document.User.name
-                ? `${props.document.User.name}`
-                : `the sender`}{" "}
+              Please ask {props.document.User.name ? `${props.document.User.name}` : `the sender`}{" "}
               to resend it.
             </p>
-            <div className="mx-auto w-fit text-xl pt-20"></div>
+            <div className="mx-auto w-fit pt-20 text-xl"></div>
           </div>
           <div>
             <div className="relative mx-96">
-              <div
-                className="absolute inset-0 flex items-center"
-                aria-hidden="true"
-              >
+              <div className="absolute inset-0 flex items-center" aria-hidden="true">
                 <div className="w-full border-t border-gray-300" />
               </div>
               <div className="relative flex justify-center"></div>
@@ -51,10 +37,7 @@ const SignPage: NextPageWithLayout = (props: any) => {
           </div>
           <p className="mt-4 text-center text-sm text-gray-600">
             Want to send of your own?{" "}
-            <Link
-              href="/signup?source=expired"
-              className="font-medium text-neon hover:text-neon"
-            >
+            <Link href="/signup?source=expired" className="text-neon hover:text-neon font-medium">
               Create your own Account
             </Link>
           </p>
@@ -90,7 +73,7 @@ export async function getServerSideProps(context: any) {
     return {
       redirect: {
         permanent: false,
-        destination: `/documents/${recipient.Document.id}/signed`,
+        destination: `/documents/${recipient.Document.id}/signed?token=${recipientToken}`,
       },
     };
   }
@@ -118,13 +101,9 @@ export async function getServerSideProps(context: any) {
   return {
     props: {
       recipient: JSON.parse(JSON.stringify(recipient)),
-      document: JSON.parse(
-        JSON.stringify({ ...recipient.Document, document: "" })
-      ),
+      document: JSON.parse(JSON.stringify({ ...recipient.Document, document: "" })),
       fields: JSON.parse(JSON.stringify(unsignedFields)),
-      expired: recipient.expired
-        ? new Date(recipient.expired) < new Date()
-        : false,
+      expired: recipient.expired ? new Date(recipient.expired) < new Date() : false,
     },
   };
 }

apps/web/pages/documents/[id]/signed.tsx

@@ -1,10 +1,10 @@
-import prisma from "@documenso/prisma";
 import Head from "next/head";
-import { NextPageWithLayout } from "../../_app";
-import { ArrowDownTrayIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
-import { Button, IconButton } from "@documenso/ui";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import prisma from "@documenso/prisma";
+import { Button, IconButton } from "@documenso/ui";
+import { NextPageWithLayout } from "../../_app";
+import { ArrowDownTrayIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
 
 const Signed: NextPageWithLayout = (props: any) => {
   const router = useRouter();
@@ -18,29 +18,18 @@ const Signed: NextPageWithLayout = (props: any) => {
         <title>Sign | Documenso</title>
       </Head>
       <div className="mx-auto w-fit px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
-        <CheckBadgeIcon className="text-neon w-10 inline mr-1"></CheckBadgeIcon>
-        <h1 className="text-base font-medium text-neon inline align-middle">
-          It's done!
-        </h1>
+        <CheckBadgeIcon className="text-neon mr-1 inline w-10"></CheckBadgeIcon>
+        <h1 className="text-neon inline align-middle text-base font-medium">It's done!</h1>
         <p className="mt-2 text-4xl font-bold tracking-tight">
           You signed "{props.document.title}"
         </p>
-        <p
-          className="mt-2 text-base text-gray-500 max-w-sm"
-          hidden={allRecipientsSigned}
-        >
+        <p className="mt-2 max-w-sm text-base text-gray-500" hidden={allRecipientsSigned}>
           You will be notfied when all recipients have signed.
         </p>
-        <p
-          className="mt-2 text-base text-gray-500 max-w-sm"
-          hidden={!allRecipientsSigned}
-        >
+        <p className="mt-2 max-w-sm text-base text-gray-500" hidden={!allRecipientsSigned}>
           All recipients signed.
         </p>
-        <div
-          className="mx-auto w-fit text-xl pt-20"
-          hidden={!allRecipientsSigned}
-        >
+        <div className="mx-auto w-fit pt-20 text-xl" hidden={!allRecipientsSigned}>
           <Button
             icon={ArrowDownTrayIcon}
             color="secondary"
@@ -48,23 +37,16 @@ const Signed: NextPageWithLayout = (props: any) => {
               event.preventDefault();
               event.stopPropagation();
               router.push(
-                "/api/documents/" +
-                  props.document.id +
-                  "?token=" +
-                  props.recipient.token
+                "/api/documents/" + props.document.id + "?token=" + props.recipient.token
               );
-            }}
-          >
+            }}>
             Download "{props.document.title}"
           </Button>
         </div>
       </div>
       <div>
         <div className="relative mx-96">
-          <div
-            className="absolute inset-0 flex items-center"
-            aria-hidden="true"
-          >
+          <div className="absolute inset-0 flex items-center" aria-hidden="true">
             <div className="w-full border-t border-gray-300" />
           </div>
           <div className="relative flex justify-center"></div>
@@ -72,10 +54,7 @@ const Signed: NextPageWithLayout = (props: any) => {
       </div>
       <p className="mt-4 text-center text-sm text-gray-600">
         Want to send slick signing links like this one?{" "}
-        <Link
-          href="https://documenso.com"
-          className="font-medium text-neon hover:text-neon"
-        >
+        <Link href="https://documenso.com" className="text-neon hover:text-neon font-medium">
           Hosted Documenso is coming soon™
         </Link>
       </p>

apps/web/pages/login.tsx

@@ -1,4 +1,5 @@
 import Head from "next/head";
+import { getUserFromToken } from "@documenso/lib/server";
 import Login from "../components/login";
 
 export default function LoginPage(props: any) {
@@ -13,11 +14,21 @@ export default function LoginPage(props: any) {
 }
 
 export async function getServerSideProps(context: any) {
-  const ALLOW_SIGNUP = process.env.ALLOW_SIGNUP === "true";
+  const user = await getUserFromToken(context.req, context.res);
+  if (user)
+    return {
+      redirect: {
+        source: "/login",
+        destination: "/dashboard",
+        permanent: false,
+      },
+    };
+
+  const ALLOW_SIGNUP = process.env.NEXT_PUBLIC_ALLOW_SIGNUP === "true";
 
   return {
     props: {
-      ALLOW_SIGNUP: ALLOW_SIGNUP,
+      ALLOW_SIGNUP,
     },
   };
 }

apps/web/pages/settings/account.tsx

@@ -1,2 +1,3 @@
 import SettingsPage from ".";
+
 export default SettingsPage;

apps/web/pages/settings/billing.tsx

@@ -0,0 +1 @@
+export { default } from ".";

apps/web/pages/settings/password.tsx

@@ -1,2 +1,3 @@
 import SettingsPage from ".";
+
 export default SettingsPage;

apps/web/pages/settings/profile.tsx

@@ -1,2 +1,3 @@
 import SettingsPage from ".";
+
 export default SettingsPage;

apps/web/pages/signup.tsx

@@ -1,5 +1,6 @@
 import { NextPageContext } from "next";
 import Head from "next/head";
+import { getUserFromToken } from "@documenso/lib/server";
 import Signup from "../components/signup";
 
 export default function SignupPage(props: { source: string }) {
@@ -14,7 +15,7 @@ export default function SignupPage(props: { source: string }) {
 }
 
 export async function getServerSideProps(context: any) {
-  if (process.env.ALLOW_SIGNUP !== "true")
+  if (process.env.NEXT_PUBLIC_ALLOW_SIGNUP !== "true")
     return {
       redirect: {
         destination: "/login",
@@ -22,6 +23,16 @@ export async function getServerSideProps(context: any) {
       },
     };
 
+  const user = await getUserFromToken(context.req, context.res);
+  if (user)
+    return {
+      redirect: {
+        source: "/signup",
+        destination: "/dashboard",
+        permanent: false,
+      },
+    };
+
   const signupSource: string = context.query["source"];
   return {
     props: {

apps/web/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

apps/web/process-env.d.ts

@@ -0,0 +1,24 @@
+declare namespace NodeJS {
+  export interface ProcessEnv {
+    DATABASE_URL: string;
+    NEXT_PUBLIC_WEBAPP_URL: string;
+    NEXTAUTH_SECRET: string;
+    NEXTAUTH_URL: string;
+    
+    SENDGRID_API_KEY?: string;
+    SMTP_MAIL_HOST?: string;
+    SMTP_MAIL_PORT?: string;
+    SMTP_MAIL_USER?: string;
+    SMTP_MAIL_PASSWORD?: string;
+    
+    MAIL_FROM: string;
+
+    STRIPE_API_KEY?: string;
+    STRIPE_WEBHOOK_SECRET?: string;
+    NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID?: string;
+    NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID?: string;
+    
+    NEXT_PUBLIC_ALLOW_SIGNUP?: string;
+    NEXT_PUBLIC_ALLOW_SUBSCRIPTIONS?: string;
+  }
+}

apps/web/styles/tailwind.css

@@ -24,9 +24,8 @@ body,
   font-weight: 400;
   font-display: swap;
   src: url("/fonts/montserrat.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 /* latin */
@@ -36,7 +35,6 @@ body,
   font-weight: 700;
   font-display: swap;
   src: url("/fonts/montserrat.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

apps/web/tailwind.config.js

@@ -16,9 +16,48 @@ module.exports = {
         qwigley: ["Qwigley", "serif"],
       },
       colors: {
-        neon: "#37f095",
-        "neon-dark": "#2CC077",
-        brown: "#353434",
+        neon: {
+          DEFAULT: "#37F095",
+          50: "#E2FDF0",
+          100: "#CFFBE5",
+          200: "#A9F9D1",
+          300: "#83F6BD",
+          400: "#5DF3A9",
+          500: "#37F095",
+          600: "#11DE79",
+          700: "#0DAA5D",
+          800: "#097640",
+          900: "#054224",
+          950: "#032816",
+        },
+        "neon-dark": {
+          DEFAULT: "#2CC077",
+          50: "#B5EED2",
+          100: "#A5EAC8",
+          200: "#84E3B4",
+          300: "#62DBA0",
+          400: "#41D48B",
+          500: "#2CC077",
+          600: "#22925B",
+          700: "#17653E",
+          800: "#0D3722",
+          900: "#020906",
+          950: "#000000",
+        },
+        brown: {
+          DEFAULT: "#353434",
+          50: "#918F8F",
+          100: "#878585",
+          200: "#737171",
+          300: "#5E5C5C",
+          400: "#4A4848",
+          500: "#353434",
+          600: "#191818",
+          700: "#000000",
+          800: "#000000",
+          900: "#000000",
+          950: "#000000",
+        },
       },
       borderRadius: {
         "4xl": "2rem",

apps/web/tsconfig.json

@@ -21,6 +21,6 @@
     "../../packages/types/next-auth.d.ts",
     "**/*.ts",
     "**/*.tsx"
-  ],
+, "../../packages/lib/process-env.d.ts"  ],
   "exclude": ["node_modules"]
 }

docker/Dockerfile

@@ -0,0 +1,50 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS production_deps
+WORKDIR /app
+
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+
+# Copy our current monorepo
+COPY . .
+
+RUN npm ci --production
+
+# Install dependencies only when needed
+FROM base AS builder
+WORKDIR /app
+
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+
+# Copy our current monorepo
+COPY . .
+
+RUN npm ci
+
+RUN npm run build --workspaces
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=production_deps --chown=nextjs:nodejs /app/node_modules ./node_modules
+COPY --from=production_deps --chown=nextjs:nodejs /app/package-lock.json ./package-lock.json
+
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/package.json ./package.json
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next ./.next
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["npm", "run", "start"]

docker/build.sh

@@ -0,0 +1,28 @@
+#!/usr/bin/env bash
+
+command -v docker >/dev/null 2>&1 || {
+    echo "Docker is not running. Please start Docker and try again."
+    exit 1
+}
+
+command -v jq >/dev/null 2>&1 || {
+    echo "jq is not installed. Please install jq and try again."
+    exit 1
+}
+
+SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
+MONOREPO_ROOT="$(readlink -f "$SCRIPT_DIR/../")"
+
+APP_VERSION="$(jq -r '.version' "$MONOREPO_ROOT/apps/web/package.json")"
+GIT_SHA="$(git rev-parse HEAD)"
+
+echo "Building docker image for monorepo at $MONOREPO_ROOT"
+echo "App version: $APP_VERSION"
+echo "Git SHA: $GIT_SHA"
+
+docker build -f "$SCRIPT_DIR/Dockerfile" \
+    --progress=plain \
+    -t "documentso:latest" \
+    -t "documenso:$GIT_SHA" \
+    -t "documenso:$APP_VERSION" \
+    "$MONOREPO_ROOT"

docker/compose-entrypoint.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
+MONOREPO_ROOT="$(readlink -f "$SCRIPT_DIR/../")"
+
+cd "$MONOREPO_ROOT"
+
+npm ci
+
+npm run db-migrate:dev
+
+npm run dev

docker/compose-without-app.yml

@@ -0,0 +1,19 @@
+name: documenso
+services:
+  database:
+    image: postgres:15
+    container_name: database
+    environment:
+      - POSTGRES_USER=documenso
+      - POSTGRES_PASSWORD=password
+      - POSTGRES_DB=documenso
+    ports:
+      - 54320:5432
+
+  inbucket:
+    image: inbucket/inbucket
+    container_name: mailserver
+    ports:
+      - 9000:9000
+      - 2500:2500
+      - 1100:1100

docker/compose.yml

@@ -0,0 +1,40 @@
+services:
+  database:
+    image: postgres:15
+    environment:
+      - POSTGRES_USER=documenso
+      - POSTGRES_PASSWORD=password
+      - POSTGRES_DB=documenso
+    ports:
+      - 5432:5432
+
+  inbucket:
+    image: inbucket/inbucket
+    ports:
+      - 9000:9000
+      - 2500:2500
+      - 1100:1100
+
+  documenso:
+    image: node:18
+    working_dir: /app
+    command: ./docker/compose-entrypoint.sh
+    depends_on:
+      - database
+      - inbucket
+    environment:
+      - DATABASE_URL=postgres://documenso:password@database:5432/documenso
+      - NEXT_PUBLIC_WEBAPP_URL=http://localhost:3000
+      - NEXTAUTH_SECRET=my-super-secure-secret
+      - NEXTAUTH_URL=http://localhost:3000
+      - SENDGRID_API_KEY=
+      - SMTP_MAIL_HOST=inbucket
+      - SMTP_MAIL_PORT=2500
+      - SMTP_MAIL_USER=username
+      - SMTP_MAIL_PASSWORD=password
+      - MAIL_FROM=admin@example.com
+      - NEXT_PUBLIC_ALLOW_SIGNUP=true
+    ports:
+      - 3000:3000
+    volumes:
+      - ../:/app

package.json

@@ -2,12 +2,18 @@
   "name": "documenso-monorepo",
   "version": "0.0.0",
   "scripts": {
-    "dev": "cd apps && cd web && next dev",
+    "dev": "npm run dev -w apps/web",
     "build": "npm i && cd apps && cd web && npm i && next build",
     "start": "cd apps && cd web && next start",
     "db-migrate:dev": "prisma migrate dev",
     "db-seed": "prisma db seed",
-    "db-studio": "prisma studio"
+    "db-studio": "prisma studio",
+    "docker:compose": "docker-compose -f ./docker/compose-without-app.yml",
+    "docker:compose-up": "npm run docker:compose -- up -d",
+    "docker:compose-down": "npm run docker:compose -- down",
+    "stripe:listen": "stripe listen --forward-to localhost:3000/api/stripe/webhook",
+    "dx": "npm install && run-s docker:compose-up db-migrate:dev",
+    "d": "npm install && run-s docker:compose-up db-migrate:dev && npm run db-seed && npm run dev"
   },
   "workspaces": [
     "apps/*",
@@ -21,27 +27,31 @@
     "@documenso/prisma": "*",
     "@headlessui/react": "^1.7.4",
     "@heroicons/react": "^2.0.13",
-    "@tailwindcss/forms": "^0.5.3",
-    "@types/bcryptjs": "^2.4.2",
-    "@types/node": "18.11.9",
-    "@types/react-dom": "18.0.9",
-    "@types/react-signature-canvas": "^1.0.2",
     "avatar-from-initials": "^1.0.3",
     "bcryptjs": "^2.4.3",
-    "dotenv": "^16.0.3",
-    "eslint": "8.27.0",
-    "eslint-config-next": "13.0.3",
-    "install": "^0.13.0",
-    "next": "13.0.3",
+    "next": "13.2.4",
     "next-auth": ">=4.20.1",
-    "next-transpile-modules": "^10.0.0",
-    "npm": "^9.1.3",
     "pdf-lib": "^1.17.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.41.5",
     "react-hot-toast": "^2.4.0",
-    "react-signature-canvas": "^1.0.6",
+    "react-signature-canvas": "^1.0.6"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.3",
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "@types/bcryptjs": "^2.4.2",
+    "@types/node": "18.11.9",
+    "@types/react-dom": "18.0.9",
+    "@types/react-signature-canvas": "^1.0.2",
+    "dotenv": "^16.0.3",
+    "eslint": "8.27.0",
+    "eslint-config-next": "13.0.3",
+    "next-transpile-modules": "^10.0.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.7",
+    "prettier-plugin-tailwindcss": "^0.2.5",
     "typescript": "4.8.4"
   }
-}
+}

packages/features/editor/createField.ts

@@ -14,10 +14,8 @@ export const createField = (
   if (newFieldX < 0) newFieldX = 0;
   if (newFieldY < 0) newFieldY = 0;
 
-  if (newFieldX + fieldSize.width > rect.width)
-    newFieldX = rect.width - fieldSize.width;
-  if (newFieldY + fieldSize.height > rect.height)
-    newFieldY = rect.height - fieldSize.height;
+  if (newFieldX + fieldSize.width > rect.width) newFieldX = rect.width - fieldSize.width;
+  if (newFieldY + fieldSize.height > rect.height) newFieldY = rect.height - fieldSize.height;
 
   const signatureField = {
     id: -1,

packages/features/ee/LICENSE

@@ -0,0 +1,40 @@
+The Documenso Commercial License (the “Commercial License”)
+Copyright (c) 2023 Documenso, Inc
+
+With regard to the Documenso Software:
+
+This software and associated documentation files (the "Software") may only be
+used in production, if you (and any entity that you represent) have agreed to,
+and are in compliance with, an agreement governing
+the use of the Software, as mutually agreed by you and Documenso, Inc ("Documenso"),
+and otherwise have a valid Documenso Enterprise Edition subscription ("Commercial Subscription").
+Subject to the foregoing sentence, you are free to modify this Software and publish patches to the Software.
+You agree that Documenso and/or its licensors (as applicable) retain all right, title and interest in
+and to all such modifications and/or patches, and all such modifications and/or
+patches may only be used, copied, modified, displayed, distributed, or otherwise
+exploited with a valid Commercial Subscription for the correct number of hosts.
+Notwithstanding the foregoing, you may copy and modify the Software for development
+and testing purposes, without requiring a subscription. You agree that Documenso and/or
+its licensors (as applicable) retain all right, title and interest in and to all such
+modifications. You are not granted any other rights beyond what is expressly stated herein.
+Subject to the foregoing, it is forbidden to copy, merge, publish, distribute, sublicense,
+and/or sell the Software.
+
+This Commercial License applies only to the part of this Software that is not distributed under
+the AGPLv3 license. Any part of this Software distributed under the MIT license or which
+is served client-side as an image, font, cascading stylesheet (CSS), file which produces
+or is compiled, arranged, augmented, or combined into client-side JavaScript, in whole or
+in part, is copyrighted under the AGPLv3 license. The full text of this Commercial License shall
+be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+For all third party components incorporated into the Documenso Software, those
+components are licensed under the original license provided by the owner of the
+applicable component.

packages/features/ee/README.md

@@ -0,0 +1,15 @@
+<div align="center"style="padding: 12px">
+  <a href="https://github.com/documenso/documenso.com">
+   <img width="250px" src="https://user-images.githubusercontent.com/1309312/224986248-5b8a5cdc-2dc1-46b9-a354-985bb6808ee0.png" alt="Documenso Logo">
+  </a>
+  
+  <a href="https://dub.sh/documenso-enterprise">Contact Us</a>
+</div>
+
+# Enterprise Edition
+
+Welcome to the Enterprise Edition ("/ee") of Documenso.com.
+
+The [/ee](https://github.com/documenso/documenso/tree/main/packages/features/ee) subfolder is the home of all the **Enterprise Edition** features from our [hosted](https://documenso.com/pricing) plan. To use this code in production you need and valid Enterprise License.
+
+> IMPORTANT: This subfolder is licensed differently than the rest of our [main repo](https://github.com/documenso/documenso). [Contact us](https://dub.sh/documenso-enterprise) to learn more.

packages/features/uploadDocument.ts

@@ -1,9 +1,10 @@
+import { ChangeEvent } from "react";
 import router from "next/router";
-import toast from "react-hot-toast";
 import { NEXT_PUBLIC_WEBAPP_URL } from "../lib/constants";
+import toast from "react-hot-toast";
 
-export const uploadDocument = async (event: any) => {
-  if (event.target.files && event.target.files[0]) {
+export const uploadDocument = async (event: ChangeEvent) => {
+  if (event.target instanceof HTMLInputElement && event.target?.files && event.target.files[0]) {
     const body = new FormData();
     const document = event.target.files[0];
     const fileName: string = event.target.files[0].name;
@@ -12,25 +13,31 @@ export const uploadDocument = async (event: any) => {
       toast.error("Non-PDF documents are not supported yet.");
       return;
     }
+
     body.append("document", document || "");
-    const response: any = await toast
-      .promise(
-        fetch("/api/documents", {
-          method: "POST",
-          body,
-        }),
-        {
-          loading: "Uploading document...",
-          success: `${fileName} uploaded successfully.`,
-          error: "Could not upload document :/",
+
+    await toast.promise(
+      fetch("/api/documents", {
+        method: "POST",
+        body,
+      }).then((response: Response) => {
+        if (!response.ok) {
+          throw new Error("Could not upload document");
         }
-      )
-      .then((response: Response) => {
+
         response.json().then((createdDocumentIdFromBody) => {
           router.push(
             `${NEXT_PUBLIC_WEBAPP_URL}/documents/${createdDocumentIdFromBody}/recipients`
           );
         });
-      });
+      }),
+      {
+        loading: "Uploading document...",
+        success: `${fileName} uploaded successfully.`,
+        error: "Could not upload document :/",
+      }
+    ).catch((_err) => {
+      // Do nothing
+    });
   }
 };

packages/lib/api/deleteRecipient.ts

@@ -6,16 +6,13 @@ export const deleteRecipient = (recipient: any) => {
   }
 
   return toast.promise(
-    fetch(
-      "/api/documents/" + recipient.documentId + "/recipients/" + recipient.id,
-      {
-        method: "DELETE",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(recipient),
-      }
-    ),
+    fetch("/api/documents/" + recipient.documentId + "/recipients/" + recipient.id, {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(recipient),
+    }),
     {
       loading: "Deleting...",
       success: "Deleted.",

packages/lib/api/index.ts

@@ -7,4 +7,4 @@ export { getDocuments } from "./getDocuments";
 export { deleteDocument } from "./deleteDocument";
 export { deleteRecipient } from "./deleteRecipient";
 export { createOrUpdateRecipient } from "./createOrUpdateRecipient";
-export { sendSigningRequests } from "./sendSigningRequests";
+export { sendSigningRequests } from "./sendSigningRequests";

packages/lib/api/sendSigningRequests.ts

@@ -1,9 +1,6 @@
 import toast from "react-hot-toast";
 
-export const sendSigningRequests = async (
-  document: any,
-  resendTo: number[] = []
-) => {
+export const sendSigningRequests = async (document: any, resendTo: number[] = []) => {
   if (!document || !document.id) return;
   try {
     const sent = await toast.promise(

packages/lib/api/signDocument.ts

@@ -1,11 +1,7 @@
 import { useRouter } from "next/router";
 import toast from "react-hot-toast";
 
-export const signDocument = (
-  document: any,
-  signatures: any[],
-  token: string
-): Promise<any> => {
+export const signDocument = (document: any, signatures: any[], token: string): Promise<any> => {
   const body = { documentId: document.id, signatures };
 
   return toast.promise(

packages/lib/auth.ts

@@ -1,12 +1,8 @@
-import { compare, hash } from "bcryptjs";
 import type { NextApiRequest } from "next";
-import type { Session } from "next-auth";
-import {
-  getSession as getSessionInner,
-  GetSessionParams,
-} from "next-auth/react";
-
 import { HttpError } from "@documenso/lib/server";
+import { compare, hash } from "bcryptjs";
+import type { Session } from "next-auth";
+import { GetSessionParams, getSession as getSessionInner } from "next-auth/react";
 
 export async function hashPassword(password: string) {
   const hashedPassword = await hash(password, 12);
@@ -28,9 +24,7 @@ export function validPassword(password: string) {
   return true;
 }
 
-export async function getSession(
-  options: GetSessionParams
-): Promise<Session | null> {
+export async function getSession(options: GetSessionParams): Promise<Session | null> {
   const session = await getSessionInner(options);
 
   // that these are equal are ensured in `[...nextauth]`'s callback
@@ -43,11 +37,7 @@ export function isPasswordValid(
   breakdown: boolean,
   strict?: boolean
 ): { caplow: boolean; num: boolean; min: boolean; admin_min: boolean };
-export function isPasswordValid(
-  password: string,
-  breakdown?: boolean,
-  strict?: boolean
-) {
+export function isPasswordValid(password: string, breakdown?: boolean, strict?: boolean) {
   let cap = false, // Has uppercase characters
     low = false, // Has lowercase characters
     num = false, // At least one number
@@ -63,8 +53,7 @@ export function isPasswordValid(
     }
   }
 
-  if (!breakdown)
-    return cap && low && num && min && (strict ? admin_min : true);
+  if (!breakdown) return cap && low && num && min && (strict ? admin_min : true);
 
   let errors: Record<string, boolean> = { caplow: cap && low, num, min };
   // Only return the admin key if strict mode is enabled.
@@ -79,8 +68,7 @@ type CtxOrReq =
 
 export const ensureSession = async (ctxOrReq: CtxOrReq) => {
   const session = await getSession(ctxOrReq);
-  if (!session?.user)
-    throw new HttpError({ statusCode: 401, message: "Unauthorized" });
+  if (!session?.user) throw new HttpError({ statusCode: 401, message: "Unauthorized" });
   return session;
 };
 

packages/lib/constants.ts

@@ -1 +1,4 @@
-export const NEXT_PUBLIC_WEBAPP_URL = process.env.NEXT_PUBLIC_WEBAPP_URL;
+export const NEXT_PUBLIC_WEBAPP_URL =
+  process.env.IS_PULL_REQUEST === "true"
+    ? process.env.RENDER_EXTERNAL_URL
+    : process.env.NEXT_PUBLIC_WEBAPP_URL;

packages/lib/mail/sendSigningDoneMail.ts

@@ -1,13 +1,9 @@
-import { sendMail } from "./sendMail";
 import { signingCompleteTemplate } from "@documenso/lib/mail";
-import { Document as PrismaDocument } from "@prisma/client";
 import { addDigitalSignature } from "@documenso/signing/addDigitalSignature";
+import { sendMail } from "./sendMail";
+import { Document as PrismaDocument } from "@prisma/client";
 
-export const sendSigningDoneMail = async (
-  recipient: any,
-  document: PrismaDocument,
-  user: any
-) => {
+export const sendSigningDoneMail = async (document: PrismaDocument, user: any) => {
   await sendMail(
     user.email,
     `Completed: "${document.title}"`,
@@ -15,10 +11,7 @@ export const sendSigningDoneMail = async (
     [
       {
         filename: document.title,
-        content: Buffer.from(
-          await addDigitalSignature(document.document),
-          "base64"
-        ),
+        content: Buffer.from(await addDigitalSignature(document.document), "base64"),
       },
     ]
   );

packages/lib/mail/sendSigningRequest.ts

@@ -1,8 +1,8 @@
-import prisma from "@documenso/prisma";
-import { sendMail } from "./sendMail";
-import { SendStatus, ReadStatus, DocumentStatus } from "@prisma/client";
-import { NEXT_PUBLIC_WEBAPP_URL } from "../constants";
 import { signingRequestTemplate } from "@documenso/lib/mail";
+import prisma from "@documenso/prisma";
+import { NEXT_PUBLIC_WEBAPP_URL } from "../constants";
+import { sendMail } from "./sendMail";
+import { DocumentStatus, ReadStatus, SendStatus } from "@prisma/client";
 
 export const sendSigningRequest = async (recipient: any, document: any, user: any) => {
   const signingRequestMessage = user.name

packages/lib/mail/signingCompleteTemplate.ts

@@ -1,6 +1,6 @@
 import { NEXT_PUBLIC_WEBAPP_URL } from "../constants";
-import { Document as PrismaDocument } from "@prisma/client";
 import { baseEmailTemplate } from "./baseTemplate";
+import { Document as PrismaDocument } from "@prisma/client";
 
 export const signingCompleteTemplate = (message: string) => {
   const customContent = `

packages/lib/mail/signingRequestTemplate.ts

@@ -1,6 +1,6 @@
 import { NEXT_PUBLIC_WEBAPP_URL } from "../constants";
-import { Document as PrismaDocument } from "@prisma/client";
 import { baseEmailTemplate } from "./baseTemplate";
+import { Document as PrismaDocument } from "@prisma/client";
 
 export const signingRequestTemplate = (
   message: string,
@@ -11,8 +11,8 @@ export const signingRequestTemplate = (
   user: any
 ) => {
   const customContent = `
-  <p style="margin: 30px;">
-    <a href="${ctaLink}" style="background-color: #37f095; color: white; border-color: transparent; border-width: 1px; border-radius: 0.375rem; font-size: 18px; padding-left: 16px; padding-right: 16px; padding-top: 10px; padding-bottom: 10px; text-decoration: none; margin-top: 4px; margin-bottom: 4px;">
+  <p style="margin: 30px 0px; text-align: center">
+    <a href="${ctaLink}" style="background-color: #37f095; white-space: nowrap; color: white; border-color: transparent; border-width: 1px; border-radius: 0.375rem; font-size: 18px; padding-left: 16px; padding-right: 16px; padding-top: 10px; padding-bottom: 10px; text-decoration: none; margin-top: 4px; margin-bottom: 4px;">
       ${ctaLabel}
     </a>
   </p>

packages/lib/package.json

@@ -4,6 +4,10 @@
   "private": true,
   "main": "index.ts",
   "dependencies": {
-    "bcryptjs": "^2.4.3"
+    "@documenso/prisma": "*",
+    "@prisma/client": "^4.8.1",
+    "bcryptjs": "^2.4.3",
+    "micro": "^10.0.1",
+    "stripe": "^12.4.0"
   }
-}
+}

packages/lib/process-env.d.ts

@@ -0,0 +1,24 @@
+declare namespace NodeJS {
+  export interface ProcessEnv {
+    DATABASE_URL: string;
+    NEXT_PUBLIC_WEBAPP_URL: string;
+    NEXTAUTH_SECRET: string;
+    NEXTAUTH_URL: string;
+    
+    SENDGRID_API_KEY?: string;
+    SMTP_MAIL_HOST?: string;
+    SMTP_MAIL_PORT?: string;
+    SMTP_MAIL_USER?: string;
+    SMTP_MAIL_PASSWORD?: string;
+    
+    MAIL_FROM: string;
+
+    STRIPE_API_KEY?: string;
+    STRIPE_WEBHOOK_SECRET?: string;
+    STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID?: string;
+    STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID?: string;
+    
+    NEXT_PUBLIC_ALLOW_SIGNUP?: string;
+    NEXT_PUBLIC_ALLOW_SUBSCRIPTIONS?: string;
+  }
+}

packages/lib/query/getDocumentsForUserFromToken.ts

@@ -1,9 +1,7 @@
 import { getUserFromToken } from "@documenso/lib/server";
 import prisma from "@documenso/prisma";
 
-export const getDocumentsForUserFromToken = async (
-  context: any
-): Promise<any> => {
+export const getDocumentsForUserFromToken = async (context: any): Promise<any> => {
   const user = await getUserFromToken(context.req, context.res);
   if (!user) return Promise.reject("Invalid user or token.");
 

packages/lib/server/defaultHandler.ts

@@ -1,24 +1,27 @@
 import type { NextApiHandler, NextApiRequest, NextApiResponse } from "next";
 
 type Handlers = {
-  [method in "GET" | "POST" | "PATCH" | "PUT" | "DELETE"]?: Promise<{ default: NextApiHandler }>;
+  [method in "GET" | "POST" | "PATCH" | "PUT" | "DELETE"]?: Promise<{
+    default: NextApiHandler;
+  }>;
 };
 
 /** Allows us to split big API handlers by method */
-export const defaultHandler = (handlers: Handlers) => async (req: NextApiRequest, res: NextApiResponse) => {
-  const handler = (await handlers[req.method as keyof typeof handlers])?.default;
-  // auto catch unsupported methods.
-  if (!handler) {
-    return res
-      .status(405)
-      .json({ message: `Method Not Allowed (Allow: ${Object.keys(handlers).join(",")})` });
-  }
+export const defaultHandler =
+  (handlers: Handlers) => async (req: NextApiRequest, res: NextApiResponse) => {
+    const handler = (await handlers[req.method as keyof typeof handlers])?.default;
+    // auto catch unsupported methods.
+    if (!handler) {
+      return res.status(405).json({
+        message: `Method Not Allowed (Allow: ${Object.keys(handlers).join(",")})`,
+      });
+    }
 
-  try {
-    await handler(req, res);
-    return;
-  } catch (error) {
-    console.error(error);
-    return res.status(500).json({ message: "Something went wrong" });
-  }
-};
+    try {
+      await handler(req, res);
+      return;
+    } catch (error) {
+      console.error(error);
+      return res.status(500).json({ message: "Something went wrong" });
+    }
+  };

packages/lib/server/defaultResponder.ts

@@ -1,5 +1,4 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-
 import { getServerErrorFromUnknown } from "@documenso/lib/server";
 
 type Handle<T> = (req: NextApiRequest, res: NextApiResponse) => Promise<T>;

packages/lib/server/getServerErrorFromUnknown.ts

@@ -1,9 +1,5 @@
-import {
-  PrismaClientKnownRequestError,
-  NotFoundError,
-} from "@prisma/client/runtime";
-
 import { HttpError } from "@documenso/lib/server";
+import { NotFoundError, PrismaClientKnownRequestError } from "@prisma/client/runtime";
 
 export function getServerErrorFromUnknown(cause: unknown): HttpError {
   // Error was manually thrown and does not need to be parsed.

packages/lib/server/getUserFromToken.ts

@@ -1,6 +1,6 @@
+import { NextApiRequest, NextApiResponse } from "next";
 import prisma from "@documenso/prisma";
 import { User as PrismaUser } from "@prisma/client";
-import { NextApiRequest, NextApiResponse } from "next";
 import { getToken } from "next-auth/jwt";
 import { signOut } from "next-auth/react";
 
@@ -26,7 +26,7 @@ export async function getUserFromToken(
   });
 
   if (!user) {
-    if (res) res.status(401).end();
+    if (res && res.status) res.status(401).end();
     return null;
   }
 

packages/lib/server/http-error.ts

@@ -5,7 +5,13 @@ export class HttpError<TCode extends number = number> extends Error {
   public readonly url: string | undefined;
   public readonly method: string | undefined;
 
-  constructor(opts: { url?: string; method?: string; message?: string; statusCode: TCode; cause?: Error }) {
+  constructor(opts: {
+    url?: string;
+    method?: string;
+    message?: string;
+    statusCode: TCode;
+    cause?: Error;
+  }) {
     super(opts.message ?? `HTTP Error ${opts.statusCode} `);
 
     Object.setPrototypeOf(this, HttpError.prototype);

packages/lib/stripe/client.ts

@@ -0,0 +1,7 @@
+import Stripe from 'stripe';
+
+
+export const stripe = new Stripe(process.env.STRIPE_API_KEY!, {
+  apiVersion: "2022-11-15",
+  typescript: true,
+});

packages/lib/stripe/data/plans.ts

@@ -0,0 +1,15 @@
+export const STRIPE_PLANS = [
+  {
+    name: "Community Plan",
+    prices: {
+      monthly: {
+        price: 30,
+        priceId: process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID ?? "",
+      },
+      yearly: {
+        price: 300,
+        priceId: process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID ?? "",
+      },
+    },
+  },
+];

packages/lib/stripe/fetchers/checkout-session.ts

@@ -0,0 +1,23 @@
+import { CheckoutSessionRequest, CheckoutSessionResponse } from "../handlers/checkout-session"
+
+export type FetchCheckoutSessionOptions = CheckoutSessionRequest['body']
+
+export const fetchCheckoutSession = async ({ 
+    id,
+    priceId
+}: FetchCheckoutSessionOptions) => {
+    const response = await fetch('/api/stripe/checkout-session', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            id,
+            priceId
+        })
+    });
+
+    const json: CheckoutSessionResponse = await response.json();
+
+    return json;
+}

packages/lib/stripe/fetchers/get-subscription.ts

@@ -0,0 +1,14 @@
+import { GetSubscriptionResponse } from "../handlers/get-subscription";
+
+export const fetchSubscription = async () => {
+  const response = await fetch("/api/stripe/subscription", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  const json: GetSubscriptionResponse = await response.json();
+
+  return json;
+};