Merge branch 'main' into chore/pricing-update

.devcontainer/devcontainer.json

@@ -10,7 +10,13 @@
     "ghcr.io/devcontainers/features/node:1": {}
   },
   "onCreateCommand": "./.devcontainer/on-create.sh",
-  "forwardPorts": [3000, 54320, 9000, 2500, 1100],
+  "forwardPorts": [
+    3000,
+    54320,
+    9000,
+    2500,
+    1100
+  ],
   "customizations": {
     "vscode": {
       "extensions": [
@@ -25,8 +31,8 @@
         "GitHub.copilot",
         "GitHub.vscode-pull-request-github",
         "Prisma.prisma",
-        "VisualStudioExptTeam.vscodeintellicode",
+        "VisualStudioExptTeam.vscodeintellicode"
       ]
     }
   }
-}
+}

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

@@ -256,6 +256,7 @@ export const SinglePlayerClient = () => {
                 fields={fields}
                 onSubmit={onSignSubmit}
                 requireName={Boolean(fields.find((field) => field.type === 'NAME'))}
+                requireCustomText={Boolean(fields.find((field) => field.type === 'TEXT'))}
                 requireSignature={Boolean(fields.find((field) => field.type === 'SIGNATURE'))}
               />
             </Stepper>

apps/marketing/src/app/layout.tsx

@@ -2,6 +2,8 @@ import { Suspense } from 'react';
 
 import { Caveat, Inter } from 'next/font/google';
 
+import { PublicEnvScript } from 'next-runtime-env';
+
 import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
 import { NEXT_PUBLIC_MARKETING_URL } from '@documenso/lib/constants/app';
 import { getAllAnonymousFlags } from '@documenso/lib/universal/get-feature-flag';
@@ -62,6 +64,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
         <link rel="manifest" href="/site.webmanifest" />
+        <PublicEnvScript />
       </head>
 
       <Suspense>

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

@@ -8,6 +8,7 @@ import Link from 'next/link';
 import { AnimatePresence, motion } from 'framer-motion';
 import { usePlausible } from 'next-plausible';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -82,7 +83,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           </p>
 
           <Button className="rounded-full text-base" asChild>
-            <Link href={`https://documen.so/signup`} className="mt-6">
+            <Link href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup`} target="_blank" className="mt-6">
               Signup Now
             </Link>
           </Button>
@@ -113,7 +114,9 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           </p>
 
           <Button className="mt-6 rounded-full text-base" asChild>
-            <Link href={`https://documen.so/signup`}>Signup Now</Link>
+            <Link href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup`} target="_blank">
+              Signup Now
+            </Link>
           </Button>
 
           <div className="mt-8 flex w-full flex-col divide-y">

apps/web/package.json

@@ -14,6 +14,7 @@
     "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
   },
   "dependencies": {
+    "@documenso/api": "*",
     "@documenso/assets": "*",
     "@documenso/ee": "*",
     "@documenso/lib": "*",
@@ -42,6 +43,7 @@
     "react-hotkeys-hook": "^4.4.1",
     "react-icons": "^4.11.0",
     "react-rnd": "^10.4.1",
+    "remeda": "^1.27.1",
     "sharp": "0.33.1",
     "ts-pattern": "^5.0.5",
     "typescript": "5.2.2",

apps/web/src/app/(dashboard)/admin/nav.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { BarChart3, FileStack, User2, Wallet2 } from 'lucide-react';
+import { BarChart3, FileStack, Settings, User2, Wallet2 } from 'lucide-react';
 
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
@@ -78,6 +78,20 @@ export const AdminNav = ({ className, ...props }: AdminNavProps) => {
           Subscriptions
         </Link>
       </Button>
+
+      <Button
+        variant="ghost"
+        className={cn(
+          'justify-start md:w-full',
+          pathname?.startsWith('/admin/banner') && 'bg-secondary',
+        )}
+        asChild
+      >
+        <Link href="/admin/site-settings">
+          <Settings className="mr-2 h-5 w-5" />
+          Site Settings
+        </Link>
+      </Button>
     </div>
   );
 };

apps/web/src/app/(dashboard)/admin/site-settings/banner-form.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import type { TSiteSettingsBannerSchema } from '@documenso/lib/server-only/site-settings/schemas/banner';
+import {
+  SITE_SETTINGS_BANNER_ID,
+  ZSiteSettingsBannerSchema,
+} from '@documenso/lib/server-only/site-settings/schemas/banner';
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { ColorPicker } from '@documenso/ui/primitives/color-picker';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const ZBannerFormSchema = ZSiteSettingsBannerSchema;
+
+type TBannerFormSchema = z.infer<typeof ZBannerFormSchema>;
+
+export type BannerFormProps = {
+  banner?: TSiteSettingsBannerSchema;
+};
+
+export function BannerForm({ banner }: BannerFormProps) {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const form = useForm<TBannerFormSchema>({
+    resolver: zodResolver(ZBannerFormSchema),
+    defaultValues: {
+      id: SITE_SETTINGS_BANNER_ID,
+      enabled: banner?.enabled ?? false,
+      data: {
+        content: banner?.data?.content ?? '',
+        bgColor: banner?.data?.bgColor ?? '#000000',
+        textColor: banner?.data?.textColor ?? '#FFFFFF',
+      },
+    },
+  });
+
+  const enabled = form.watch('enabled');
+
+  const { mutateAsync: updateSiteSetting, isLoading: isUpdateSiteSettingLoading } =
+    trpcReact.admin.updateSiteSetting.useMutation();
+
+  const onBannerUpdate = async ({ id, enabled, data }: TBannerFormSchema) => {
+    try {
+      await updateSiteSetting({
+        id,
+        enabled,
+        data,
+      });
+
+      toast({
+        title: 'Banner Updated',
+        description: 'Your banner has been updated successfully.',
+        duration: 5000,
+      });
+
+      router.refresh();
+    } catch (err) {
+      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: err.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            'We encountered an unknown error while attempting to update the banner. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <div>
+      <h2 className="font-semibold">Site Banner</h2>
+      <p className="text-muted-foreground mt-2 text-sm">
+        The site banner is a message that is shown at the top of the site. It can be used to display
+        important information to your users.
+      </p>
+
+      <Form {...form}>
+        <form
+          className="mt-4 flex flex-col rounded-md"
+          onSubmit={form.handleSubmit(onBannerUpdate)}
+        >
+          <div className="mt-4 flex flex-col gap-4 md:flex-row">
+            <FormField
+              control={form.control}
+              name="enabled"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>Enabled</FormLabel>
+
+                  <FormControl>
+                    <div>
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
+                    </div>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <fieldset
+              className="flex flex-col gap-4 md:flex-row"
+              disabled={!enabled}
+              aria-disabled={!enabled}
+            >
+              <FormField
+                control={form.control}
+                name="data.bgColor"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Background Color</FormLabel>
+
+                    <FormControl>
+                      <div>
+                        <ColorPicker {...field} />
+                      </div>
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="data.textColor"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Text Color</FormLabel>
+
+                    <FormControl>
+                      <div>
+                        <ColorPicker {...field} />
+                      </div>
+                    </FormControl>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </fieldset>
+          </div>
+
+          <fieldset disabled={!enabled} aria-disabled={!enabled}>
+            <FormField
+              control={form.control}
+              name="data.content"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Content</FormLabel>
+
+                  <FormControl>
+                    <Textarea className="h-32 resize-none" {...field} />
+                  </FormControl>
+
+                  <FormDescription>
+                    The content to show in the banner, HTML is allowed
+                  </FormDescription>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </fieldset>
+
+          <Button
+            type="submit"
+            loading={isUpdateSiteSettingLoading}
+            className="mt-4 justify-end self-end"
+          >
+            Update Banner
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/admin/site-settings/page.tsx

@@ -0,0 +1,24 @@
+import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
+import { SITE_SETTINGS_BANNER_ID } from '@documenso/lib/server-only/site-settings/schemas/banner';
+
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+
+import { BannerForm } from './banner-form';
+
+// import { BannerForm } from './banner-form';
+
+export default async function AdminBannerPage() {
+  const banner = await getSiteSettings().then((settings) =>
+    settings.find((setting) => setting.id === SITE_SETTINGS_BANNER_ID),
+  );
+
+  return (
+    <div>
+      <SettingsHeader title="Site Settings" subtitle="Manage your site settings here" />
+
+      <div className="mt-8">
+        <BannerForm banner={banner} />
+      </div>
+    </div>
+  );
+}

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

@@ -85,6 +85,7 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
 
   const recipients = await getRecipientsForDocument({
     documentId,
+    teamId: team?.id,
     userId: user.id,
   });
 
@@ -95,7 +96,7 @@ export const DocumentPageView = async ({ params, team }: DocumentPageViewProps)
 
   return (
     <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
-      <Link href="/documents" className="flex items-center text-[#7AC455] hover:opacity-80">
+      <Link href={documentRootPath} className="flex items-center text-[#7AC455] hover:opacity-80">
         <ChevronLeft className="mr-2 inline-block h-5 w-5" />
         Documents
       </Link>

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

@@ -30,6 +30,8 @@ import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useOptionalCurrentTeam } from '~/providers/team';
+
 export type EditDocumentFormProps = {
   className?: string;
   user: User;
@@ -58,6 +60,7 @@ export const EditDocumentForm = ({
 
   const router = useRouter();
   const searchParams = useSearchParams();
+  const team = useOptionalCurrentTeam();
 
   const { mutateAsync: addTitle } = trpc.document.setTitleForDocument.useMutation();
   const { mutateAsync: addFields } = trpc.field.addFields.useMutation();
@@ -112,6 +115,7 @@ export const EditDocumentForm = ({
       // Custom invocation server action
       await addTitle({
         documentId: document.id,
+        teamId: team?.id,
         title: data.title,
       });
 
@@ -134,6 +138,7 @@ export const EditDocumentForm = ({
       // Custom invocation server action
       await addSigners({
         documentId: document.id,
+        teamId: team?.id,
         signers: data.signers,
       });
 
@@ -177,6 +182,7 @@ export const EditDocumentForm = ({
     try {
       await sendDocument({
         documentId: document.id,
+        teamId: team?.id,
         meta: {
           subject,
           message,

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

@@ -74,6 +74,7 @@ export const DocumentEditPageView = async ({ params, team }: DocumentEditPageVie
     getRecipientsForDocument({
       documentId,
       userId: user.id,
+      teamId: team?.id,
     }),
     getFieldsForDocument({
       documentId,

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

@@ -44,6 +44,7 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
     getRecipientsForDocument({
       documentId,
       userId: user.id,
+      teamId: team?.id,
     }),
   ]);
 

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

@@ -193,6 +193,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
           documentTitle={row.title}
           open={isDeleteDialogOpen}
           onOpenChange={setDeleteDialogOpen}
+          teamId={team?.id}
         />
       )}
       {isDuplicateDialogOpen && (

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

@@ -16,12 +16,13 @@ import {
 import { Input } from '@documenso/ui/primitives/input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-type DeleteDraftDocumentDialogProps = {
+type DeleteDocumentDialogProps = {
   id: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
   status: DocumentStatus;
   documentTitle: string;
+  teamId?: number;
 };
 
 export const DeleteDocumentDialog = ({
@@ -30,7 +31,8 @@ export const DeleteDocumentDialog = ({
   onOpenChange,
   status,
   documentTitle,
-}: DeleteDraftDocumentDialogProps) => {
+  teamId,
+}: DeleteDocumentDialogProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -61,7 +63,7 @@ export const DeleteDocumentDialog = ({
 
   const onDelete = async () => {
     try {
-      await deleteDocument({ id, status });
+      await deleteDocument({ id, teamId });
     } catch {
       toast({
         title: 'Something went wrong',

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

@@ -9,6 +9,7 @@ import { NEXT_AUTH_OPTIONS } from '@documenso/lib/next-auth/auth-options';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getTeams } from '@documenso/lib/server-only/team/get-teams';
 
+import { Banner } from '~/components/(dashboard)/layout/banner';
 import { Header } from '~/components/(dashboard)/layout/header';
 import { VerifyEmailBanner } from '~/components/(dashboard)/layout/verify-email-banner';
 import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
@@ -37,6 +38,8 @@ export default async function AuthenticatedDashboardLayout({
       <LimitsProvider>
         {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
 
+        <Banner />
+
         <Header user={user} teams={teams} />
 
         <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>

apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { signOut } from 'next-auth/react';
+
+import type { User } from '@documenso/prisma/client';
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DeleteAccountDialogProps = {
+  className?: string;
+  user: User;
+};
+
+export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProps) => {
+  const { toast } = useToast();
+
+  const hasTwoFactorAuthentication = user.twoFactorEnabled;
+
+  const { mutateAsync: deleteAccount, isLoading: isDeletingAccount } =
+    trpc.profile.deleteAccount.useMutation();
+
+  const onDeleteAccount = async () => {
+    try {
+      await deleteAccount();
+
+      toast({
+        title: 'Account deleted',
+        description: 'Your account has been deleted successfully.',
+        duration: 5000,
+      });
+
+      return await signOut({ callbackUrl: '/' });
+    } catch (err) {
+      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: err.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            err.message ??
+            'We encountered an unknown error while attempting to delete your account. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <div className={className}>
+      <Alert
+        className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row "
+        variant="neutral"
+      >
+        <div>
+          <AlertTitle>Delete Account</AlertTitle>
+          <AlertDescription className="mr-2">
+            Delete your account and all its contents, including completed documents. This action is
+            irreversible and will cancel your subscription, so proceed with caution.
+          </AlertDescription>
+        </div>
+
+        <div className="flex-shrink-0">
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="destructive">Delete Account</Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader className="space-y-4">
+                <DialogTitle>Delete Account</DialogTitle>
+
+                <Alert variant="destructive">
+                  <AlertDescription className="selection:bg-red-100">
+                    This action is not reversible. Please be certain.
+                  </AlertDescription>
+                </Alert>
+
+                {hasTwoFactorAuthentication && (
+                  <Alert variant="destructive">
+                    <AlertDescription className="selection:bg-red-100">
+                      Disable Two Factor Authentication before deleting your account.
+                    </AlertDescription>
+                  </Alert>
+                )}
+
+                <DialogDescription>
+                  Documenso will delete <span className="font-semibold">all of your documents</span>
+                  , along with all of your completed documents, signatures, and all other resources
+                  belonging to your Account.
+                </DialogDescription>
+              </DialogHeader>
+
+              <DialogFooter>
+                <Button
+                  onClick={onDeleteAccount}
+                  loading={isDeletingAccount}
+                  variant="destructive"
+                  disabled={hasTwoFactorAuthentication}
+                >
+                  {isDeletingAccount ? 'Deleting account...' : 'Delete Account'}
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </Alert>
+    </div>
+  );
+};

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

@@ -5,6 +5,8 @@ import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { ProfileForm } from '~/components/forms/profile';
 
+import { DeleteAccountDialog } from './delete-account-dialog';
+
 export const metadata: Metadata = {
   title: 'Profile',
 };
@@ -16,7 +18,9 @@ export default async function ProfileSettingsPage() {
     <div>
       <SettingsHeader title="Profile" subtitle="Here you can edit your personal details." />
 
-      <ProfileForm user={user} className="max-w-xl" />
+      <ProfileForm className="max-w-xl" user={user} />
+
+      <DeleteAccountDialog className="mt-8 max-w-xl" user={user} />
     </div>
   );
 }

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

@@ -0,0 +1,74 @@
+import { DateTime } from 'luxon';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getUserTokens } from '@documenso/lib/server-only/public-api/get-all-user-tokens';
+import { Button } from '@documenso/ui/primitives/button';
+
+import DeleteTokenDialog from '~/components/(dashboard)/settings/token/delete-token-dialog';
+import { LocaleDate } from '~/components/formatter/locale-date';
+import { ApiTokenForm } from '~/components/forms/token';
+
+export default async function ApiTokensPage() {
+  const { user } = await getRequiredServerComponentSession();
+
+  const tokens = await getUserTokens({ userId: user.id });
+
+  return (
+    <div>
+      <h3 className="text-2xl font-semibold">API Tokens</h3>
+
+      <p className="text-muted-foreground mt-2 text-sm">
+        On this page, you can create new API tokens and manage the existing ones.
+      </p>
+
+      <hr className="my-4" />
+
+      <ApiTokenForm className="max-w-xl" />
+
+      <hr className="mb-4 mt-8" />
+
+      <h4 className="text-xl font-medium">Your existing tokens</h4>
+
+      {tokens.length === 0 && (
+        <div className="mb-4">
+          <p className="text-muted-foreground mt-2 text-sm italic">
+            Your tokens will be shown here once you create them.
+          </p>
+        </div>
+      )}
+
+      {tokens.length > 0 && (
+        <div className="mt-4 flex max-w-xl flex-col gap-y-4">
+          {tokens.map((token) => (
+            <div key={token.id} className="border-border rounded-lg border p-4">
+              <div className="flex items-center justify-between gap-x-4">
+                <div>
+                  <h5 className="text-base">{token.name}</h5>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    Created on <LocaleDate date={token.createdAt} format={DateTime.DATETIME_FULL} />
+                  </p>
+                  {token.expires ? (
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      Expires on <LocaleDate date={token.expires} format={DateTime.DATETIME_FULL} />
+                    </p>
+                  ) : (
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      Token doesn't have an expiration date
+                    </p>
+                  )}
+                </div>
+
+                <div>
+                  <DeleteTokenDialog token={token}>
+                    <Button variant="destructive">Delete</Button>
+                  </DeleteTokenDialog>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,30 +1,31 @@
 'use client';
 
-import { useState, useTransition } from 'react';
+import { useTransition } from 'react';
 
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 
-import { AlertTriangle, Loader, Plus } from 'lucide-react';
+import { AlertTriangle, Loader } from 'lucide-react';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import type { Template } from '@documenso/prisma/client';
-import { trpc } from '@documenso/trpc/react';
+import type { Recipient, Template } from '@documenso/prisma/client';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { LocaleDate } from '~/components/formatter/locale-date';
 import { TemplateType } from '~/components/formatter/template-type';
 
 import { DataTableActionDropdown } from './data-table-action-dropdown';
 import { DataTableTitle } from './data-table-title';
+import { UseTemplateDialog } from './use-template-dialog';
+
+type TemplateWithRecipient = Template & {
+  Recipient: Recipient[];
+};
 
 type TemplatesDataTableProps = {
-  templates: Template[];
+  templates: TemplateWithRecipient[];
   perPage: number;
   page: number;
   totalPages: number;
@@ -47,14 +48,6 @@ export const TemplatesDataTable = ({
 
   const { remaining } = useLimits();
 
-  const router = useRouter();
-
-  const { toast } = useToast();
-  const [loadingStates, setLoadingStates] = useState<{ [key: string]: boolean }>({});
-
-  const { mutateAsync: createDocumentFromTemplate } =
-    trpc.template.createDocumentFromTemplate.useMutation();
-
   const onPaginationChange = (page: number, perPage: number) => {
     startTransition(() => {
       updateSearchParams({
@@ -64,28 +57,6 @@ export const TemplatesDataTable = ({
     });
   };
 
-  const onUseButtonClick = async (templateId: number) => {
-    try {
-      const { id } = await createDocumentFromTemplate({
-        templateId,
-      });
-
-      toast({
-        title: 'Document created',
-        description: 'Your document has been created from the template successfully.',
-        duration: 5000,
-      });
-
-      router.push(`${documentRootPath}/${id}/edit`);
-    } catch (err) {
-      toast({
-        title: 'Error',
-        description: 'An error occurred while creating document from template.',
-        variant: 'destructive',
-      });
-    }
-  };
-
   return (
     <div className="relative">
       {remaining.documents === 0 && (
@@ -121,22 +92,13 @@ export const TemplatesDataTable = ({
             header: 'Actions',
             accessorKey: 'actions',
             cell: ({ row }) => {
-              const isRowLoading = loadingStates[row.original.id];
-
               return (
                 <div className="flex items-center gap-x-4">
-                  <Button
-                    disabled={isRowLoading || remaining.documents === 0}
-                    loading={isRowLoading}
-                    onClick={async () => {
-                      setLoadingStates((prev) => ({ ...prev, [row.original.id]: true }));
-                      await onUseButtonClick(row.original.id);
-                      setLoadingStates((prev) => ({ ...prev, [row.original.id]: false }));
-                    }}
-                  >
-                    {!isRowLoading && <Plus className="-ml-1 mr-2 h-4 w-4" />}
-                    Use Template
-                  </Button>
+                  <UseTemplateDialog
+                    templateId={row.original.id}
+                    recipients={row.original.Recipient}
+                    documentRootPath={documentRootPath}
+                  />
 
                   <DataTableActionDropdown
                     row={row.original}

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

@@ -0,0 +1,247 @@
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Plus } from 'lucide-react';
+import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import * as z from 'zod';
+
+import type { Recipient } from '@documenso/prisma/client';
+import { RecipientRole } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { ROLE_ICONS } from '@documenso/ui/primitives/recipient-role-icons';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+const ZAddRecipientsForNewDocumentSchema = z.object({
+  recipients: z.array(
+    z.object({
+      email: z.string().email(),
+      name: z.string(),
+      role: z.nativeEnum(RecipientRole),
+    }),
+  ),
+});
+
+type TAddRecipientsForNewDocumentSchema = z.infer<typeof ZAddRecipientsForNewDocumentSchema>;
+
+export type UseTemplateDialogProps = {
+  templateId: number;
+  recipients: Recipient[];
+  documentRootPath: string;
+};
+
+export function UseTemplateDialog({
+  recipients,
+  documentRootPath,
+  templateId,
+}: UseTemplateDialogProps) {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const team = useOptionalCurrentTeam();
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<TAddRecipientsForNewDocumentSchema>({
+    resolver: zodResolver(ZAddRecipientsForNewDocumentSchema),
+    defaultValues: {
+      recipients:
+        recipients.length > 0
+          ? recipients.map((recipient) => ({
+              nativeId: recipient.id,
+              formId: String(recipient.id),
+              name: recipient.name,
+              email: recipient.email,
+              role: recipient.role,
+            }))
+          : [
+              {
+                name: '',
+                email: '',
+                role: RecipientRole.SIGNER,
+              },
+            ],
+    },
+  });
+
+  const { mutateAsync: createDocumentFromTemplate, isLoading: isCreatingDocumentFromTemplate } =
+    trpc.template.createDocumentFromTemplate.useMutation();
+
+  const onSubmit = async (data: TAddRecipientsForNewDocumentSchema) => {
+    try {
+      const { id } = await createDocumentFromTemplate({
+        templateId,
+        teamId: team?.id,
+        recipients: data.recipients,
+      });
+
+      toast({
+        title: 'Document created',
+        description: 'Your document has been created from the template successfully.',
+        duration: 5000,
+      });
+
+      router.push(`${documentRootPath}/${id}`);
+    } catch (err) {
+      toast({
+        title: 'Error',
+        description: 'An error occurred while creating document from template.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onCreateDocumentFromTemplate = handleSubmit(onSubmit);
+
+  const { fields: formRecipients } = useFieldArray({
+    control,
+    name: 'recipients',
+  });
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button className="cursor-pointer">
+          <Plus className="-ml-1 mr-2 h-4 w-4" />
+          Use Template
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Document Recipients</DialogTitle>
+          <DialogDescription>Add the recipients to create the template with.</DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col space-y-4">
+          {formRecipients.map((recipient, index) => (
+            <div
+              key={recipient.id}
+              data-native-id={recipient.id}
+              className="flex flex-wrap items-end gap-x-4"
+            >
+              <div className="flex-1">
+                <Label htmlFor={`recipient-${recipient.id}-email`}>
+                  Email
+                  <span className="text-destructive ml-1 inline-block font-medium">*</span>
+                </Label>
+
+                <Controller
+                  control={control}
+                  name={`recipients.${index}.email`}
+                  render={({ field }) => (
+                    <Input
+                      id={`recipient-${recipient.id}-email`}
+                      type="email"
+                      className="bg-background mt-2"
+                      disabled={isSubmitting}
+                      {...field}
+                    />
+                  )}
+                />
+              </div>
+
+              <div className="flex-1">
+                <Label htmlFor={`recipient-${recipient.id}-name`}>Name</Label>
+
+                <Controller
+                  control={control}
+                  name={`recipients.${index}.name`}
+                  render={({ field }) => (
+                    <Input
+                      id={`recipient-${recipient.id}-name`}
+                      type="text"
+                      className="bg-background mt-2"
+                      disabled={isSubmitting}
+                      {...field}
+                    />
+                  )}
+                />
+              </div>
+
+              <div className="w-[60px]">
+                <Controller
+                  control={control}
+                  name={`recipients.${index}.role`}
+                  render={({ field: { value, onChange } }) => (
+                    <Select value={value} onValueChange={(x) => onChange(x)}>
+                      <SelectTrigger className="bg-background">{ROLE_ICONS[value]}</SelectTrigger>
+
+                      <SelectContent className="" align="end">
+                        <SelectItem value={RecipientRole.SIGNER}>
+                          <div className="flex items-center">
+                            <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
+                            Signer
+                          </div>
+                        </SelectItem>
+
+                        <SelectItem value={RecipientRole.CC}>
+                          <div className="flex items-center">
+                            <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
+                            Receives copy
+                          </div>
+                        </SelectItem>
+
+                        <SelectItem value={RecipientRole.APPROVER}>
+                          <div className="flex items-center">
+                            <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
+                            Approver
+                          </div>
+                        </SelectItem>
+
+                        <SelectItem value={RecipientRole.VIEWER}>
+                          <div className="flex items-center">
+                            <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
+                            Viewer
+                          </div>
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+              </div>
+
+              <div className="w-full">
+                <FormErrorMessage className="mt-2" error={errors.recipients?.[index]?.email} />
+                <FormErrorMessage className="mt-2" error={errors.recipients?.[index]?.name} />
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <DialogFooter className="justify-end">
+          <DialogClose asChild>
+            <Button type="button" variant="secondary">
+              Close
+            </Button>
+          </DialogClose>
+
+          <Button
+            type="button"
+            loading={isCreatingDocumentFromTemplate}
+            disabled={isCreatingDocumentFromTemplate}
+            onClick={onCreateDocumentFromTemplate}
+          >
+            Create Document
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -29,6 +29,7 @@ import { NameField } from './name-field';
 import { NoLongerAvailable } from './no-longer-available';
 import { SigningProvider } from './provider';
 import { SignatureField } from './signature-field';
+import { TextField } from './text-field';
 
 export type SigningPageProps = {
   params: {
@@ -168,6 +169,9 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
               .with(FieldType.EMAIL, () => (
                 <EmailField key={field.id} field={field} recipient={recipient} />
               ))
+              .with(FieldType.TEXT, () => (
+                <TextField key={field.id} field={field} recipient={recipient} />
+              ))
               .otherwise(() => null),
           )}
         </ElementVisible>

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

@@ -0,0 +1,166 @@
+'use client';
+
+import { useEffect, useState, useTransition } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Loader } from 'lucide-react';
+
+import type { Recipient } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { SigningFieldContainer } from './signing-field-container';
+
+export type TextFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+};
+
+export const TextField = ({ field, recipient }: TextFieldProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const [isPending, startTransition] = useTransition();
+
+  const { mutateAsync: signFieldWithToken, isLoading: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation();
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isLoading: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation();
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading || isPending;
+
+  const [showCustomTextModal, setShowCustomTextModal] = useState(false);
+  const [localText, setLocalCustomText] = useState('');
+  const [isLocalSignatureSet, setIsLocalSignatureSet] = useState(false);
+
+  useEffect(() => {
+    if (!showCustomTextModal && !isLocalSignatureSet) {
+      setLocalCustomText('');
+    }
+  }, [showCustomTextModal, isLocalSignatureSet]);
+
+  const onSign = async () => {
+    try {
+      if (!localText) {
+        setIsLocalSignatureSet(false);
+        setShowCustomTextModal(true);
+        return;
+      }
+
+      if (!localText) {
+        return;
+      }
+
+      await signFieldWithToken({
+        token: recipient.token,
+        fieldId: field.id,
+        value: localText,
+        isBase64: true,
+      });
+
+      setLocalCustomText('');
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while signing the document.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      await removeSignedFieldWithToken({
+        token: recipient.token,
+        fieldId: field.id,
+      });
+
+      startTransition(() => router.refresh());
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: 'Error',
+        description: 'An error occurred while removing the text.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Signature">
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Text</p>
+      )}
+
+      {field.inserted && <p className="text-muted-foreground duration-200">{field.customText}</p>}
+
+      <Dialog open={showCustomTextModal} onOpenChange={setShowCustomTextModal}>
+        <DialogContent>
+          <DialogTitle>
+            Enter your Text <span className="text-muted-foreground">({recipient.email})</span>
+          </DialogTitle>
+
+          <div className="">
+            <Label htmlFor="custom-text">Custom Text</Label>
+
+            <Input
+              id="custom-text"
+              className="border-border mt-2 w-full rounded-md border"
+              onChange={(e) => setLocalCustomText(e.target.value)}
+            />
+          </div>
+
+          <DialogFooter>
+            <div className="mt-4 flex w-full flex-1 flex-nowrap gap-4">
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                onClick={() => {
+                  setShowCustomTextModal(false);
+                  setLocalCustomText('');
+                }}
+              >
+                Cancel
+              </Button>
+
+              <Button
+                type="button"
+                className="flex-1"
+                disabled={!localText}
+                onClick={() => {
+                  setShowCustomTextModal(false);
+                  setIsLocalSignatureSet(true);
+                  void onSign();
+                }}
+              >
+                Save Text
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </SigningFieldContainer>
+  );
+};

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

@@ -11,6 +11,7 @@ import { SubscriptionStatus } from '@documenso/prisma/client';
 import { Header } from '~/components/(dashboard)/layout/header';
 import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
 import { NextAuthProvider } from '~/providers/next-auth';
+import { TeamProvider } from '~/providers/team';
 
 import { LayoutBillingBanner } from './layout-billing-banner';
 
@@ -56,7 +57,9 @@ export default async function AuthenticatedTeamsLayout({
 
         <Header user={user} teams={teams} />
 
-        <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>
+        <TeamProvider team={team}>
+          <main className="mt-8 pb-8 md:mt-12 md:pb-12">{children}</main>
+        </TeamProvider>
 
         <RefreshOnFocus />
       </LimitsProvider>

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

@@ -0,0 +1,85 @@
+import { DateTime } from 'luxon';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamTokens } from '@documenso/lib/server-only/public-api/get-all-team-tokens';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+import { Button } from '@documenso/ui/primitives/button';
+
+import DeleteTokenDialog from '~/components/(dashboard)/settings/token/delete-token-dialog';
+import { LocaleDate } from '~/components/formatter/locale-date';
+import { ApiTokenForm } from '~/components/forms/token';
+
+type ApiTokensPageProps = {
+  params: {
+    teamUrl: string;
+  };
+};
+
+export default async function ApiTokensPage({ params }: ApiTokensPageProps) {
+  const { teamUrl } = params;
+
+  const { user } = await getRequiredServerComponentSession();
+
+  const team = await getTeamByUrl({ userId: user.id, teamUrl });
+
+  const tokens = await getTeamTokens({ userId: user.id, teamId: team.id });
+
+  return (
+    <div>
+      <h3 className="text-2xl font-semibold">API Tokens</h3>
+
+      <p className="text-muted-foreground mt-2 text-sm">
+        On this page, you can create new API tokens and manage the existing ones.
+      </p>
+
+      <hr className="my-4" />
+
+      <ApiTokenForm className="max-w-xl" teamId={team.id} />
+
+      <hr className="mb-4 mt-8" />
+
+      <h4 className="text-xl font-medium">Your existing tokens</h4>
+
+      {tokens.length === 0 && (
+        <div className="mb-4">
+          <p className="text-muted-foreground mt-2 text-sm italic">
+            Your tokens will be shown here once you create them.
+          </p>
+        </div>
+      )}
+
+      {tokens.length > 0 && (
+        <div className="mt-4 flex max-w-xl flex-col gap-y-4">
+          {tokens.map((token) => (
+            <div key={token.id} className="border-border rounded-lg border p-4">
+              <div className="flex items-center justify-between gap-x-4">
+                <div>
+                  <h5 className="text-base">{token.name}</h5>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    Created on <LocaleDate date={token.createdAt} format={DateTime.DATETIME_FULL} />
+                  </p>
+                  {token.expires ? (
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      Expires on <LocaleDate date={token.expires} format={DateTime.DATETIME_FULL} />
+                    </p>
+                  ) : (
+                    <p className="text-muted-foreground mt-1 text-xs">
+                      Token doesn't have an expiration date
+                    </p>
+                  )}
+                </div>
+
+                <div>
+                  <DeleteTokenDialog token={token} teamId={team.id}>
+                    <Button variant="destructive">Delete</Button>
+                  </DeleteTokenDialog>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/app/api/v1/openapi/page.tsx

@@ -0,0 +1,3 @@
+'use client';
+
+export { OpenApiDocsPage as default } from '@documenso/api/v1/api-documentation';

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

@@ -0,0 +1,29 @@
+import { getSiteSettings } from '@documenso/lib/server-only/site-settings/get-site-settings';
+import { SITE_SETTINGS_BANNER_ID } from '@documenso/lib/server-only/site-settings/schemas/banner';
+
+export const Banner = async () => {
+  const banner = await getSiteSettings().then((settings) =>
+    settings.find((setting) => setting.id === SITE_SETTINGS_BANNER_ID),
+  );
+
+  return (
+    <>
+      {banner && banner.enabled && (
+        <div className="mb-2" style={{ background: banner.data.bgColor }}>
+          <div
+            className="mx-auto flex h-auto max-w-screen-xl items-center justify-center px-4 py-3 text-sm font-medium"
+            style={{ color: banner.data.textColor }}
+          >
+            <div className="flex items-center">
+              <span dangerouslySetInnerHTML={{ __html: banner.data.content }} />
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+// Banner
+// Custom Text
+// Custom Text with Custom Icon

apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link';
 
 import {
+  Braces,
   CreditCard,
   FileSpreadsheet,
   Lock,
@@ -98,6 +99,13 @@ export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
           </Link>
         </DropdownMenuItem>
 
+        <DropdownMenuItem asChild>
+          <Link href="/settings/tokens" className="cursor-pointer">
+            <Braces className="mr-2 h-4 w-4" />
+            API Tokens
+          </Link>
+        </DropdownMenuItem>
+
         {isBillingEnabled && (
           <DropdownMenuItem asChild>
             <Link href="/settings/billing" className="cursor-pointer">

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

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { CreditCard, Lock, User, Users } from 'lucide-react';
+import { Braces, CreditCard, Lock, User, Users } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -64,6 +64,19 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
+      <Link href="/settings/tokens">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/tokens') && 'bg-secondary',
+          )}
+        >
+          <Braces className="mr-2 h-5 w-5" />
+          API Tokens
+        </Button>
+      </Link>
+
       {isBillingEnabled && (
         <Link href="/settings/billing">
           <Button

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

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { CreditCard, Lock, User, Users } from 'lucide-react';
+import { Braces, CreditCard, Lock, User, Users } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -67,6 +67,19 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
+      <Link href="/settings/tokens">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/tokens') && 'bg-secondary',
+          )}
+        >
+          <Braces className="mr-2 h-5 w-5" />
+          API Tokens
+        </Button>
+      </Link>
+
       {isBillingEnabled && (
         <Link href="/settings/billing">
           <Button

apps/web/src/components/(dashboard)/settings/token/contants.ts

@@ -0,0 +1,7 @@
+export const EXPIRATION_DATES = {
+  ONE_WEEK: '7 days',
+  ONE_MONTH: '1 month',
+  THREE_MONTHS: '3 months',
+  SIX_MONTHS: '6 months',
+  ONE_YEAR: '12 months',
+} as const;

apps/web/src/components/(dashboard)/settings/token/delete-token-dialog.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { ApiToken } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DeleteTokenDialogProps = {
+  teamId?: number;
+  token: Pick<ApiToken, 'id' | 'name'>;
+  onDelete?: () => void;
+  children?: React.ReactNode;
+};
+
+export default function DeleteTokenDialog({
+  teamId,
+  token,
+  onDelete,
+  children,
+}: DeleteTokenDialogProps) {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const deleteMessage = `delete ${token.name}`;
+
+  const ZDeleteTokenDialogSchema = z.object({
+    tokenName: z.literal(deleteMessage, {
+      errorMap: () => ({ message: `You must enter '${deleteMessage}' to proceed` }),
+    }),
+  });
+
+  type TDeleteTokenByIdMutationSchema = z.infer<typeof ZDeleteTokenDialogSchema>;
+
+  const { mutateAsync: deleteTokenMutation } = trpc.apiToken.deleteTokenById.useMutation({
+    onSuccess() {
+      onDelete?.();
+    },
+  });
+
+  const form = useForm<TDeleteTokenByIdMutationSchema>({
+    resolver: zodResolver(ZDeleteTokenDialogSchema),
+    values: {
+      tokenName: '',
+    },
+  });
+
+  const onSubmit = async () => {
+    try {
+      await deleteTokenMutation({
+        id: token.id,
+        teamId,
+      });
+
+      toast({
+        title: 'Token deleted',
+        description: 'The token was deleted successfully.',
+        duration: 5000,
+      });
+
+      setIsOpen(false);
+
+      router.refresh();
+    } catch (error) {
+      toast({
+        title: 'An unknown error occurred',
+        variant: 'destructive',
+        duration: 5000,
+        description:
+          'We encountered an unknown error while attempting to delete this token. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      form.reset();
+    }
+  }, [isOpen, form]);
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(value) => !form.formState.isSubmitting && setIsOpen(value)}
+    >
+      <DialogTrigger asChild={true}>
+        {children ?? (
+          <Button className="mr-4" variant="destructive">
+            Delete
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Are you sure you want to delete this token?</DialogTitle>
+
+          <DialogDescription>
+            Please note that this action is irreversible. Once confirmed, your token will be
+            permanently deleted.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="tokenName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      Confirm by typing:{' '}
+                      <span className="font-sm text-destructive font-semibold">
+                        {deleteMessage}
+                      </span>
+                    </FormLabel>
+
+                    <FormControl>
+                      <Input className="bg-background" type="text" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <div className="flex w-full flex-nowrap gap-4">
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    className="flex-1"
+                    onClick={() => setIsOpen(false)}
+                  >
+                    Cancel
+                  </Button>
+
+                  <Button
+                    type="submit"
+                    variant="destructive"
+                    className="flex-1"
+                    disabled={!form.formState.isValid}
+                    loading={form.formState.isSubmitting}
+                  >
+                    I'm sure! Delete it
+                  </Button>
+                </div>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { useParams, usePathname } from 'next/navigation';
 
-import { CreditCard, Settings, Users } from 'lucide-react';
+import { Braces, CreditCard, Settings, Users } from 'lucide-react';
 
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
@@ -21,6 +21,7 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
 
   const settingsPath = `/t/${teamUrl}/settings`;
   const membersPath = `/t/${teamUrl}/settings/members`;
+  const tokensPath = `/t/${teamUrl}/settings/tokens`;
   const billingPath = `/t/${teamUrl}/settings/billing`;
 
   return (
@@ -48,6 +49,16 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
+      <Link href={tokensPath}>
+        <Button
+          variant="ghost"
+          className={cn('w-full justify-start', pathname?.startsWith(tokensPath) && 'bg-secondary')}
+        >
+          <Braces className="mr-2 h-5 w-5" />
+          API Tokens
+        </Button>
+      </Link>
+
       {IS_BILLING_ENABLED() && (
         <Link href={billingPath}>
           <Button

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

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { useParams, usePathname } from 'next/navigation';
 
-import { CreditCard, Key, User } from 'lucide-react';
+import { Braces, CreditCard, Key, User } from 'lucide-react';
 
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
@@ -21,6 +21,7 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
 
   const settingsPath = `/t/${teamUrl}/settings`;
   const membersPath = `/t/${teamUrl}/settings/members`;
+  const tokensPath = `/t/${teamUrl}/settings/tokens`;
   const billingPath = `/t/${teamUrl}/settings/billing`;
 
   return (
@@ -56,6 +57,16 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
+      <Link href={tokensPath}>
+        <Button
+          variant="ghost"
+          className={cn('w-full justify-start', pathname?.startsWith(tokensPath) && 'bg-secondary')}
+        >
+          <Braces className="mr-2 h-5 w-5" />
+          API Tokens
+        </Button>
+      </Link>
+
       {IS_BILLING_ENABLED() && (
         <Link href={billingPath}>
           <Button

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

@@ -29,6 +29,11 @@ export const ZProfileFormSchema = z.object({
   signature: z.string().min(1, 'Signature Pad cannot be empty'),
 });
 
+export const ZTwoFactorAuthTokenSchema = z.object({
+  token: z.string(),
+});
+
+export type TTwoFactorAuthTokenSchema = z.infer<typeof ZTwoFactorAuthTokenSchema>;
 export type TProfileFormSchema = z.infer<typeof ZProfileFormSchema>;
 
 export type ProfileFormProps = {
@@ -50,8 +55,11 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
   });
 
   const isSubmitting = form.formState.isSubmitting;
+  const hasTwoFactorAuthentication = user.twoFactorEnabled;
 
   const { mutateAsync: updateProfile } = trpc.profile.updateProfile.useMutation();
+  const { mutateAsync: deleteAccount, isLoading: isDeletingAccount } =
+    trpc.profile.deleteAccount.useMutation();
 
   const onFormSubmit = async ({ name, signature }: TProfileFormSchema) => {
     try {
@@ -133,7 +141,7 @@ export const ProfileForm = ({ className, user }: ProfileFormProps) => {
           />
         </fieldset>
 
-        <Button type="submit" loading={isSubmitting}>
+        <Button type="submit" loading={isSubmitting} className="self-end">
           {isSubmitting ? 'Updating profile...' : 'Update profile'}
         </Button>
       </form>

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

@@ -0,0 +1,257 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc } from '@documenso/trpc/react';
+import type { TCreateTokenMutationSchema } from '@documenso/trpc/server/api-token-router/schema';
+import { ZCreateTokenMutationSchema } from '@documenso/trpc/server/api-token-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { EXPIRATION_DATES } from '../(dashboard)/settings/token/contants';
+
+const ZCreateTokenFormSchema = ZCreateTokenMutationSchema.extend({
+  enabled: z.boolean(),
+});
+
+type TCreateTokenFormSchema = z.infer<typeof ZCreateTokenFormSchema>;
+
+export type ApiTokenFormProps = {
+  className?: string;
+  teamId?: number;
+};
+
+export const ApiTokenForm = ({ className, teamId }: ApiTokenFormProps) => {
+  const router = useRouter();
+
+  const [, copy] = useCopyToClipboard();
+  const { toast } = useToast();
+
+  const [newlyCreatedToken, setNewlyCreatedToken] = useState('');
+  const [noExpirationDate, setNoExpirationDate] = useState(false);
+
+  const { mutateAsync: createTokenMutation } = trpc.apiToken.createToken.useMutation({
+    onSuccess(data) {
+      setNewlyCreatedToken(data.token);
+    },
+  });
+
+  const form = useForm<TCreateTokenFormSchema>({
+    resolver: zodResolver(ZCreateTokenFormSchema),
+    defaultValues: {
+      tokenName: '',
+      expirationDate: '',
+      enabled: false,
+    },
+  });
+
+  const copyToken = async (token: string) => {
+    try {
+      const copied = await copy(token);
+
+      if (!copied) {
+        throw new Error('Unable to copy the token');
+      }
+
+      toast({
+        title: 'Token copied to clipboard',
+        description: 'The token was copied to your clipboard.',
+      });
+    } catch (error) {
+      toast({
+        title: 'Unable to copy token',
+        description: 'We were unable to copy the token to your clipboard. Please try again.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onSubmit = async ({ tokenName, expirationDate }: TCreateTokenMutationSchema) => {
+    try {
+      await createTokenMutation({
+        teamId,
+        tokenName,
+        expirationDate: noExpirationDate ? null : expirationDate,
+      });
+
+      toast({
+        title: 'Token created',
+        description: 'A new token was created successfully.',
+        duration: 5000,
+      });
+
+      form.reset();
+
+      router.refresh();
+    } catch (error) {
+      if (error instanceof TRPCClientError && error.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: error.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          duration: 5000,
+          description:
+            'We encountered an unknown error while attempting create the new token. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <div className={cn(className)}>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <fieldset className="mt-6 flex w-full flex-col gap-4">
+            <FormField
+              control={form.control}
+              name="tokenName"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel className="text-muted-foreground">Token name</FormLabel>
+
+                  <div className="flex items-center gap-x-4">
+                    <FormControl className="flex-1">
+                      <Input type="text" {...field} />
+                    </FormControl>
+                  </div>
+
+                  <FormDescription className="text-xs italic">
+                    Please enter a meaningful name for your token. This will help you identify it
+                    later.
+                  </FormDescription>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex flex-col gap-4 md:flex-row">
+              <FormField
+                control={form.control}
+                name="expirationDate"
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormLabel className="text-muted-foreground">Token expiration date</FormLabel>
+
+                    <div className="flex items-center gap-x-4">
+                      <FormControl className="flex-1">
+                        <Select onValueChange={field.onChange} disabled={noExpirationDate}>
+                          <SelectTrigger className="w-full">
+                            <SelectValue placeholder="Choose..." />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {Object.entries(EXPIRATION_DATES).map(([key, date]) => (
+                              <SelectItem key={key} value={key}>
+                                {date}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                    </div>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="enabled"
+                render={({ field }) => (
+                  <FormItem className="">
+                    <FormLabel className="text-muted-foreground mt-2">Never expire</FormLabel>
+                    <FormControl>
+                      <div className="block md:py-1.5">
+                        <Switch
+                          className="bg-background"
+                          checked={field.value}
+                          onCheckedChange={(val) => {
+                            setNoExpirationDate((prev) => !prev);
+                            field.onChange(val);
+                          }}
+                        />
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <Button
+              type="submit"
+              className="hidden md:inline-flex"
+              disabled={!form.formState.isDirty}
+              loading={form.formState.isSubmitting}
+            >
+              Create token
+            </Button>
+
+            <div className="md:hidden">
+              <Button
+                type="submit"
+                disabled={!form.formState.isDirty}
+                loading={form.formState.isSubmitting}
+              >
+                Create token
+              </Button>
+            </div>
+          </fieldset>
+        </form>
+      </Form>
+
+      {newlyCreatedToken && (
+        <Card className="mt-8" gradient>
+          <CardContent className="p-4">
+            <p className="text-muted-foreground mt-2 text-sm">
+              Your token was created successfully! Make sure to copy it because you won't be able to
+              see it again!
+            </p>
+
+            <p className="bg-muted-foreground/10 my-4 rounded-md px-2.5 py-1 font-mono text-sm">
+              {newlyCreatedToken}
+            </p>
+
+            <Button variant="outline" onClick={() => void copyToken(newlyCreatedToken)}>
+              Copy token
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+};

apps/web/src/pages/api/v1/[...ts-rest].tsx

@@ -0,0 +1,17 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { createNextRouter } from '@documenso/api/next';
+import { ApiContractV1 } from '@documenso/api/v1/contract';
+import { ApiContractV1Implementation } from '@documenso/api/v1/implementation';
+
+const nextRouteHandler = createNextRouter(ApiContractV1, ApiContractV1Implementation, {
+  responseValidation: true,
+});
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  // TODO: Dirty hack to make ts-rest handler work with next.js in a more intuitive way.
+  req.query['ts-rest'] = Array.isArray(req.query['ts-rest']) ? req.query['ts-rest'] : []; // Make `ts-rest` an array.
+  req.query['ts-rest'].unshift('api', 'v1'); // Prepend our base path to the array.
+
+  return await nextRouteHandler(req, res);
+}

apps/web/src/pages/api/v1/openapi.json.ts

@@ -0,0 +1,7 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { OpenAPIV1 } from '@documenso/api/v1/openapi';
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  res.status(200).json(OpenAPIV1);
+}

apps/web/src/providers/team.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+import React from 'react';
+
+import type { Team } from '@documenso/prisma/client';
+
+interface TeamProviderProps {
+  children: React.ReactNode;
+  team: Team;
+}
+
+const TeamContext = createContext<Team | null>(null);
+
+export const useCurrentTeam = (): Team | null => {
+  const context = useContext(TeamContext);
+
+  if (!context) {
+    throw new Error('useCurrentTeam must be used within a TeamProvider');
+  }
+
+  return context;
+};
+
+export const useOptionalCurrentTeam = (): Team | null => {
+  return useContext(TeamContext);
+};
+
+export const TeamProvider = ({ children, team }: TeamProviderProps) => {
+  return <TeamContext.Provider value={team}>{children}</TeamContext.Provider>;
+};

packages/api/index.ts

@@ -0,0 +1 @@
+export {};

packages/api/next.ts

@@ -0,0 +1 @@
+export { createNextRouter } from '@ts-rest/next';

packages/api/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@documenso/api",
+  "version": "1.0.0",
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "license": "MIT",
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "clean": "rimraf node_modules"
+  },
+  "files": [
+    "index.ts",
+    "next.ts",
+    "v1/"
+  ],
+  "dependencies": {
+    "@documenso/lib": "*",
+    "@documenso/prisma": "*",
+    "@ts-rest/core": "^3.30.5",
+    "@ts-rest/next": "^3.30.5",
+    "@ts-rest/open-api": "^3.33.0",
+    "@types/swagger-ui-react": "^4.18.3",
+    "luxon": "^3.4.0",
+    "superjson": "^1.13.1",
+    "swagger-ui-react": "^5.11.0",
+    "ts-pattern": "^5.0.5",
+    "zod": "^3.22.4"
+  }
+}

packages/api/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@documenso/tsconfig/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "strict": true,
+  }
+}

packages/api/v1/api-documentation.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import SwaggerUI from 'swagger-ui-react';
+import 'swagger-ui-react/swagger-ui.css';
+
+import { OpenAPIV1 } from '@documenso/api/v1/openapi';
+
+export const OpenApiDocsPage = () => {
+  return <SwaggerUI spec={OpenAPIV1} displayOperationId={true} />;
+};

packages/api/v1/contract.ts

@@ -0,0 +1,191 @@
+import { initContract } from '@ts-rest/core';
+
+import {
+  ZAuthorizationHeadersSchema,
+  ZCreateDocumentFromTemplateMutationResponseSchema,
+  ZCreateDocumentFromTemplateMutationSchema,
+  ZCreateDocumentMutationResponseSchema,
+  ZCreateDocumentMutationSchema,
+  ZCreateFieldMutationSchema,
+  ZCreateRecipientMutationSchema,
+  ZDeleteDocumentMutationSchema,
+  ZDeleteFieldMutationSchema,
+  ZDeleteRecipientMutationSchema,
+  ZGetDocumentsQuerySchema,
+  ZSendDocumentForSigningMutationSchema,
+  ZSuccessfulDocumentResponseSchema,
+  ZSuccessfulFieldResponseSchema,
+  ZSuccessfulGetDocumentResponseSchema,
+  ZSuccessfulRecipientResponseSchema,
+  ZSuccessfulResponseSchema,
+  ZSuccessfulSigningResponseSchema,
+  ZUnsuccessfulResponseSchema,
+  ZUpdateFieldMutationSchema,
+  ZUpdateRecipientMutationSchema,
+} from './schema';
+
+const c = initContract();
+
+export const ApiContractV1 = c.router(
+  {
+    getDocuments: {
+      method: 'GET',
+      path: '/api/v1/documents',
+      query: ZGetDocumentsQuerySchema,
+      responses: {
+        200: ZSuccessfulResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Get all documents',
+    },
+
+    getDocument: {
+      method: 'GET',
+      path: '/api/v1/documents/:id',
+      responses: {
+        200: ZSuccessfulGetDocumentResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Get a single document',
+    },
+
+    createDocument: {
+      method: 'POST',
+      path: '/api/v1/documents',
+      body: ZCreateDocumentMutationSchema,
+      responses: {
+        200: ZCreateDocumentMutationResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Upload a new document and get a presigned URL',
+    },
+
+    createDocumentFromTemplate: {
+      method: 'POST',
+      path: '/api/v1/templates/:templateId/create-document',
+      body: ZCreateDocumentFromTemplateMutationSchema,
+      responses: {
+        200: ZCreateDocumentFromTemplateMutationResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Create a new document from an existing template',
+    },
+
+    sendDocument: {
+      method: 'POST',
+      path: '/api/v1/documents/:id/send',
+      body: ZSendDocumentForSigningMutationSchema,
+      responses: {
+        200: ZSuccessfulSigningResponseSchema,
+        400: ZUnsuccessfulResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+        500: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Send a document for signing',
+    },
+
+    deleteDocument: {
+      method: 'DELETE',
+      path: '/api/v1/documents/:id',
+      body: ZDeleteDocumentMutationSchema,
+      responses: {
+        200: ZSuccessfulDocumentResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Delete a document',
+    },
+
+    createRecipient: {
+      method: 'POST',
+      path: '/api/v1/documents/:id/recipients',
+      body: ZCreateRecipientMutationSchema,
+      responses: {
+        200: ZSuccessfulRecipientResponseSchema,
+        400: ZUnsuccessfulResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+        500: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Create a recipient for a document',
+    },
+
+    updateRecipient: {
+      method: 'PATCH',
+      path: '/api/v1/documents/:id/recipients/:recipientId',
+      body: ZUpdateRecipientMutationSchema,
+      responses: {
+        200: ZSuccessfulRecipientResponseSchema,
+        400: ZUnsuccessfulResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+        500: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Update a recipient for a document',
+    },
+
+    deleteRecipient: {
+      method: 'DELETE',
+      path: '/api/v1/documents/:id/recipients/:recipientId',
+      body: ZDeleteRecipientMutationSchema,
+      responses: {
+        200: ZSuccessfulRecipientResponseSchema,
+        400: ZUnsuccessfulResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+        500: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Delete a recipient from a document',
+    },
+
+    createField: {
+      method: 'POST',
+      path: '/api/v1/documents/:id/fields',
+      body: ZCreateFieldMutationSchema,
+      responses: {
+        200: ZSuccessfulFieldResponseSchema,
+        400: ZUnsuccessfulResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+        500: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Create a field for a document',
+    },
+
+    updateField: {
+      method: 'PATCH',
+      path: '/api/v1/documents/:id/fields/:fieldId',
+      body: ZUpdateFieldMutationSchema,
+      responses: {
+        200: ZSuccessfulFieldResponseSchema,
+        400: ZUnsuccessfulResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+        500: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Update a field for a document',
+    },
+
+    deleteField: {
+      method: 'DELETE',
+      path: '/api/v1/documents/:id/fields/:fieldId',
+      body: ZDeleteFieldMutationSchema,
+      responses: {
+        200: ZSuccessfulFieldResponseSchema,
+        400: ZUnsuccessfulResponseSchema,
+        401: ZUnsuccessfulResponseSchema,
+        404: ZUnsuccessfulResponseSchema,
+        500: ZUnsuccessfulResponseSchema,
+      },
+      summary: 'Delete a field from a document',
+    },
+  },
+  {
+    baseHeaders: ZAuthorizationHeadersSchema,
+  },
+);

packages/api/v1/examples/01-create-and-send-document.ts

@@ -0,0 +1,59 @@
+import { initClient } from '@ts-rest/core';
+
+import { ApiContractV1 } from '../contract';
+
+const main = async () => {
+  const client = initClient(ApiContractV1, {
+    baseUrl: 'http://localhost:3000/api/v1',
+    baseHeaders: {
+      authorization: 'Bearer <my-token>',
+    },
+  });
+
+  const { status, body } = await client.createDocument({
+    body: {
+      title: 'My Document',
+      recipients: [
+        {
+          name: 'John Doe',
+          email: 'john@example.com',
+          role: 'SIGNER',
+        },
+        {
+          name: 'Jane Doe',
+          email: 'jane@example.com',
+          role: 'APPROVER',
+        },
+      ],
+      meta: {
+        subject: 'Please sign this document',
+        message: 'Hey {signer.name}, please sign the following document: {document.name}',
+      },
+    },
+  });
+
+  if (status !== 200) {
+    throw new Error('Failed to create document');
+  }
+
+  const { uploadUrl, documentId } = body;
+
+  await fetch(uploadUrl, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/octet-stream',
+    },
+    body: '<raw-binary-data>',
+  });
+
+  await client.sendDocument({
+    params: {
+      id: documentId.toString(),
+    },
+  });
+};
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

packages/api/v1/examples/02-add-a-field.ts

@@ -0,0 +1,43 @@
+import { initClient } from '@ts-rest/core';
+
+import { ApiContractV1 } from '../contract';
+
+const main = async () => {
+  const client = initClient(ApiContractV1, {
+    baseUrl: 'http://localhost:3000/api/v1',
+    baseHeaders: {
+      authorization: 'Bearer <my-token>',
+    },
+  });
+
+  const documentId = '1';
+  const recipientId = 1;
+
+  const { status, body } = await client.createField({
+    params: {
+      id: documentId,
+    },
+    body: {
+      type: 'SIGNATURE',
+      pageHeight: 2.5, // percent of page to occupy in height
+      pageWidth: 5, // percent of page to occupy in width
+      pageX: 10, // percent from left
+      pageY: 10, // percent from top
+      pageNumber: 1,
+      recipientId,
+    },
+  });
+
+  if (status !== 200) {
+    throw new Error('Failed to create field');
+  }
+
+  const { id: fieldId } = body;
+
+  console.log(`Field created with id: ${fieldId}`);
+};
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

packages/api/v1/examples/03-update-a-field.ts

@@ -0,0 +1,39 @@
+import { initClient } from '@ts-rest/core';
+
+import { ApiContractV1 } from '../contract';
+
+const main = async () => {
+  const client = initClient(ApiContractV1, {
+    baseUrl: 'http://localhost:3000/api/v1',
+    baseHeaders: {
+      authorization: 'Bearer <my-token>',
+    },
+  });
+
+  const documentId = '1';
+  const fieldId = '1';
+
+  const { status } = await client.updateField({
+    params: {
+      id: documentId,
+      fieldId,
+    },
+    body: {
+      type: 'SIGNATURE',
+      pageHeight: 2.5, // percent of page to occupy in height
+      pageWidth: 5, // percent of page to occupy in width
+      pageX: 10, // percent from left
+      pageY: 10, // percent from top
+      pageNumber: 1,
+    },
+  });
+
+  if (status !== 200) {
+    throw new Error('Failed to update field');
+  }
+};
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

packages/api/v1/examples/04-remove-a-field.ts

@@ -0,0 +1,31 @@
+import { initClient } from '@ts-rest/core';
+
+import { ApiContractV1 } from '../contract';
+
+const main = async () => {
+  const client = initClient(ApiContractV1, {
+    baseUrl: 'http://localhost:3000/api/v1',
+    baseHeaders: {
+      authorization: 'Bearer <my-token>',
+    },
+  });
+
+  const documentId = '1';
+  const fieldId = '1';
+
+  const { status } = await client.deleteField({
+    params: {
+      id: documentId,
+      fieldId,
+    },
+  });
+
+  if (status !== 200) {
+    throw new Error('Failed to remove field');
+  }
+};
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

packages/api/v1/examples/05-add-a-recipient.ts

@@ -0,0 +1,38 @@
+import { initClient } from '@ts-rest/core';
+
+import { ApiContractV1 } from '../contract';
+
+const main = async () => {
+  const client = initClient(ApiContractV1, {
+    baseUrl: 'http://localhost:3000/api/v1',
+    baseHeaders: {
+      authorization: 'Bearer <my-token>',
+    },
+  });
+
+  const documentId = '1';
+
+  const { status, body } = await client.createRecipient({
+    params: {
+      id: documentId,
+    },
+    body: {
+      name: 'John Doe',
+      email: 'john@example.com',
+      role: 'APPROVER',
+    },
+  });
+
+  if (status !== 200) {
+    throw new Error('Failed to add recipient');
+  }
+
+  const { id: recipientId } = body;
+
+  console.log(`Recipient added with id: ${recipientId}`);
+};
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

packages/api/v1/examples/06-update-a-recipient.ts

@@ -0,0 +1,34 @@
+import { initClient } from '@ts-rest/core';
+
+import { ApiContractV1 } from '../contract';
+
+const main = async () => {
+  const client = initClient(ApiContractV1, {
+    baseUrl: 'http://localhost:3000/api/v1',
+    baseHeaders: {
+      authorization: 'Bearer <my-token>',
+    },
+  });
+
+  const documentId = '1';
+  const recipientId = '1';
+
+  const { status } = await client.updateRecipient({
+    params: {
+      id: documentId,
+      recipientId,
+    },
+    body: {
+      name: 'Johnathon Doe',
+    },
+  });
+
+  if (status !== 200) {
+    throw new Error('Failed to update recipient');
+  }
+};
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

packages/api/v1/examples/07-remove-a-recipient.ts

@@ -0,0 +1,31 @@
+import { initClient } from '@ts-rest/core';
+
+import { ApiContractV1 } from '../contract';
+
+const main = async () => {
+  const client = initClient(ApiContractV1, {
+    baseUrl: 'http://localhost:3000/api/v1',
+    baseHeaders: {
+      authorization: 'Bearer <my-token>',
+    },
+  });
+
+  const documentId = '1';
+  const recipientId = '1';
+
+  const { status } = await client.deleteRecipient({
+    params: {
+      id: documentId,
+      recipientId,
+    },
+  });
+
+  if (status !== 200) {
+    throw new Error('Failed to update recipient');
+  }
+};
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

packages/api/v1/examples/08-get-a-document.ts

@@ -0,0 +1,31 @@
+import { initClient } from '@ts-rest/core';
+
+import { ApiContractV1 } from '../contract';
+
+const main = async () => {
+  const client = initClient(ApiContractV1, {
+    baseUrl: 'http://localhost:3000/api/v1',
+    baseHeaders: {
+      authorization: 'Bearer <my-token>',
+    },
+  });
+
+  const documentId = '1';
+
+  const { status, body } = await client.getDocument({
+    params: {
+      id: documentId,
+    },
+  });
+
+  if (status !== 200) {
+    throw new Error('Failed to get document');
+  }
+
+  console.log(`Got document with id: ${documentId} and title: ${body.title}`);
+};
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

packages/api/v1/examples/09-paginate-all-documents.ts

@@ -0,0 +1,37 @@
+import { initClient } from '@ts-rest/core';
+
+import { ApiContractV1 } from '../contract';
+
+const main = async () => {
+  const client = initClient(ApiContractV1, {
+    baseUrl: 'http://localhost:3000/api/v1',
+    baseHeaders: {
+      authorization: 'Bearer <my-token>',
+    },
+  });
+
+  const page = 1;
+  const perPage = 10;
+
+  const { status, body } = await client.getDocuments({
+    query: {
+      page,
+      perPage,
+    },
+  });
+
+  if (status !== 200) {
+    throw new Error('Failed to get documents');
+  }
+
+  for (const document of body.documents) {
+    console.log(`Got document with id: ${document.id} and title: ${document.title}`);
+  }
+
+  console.log(`Total documents: ${body.totalPages * perPage}`);
+};
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

packages/api/v1/implementation.ts

@@ -0,0 +1,800 @@
+import { createNextRoute } from '@ts-rest/next';
+
+import { getServerLimits } from '@documenso/ee/server-only/limits/server';
+import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
+import { upsertDocumentMeta } from '@documenso/lib/server-only/document-meta/upsert-document-meta';
+import { createDocument } from '@documenso/lib/server-only/document/create-document';
+import { deleteDocument } from '@documenso/lib/server-only/document/delete-document';
+import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
+import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
+import { sendDocument } from '@documenso/lib/server-only/document/send-document';
+import { updateDocument } from '@documenso/lib/server-only/document/update-document';
+import { createField } from '@documenso/lib/server-only/field/create-field';
+import { deleteField } from '@documenso/lib/server-only/field/delete-field';
+import { getFieldById } from '@documenso/lib/server-only/field/get-field-by-id';
+import { updateField } from '@documenso/lib/server-only/field/update-field';
+import { deleteRecipient } from '@documenso/lib/server-only/recipient/delete-recipient';
+import { getRecipientById } from '@documenso/lib/server-only/recipient/get-recipient-by-id';
+import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
+import { setRecipientsForDocument } from '@documenso/lib/server-only/recipient/set-recipients-for-document';
+import { updateRecipient } from '@documenso/lib/server-only/recipient/update-recipient';
+import { createDocumentFromTemplate } from '@documenso/lib/server-only/template/create-document-from-template';
+import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { getPresignPostUrl } from '@documenso/lib/universal/upload/server-actions';
+import { DocumentDataType, DocumentStatus, SigningStatus } from '@documenso/prisma/client';
+
+import { ApiContractV1 } from './contract';
+import { authenticatedMiddleware } from './middleware/authenticated';
+
+export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
+  getDocuments: authenticatedMiddleware(async (args, user, team) => {
+    const page = Number(args.query.page) || 1;
+    const perPage = Number(args.query.perPage) || 10;
+
+    const { data: documents, totalPages } = await findDocuments({
+      page,
+      perPage,
+      userId: user.id,
+      teamId: team?.id,
+    });
+
+    return {
+      status: 200,
+      body: {
+        documents,
+        totalPages,
+      },
+    };
+  }),
+
+  getDocument: authenticatedMiddleware(async (args, user, team) => {
+    const { id: documentId } = args.params;
+
+    try {
+      const document = await getDocumentById({
+        id: Number(documentId),
+        userId: user.id,
+        teamId: team?.id,
+      });
+
+      const recipients = await getRecipientsForDocument({
+        documentId: Number(documentId),
+        teamId: team?.id,
+        userId: user.id,
+      });
+
+      return {
+        status: 200,
+        body: {
+          ...document,
+          recipients,
+        },
+      };
+    } catch (err) {
+      return {
+        status: 404,
+        body: {
+          message: 'Document not found',
+        },
+      };
+    }
+  }),
+
+  deleteDocument: authenticatedMiddleware(async (args, user, team) => {
+    const { id: documentId } = args.params;
+
+    try {
+      const document = await getDocumentById({
+        id: Number(documentId),
+        userId: user.id,
+        teamId: team?.id,
+      });
+
+      if (!document) {
+        return {
+          status: 404,
+          body: {
+            message: 'Document not found',
+          },
+        };
+      }
+
+      const deletedDocument = await deleteDocument({
+        id: document.id,
+        userId: user.id,
+        teamId: team?.id,
+      });
+
+      return {
+        status: 200,
+        body: deletedDocument,
+      };
+    } catch (err) {
+      return {
+        status: 404,
+        body: {
+          message: 'Document not found',
+        },
+      };
+    }
+  }),
+
+  createDocument: authenticatedMiddleware(async (args, user, team) => {
+    const { body } = args;
+
+    try {
+      if (process.env.NEXT_PUBLIC_UPLOAD_TRANSPORT !== 's3') {
+        return {
+          status: 500,
+          body: {
+            message: 'Create document is not available without S3 transport.',
+          },
+        };
+      }
+
+      const { remaining } = await getServerLimits({ email: user.email, teamId: team?.id });
+
+      if (remaining.documents <= 0) {
+        return {
+          status: 400,
+          body: {
+            message: 'You have reached the maximum number of documents allowed for this month',
+          },
+        };
+      }
+
+      const fileName = body.title.endsWith('.pdf') ? body.title : `${body.title}.pdf`;
+
+      const { url, key } = await getPresignPostUrl(fileName, 'application/pdf');
+
+      const documentData = await createDocumentData({
+        data: key,
+        type: DocumentDataType.S3_PATH,
+      });
+
+      const document = await createDocument({
+        title: body.title,
+        userId: user.id,
+        teamId: team?.id,
+        documentDataId: documentData.id,
+        requestMetadata: extractNextApiRequestMetadata(args.req),
+      });
+
+      const recipients = await setRecipientsForDocument({
+        userId: user.id,
+        teamId: team?.id,
+        documentId: document.id,
+        recipients: body.recipients,
+        requestMetadata: extractNextApiRequestMetadata(args.req),
+      });
+
+      return {
+        status: 200,
+        body: {
+          uploadUrl: url,
+          documentId: document.id,
+          recipients: recipients.map((recipient) => ({
+            recipientId: recipient.id,
+            name: recipient.name,
+            email: recipient.email,
+            token: recipient.token,
+            role: recipient.role,
+          })),
+        },
+      };
+    } catch (err) {
+      return {
+        status: 404,
+        body: {
+          message: 'An error has occured while uploading the file',
+        },
+      };
+    }
+  }),
+
+  createDocumentFromTemplate: authenticatedMiddleware(async (args, user, team) => {
+    const { body, params } = args;
+
+    const { remaining } = await getServerLimits({ email: user.email, teamId: team?.id });
+
+    if (remaining.documents <= 0) {
+      return {
+        status: 400,
+        body: {
+          message: 'You have reached the maximum number of documents allowed for this month',
+        },
+      };
+    }
+
+    const templateId = Number(params.templateId);
+
+    const fileName = body.title.endsWith('.pdf') ? body.title : `${body.title}.pdf`;
+
+    const document = await createDocumentFromTemplate({
+      templateId,
+      userId: user.id,
+      teamId: team?.id,
+      recipients: body.recipients,
+    });
+
+    await updateDocument({
+      documentId: document.id,
+      userId: user.id,
+      teamId: team?.id,
+      data: {
+        title: fileName,
+      },
+    });
+
+    if (body.meta) {
+      await upsertDocumentMeta({
+        documentId: document.id,
+        userId: user.id,
+        subject: body.meta.subject,
+        message: body.meta.message,
+        dateFormat: body.meta.dateFormat,
+        timezone: body.meta.timezone,
+        requestMetadata: extractNextApiRequestMetadata(args.req),
+      });
+    }
+
+    return {
+      status: 200,
+      body: {
+        documentId: document.id,
+        recipients: document.Recipient.map((recipient) => ({
+          recipientId: recipient.id,
+          name: recipient.name,
+          email: recipient.email,
+          token: recipient.token,
+          role: recipient.role,
+        })),
+      },
+    };
+  }),
+
+  sendDocument: authenticatedMiddleware(async (args, user, team) => {
+    const { id } = args.params;
+
+    const document = await getDocumentById({ id: Number(id), userId: user.id, teamId: team?.id });
+
+    if (!document) {
+      return {
+        status: 404,
+        body: {
+          message: 'Document not found',
+        },
+      };
+    }
+
+    if (document.status === DocumentStatus.COMPLETED) {
+      return {
+        status: 400,
+        body: {
+          message: 'Document is already complete',
+        },
+      };
+    }
+
+    try {
+      //   await setRecipientsForDocument({
+      //     userId: user.id,
+      //     documentId: Number(id),
+      //     recipients: [
+      //       {
+      //         email: body.signerEmail,
+      //         name: body.signerName ?? '',
+      //       },
+      //     ],
+      //   });
+
+      //   await setFieldsForDocument({
+      //     documentId: Number(id),
+      //     userId: user.id,
+      //     fields: body.fields.map((field) => ({
+      //       signerEmail: body.signerEmail,
+      //       type: field.fieldType,
+      //       pageNumber: field.pageNumber,
+      //       pageX: field.pageX,
+      //       pageY: field.pageY,
+      //       pageWidth: field.pageWidth,
+      //       pageHeight: field.pageHeight,
+      //     })),
+      //   });
+
+      //   if (body.emailBody || body.emailSubject) {
+      //     await upsertDocumentMeta({
+      //       documentId: Number(id),
+      //       subject: body.emailSubject ?? '',
+      //       message: body.emailBody ?? '',
+      //     });
+      //   }
+
+      await sendDocument({
+        documentId: Number(id),
+        userId: user.id,
+        teamId: team?.id,
+        requestMetadata: extractNextApiRequestMetadata(args.req),
+      });
+
+      return {
+        status: 200,
+        body: {
+          message: 'Document sent for signing successfully',
+        },
+      };
+    } catch (err) {
+      return {
+        status: 500,
+        body: {
+          message: 'An error has occured while sending the document for signing',
+        },
+      };
+    }
+  }),
+
+  createRecipient: authenticatedMiddleware(async (args, user, team) => {
+    const { id: documentId } = args.params;
+    const { name, email, role } = args.body;
+
+    const document = await getDocumentById({
+      id: Number(documentId),
+      userId: user.id,
+      teamId: team?.id,
+    });
+
+    if (!document) {
+      return {
+        status: 404,
+        body: {
+          message: 'Document not found',
+        },
+      };
+    }
+
+    if (document.status === DocumentStatus.COMPLETED) {
+      return {
+        status: 400,
+        body: {
+          message: 'Document is already completed',
+        },
+      };
+    }
+
+    const recipients = await getRecipientsForDocument({
+      documentId: Number(documentId),
+      userId: user.id,
+      teamId: team?.id,
+    });
+
+    const recipientAlreadyExists = recipients.some((recipient) => recipient.email === email);
+
+    if (recipientAlreadyExists) {
+      return {
+        status: 400,
+        body: {
+          message: 'Recipient already exists',
+        },
+      };
+    }
+
+    try {
+      const newRecipients = await setRecipientsForDocument({
+        documentId: Number(documentId),
+        userId: user.id,
+        teamId: team?.id,
+        recipients: [
+          ...recipients,
+          {
+            email,
+            name,
+            role,
+          },
+        ],
+        requestMetadata: extractNextApiRequestMetadata(args.req),
+      });
+
+      const newRecipient = newRecipients.find((recipient) => recipient.email === email);
+
+      if (!newRecipient) {
+        throw new Error('Recipient not found');
+      }
+
+      return {
+        status: 200,
+        body: {
+          ...newRecipient,
+          documentId: Number(documentId),
+        },
+      };
+    } catch (err) {
+      return {
+        status: 500,
+        body: {
+          message: 'An error has occured while creating the recipient',
+        },
+      };
+    }
+  }),
+
+  updateRecipient: authenticatedMiddleware(async (args, user, team) => {
+    const { id: documentId, recipientId } = args.params;
+    const { name, email, role } = args.body;
+
+    const document = await getDocumentById({
+      id: Number(documentId),
+      userId: user.id,
+      teamId: team?.id,
+    });
+
+    if (!document) {
+      return {
+        status: 404,
+        body: {
+          message: 'Document not found',
+        },
+      };
+    }
+
+    if (document.status === DocumentStatus.COMPLETED) {
+      return {
+        status: 400,
+        body: {
+          message: 'Document is already completed',
+        },
+      };
+    }
+
+    const updatedRecipient = await updateRecipient({
+      documentId: Number(documentId),
+      recipientId: Number(recipientId),
+      userId: user.id,
+      teamId: team?.id,
+      email,
+      name,
+      role,
+      requestMetadata: extractNextApiRequestMetadata(args.req),
+    }).catch(() => null);
+
+    if (!updatedRecipient) {
+      return {
+        status: 404,
+        body: {
+          message: 'Recipient not found',
+        },
+      };
+    }
+
+    return {
+      status: 200,
+      body: {
+        ...updatedRecipient,
+        documentId: Number(documentId),
+      },
+    };
+  }),
+
+  deleteRecipient: authenticatedMiddleware(async (args, user, team) => {
+    const { id: documentId, recipientId } = args.params;
+
+    const document = await getDocumentById({
+      id: Number(documentId),
+      userId: user.id,
+      teamId: team?.id,
+    });
+
+    if (!document) {
+      return {
+        status: 404,
+        body: {
+          message: 'Document not found',
+        },
+      };
+    }
+
+    if (document.status === DocumentStatus.COMPLETED) {
+      return {
+        status: 400,
+        body: {
+          message: 'Document is already completed',
+        },
+      };
+    }
+
+    const deletedRecipient = await deleteRecipient({
+      documentId: Number(documentId),
+      recipientId: Number(recipientId),
+      userId: user.id,
+      teamId: team?.id,
+      requestMetadata: extractNextApiRequestMetadata(args.req),
+    }).catch(() => null);
+
+    if (!deletedRecipient) {
+      return {
+        status: 400,
+        body: {
+          message: 'Unable to delete recipient',
+        },
+      };
+    }
+
+    return {
+      status: 200,
+      body: {
+        ...deletedRecipient,
+        documentId: Number(documentId),
+      },
+    };
+  }),
+
+  createField: authenticatedMiddleware(async (args, user, team) => {
+    const { id: documentId } = args.params;
+    const { recipientId, type, pageNumber, pageWidth, pageHeight, pageX, pageY } = args.body;
+
+    const document = await getDocumentById({
+      id: Number(documentId),
+      userId: user.id,
+      teamId: team?.id,
+    });
+
+    if (!document) {
+      return {
+        status: 404,
+        body: {
+          message: 'Document not found',
+        },
+      };
+    }
+
+    if (document.status === DocumentStatus.COMPLETED) {
+      return {
+        status: 400,
+        body: {
+          message: 'Document is already completed',
+        },
+      };
+    }
+
+    const recipient = await getRecipientById({
+      id: Number(recipientId),
+      documentId: Number(documentId),
+    }).catch(() => null);
+
+    if (!recipient) {
+      return {
+        status: 404,
+        body: {
+          message: 'Recipient not found',
+        },
+      };
+    }
+
+    if (recipient.signingStatus === SigningStatus.SIGNED) {
+      return {
+        status: 400,
+        body: {
+          message: 'Recipient has already signed the document',
+        },
+      };
+    }
+
+    const field = await createField({
+      documentId: Number(documentId),
+      recipientId: Number(recipientId),
+      userId: user.id,
+      teamId: team?.id,
+      type,
+      pageNumber,
+      pageX,
+      pageY,
+      pageWidth,
+      pageHeight,
+      requestMetadata: extractNextApiRequestMetadata(args.req),
+    });
+
+    const remappedField = {
+      id: field.id,
+      documentId: field.documentId,
+      recipientId: field.recipientId ?? -1,
+      type: field.type,
+      pageNumber: field.page,
+      pageX: Number(field.positionX),
+      pageY: Number(field.positionY),
+      pageWidth: Number(field.width),
+      pageHeight: Number(field.height),
+      customText: field.customText,
+      inserted: field.inserted,
+    };
+
+    return {
+      status: 200,
+      body: {
+        ...remappedField,
+        documentId: Number(documentId),
+      },
+    };
+  }),
+
+  updateField: authenticatedMiddleware(async (args, user, team) => {
+    const { id: documentId, fieldId } = args.params;
+    const { recipientId, type, pageNumber, pageWidth, pageHeight, pageX, pageY } = args.body;
+
+    const document = await getDocumentById({
+      id: Number(documentId),
+      userId: user.id,
+      teamId: team?.id,
+    });
+
+    if (!document) {
+      return {
+        status: 404,
+        body: {
+          message: 'Document not found',
+        },
+      };
+    }
+
+    if (document.status === DocumentStatus.COMPLETED) {
+      return {
+        status: 400,
+        body: {
+          message: 'Document is already completed',
+        },
+      };
+    }
+
+    const recipient = await getRecipientById({
+      id: Number(recipientId),
+      documentId: Number(documentId),
+    }).catch(() => null);
+
+    if (!recipient) {
+      return {
+        status: 404,
+        body: {
+          message: 'Recipient not found',
+        },
+      };
+    }
+
+    if (recipient.signingStatus === SigningStatus.SIGNED) {
+      return {
+        status: 400,
+        body: {
+          message: 'Recipient has already signed the document',
+        },
+      };
+    }
+
+    const updatedField = await updateField({
+      fieldId: Number(fieldId),
+      userId: user.id,
+      teamId: team?.id,
+      documentId: Number(documentId),
+      recipientId: recipientId ? Number(recipientId) : undefined,
+      type,
+      pageNumber,
+      pageX,
+      pageY,
+      pageWidth,
+      pageHeight,
+      requestMetadata: extractNextApiRequestMetadata(args.req),
+    });
+
+    const remappedField = {
+      id: updatedField.id,
+      documentId: updatedField.documentId,
+      recipientId: updatedField.recipientId ?? -1,
+      type: updatedField.type,
+      pageNumber: updatedField.page,
+      pageX: Number(updatedField.positionX),
+      pageY: Number(updatedField.positionY),
+      pageWidth: Number(updatedField.width),
+      pageHeight: Number(updatedField.height),
+      customText: updatedField.customText,
+      inserted: updatedField.inserted,
+    };
+
+    return {
+      status: 200,
+      body: {
+        ...remappedField,
+        documentId: Number(documentId),
+      },
+    };
+  }),
+
+  deleteField: authenticatedMiddleware(async (args, user, team) => {
+    const { id: documentId, fieldId } = args.params;
+
+    const document = await getDocumentById({
+      id: Number(documentId),
+      userId: user.id,
+    });
+
+    if (!document) {
+      return {
+        status: 404,
+        body: {
+          message: 'Document not found',
+        },
+      };
+    }
+
+    if (document.status === DocumentStatus.COMPLETED) {
+      return {
+        status: 400,
+        body: {
+          message: 'Document is already completed',
+        },
+      };
+    }
+
+    const field = await getFieldById({
+      fieldId: Number(fieldId),
+      documentId: Number(documentId),
+    }).catch(() => null);
+
+    if (!field) {
+      return {
+        status: 404,
+        body: {
+          message: 'Field not found',
+        },
+      };
+    }
+
+    const recipient = await getRecipientById({
+      id: Number(field.recipientId),
+      documentId: Number(documentId),
+    }).catch(() => null);
+
+    if (recipient?.signingStatus === SigningStatus.SIGNED) {
+      return {
+        status: 400,
+        body: {
+          message: 'Recipient has already signed the document',
+        },
+      };
+    }
+
+    const deletedField = await deleteField({
+      documentId: Number(documentId),
+      fieldId: Number(fieldId),
+      userId: user.id,
+      teamId: team?.id,
+      requestMetadata: extractNextApiRequestMetadata(args.req),
+    }).catch(() => null);
+
+    if (!deletedField) {
+      return {
+        status: 400,
+        body: {
+          message: 'Unable to delete field',
+        },
+      };
+    }
+
+    const remappedField = {
+      id: deletedField.id,
+      documentId: deletedField.documentId,
+      recipientId: deletedField.recipientId ?? -1,
+      type: deletedField.type,
+      pageNumber: deletedField.page,
+      pageX: Number(deletedField.positionX),
+      pageY: Number(deletedField.positionY),
+      pageWidth: Number(deletedField.width),
+      pageHeight: Number(deletedField.height),
+      customText: deletedField.customText,
+      inserted: deletedField.inserted,
+    };
+
+    return {
+      status: 200,
+      body: {
+        ...remappedField,
+        documentId: Number(documentId),
+      },
+    };
+  }),
+});

packages/api/v1/middleware/authenticated.ts

@@ -0,0 +1,41 @@
+import type { NextApiRequest } from 'next';
+
+import { getApiTokenByToken } from '@documenso/lib/server-only/public-api/get-api-token-by-token';
+import type { Team, User } from '@documenso/prisma/client';
+
+export const authenticatedMiddleware = <
+  T extends {
+    req: NextApiRequest;
+  },
+  R extends {
+    status: number;
+    body: unknown;
+  },
+>(
+  handler: (args: T, user: User, team?: Team | null) => Promise<R>,
+) => {
+  return async (args: T) => {
+    try {
+      const { authorization } = args.req.headers;
+
+      // Support for both "Authorization: Bearer api_xxx" and "Authorization: api_xxx"
+      const [token] = (authorization || '').split('Bearer ').filter((s) => s.length > 0);
+
+      if (!token) {
+        throw new Error('Token was not provided for authenticated middleware');
+      }
+
+      const apiToken = await getApiTokenByToken({ token });
+
+      return await handler(args, apiToken.user, apiToken.team);
+    } catch (_err) {
+      console.log({ _err });
+      return {
+        status: 401,
+        body: {
+          message: 'Unauthorized',
+        },
+      } as const;
+    }
+  };
+};

packages/api/v1/openapi.ts

@@ -0,0 +1,17 @@
+import { generateOpenApi } from '@ts-rest/open-api';
+
+import { ApiContractV1 } from './contract';
+
+export const OpenAPIV1 = generateOpenApi(
+  ApiContractV1,
+  {
+    info: {
+      title: 'Documenso API',
+      version: '1.0.0',
+      description: 'The Documenso API for retrieving, creating, updating and deleting documents.',
+    },
+  },
+  {
+    setOperationId: true,
+  },
+);

packages/api/v1/schema.ts

@@ -0,0 +1,241 @@
+import { z } from 'zod';
+
+import {
+  FieldType,
+  ReadStatus,
+  RecipientRole,
+  SendStatus,
+  SigningStatus,
+} from '@documenso/prisma/client';
+
+/**
+ * Documents
+ */
+export const ZGetDocumentsQuerySchema = z.object({
+  page: z.coerce.number().min(1).optional().default(1),
+  perPage: z.coerce.number().min(1).optional().default(1),
+});
+
+export type TGetDocumentsQuerySchema = z.infer<typeof ZGetDocumentsQuerySchema>;
+
+export const ZDeleteDocumentMutationSchema = null;
+
+export type TDeleteDocumentMutationSchema = typeof ZDeleteDocumentMutationSchema;
+
+export const ZSuccessfulDocumentResponseSchema = z.object({
+  id: z.number(),
+  userId: z.number(),
+  teamId: z.number().nullish(),
+  title: z.string(),
+  status: z.string(),
+  documentDataId: z.string(),
+  createdAt: z.date(),
+  updatedAt: z.date(),
+  completedAt: z.date().nullable(),
+});
+
+export const ZSuccessfulGetDocumentResponseSchema = ZSuccessfulDocumentResponseSchema.extend({
+  recipients: z.lazy(() => z.array(ZSuccessfulRecipientResponseSchema)),
+});
+
+export type TSuccessfulGetDocumentResponseSchema = z.infer<
+  typeof ZSuccessfulGetDocumentResponseSchema
+>;
+
+export type TSuccessfulDocumentResponseSchema = z.infer<typeof ZSuccessfulDocumentResponseSchema>;
+
+export const ZSendDocumentForSigningMutationSchema = null;
+
+export type TSendDocumentForSigningMutationSchema = typeof ZSendDocumentForSigningMutationSchema;
+
+export const ZUploadDocumentSuccessfulSchema = z.object({
+  url: z.string(),
+  key: z.string(),
+});
+
+export type TUploadDocumentSuccessfulSchema = z.infer<typeof ZUploadDocumentSuccessfulSchema>;
+
+export const ZCreateDocumentMutationSchema = z.object({
+  title: z.string().min(1),
+  recipients: z.array(
+    z.object({
+      name: z.string().min(1),
+      email: z.string().email().min(1),
+      role: z.nativeEnum(RecipientRole).optional().default(RecipientRole.SIGNER),
+    }),
+  ),
+  meta: z
+    .object({
+      subject: z.string(),
+      message: z.string(),
+      timezone: z.string(),
+      dateFormat: z.string(),
+      redirectUrl: z.string(),
+    })
+    .partial(),
+});
+
+export type TCreateDocumentMutationSchema = z.infer<typeof ZCreateDocumentMutationSchema>;
+
+export const ZCreateDocumentMutationResponseSchema = z.object({
+  uploadUrl: z.string().min(1),
+  documentId: z.number(),
+  recipients: z.array(
+    z.object({
+      recipientId: z.number(),
+      token: z.string(),
+      role: z.nativeEnum(RecipientRole),
+    }),
+  ),
+});
+
+export type TCreateDocumentMutationResponseSchema = z.infer<
+  typeof ZCreateDocumentMutationResponseSchema
+>;
+
+export const ZCreateDocumentFromTemplateMutationSchema = z.object({
+  title: z.string().min(1),
+  recipients: z.array(
+    z.object({
+      name: z.string().min(1),
+      email: z.string().email().min(1),
+      role: z.nativeEnum(RecipientRole).optional().default(RecipientRole.SIGNER),
+    }),
+  ),
+  meta: z
+    .object({
+      subject: z.string(),
+      message: z.string(),
+      timezone: z.string(),
+      dateFormat: z.string(),
+      redirectUrl: z.string(),
+    })
+    .partial()
+    .optional(),
+});
+
+export type TCreateDocumentFromTemplateMutationSchema = z.infer<
+  typeof ZCreateDocumentFromTemplateMutationSchema
+>;
+
+export const ZCreateDocumentFromTemplateMutationResponseSchema = z.object({
+  documentId: z.number(),
+  recipients: z.array(
+    z.object({
+      recipientId: z.number(),
+      name: z.string(),
+      email: z.string().email().min(1),
+      token: z.string(),
+      role: z.nativeEnum(RecipientRole).optional().default(RecipientRole.SIGNER),
+    }),
+  ),
+});
+
+export type TCreateDocumentFromTemplateMutationResponseSchema = z.infer<
+  typeof ZCreateDocumentFromTemplateMutationResponseSchema
+>;
+
+export const ZCreateRecipientMutationSchema = z.object({
+  name: z.string().min(1),
+  email: z.string().email().min(1),
+  role: z.nativeEnum(RecipientRole).optional().default(RecipientRole.SIGNER),
+});
+
+/**
+ * Recipients
+ */
+export type TCreateRecipientMutationSchema = z.infer<typeof ZCreateRecipientMutationSchema>;
+
+export const ZUpdateRecipientMutationSchema = ZCreateRecipientMutationSchema.partial();
+
+export type TUpdateRecipientMutationSchema = z.infer<typeof ZUpdateRecipientMutationSchema>;
+
+export const ZDeleteRecipientMutationSchema = null;
+
+export type TDeleteRecipientMutationSchema = typeof ZDeleteRecipientMutationSchema;
+
+export const ZSuccessfulRecipientResponseSchema = z.object({
+  id: z.number(),
+  // !: This handles the fact that we have null documentId's for templates
+  // !: while we won't need the default we must add it to satisfy typescript
+  documentId: z.number().nullish().default(-1),
+  email: z.string().email().min(1),
+  name: z.string(),
+  role: z.nativeEnum(RecipientRole),
+  token: z.string(),
+  // !: Not used for now
+  // expired: z.string(),
+  signedAt: z.date().nullable(),
+  readStatus: z.nativeEnum(ReadStatus),
+  signingStatus: z.nativeEnum(SigningStatus),
+  sendStatus: z.nativeEnum(SendStatus),
+});
+
+export type TSuccessfulRecipientResponseSchema = z.infer<typeof ZSuccessfulRecipientResponseSchema>;
+
+/**
+ * Fields
+ */
+export const ZCreateFieldMutationSchema = z.object({
+  recipientId: z.number(),
+  type: z.nativeEnum(FieldType),
+  pageNumber: z.number(),
+  pageX: z.number(),
+  pageY: z.number(),
+  pageWidth: z.number(),
+  pageHeight: z.number(),
+});
+
+export type TCreateFieldMutationSchema = z.infer<typeof ZCreateFieldMutationSchema>;
+
+export const ZUpdateFieldMutationSchema = ZCreateFieldMutationSchema.partial();
+
+export type TUpdateFieldMutationSchema = z.infer<typeof ZUpdateFieldMutationSchema>;
+
+export const ZDeleteFieldMutationSchema = null;
+
+export type TDeleteFieldMutationSchema = typeof ZDeleteFieldMutationSchema;
+
+export const ZSuccessfulFieldResponseSchema = z.object({
+  id: z.number(),
+  documentId: z.number(),
+  recipientId: z.number(),
+  type: z.nativeEnum(FieldType),
+  pageNumber: z.number(),
+  pageX: z.number(),
+  pageY: z.number(),
+  pageWidth: z.number(),
+  pageHeight: z.number(),
+  customText: z.string(),
+  inserted: z.boolean(),
+});
+
+export type TSuccessfulFieldResponseSchema = z.infer<typeof ZSuccessfulFieldResponseSchema>;
+
+export const ZSuccessfulResponseSchema = z.object({
+  documents: ZSuccessfulDocumentResponseSchema.array(),
+  totalPages: z.number(),
+});
+
+export type TSuccessfulResponseSchema = z.infer<typeof ZSuccessfulResponseSchema>;
+
+export const ZSuccessfulSigningResponseSchema = z.object({
+  message: z.string(),
+});
+
+export type TSuccessfulSigningResponseSchema = z.infer<typeof ZSuccessfulSigningResponseSchema>;
+
+/**
+ * General
+ */
+export const ZAuthorizationHeadersSchema = z.object({
+  authorization: z.string(),
+});
+
+export type TAuthorizationHeadersSchema = z.infer<typeof ZAuthorizationHeadersSchema>;
+
+export const ZUnsuccessfulResponseSchema = z.object({
+  message: z.string(),
+});
+
+export type TUnsuccessfulResponseSchema = z.infer<typeof ZUnsuccessfulResponseSchema>;

packages/app-tests/e2e/templates/manage-templates.spec.ts

@@ -107,6 +107,8 @@ test('[TEMPLATES]: delete template', async ({ page }) => {
     await page.getByRole('menuitem', { name: 'Delete' }).click();
     await page.getByRole('button', { name: 'Delete' }).click();
     await expect(page.getByText('Template deleted').first()).toBeVisible();
+
+    await page.waitForTimeout(1000);
   }
 
   await unseedTeam(team.url);
@@ -187,15 +189,18 @@ test('[TEMPLATES]: use template', async ({ page }) => {
 
   // Use personal template.
   await page.getByRole('button', { name: 'Use Template' }).click();
+  await page.getByRole('button', { name: 'Create Document' }).click();
   await page.waitForURL(/documents/);
   await page.getByRole('main').getByRole('link', { name: 'Documents' }).click();
   await page.waitForURL('/documents');
   await expect(page.getByRole('main')).toContainText('Showing 1 result');
 
   await page.goto(`${WEBAPP_BASE_URL}/t/${team.url}/templates`);
+  await page.waitForTimeout(1000);
 
   // Use team template.
   await page.getByRole('button', { name: 'Use Template' }).click();
+  await page.getByRole('button', { name: 'Create Document' }).click();
   await page.waitForURL(/\/t\/.+\/documents/);
   await page.getByRole('main').getByRole('link', { name: 'Documents' }).click();
   await page.waitForURL(`/t/${team.url}/documents`);

packages/lib/constants/time.ts

@@ -1,5 +1,11 @@
+import { Duration } from 'luxon';
+
 export const ONE_SECOND = 1000;
 export const ONE_MINUTE = ONE_SECOND * 60;
 export const ONE_HOUR = ONE_MINUTE * 60;
 export const ONE_DAY = ONE_HOUR * 24;
 export const ONE_WEEK = ONE_DAY * 7;
+export const ONE_MONTH = Duration.fromObject({ months: 1 });
+export const THREE_MONTHS = Duration.fromObject({ months: 3 });
+export const SIX_MONTHS = Duration.fromObject({ months: 6 });
+export const ONE_YEAR = Duration.fromObject({ years: 1 });

packages/lib/server-only/2fa/validate-2fa.ts

@@ -1,4 +1,4 @@
-import { User } from '@documenso/prisma/client';
+import type { User } from '@documenso/prisma/client';
 
 import { ErrorCode } from '../../next-auth/error-codes';
 import { verifyTwoFactorAuthenticationToken } from './verify-2fa-token';

packages/lib/server-only/2fa/verify-2fa-token.ts

@@ -1,7 +1,7 @@
 import { base32 } from '@scure/base';
 import { TOTPController } from 'oslo/otp';
 
-import { User } from '@documenso/prisma/client';
+import type { User } from '@documenso/prisma/client';
 
 import { DOCUMENSO_ENCRYPTION_KEY } from '../../constants/crypto';
 import { symmetricDecrypt } from '../../universal/crypto';

packages/lib/server-only/admin/get-all-documents.ts

@@ -1,5 +1,5 @@
 import { prisma } from '@documenso/prisma';
-import { Prisma } from '@documenso/prisma/client';
+import type { Prisma } from '@documenso/prisma/client';
 
 export interface FindDocumentsOptions {
   term?: string;

packages/lib/server-only/admin/update-user.ts

@@ -1,5 +1,5 @@
 import { prisma } from '@documenso/prisma';
-import { Role } from '@documenso/prisma/client';
+import type { Role } from '@documenso/prisma/client';
 
 export type UpdateUserOptions = {
   id: number;

packages/lib/server-only/auth/hash.ts

@@ -1,4 +1,5 @@
 import { compareSync as bcryptCompareSync, hashSync as bcryptHashSync } from 'bcrypt';
+import crypto from 'crypto';
 
 import { SALT_ROUNDS } from '../../constants/auth';
 
@@ -12,3 +13,7 @@ export const hashSync = (password: string) => {
 export const compareSync = (password: string, hash: string) => {
   return bcryptCompareSync(password, hash);
 };
+
+export const hashString = (input: string) => {
+  return crypto.createHash('sha512').update(input).digest('hex');
+};

packages/lib/server-only/document/delete-document.ts

@@ -17,41 +17,47 @@ import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
 export type DeleteDocumentOptions = {
   id: number;
   userId: number;
-  status: DocumentStatus;
+  teamId?: number;
   requestMetadata?: RequestMetadata;
 };
 
 export const deleteDocument = async ({
   id,
   userId,
-  status,
+  teamId,
   requestMetadata,
 }: DeleteDocumentOptions) => {
-  await prisma.document.findFirstOrThrow({
+  const document = await prisma.document.findUnique({
     where: {
       id,
-      OR: [
-        {
-          userId,
-        },
-        {
-          team: {
-            members: {
-              some: {
-                userId,
+      ...(teamId
+        ? {
+            team: {
+              id: teamId,
+              members: {
+                some: {
+                  userId,
+                },
               },
             },
-          },
-        },
-      ],
+          }
+        : {
+            userId,
+            teamId: null,
+          }),
+    },
+    include: {
+      Recipient: true,
+      documentMeta: true,
+      User: true,
     },
   });
 
-  const user = await prisma.user.findFirstOrThrow({
-    where: {
-      id: userId,
-    },
-  });
+  if (!document) {
+    throw new Error('Document not found');
+  }
+
+  const { status, User: user } = document;
 
   // if the document is a draft, hard-delete
   if (status === DocumentStatus.DRAFT) {
@@ -75,51 +81,33 @@ export const deleteDocument = async ({
   }
 
   // if the document is pending, send cancellation emails to all recipients
-  if (status === DocumentStatus.PENDING) {
-    const document = await prisma.document.findUnique({
-      where: {
-        id,
-        status,
-        userId,
-      },
-      include: {
-        Recipient: true,
-        documentMeta: true,
-      },
-    });
+  if (status === DocumentStatus.PENDING && document.Recipient.length > 0) {
+    await Promise.all(
+      document.Recipient.map(async (recipient) => {
+        const assetBaseUrl = NEXT_PUBLIC_WEBAPP_URL() || 'http://localhost:3000';
 
-    if (!document) {
-      throw new Error('Document not found');
-    }
+        const template = createElement(DocumentCancelTemplate, {
+          documentName: document.title,
+          inviterName: user.name || undefined,
+          inviterEmail: user.email,
+          assetBaseUrl,
+        });
 
-    if (document.Recipient.length > 0) {
-      await Promise.all(
-        document.Recipient.map(async (recipient) => {
-          const assetBaseUrl = NEXT_PUBLIC_WEBAPP_URL() || 'http://localhost:3000';
-
-          const template = createElement(DocumentCancelTemplate, {
-            documentName: document.title,
-            inviterName: user.name || undefined,
-            inviterEmail: user.email,
-            assetBaseUrl,
-          });
-
-          await mailer.sendMail({
-            to: {
-              address: recipient.email,
-              name: recipient.name,
-            },
-            from: {
-              name: FROM_NAME,
-              address: FROM_ADDRESS,
-            },
-            subject: 'Document Cancelled',
-            html: render(template),
-            text: render(template, { plainText: true }),
-          });
-        }),
-      );
-    }
+        await mailer.sendMail({
+          to: {
+            address: recipient.email,
+            name: recipient.name,
+          },
+          from: {
+            name: FROM_NAME,
+            address: FROM_ADDRESS,
+          },
+          subject: 'Document Cancelled',
+          html: render(template),
+          text: render(template, { plainText: true }),
+        });
+      }),
+    );
   }
 
   // If the document is not a draft, only soft-delete.

packages/lib/server-only/document/send-document.tsx

@@ -20,12 +20,14 @@ import {
 export type SendDocumentOptions = {
   documentId: number;
   userId: number;
+  teamId?: number;
   requestMetadata?: RequestMetadata;
 };
 
 export const sendDocument = async ({
   documentId,
   userId,
+  teamId,
   requestMetadata,
 }: SendDocumentOptions) => {
   const user = await prisma.user.findFirstOrThrow({
@@ -42,20 +44,21 @@ export const sendDocument = async ({
   const document = await prisma.document.findUnique({
     where: {
       id: documentId,
-      OR: [
-        {
-          userId,
-        },
-        {
-          team: {
-            members: {
-              some: {
-                userId,
+      ...(teamId
+        ? {
+            team: {
+              id: teamId,
+              members: {
+                some: {
+                  userId,
+                },
               },
             },
-          },
-        },
-      ],
+          }
+        : {
+            userId,
+            teamId: null,
+          }),
     },
     include: {
       Recipient: true,

packages/lib/server-only/document/update-document.ts

@@ -5,16 +5,36 @@ import type { Prisma } from '@prisma/client';
 import { prisma } from '@documenso/prisma';
 
 export type UpdateDocumentOptions = {
+  documentId: number;
   data: Prisma.DocumentUpdateInput;
   userId: number;
-  documentId: number;
+  teamId?: number;
 };
 
-export const updateDocument = async ({ documentId, userId, data }: UpdateDocumentOptions) => {
+export const updateDocument = async ({
+  documentId,
+  userId,
+  teamId,
+  data,
+}: UpdateDocumentOptions) => {
   return await prisma.document.update({
     where: {
       id: documentId,
-      userId,
+      ...(teamId
+        ? {
+            team: {
+              id: teamId,
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          }
+        : {
+            userId,
+            teamId: null,
+          }),
     },
     data: {
       ...data,

packages/lib/server-only/document/update-title.ts

@@ -7,6 +7,7 @@ import { prisma } from '@documenso/prisma';
 
 export type UpdateTitleOptions = {
   userId: number;
+  teamId?: number;
   documentId: number;
   title: string;
   requestMetadata?: RequestMetadata;
@@ -14,6 +15,7 @@ export type UpdateTitleOptions = {
 
 export const updateTitle = async ({
   userId,
+  teamId,
   documentId,
   title,
   requestMetadata,
@@ -27,20 +29,21 @@ export const updateTitle = async ({
   const document = await prisma.document.findFirstOrThrow({
     where: {
       id: documentId,
-      OR: [
-        {
-          userId,
-        },
-        {
-          team: {
-            members: {
-              some: {
-                userId,
+      ...(teamId
+        ? {
+            team: {
+              id: teamId,
+              members: {
+                some: {
+                  userId,
+                },
               },
             },
-          },
-        },
-      ],
+          }
+        : {
+            userId,
+            teamId: null,
+          }),
     },
   });
 

packages/lib/server-only/field/create-field.ts

@@ -0,0 +1,126 @@
+import { prisma } from '@documenso/prisma';
+import type { FieldType, Team } from '@documenso/prisma/client';
+
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
+
+export type CreateFieldOptions = {
+  documentId: number;
+  userId: number;
+  teamId?: number;
+  recipientId: number;
+  type: FieldType;
+  pageNumber: number;
+  pageX: number;
+  pageY: number;
+  pageWidth: number;
+  pageHeight: number;
+  requestMetadata?: RequestMetadata;
+};
+
+export const createField = async ({
+  documentId,
+  userId,
+  teamId,
+  recipientId,
+  type,
+  pageNumber,
+  pageX,
+  pageY,
+  pageWidth,
+  pageHeight,
+  requestMetadata,
+}: CreateFieldOptions) => {
+  const document = await prisma.document.findFirst({
+    select: {
+      id: true,
+    },
+    where: {
+      id: documentId,
+      ...(teamId
+        ? {
+            team: {
+              id: teamId,
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          }
+        : {
+            userId,
+            teamId: null,
+          }),
+    },
+  });
+
+  if (!document) {
+    throw new Error('Document not found');
+  }
+
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+    },
+  });
+
+  let team: Team | null = null;
+
+  if (teamId) {
+    team = await prisma.team.findFirst({
+      where: {
+        id: teamId,
+        members: {
+          some: {
+            userId,
+          },
+        },
+      },
+    });
+  }
+
+  const field = await prisma.field.create({
+    data: {
+      documentId,
+      recipientId,
+      type,
+      page: pageNumber,
+      positionX: pageX,
+      positionY: pageY,
+      width: pageWidth,
+      height: pageHeight,
+      customText: '',
+      inserted: false,
+    },
+    include: {
+      Recipient: true,
+    },
+  });
+
+  await prisma.documentAuditLog.create({
+    data: createDocumentAuditLogData({
+      type: 'FIELD_CREATED',
+      documentId,
+      user: {
+        id: team?.id ?? user.id,
+        email: team?.name ?? user.email,
+        name: team ? '' : user.name,
+      },
+      data: {
+        fieldId: field.secondaryId,
+        fieldRecipientEmail: field.Recipient?.email ?? '',
+        fieldRecipientId: recipientId,
+        fieldType: field.type,
+      },
+      requestMetadata,
+    }),
+  });
+
+  return field;
+};

packages/lib/server-only/field/delete-field.ts

@@ -0,0 +1,90 @@
+import { prisma } from '@documenso/prisma';
+import type { Team } from '@documenso/prisma/client';
+
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
+
+export type DeleteFieldOptions = {
+  fieldId: number;
+  documentId: number;
+  userId: number;
+  teamId?: number;
+  requestMetadata?: RequestMetadata;
+};
+
+export const deleteField = async ({
+  fieldId,
+  userId,
+  teamId,
+  documentId,
+  requestMetadata,
+}: DeleteFieldOptions) => {
+  const field = await prisma.field.delete({
+    where: {
+      id: fieldId,
+      Document: {
+        id: documentId,
+        ...(teamId
+          ? {
+              team: {
+                id: teamId,
+                members: {
+                  some: {
+                    userId,
+                  },
+                },
+              },
+            }
+          : {
+              userId,
+              teamId: null,
+            }),
+      },
+    },
+    include: {
+      Recipient: true,
+    },
+  });
+
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+    },
+  });
+
+  let team: Team | null = null;
+
+  if (teamId) {
+    team = await prisma.team.findFirstOrThrow({
+      where: {
+        id: teamId,
+      },
+    });
+  }
+
+  await prisma.documentAuditLog.create({
+    data: createDocumentAuditLogData({
+      type: 'FIELD_DELETED',
+      documentId,
+      user: {
+        id: team?.id ?? user.id,
+        email: team?.name ?? user.email,
+        name: team ? '' : user.name,
+      },
+      data: {
+        fieldId: field.secondaryId,
+        fieldRecipientEmail: field.Recipient?.email ?? '',
+        fieldRecipientId: field.recipientId ?? -1,
+        fieldType: field.type,
+      },
+      requestMetadata,
+    }),
+  });
+
+  return field;
+};

packages/lib/server-only/field/get-field-by-id.ts

@@ -0,0 +1,17 @@
+import { prisma } from '@documenso/prisma';
+
+export type GetFieldByIdOptions = {
+  fieldId: number;
+  documentId: number;
+};
+
+export const getFieldById = async ({ fieldId, documentId }: GetFieldByIdOptions) => {
+  const field = await prisma.field.findFirst({
+    where: {
+      id: fieldId,
+      documentId,
+    },
+  });
+
+  return field;
+};

packages/lib/server-only/field/update-field.ts

@@ -0,0 +1,122 @@
+import { prisma } from '@documenso/prisma';
+import type { FieldType, Team } from '@documenso/prisma/client';
+
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
+
+export type UpdateFieldOptions = {
+  fieldId: number;
+  documentId: number;
+  userId: number;
+  teamId?: number;
+  recipientId?: number;
+  type?: FieldType;
+  pageNumber?: number;
+  pageX?: number;
+  pageY?: number;
+  pageWidth?: number;
+  pageHeight?: number;
+  requestMetadata?: RequestMetadata;
+};
+
+export const updateField = async ({
+  fieldId,
+  documentId,
+  userId,
+  teamId,
+  recipientId,
+  type,
+  pageNumber,
+  pageX,
+  pageY,
+  pageWidth,
+  pageHeight,
+  requestMetadata,
+}: UpdateFieldOptions) => {
+  const field = await prisma.field.update({
+    where: {
+      id: fieldId,
+      Document: {
+        id: documentId,
+        ...(teamId
+          ? {
+              team: {
+                id: teamId,
+                members: {
+                  some: {
+                    userId,
+                  },
+                },
+              },
+            }
+          : {
+              userId,
+              teamId: null,
+            }),
+      },
+    },
+    data: {
+      recipientId,
+      type,
+      page: pageNumber,
+      positionX: pageX,
+      positionY: pageY,
+      width: pageWidth,
+      height: pageHeight,
+    },
+    include: {
+      Recipient: true,
+    },
+  });
+
+  if (!field) {
+    throw new Error('Field not found');
+  }
+
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+    },
+  });
+
+  let team: Team | null = null;
+
+  if (teamId) {
+    team = await prisma.team.findFirst({
+      where: {
+        id: teamId,
+        members: {
+          some: {
+            userId,
+          },
+        },
+      },
+    });
+  }
+
+  await prisma.documentAuditLog.create({
+    data: createDocumentAuditLogData({
+      type: 'FIELD_UPDATED',
+      documentId,
+      user: {
+        id: team?.id ?? user.id,
+        email: team?.name ?? user.email,
+        name: team ? '' : user.name,
+      },
+      data: {
+        fieldId: field.secondaryId,
+        fieldRecipientEmail: field.Recipient?.email ?? '',
+        fieldRecipientId: recipientId ?? -1,
+        fieldType: field.type,
+      },
+      requestMetadata,
+    }),
+  });
+
+  return field;
+};

packages/lib/server-only/pdf/insert-field-in-pdf.ts

@@ -1,3 +1,4 @@
+// https://github.com/Hopding/pdf-lib/issues/20#issuecomment-412852821
 import fontkit from '@pdf-lib/fontkit';
 import { PDFDocument, StandardFonts } from 'pdf-lib';
 
@@ -73,13 +74,17 @@ export const insertFieldInPDF = async (pdf: PDFDocument, field: FieldWithSignatu
       height: imageHeight,
     });
   } else {
-    let textWidth = font.widthOfTextAtSize(field.customText, fontSize);
+    const longestLineInTextForWidth = field.customText
+      .split('\n')
+      .sort((a, b) => b.length - a.length)[0];
+
+    let textWidth = font.widthOfTextAtSize(longestLineInTextForWidth, fontSize);
     const textHeight = font.heightAtSize(fontSize);
 
     const scalingFactor = Math.min(fieldWidth / textWidth, fieldHeight / textHeight, 1);
 
     fontSize = Math.max(Math.min(fontSize * scalingFactor, maxFontSize), minFontSize);
-    textWidth = font.widthOfTextAtSize(field.customText, fontSize);
+    textWidth = font.widthOfTextAtSize(longestLineInTextForWidth, fontSize);
 
     const textX = fieldX + (fieldWidth - textWidth) / 2;
     let textY = fieldY + (fieldHeight - textHeight) / 2;

packages/lib/server-only/public-api/create-api-token.ts

@@ -0,0 +1,67 @@
+import type { Duration } from 'luxon';
+import { DateTime } from 'luxon';
+
+import { prisma } from '@documenso/prisma';
+import { TeamMemberRole } from '@documenso/prisma/client';
+
+// temporary choice for testing only
+import * as timeConstants from '../../constants/time';
+import { alphaid } from '../../universal/id';
+import { hashString } from '../auth/hash';
+
+type TimeConstants = typeof timeConstants & {
+  [key: string]: number | Duration;
+};
+
+type CreateApiTokenInput = {
+  userId: number;
+  teamId?: number;
+  tokenName: string;
+  expiresIn: string | null;
+};
+
+export const createApiToken = async ({
+  userId,
+  teamId,
+  tokenName,
+  expiresIn,
+}: CreateApiTokenInput) => {
+  const apiToken = `api_${alphaid(16)}`;
+
+  const hashedToken = hashString(apiToken);
+
+  const timeConstantsRecords: TimeConstants = timeConstants;
+
+  if (teamId) {
+    const member = await prisma.teamMember.findFirst({
+      where: {
+        userId,
+        teamId,
+        role: TeamMemberRole.ADMIN,
+      },
+    });
+
+    if (!member) {
+      throw new Error('You do not have permission to create a token for this team');
+    }
+  }
+
+  const storedToken = await prisma.apiToken.create({
+    data: {
+      name: tokenName,
+      token: hashedToken,
+      expires: expiresIn ? DateTime.now().plus(timeConstantsRecords[expiresIn]).toJSDate() : null,
+      userId: teamId ? null : userId,
+      teamId,
+    },
+  });
+
+  if (!storedToken) {
+    throw new Error('Failed to create the API token');
+  }
+
+  return {
+    id: storedToken.id,
+    token: apiToken,
+  };
+};

packages/lib/server-only/public-api/delete-api-token-by-id.ts

@@ -0,0 +1,32 @@
+import { prisma } from '@documenso/prisma';
+import { TeamMemberRole } from '@documenso/prisma/client';
+
+export type DeleteTokenByIdOptions = {
+  id: number;
+  userId: number;
+  teamId?: number;
+};
+
+export const deleteTokenById = async ({ id, userId, teamId }: DeleteTokenByIdOptions) => {
+  if (teamId) {
+    const member = await prisma.teamMember.findFirst({
+      where: {
+        userId,
+        teamId,
+        role: TeamMemberRole.ADMIN,
+      },
+    });
+
+    if (!member) {
+      throw new Error('You do not have permission to delete this token');
+    }
+  }
+
+  return await prisma.apiToken.delete({
+    where: {
+      id,
+      userId: teamId ? null : userId,
+      teamId,
+    },
+  });
+};

packages/lib/server-only/public-api/get-all-team-tokens.ts

@@ -0,0 +1,36 @@
+import { prisma } from '@documenso/prisma';
+import { TeamMemberRole } from '@documenso/prisma/client';
+
+export type GetUserTokensOptions = {
+  userId: number;
+  teamId: number;
+};
+
+export const getTeamTokens = async ({ userId, teamId }: GetUserTokensOptions) => {
+  const teamMember = await prisma.teamMember.findFirst({
+    where: {
+      userId,
+      teamId,
+    },
+  });
+
+  if (teamMember?.role !== TeamMemberRole.ADMIN) {
+    throw new Error('You do not have permission to view tokens for this team');
+  }
+
+  return await prisma.apiToken.findMany({
+    where: {
+      teamId,
+    },
+    select: {
+      id: true,
+      name: true,
+      algorithm: true,
+      createdAt: true,
+      expires: true,
+    },
+    orderBy: {
+      createdAt: 'desc',
+    },
+  });
+};

packages/lib/server-only/public-api/get-all-user-tokens.ts

@@ -0,0 +1,23 @@
+import { prisma } from '@documenso/prisma';
+
+export type GetUserTokensOptions = {
+  userId: number;
+};
+
+export const getUserTokens = async ({ userId }: GetUserTokensOptions) => {
+  return await prisma.apiToken.findMany({
+    where: {
+      userId,
+    },
+    select: {
+      id: true,
+      name: true,
+      algorithm: true,
+      createdAt: true,
+      expires: true,
+    },
+    orderBy: {
+      createdAt: 'desc',
+    },
+  });
+};

packages/lib/server-only/public-api/get-api-token-by-id.ts

@@ -0,0 +1,15 @@
+import { prisma } from '@documenso/prisma';
+
+export type GetApiTokenByIdOptions = {
+  id: number;
+  userId: number;
+};
+
+export const getApiTokenById = async ({ id, userId }: GetApiTokenByIdOptions) => {
+  return await prisma.apiToken.findFirstOrThrow({
+    where: {
+      id,
+      userId,
+    },
+  });
+};

packages/lib/server-only/public-api/get-api-token-by-token.ts

@@ -0,0 +1,41 @@
+import { prisma } from '@documenso/prisma';
+
+import { hashString } from '../auth/hash';
+
+export const getApiTokenByToken = async ({ token }: { token: string }) => {
+  const hashedToken = hashString(token);
+
+  const apiToken = await prisma.apiToken.findFirst({
+    where: {
+      token: hashedToken,
+    },
+    include: {
+      team: true,
+      user: true,
+    },
+  });
+
+  if (!apiToken) {
+    throw new Error('Invalid token');
+  }
+
+  if (apiToken.expires && apiToken.expires < new Date()) {
+    throw new Error('Expired token');
+  }
+
+  if (apiToken.team) {
+    apiToken.user = await prisma.user.findFirst({
+      where: {
+        id: apiToken.team.ownerUserId,
+      },
+    });
+  }
+
+  const { user } = apiToken;
+
+  if (!user) {
+    throw new Error('Invalid token');
+  }
+
+  return { ...apiToken, user };
+};

packages/lib/server-only/recipient/delete-recipient.ts

@@ -0,0 +1,106 @@
+import { prisma } from '@documenso/prisma';
+import type { Team } from '@documenso/prisma/client';
+import { SendStatus } from '@documenso/prisma/client';
+
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
+
+export type DeleteRecipientOptions = {
+  documentId: number;
+  recipientId: number;
+  userId: number;
+  teamId?: number;
+  requestMetadata?: RequestMetadata;
+};
+
+export const deleteRecipient = async ({
+  documentId,
+  recipientId,
+  userId,
+  teamId,
+  requestMetadata,
+}: DeleteRecipientOptions) => {
+  const recipient = await prisma.recipient.findFirst({
+    where: {
+      id: recipientId,
+      Document: {
+        id: documentId,
+        ...(teamId
+          ? {
+              team: {
+                id: teamId,
+                members: {
+                  some: {
+                    userId,
+                  },
+                },
+              },
+            }
+          : {
+              userId,
+              teamId: null,
+            }),
+      },
+    },
+  });
+
+  if (!recipient) {
+    throw new Error('Recipient not found');
+  }
+
+  if (recipient.sendStatus !== SendStatus.NOT_SENT) {
+    throw new Error('Can not delete a recipient that has already been sent a document');
+  }
+
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+  });
+
+  let team: Team | null = null;
+
+  if (teamId) {
+    team = await prisma.team.findFirst({
+      where: {
+        id: teamId,
+        members: {
+          some: {
+            userId,
+          },
+        },
+      },
+    });
+  }
+
+  const deletedRecipient = await prisma.$transaction(async (tx) => {
+    const deleted = await tx.recipient.delete({
+      where: {
+        id: recipient.id,
+      },
+    });
+
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: 'RECIPIENT_DELETED',
+        documentId,
+        user: {
+          id: team?.id ?? user.id,
+          email: team?.name ?? user.email,
+          name: team ? '' : user.name,
+        },
+        data: {
+          recipientEmail: recipient.email,
+          recipientName: recipient.name,
+          recipientId: recipient.id,
+          recipientRole: recipient.role,
+        },
+        requestMetadata,
+      }),
+    });
+
+    return deleted;
+  });
+
+  return deletedRecipient;
+};

packages/lib/server-only/recipient/get-recipient-by-email.ts

@@ -0,0 +1,21 @@
+import { prisma } from '@documenso/prisma';
+
+export type GetRecipientByEmailOptions = {
+  documentId: number;
+  email: string;
+};
+
+export const getRecipientByEmail = async ({ documentId, email }: GetRecipientByEmailOptions) => {
+  const recipient = await prisma.recipient.findFirst({
+    where: {
+      documentId,
+      email: email.toLowerCase(),
+    },
+  });
+
+  if (!recipient) {
+    throw new Error('Recipient not found');
+  }
+
+  return recipient;
+};

packages/lib/server-only/recipient/get-recipient-by-id.ts

@@ -0,0 +1,21 @@
+import { prisma } from '@documenso/prisma';
+
+export type GetRecipientByIdOptions = {
+  id: number;
+  documentId: number;
+};
+
+export const getRecipientById = async ({ documentId, id }: GetRecipientByIdOptions) => {
+  const recipient = await prisma.recipient.findFirst({
+    where: {
+      documentId,
+      id,
+    },
+  });
+
+  if (!recipient) {
+    throw new Error('Recipient not found');
+  }
+
+  return recipient;
+};

packages/lib/server-only/recipient/get-recipients-for-document.ts

@@ -3,11 +3,13 @@ import { prisma } from '@documenso/prisma';
 export interface GetRecipientsForDocumentOptions {
   documentId: number;
   userId: number;
+  teamId?: number;
 }
 
 export const getRecipientsForDocument = async ({
   documentId,
   userId,
+  teamId,
 }: GetRecipientsForDocumentOptions) => {
   const recipients = await prisma.recipient.findMany({
     where: {
@@ -18,6 +20,7 @@ export const getRecipientsForDocument = async ({
             userId,
           },
           {
+            teamId,
             team: {
               members: {
                 some: {

packages/lib/server-only/recipient/set-recipients-for-document.ts

@@ -11,6 +11,7 @@ import { SendStatus, SigningStatus } from '@documenso/prisma/client';
 
 export interface SetRecipientsForDocumentOptions {
   userId: number;
+  teamId?: number;
   documentId: number;
   recipients: {
     id?: number | null;
@@ -23,6 +24,7 @@ export interface SetRecipientsForDocumentOptions {
 
 export const setRecipientsForDocument = async ({
   userId,
+  teamId,
   documentId,
   recipients,
   requestMetadata,
@@ -30,20 +32,21 @@ export const setRecipientsForDocument = async ({
   const document = await prisma.document.findFirst({
     where: {
       id: documentId,
-      OR: [
-        {
-          userId,
-        },
-        {
-          team: {
-            members: {
-              some: {
-                userId,
+      ...(teamId
+        ? {
+            team: {
+              id: teamId,
+              members: {
+                some: {
+                  userId,
+                },
               },
             },
-          },
-        },
-      ],
+          }
+        : {
+            userId,
+            teamId: null,
+          }),
     },
   });
 
@@ -106,7 +109,7 @@ export const setRecipientsForDocument = async ({
     });
 
   const persistedRecipients = await prisma.$transaction(async (tx) => {
-    await Promise.all(
+    return await Promise.all(
       linkedRecipients.map(async (recipient) => {
         const upsertedRecipient = await tx.recipient.upsert({
           where: {

packages/lib/server-only/recipient/set-recipients-for-template.ts

@@ -1,4 +1,5 @@
 import { prisma } from '@documenso/prisma';
+import type { RecipientRole } from '@documenso/prisma/client';
 
 import { nanoid } from '../../universal/id';
 
@@ -9,6 +10,7 @@ export type SetRecipientsForTemplateOptions = {
     id?: number;
     email: string;
     name: string;
+    role: RecipientRole;
   }[];
 };
 
@@ -84,11 +86,13 @@ export const setRecipientsForTemplate = async ({
         update: {
           name: recipient.name,
           email: recipient.email,
+          role: recipient.role,
           templateId,
         },
         create: {
           name: recipient.name,
           email: recipient.email,
+          role: recipient.role,
           token: nanoid(),
           templateId,
         },

packages/lib/server-only/recipient/update-recipient.ts

@@ -0,0 +1,118 @@
+import { prisma } from '@documenso/prisma';
+import type { RecipientRole, Team } from '@documenso/prisma/client';
+
+import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+import { createDocumentAuditLogData, diffRecipientChanges } from '../../utils/document-audit-logs';
+
+export type UpdateRecipientOptions = {
+  documentId: number;
+  recipientId: number;
+  email?: string;
+  name?: string;
+  role?: RecipientRole;
+  userId: number;
+  teamId?: number;
+  requestMetadata?: RequestMetadata;
+};
+
+export const updateRecipient = async ({
+  documentId,
+  recipientId,
+  email,
+  name,
+  role,
+  userId,
+  teamId,
+  requestMetadata,
+}: UpdateRecipientOptions) => {
+  const recipient = await prisma.recipient.findFirst({
+    where: {
+      id: recipientId,
+      Document: {
+        id: documentId,
+        ...(teamId
+          ? {
+              team: {
+                id: teamId,
+                members: {
+                  some: {
+                    userId,
+                  },
+                },
+              },
+            }
+          : {
+              userId,
+              teamId: null,
+            }),
+      },
+    },
+  });
+
+  let team: Team | null = null;
+
+  if (teamId) {
+    team = await prisma.team.findFirst({
+      where: {
+        id: teamId,
+        members: {
+          some: {
+            userId,
+          },
+        },
+      },
+    });
+  }
+
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+  });
+
+  if (!recipient) {
+    throw new Error('Recipient not found');
+  }
+
+  const updatedRecipient = await prisma.$transaction(async (tx) => {
+    const persisted = await prisma.recipient.update({
+      where: {
+        id: recipient.id,
+      },
+      data: {
+        email: email?.toLowerCase() ?? recipient.email,
+        name: name ?? recipient.name,
+        role: role ?? recipient.role,
+      },
+    });
+
+    const changes = diffRecipientChanges(recipient, persisted);
+
+    if (changes.length > 0) {
+      await tx.documentAuditLog.create({
+        data: createDocumentAuditLogData({
+          type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_UPDATED,
+          documentId: documentId,
+          user: {
+            id: team?.id ?? user.id,
+            name: team?.name ?? user.name,
+            email: team ? '' : user.email,
+          },
+          requestMetadata,
+          data: {
+            changes,
+            recipientId,
+            recipientEmail: persisted.email,
+            recipientName: persisted.name,
+            recipientRole: persisted.role,
+          },
+        }),
+      });
+
+      return persisted;
+    }
+  });
+
+  return updatedRecipient;
+};

packages/lib/server-only/site-settings/get-site-settings.ts

@@ -0,0 +1,9 @@
+import { prisma } from '@documenso/prisma';
+
+import { ZSiteSettingsSchema } from './schema';
+
+export const getSiteSettings = async () => {
+  const settings = await prisma.siteSettings.findMany();
+
+  return ZSiteSettingsSchema.parse(settings);
+};

packages/lib/server-only/site-settings/schema.ts

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+import { ZSiteSettingsBannerSchema } from './schemas/banner';
+
+// TODO: Use `z.union([...])` once we have more than one setting
+export const ZSiteSettingSchema = ZSiteSettingsBannerSchema;
+
+export type TSiteSettingSchema = z.infer<typeof ZSiteSettingSchema>;
+
+export const ZSiteSettingsSchema = z.array(ZSiteSettingSchema);
+
+export type TSiteSettingsSchema = z.infer<typeof ZSiteSettingsSchema>;

packages/lib/server-only/site-settings/schemas/_base.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+
+export const ZSiteSettingsBaseSchema = z.object({
+  id: z.string().min(1),
+  enabled: z.boolean(),
+  data: z.never(),
+});
+
+export type TSiteSettingsBaseSchema = z.infer<typeof ZSiteSettingsBaseSchema>;

packages/lib/server-only/site-settings/schemas/banner.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod';
+
+import { ZSiteSettingsBaseSchema } from './_base';
+
+export const SITE_SETTINGS_BANNER_ID = 'site.banner';
+
+export const ZSiteSettingsBannerSchema = ZSiteSettingsBaseSchema.extend({
+  id: z.literal(SITE_SETTINGS_BANNER_ID),
+  data: z
+    .object({
+      content: z.string(),
+      bgColor: z.string(),
+      textColor: z.string(),
+    })
+    .optional()
+    .default({
+      content: '',
+      bgColor: '#000000',
+      textColor: '#FFFFFF',
+    }),
+});
+
+export type TSiteSettingsBannerSchema = z.infer<typeof ZSiteSettingsBannerSchema>;

packages/lib/server-only/site-settings/upsert-site-setting.ts

@@ -0,0 +1,33 @@
+import { prisma } from '@documenso/prisma';
+
+import type { TSiteSettingSchema } from './schema';
+
+export type UpsertSiteSettingOptions = TSiteSettingSchema & {
+  userId: number;
+};
+
+export const upsertSiteSetting = async ({
+  id,
+  enabled,
+  data,
+  userId,
+}: UpsertSiteSettingOptions) => {
+  return await prisma.siteSettings.upsert({
+    where: {
+      id,
+    },
+    create: {
+      id,
+      enabled,
+      data,
+      lastModifiedByUserId: userId,
+      lastModifiedAt: new Date(),
+    },
+    update: {
+      enabled,
+      data,
+      lastModifiedByUserId: userId,
+      lastModifiedAt: new Date(),
+    },
+  });
+};

packages/lib/server-only/template/create-document-from-template.ts

@@ -1,32 +1,42 @@
 import { nanoid } from '@documenso/lib/universal/id';
 import { prisma } from '@documenso/prisma';
-import type { TCreateDocumentFromTemplateMutationSchema } from '@documenso/trpc/server/template-router/schema';
+import type { RecipientRole } from '@documenso/prisma/client';
 
-export type CreateDocumentFromTemplateOptions = TCreateDocumentFromTemplateMutationSchema & {
+export type CreateDocumentFromTemplateOptions = {
+  templateId: number;
   userId: number;
+  teamId?: number;
+  recipients?: {
+    name?: string;
+    email: string;
+    role?: RecipientRole;
+  }[];
 };
 
 export const createDocumentFromTemplate = async ({
   templateId,
   userId,
+  teamId,
+  recipients,
 }: CreateDocumentFromTemplateOptions) => {
   const template = await prisma.template.findUnique({
     where: {
       id: templateId,
-      OR: [
-        {
-          userId,
-        },
-        {
-          team: {
-            members: {
-              some: {
-                userId,
+      ...(teamId
+        ? {
+            team: {
+              id: teamId,
+              members: {
+                some: {
+                  userId,
+                },
               },
             },
-          },
-        },
-      ],
+          }
+        : {
+            userId,
+            teamId: null,
+          }),
     },
     include: {
       Recipient: true,
@@ -57,13 +67,18 @@ export const createDocumentFromTemplate = async ({
         create: template.Recipient.map((recipient) => ({
           email: recipient.email,
           name: recipient.name,
+          role: recipient.role,
           token: nanoid(),
         })),
       },
     },
 
     include: {
-      Recipient: true,
+      Recipient: {
+        orderBy: {
+          id: 'asc',
+        },
+      },
     },
   });
 
@@ -88,5 +103,34 @@ export const createDocumentFromTemplate = async ({
     }),
   });
 
+  if (recipients && recipients.length > 0) {
+    document.Recipient = await Promise.all(
+      recipients.map(async (recipient, index) => {
+        const existingRecipient = document.Recipient.at(index);
+
+        return await prisma.recipient.upsert({
+          where: {
+            documentId_email: {
+              documentId: document.id,
+              email: existingRecipient?.email ?? recipient.email,
+            },
+          },
+          update: {
+            name: recipient.name,
+            email: recipient.email,
+            role: recipient.role,
+          },
+          create: {
+            documentId: document.id,
+            email: recipient.email,
+            name: recipient.name,
+            role: recipient.role,
+            token: nanoid(),
+          },
+        });
+      }),
+    );
+  }
+
   return document;
 };

packages/lib/server-only/template/find-templates.ts

@@ -38,6 +38,7 @@ export const findTemplates = async ({
       include: {
         templateDocumentData: true,
         Field: true,
+        Recipient: true,
       },
       skip: Math.max(page - 1, 0) * perPage,
       orderBy: {

packages/lib/server-only/user/delete-user.ts

@@ -1,4 +1,7 @@
 import { prisma } from '@documenso/prisma';
+import { DocumentStatus } from '@documenso/prisma/client';
+
+import { deletedAccountServiceAccount } from './service-accounts/deleted-account';
 
 export type DeleteUserOptions = {
   email: string;
@@ -17,6 +20,22 @@ export const deleteUser = async ({ email }: DeleteUserOptions) => {
     throw new Error(`User with email ${email} not found`);
   }
 
+  const serviceAccount = await deletedAccountServiceAccount();
+
+  // TODO: Send out cancellations for all pending docs
+  await prisma.document.updateMany({
+    where: {
+      userId: user.id,
+      status: {
+        in: [DocumentStatus.PENDING, DocumentStatus.COMPLETED],
+      },
+    },
+    data: {
+      userId: serviceAccount.id,
+      deletedAt: new Date(),
+    },
+  });
+
   return await prisma.user.delete({
     where: {
       id: user.id,

packages/lib/server-only/user/service-accounts/deleted-account.ts

@@ -0,0 +1,17 @@
+import { prisma } from '@documenso/prisma';
+
+export const deletedAccountServiceAccount = async () => {
+  const serviceAccount = await prisma.user.findFirst({
+    where: {
+      email: 'deleted-account@documenso.com',
+    },
+  });
+
+  if (!serviceAccount) {
+    throw new Error(
+      'Deleted account service account not found, have you ran the appropriate migrations?',
+    );
+  }
+
+  return serviceAccount;
+};

packages/prisma/migrations/20231123132053_public_api_api_token/migration.sql

@@ -0,0 +1,21 @@
+-- CreateEnum
+CREATE TYPE "ApiTokenAlgorithm" AS ENUM ('SHA512');
+
+-- CreateTable
+CREATE TABLE "ApiToken" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "algorithm" "ApiTokenAlgorithm" NOT NULL DEFAULT 'SHA512',
+    "expires" TIMESTAMP(3) NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "userId" INTEGER NOT NULL,
+
+    CONSTRAINT "ApiToken_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ApiToken_token_key" ON "ApiToken"("token");
+
+-- AddForeignKey
+ALTER TABLE "ApiToken" ADD CONSTRAINT "ApiToken_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

packages/prisma/migrations/20231220124343_add_cascade_delete_user_apitoken/migration.sql

@@ -0,0 +1,5 @@
+-- DropForeignKey
+ALTER TABLE "ApiToken" DROP CONSTRAINT "ApiToken_userId_fkey";
+
+-- AddForeignKey
+ALTER TABLE "ApiToken" ADD CONSTRAINT "ApiToken_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/migrations/20240205120648_create_delete_account/migration.sql

@@ -0,0 +1,30 @@
+-- Create deleted@documenso.com
+DO $$
+BEGIN  
+  IF NOT EXISTS (SELECT 1 FROM "public"."User" WHERE "email" = 'deleted-account@documenso.com') THEN  
+    INSERT INTO
+      "public"."User" (
+        "email",
+        "emailVerified",
+        "password",
+        "createdAt",
+        "updatedAt",
+        "lastSignedIn",
+        "roles",
+        "identityProvider",
+        "twoFactorEnabled"
+      )
+    VALUES
+      (
+        'deleted-account@documenso.com',
+        NOW(),
+        NULL,
+        NOW(),
+        NOW(),
+        NOW(),
+        ARRAY['USER'::TEXT]::"public"."Role" [],
+        CAST('GOOGLE'::TEXT AS "public"."IdentityProvider"),
+        FALSE
+      );
+  END IF;  
+END $$

packages/prisma/migrations/20240208135802_make_expiry_date_optional_api_tokens/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "ApiToken" ALTER COLUMN "expires" DROP NOT NULL;