extend webhook triggers

Extracts the API implementation to a package so we can
potentially reuse it across different applications in the
event that we move off using a Next.js API route.

Additionally tidies up the tokens page and form to be more simplified.

apps/web/package.json

@@ -14,6 +14,7 @@
     "copy:pdfjs": "node ../../scripts/copy-pdfjs.cjs"
   },
   "dependencies": {
+    "@documenso/api": "*",
     "@documenso/assets": "*",
     "@documenso/ee": "*",
     "@documenso/lib": "*",

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)/settings/webhooks/[id]/page.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { ZEditWebhookMutationSchema } from '@documenso/trpc/server/webhook-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+import { MultiSelectCombobox } from '~/components/(dashboard)/settings/webhooks/multiselect-combobox';
+
+const ZEditWebhookFormSchema = ZEditWebhookMutationSchema.omit({ id: true });
+
+type TEditWebhookFormSchema = z.infer<typeof ZEditWebhookFormSchema>;
+
+export type WebhookPageOptions = {
+  params: {
+    id: number;
+  };
+};
+
+export default function WebhookPage({ params }: WebhookPageOptions) {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const { data: webhook, isLoading } = trpc.webhook.getWebhookById.useQuery(
+    {
+      id: Number(params.id),
+    },
+    { enabled: !!params.id },
+  );
+
+  const { mutateAsync: updateWebhook } = trpc.webhook.editWebhook.useMutation();
+
+  const form = useForm<TEditWebhookFormSchema>({
+    resolver: zodResolver(ZEditWebhookFormSchema),
+    values: {
+      webhookUrl: webhook?.webhookUrl ?? '',
+      eventTriggers: webhook?.eventTriggers ?? [],
+      secret: webhook?.secret ?? '',
+      enabled: webhook?.enabled ?? true,
+    },
+  });
+
+  const onSubmit = async (data: TEditWebhookFormSchema) => {
+    try {
+      await updateWebhook({
+        id: Number(params.id),
+        ...data,
+      });
+
+      toast({
+        title: 'Webhook updated',
+        description: 'The webhook has been updated successfully.',
+        duration: 5000,
+      });
+
+      router.refresh();
+    } catch (err) {
+      toast({
+        title: 'Failed to update webhook',
+        description: 'We encountered an error while updating the webhook. Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div>
+      <SettingsHeader
+        title="Edit webhook"
+        subtitle="On this page, you can edit the webhook and its settings."
+      />
+      {isLoading && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-white/50">
+          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        </div>
+      )}
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <fieldset className="flex h-full flex-col gap-y-6" disabled={form.formState.isSubmitting}>
+            <FormField
+              control={form.control}
+              name="webhookUrl"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel htmlFor="webhookUrl">Webhook URL</FormLabel>
+                  <Input {...field} id="webhookUrl" type="text" />
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="eventTriggers"
+              render={({ field: { onChange, value } }) => (
+                <FormItem className="flex flex-col">
+                  <FormLabel required>Event triggers</FormLabel>
+                  <FormControl>
+                    <MultiSelectCombobox
+                      listValues={value}
+                      onChange={(values: string[]) => {
+                        onChange(values);
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="secret"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Secret</FormLabel>
+                  <FormControl>
+                    <PasswordInput className="bg-background" {...field} value={field.value ?? ''} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="enabled"
+              render={({ field }) => (
+                <FormItem className="flex items-center gap-x-2">
+                  <FormLabel className="mt-2">Active</FormLabel>
+                  <FormControl>
+                    <Switch
+                      className="bg-background"
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div className="mt-4">
+              <Button type="submit" loading={form.formState.isSubmitting}>
+                Update webhook
+              </Button>
+            </div>
+          </fieldset>
+        </form>
+      </Form>
+    </div>
+  );
+}

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

@@ -0,0 +1,82 @@
+'use client';
+
+import Link from 'next/link';
+
+import { Zap } from 'lucide-react';
+import { ToggleLeft, ToggleRight } from 'lucide-react';
+import { Loader } from 'lucide-react';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+import { CreateWebhookDialog } from '~/components/(dashboard)/settings/webhooks/create-webhook-dialog';
+import { DeleteWebhookDialog } from '~/components/(dashboard)/settings/webhooks/delete-webhook-dialog';
+
+export default function WebhookPage() {
+  const { data: webhooks, isLoading } = trpc.webhook.getWebhooks.useQuery();
+
+  return (
+    <div>
+      <SettingsHeader
+        title="Webhooks"
+        subtitle="On this page, you can create new Webhooks and manage the existing ones."
+      >
+        <CreateWebhookDialog />
+      </SettingsHeader>
+
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
+          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        </div>
+      )}
+
+      {webhooks && webhooks.length === 0 && (
+        // TODO: Perhaps add some illustrations here to make the page more engaging
+        <div className="mb-4">
+          <p className="text-muted-foreground mt-2 text-sm italic">
+            You have no webhooks yet. Your webhooks will be shown here once you create them.
+          </p>
+        </div>
+      )}
+
+      {webhooks && webhooks.length > 0 && (
+        <div className="mt-4 flex max-w-xl flex-col gap-y-4">
+          {webhooks?.map((webhook) => (
+            <div key={webhook.id} className="border-border rounded-lg border p-4">
+              <div className="flex items-center justify-between gap-x-4">
+                <div>
+                  <h4 className="text-lg font-semibold">Webhook URL</h4>
+                  <p className="text-muted-foreground">{webhook.webhookUrl}</p>
+                  <h4 className="mt-4 text-lg font-semibold">Event triggers</h4>
+                  {webhook.eventTriggers.map((trigger, index) => (
+                    <span key={index} className="text-muted-foreground flex flex-row items-center">
+                      <Zap className="mr-1 h-4 w-4" /> {trigger}
+                    </span>
+                  ))}
+                  {webhook.enabled ? (
+                    <h4 className="mt-4 flex items-center gap-2 text-lg">
+                      Active <ToggleRight className="h-6 w-6 fill-green-200 stroke-green-400" />
+                    </h4>
+                  ) : (
+                    <h4 className="mt-4 flex items-center gap-2 text-lg">
+                      Inactive <ToggleLeft className="h-6 w-6 fill-slate-200 stroke-slate-400" />
+                    </h4>
+                  )}
+                </div>
+              </div>
+              <div className="mt-6 flex flex-col-reverse space-y-2 space-y-reverse sm:mt-0 sm:flex-row sm:justify-end sm:space-x-2 sm:space-y-0">
+                <Button asChild variant="outline">
+                  <Link href={`/settings/webhooks/${webhook.id}`}>Edit</Link>
+                </Button>
+                <DeleteWebhookDialog webhook={webhook}>
+                  <Button variant="destructive">Delete</Button>
+                </DeleteWebhookDialog>
+              </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/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, Webhook } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -51,6 +51,19 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Link>
       )}
 
+      <Link href="/settings/webhooks">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/webhooks') && 'bg-secondary',
+          )}
+        >
+          <Webhook className="mr-2 h-5 w-5" />
+          Webhooks
+        </Button>
+      </Link>
+
       <Link href="/settings/security">
         <Button
           variant="ghost"
@@ -64,6 +77,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, Webhook } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -54,6 +54,19 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Link>
       )}
 
+      <Link href="/settings/webhooks">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/webhooks') && 'bg-secondary',
+          )}
+        >
+          <Webhook className="mr-2 h-5 w-5" />
+          Webhooks
+        </Button>
+      </Link>
+
       <Link href="/settings/security">
         <Button
           variant="ghost"
@@ -67,6 +80,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,178 @@
+'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 = {
+  token: Pick<ApiToken, 'id' | 'name'>;
+  onDelete?: () => void;
+  children?: React.ReactNode;
+};
+
+export default function DeleteTokenDialog({ 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,
+      });
+
+      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/(dashboard)/settings/webhooks/create-webhook-dialog.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateWebhookFormSchema } from '@documenso/trpc/server/webhook-router/schema';
+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 { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { MultiSelectCombobox } from './multiselect-combobox';
+
+type TCreateWebhookFormSchema = z.infer<typeof ZCreateWebhookFormSchema>;
+
+export type CreateWebhookDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const CreateWebhookDialog = ({ trigger, ...props }: CreateWebhookDialogProps) => {
+  const router = useRouter();
+  const { toast } = useToast();
+  const [open, setOpen] = useState(false);
+
+  const form = useForm<TCreateWebhookFormSchema>({
+    resolver: zodResolver(ZCreateWebhookFormSchema),
+    values: {
+      webhookUrl: '',
+      eventTriggers: [],
+      secret: '',
+      enabled: true,
+    },
+  });
+
+  const { mutateAsync: createWebhook } = trpc.webhook.createWebhook.useMutation();
+
+  const onSubmit = async (values: TCreateWebhookFormSchema) => {
+    try {
+      await createWebhook(values);
+
+      setOpen(false);
+
+      toast({
+        title: 'Webhook created',
+        description: 'The webhook was successfully created.',
+      });
+
+      form.reset();
+
+      router.refresh();
+    } catch (err) {
+      toast({
+        title: 'Error',
+        description: 'An error occurred while creating the webhook. Please try again.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+      {...props}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? <Button className="flex-shrink-0">Create Webhook</Button>}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>Create webhook</DialogTitle>
+          <DialogDescription>On this page, you can create a new webhook.</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="webhookUrl"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>Webhook URL</FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="eventTriggers"
+                render={({ field: { onChange, value } }) => (
+                  <FormItem className="flex flex-col gap-2">
+                    <FormLabel required>Event triggers</FormLabel>
+                    <FormControl>
+                      <MultiSelectCombobox
+                        listValues={value}
+                        onChange={(values: string[]) => {
+                          onChange(values);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="secret"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Secret</FormLabel>
+                    <FormControl>
+                      <PasswordInput
+                        className="bg-background"
+                        {...field}
+                        value={field.value ?? ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="enabled"
+                render={({ field }) => (
+                  <FormItem className="flex items-center gap-2">
+                    <FormLabel className="mt-2">Active</FormLabel>
+                    <FormControl>
+                      <Switch
+                        className="bg-background"
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <div className="flex w-full flex-nowrap gap-4">
+                  <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                    Cancel
+                  </Button>
+                  <Button type="submit" loading={form.formState.isSubmitting}>
+                    Create
+                  </Button>
+                </div>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,167 @@
+'use effect';
+
+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 { Webhook } 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 DeleteWebhookDialogProps = {
+  webhook: Pick<Webhook, 'id' | 'webhookUrl'>;
+  onDelete?: () => void;
+  children: React.ReactNode;
+};
+
+export const DeleteWebhookDialog = ({ webhook, children }: DeleteWebhookDialogProps) => {
+  const router = useRouter();
+  const { toast } = useToast();
+  const [open, setOpen] = useState(false);
+
+  const deleteMessage = `delete ${webhook.webhookUrl}`;
+
+  const ZDeleteWebhookFormSchema = z.object({
+    webhookUrl: z.literal(deleteMessage, {
+      errorMap: () => ({ message: `You must enter '${deleteMessage}' to proceed` }),
+    }),
+  });
+
+  type TDeleteWebhookFormSchema = z.infer<typeof ZDeleteWebhookFormSchema>;
+
+  const { mutateAsync: deleteWebhook } = trpc.webhook.deleteWebhook.useMutation();
+
+  const form = useForm<TDeleteWebhookFormSchema>({
+    resolver: zodResolver(ZDeleteWebhookFormSchema),
+    values: {
+      webhookUrl: '',
+    },
+  });
+
+  const onSubmit = async () => {
+    try {
+      await deleteWebhook({ id: webhook.id });
+
+      toast({
+        title: 'Webhook deleted',
+        duration: 5000,
+        description: 'The webhook has been successfully deleted.',
+      });
+
+      setOpen(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 it. Please try again later.',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {children ?? (
+          <Button className="mr-4" variant="destructive">
+            Delete
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete Webhook</DialogTitle>
+
+          <DialogDescription>
+            Please note that this action is irreversible. Once confirmed, your webhook 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="webhookUrl"
+                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={() => setOpen(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/(dashboard)/settings/webhooks/multiselect-combobox.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+
+import { WebhookTriggerEvents } from '@prisma/client/';
+import { Check, ChevronsUpDown } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from '@documenso/ui/primitives/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+
+import { truncateTitle } from '~/helpers/truncate-title';
+
+type ComboboxProps = {
+  listValues: string[];
+  onChange: (_values: string[]) => void;
+};
+
+const MultiSelectCombobox = ({ listValues, onChange }: ComboboxProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
+
+  const triggerEvents = Object.values(WebhookTriggerEvents);
+
+  React.useEffect(() => {
+    setSelectedValues(listValues);
+  }, [listValues]);
+
+  const allEvents = [...new Set([...triggerEvents, ...selectedValues])];
+
+  const handleSelect = (currentValue: string) => {
+    let newSelectedValues;
+    if (selectedValues.includes(currentValue)) {
+      newSelectedValues = selectedValues.filter((value) => value !== currentValue);
+    } else {
+      newSelectedValues = [...selectedValues, currentValue];
+    }
+
+    setSelectedValues(newSelectedValues);
+    onChange(newSelectedValues);
+    setIsOpen(false);
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={isOpen}
+          className="w-[200px] justify-between"
+        >
+          {selectedValues.length > 0 ? selectedValues.length + ' selected...' : 'Select values...'}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="z-9999 w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder={truncateTitle(selectedValues.join(', '), 15)} />
+          <CommandEmpty>No value found.</CommandEmpty>
+          <CommandGroup>
+            {allEvents.map((value: string, i: number) => (
+              <CommandItem key={i} onSelect={() => handleSelect(value)}>
+                <Check
+                  className={cn(
+                    'mr-2 h-4 w-4',
+                    selectedValues.includes(value) ? 'opacity-100' : 'opacity-0',
+                  )}
+                />
+                {value}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export { MultiSelectCombobox };

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

@@ -0,0 +1,255 @@
+'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;
+};
+
+export const ApiTokenForm = ({ className }: 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({
+        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/me/index.ts

@@ -0,0 +1,3 @@
+import { testCredentialsHandler } from '@documenso/lib/server-only/public-api/test-credentials';
+
+export default testCredentialsHandler;

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/pages/api/v1/zapier/list-documents/index.ts

@@ -0,0 +1,3 @@
+import { listDocumentsHandler } from '@documenso/lib/server-only/webhooks/zapier/list-documents';
+
+export default listDocumentsHandler;

apps/web/src/pages/api/v1/zapier/signed-document/index.ts

@@ -0,0 +1,3 @@
+import { signedDocumentHandler } from '@documenso/lib/server-only/webhooks/zapier/signed-document';
+
+export default signedDocumentHandler;

apps/web/src/pages/api/v1/zapier/subscribe/index.ts

@@ -0,0 +1,3 @@
+import { subscribeHandler } from '@documenso/lib/server-only/webhooks/zapier/subscribe';
+
+export default subscribeHandler;

apps/web/src/pages/api/v1/zapier/unsubscribe/index.ts

@@ -0,0 +1,3 @@
+import { unsubscribeHandler } from '@documenso/lib/server-only/webhooks/zapier/unsubscribe';
+
+export default unsubscribeHandler;

package.json

@@ -47,9 +47,6 @@
     "apps/*",
     "packages/*"
   ],
-  "dependencies": {
-    "next-runtime-env": "^3.2.0"
-  },
   "overrides": {
     "next-auth": {
       "next": "14.0.3"
@@ -57,5 +54,8 @@
     "next-contentlayer": {
       "next": "14.0.3"
     }
+  },
+  "dependencies": {
+    "next-runtime-env": "^3.2.0"
   }
 }

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 {
+  ZSendDocumentForSigningMutationSchema as SendDocumentMutationSchema,
+  ZAuthorizationHeadersSchema,
+  ZCreateDocumentFromTemplateMutationResponseSchema,
+  ZCreateDocumentFromTemplateMutationSchema,
+  ZCreateDocumentMutationResponseSchema,
+  ZCreateDocumentMutationSchema,
+  ZCreateFieldMutationSchema,
+  ZCreateRecipientMutationSchema,
+  ZDeleteDocumentMutationSchema,
+  ZDeleteFieldMutationSchema,
+  ZDeleteRecipientMutationSchema,
+  ZGetDocumentsQuerySchema,
+  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: 'Upload a new document and get a presigned URL',
+    },
+
+    sendDocument: {
+      method: 'POST',
+      path: '/api/v1/documents/:id/send',
+      body: SendDocumentMutationSchema,
+      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,720 @@
+import { createNextRoute } from '@ts-rest/next';
+
+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 { 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) => {
+    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 });
+
+    return {
+      status: 200,
+      body: {
+        documents,
+        totalPages,
+      },
+    };
+  }),
+
+  getDocument: authenticatedMiddleware(async (args, user) => {
+    const { id: documentId } = args.params;
+
+    try {
+      const document = await getDocumentById({ id: Number(documentId), userId: user.id });
+      const recipients = await getRecipientsForDocument({
+        documentId: Number(documentId),
+        userId: user.id,
+      });
+
+      return {
+        status: 200,
+        body: {
+          ...document,
+          recipients,
+        },
+      };
+    } catch (err) {
+      return {
+        status: 404,
+        body: {
+          message: 'Document not found',
+        },
+      };
+    }
+  }),
+
+  deleteDocument: authenticatedMiddleware(async (args, user) => {
+    const { id: documentId } = args.params;
+
+    try {
+      const document = await getDocumentById({ id: Number(documentId), userId: user.id });
+
+      const deletedDocument = await deleteDocument({
+        id: Number(documentId),
+        userId: user.id,
+        status: document.status,
+      });
+
+      return {
+        status: 200,
+        body: deletedDocument,
+      };
+    } catch (err) {
+      return {
+        status: 404,
+        body: {
+          message: 'Document not found',
+        },
+      };
+    }
+  }),
+
+  createDocument: authenticatedMiddleware(async (args, user) => {
+    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 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,
+        documentDataId: documentData.id,
+      });
+
+      const recipients = await setRecipientsForDocument({
+        userId: user.id,
+        documentId: document.id,
+        recipients: body.recipients,
+      });
+
+      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) => {
+    const { body, params } = args;
+
+    const templateId = Number(params.templateId);
+
+    const fileName = body.title.endsWith('.pdf') ? body.title : `${body.title}.pdf`;
+
+    const document = await createDocumentFromTemplate({
+      templateId,
+      userId: user.id,
+      recipients: body.recipients,
+    });
+
+    await updateDocument({
+      documentId: document.id,
+      userId: user.id,
+      data: {
+        title: body.title,
+      },
+    });
+
+    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,
+      });
+    }
+
+    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) => {
+    const { id } = args.params;
+
+    const document = await getDocumentById({ id: Number(id), userId: user.id });
+
+    if (!document) {
+      return {
+        status: 404,
+        body: {
+          message: 'Document not found',
+        },
+      };
+    }
+
+    if (document.status === 'PENDING') {
+      return {
+        status: 400,
+        body: {
+          message: 'Document is already waiting for signing',
+        },
+      };
+    }
+
+    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,
+      });
+
+      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) => {
+    const { id: documentId } = args.params;
+    const { name, email, role } = args.body;
+
+    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 recipients = await getRecipientsForDocument({
+      documentId: Number(documentId),
+      userId: user.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,
+        recipients: [
+          ...recipients,
+          {
+            email,
+            name,
+            role,
+          },
+        ],
+      });
+
+      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) => {
+    const { id: documentId, recipientId } = args.params;
+    const { name, email, role } = args.body;
+
+    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 updatedRecipient = await updateRecipient({
+      documentId: Number(documentId),
+      recipientId: Number(recipientId),
+      email,
+      name,
+      role,
+    }).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) => {
+    const { id: documentId, recipientId } = 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 deletedRecipient = await deleteRecipient({
+      documentId: Number(documentId),
+      recipientId: Number(recipientId),
+    }).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) => {
+    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,
+    });
+
+    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),
+      type,
+      pageNumber,
+      pageX,
+      pageY,
+      pageWidth,
+      pageHeight,
+    });
+
+    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) => {
+    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,
+    });
+
+    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),
+      documentId: Number(documentId),
+      recipientId: recipientId ? Number(recipientId) : undefined,
+      type,
+      pageNumber,
+      pageX,
+      pageY,
+      pageWidth,
+      pageHeight,
+    });
+
+    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) => {
+    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),
+    }).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 { getUserByApiToken } from '@documenso/lib/server-only/public-api/get-user-by-token';
+import type { User } from '@documenso/prisma/client';
+
+export const authenticatedMiddleware = <
+  T extends {
+    req: NextApiRequest;
+  },
+  R extends {
+    status: number;
+    body: unknown;
+  },
+>(
+  handler: (args: T, user: User) => 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 user = await getUserByApiToken({ token });
+
+      return await handler(args, user);
+    } 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,240 @@
+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(),
+  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/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/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/complete-document-with-token.ts

@@ -5,7 +5,9 @@ import type { RequestMetadata } from '@documenso/lib/universal/extract-request-m
 import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
+import { WebhookTriggerEvents } from '@documenso/prisma/client';
 
+import { triggerWebhook } from '../../universal/trigger-webhook';
 import { sealDocument } from './seal-document';
 import { sendPendingEmail } from './send-pending-email';
 
@@ -15,14 +17,8 @@ export type CompleteDocumentWithTokenOptions = {
   requestMetadata?: RequestMetadata;
 };
 
-export const completeDocumentWithToken = async ({
-  token,
-  documentId,
-  requestMetadata,
-}: CompleteDocumentWithTokenOptions) => {
-  'use server';
-
-  const document = await prisma.document.findFirstOrThrow({
+const getDocument = async ({ token, documentId }: CompleteDocumentWithTokenOptions) => {
+  return await prisma.document.findFirstOrThrow({
     where: {
       id: documentId,
       Recipient: {
@@ -39,6 +35,16 @@ export const completeDocumentWithToken = async ({
       },
     },
   });
+};
+
+export const completeDocumentWithToken = async ({
+  token,
+  documentId,
+  requestMetadata,
+}: CompleteDocumentWithTokenOptions) => {
+  'use server';
+
+  const document = await getDocument({ token, documentId });
 
   if (document.status === DocumentStatus.COMPLETED) {
     throw new Error(`Document ${document.id} has already been completed`);
@@ -124,4 +130,11 @@ export const completeDocumentWithToken = async ({
   if (documents.count > 0) {
     await sealDocument({ documentId: document.id, requestMetadata });
   }
+
+  const updatedDocument = await getDocument({ token, documentId });
+
+  await triggerWebhook({
+    eventTrigger: WebhookTriggerEvents.DOCUMENT_SIGNED,
+    documentData: updatedDocument,
+  });
 };

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

@@ -5,6 +5,9 @@ import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-log
 import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
+import { WebhookTriggerEvents } from '@documenso/prisma/client';
+
+import { triggerWebhook } from '../../universal/trigger-webhook';
 
 export type CreateDocumentOptions = {
   title: string;
@@ -63,6 +66,11 @@ export const createDocument = async ({
       }),
     });
 
+    await triggerWebhook({
+      eventTrigger: WebhookTriggerEvents.DOCUMENT_CREATED,
+      documentData: document,
+    });
+
     return document;
   });
 };

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

@@ -16,9 +16,8 @@ import { prisma } from '@documenso/prisma';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
 import type { Prisma } from '@documenso/prisma/client';
 
-import { getDocumentWhereInput } from './get-document-by-id';
-
 import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
+import { getDocumentWhereInput } from './get-document-by-id';
 
 export type ResendDocumentOptions = {
   documentId: number;

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

@@ -9,9 +9,11 @@ import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-log
 import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
+import { WebhookTriggerEvents } from '@documenso/prisma/client';
 import { signPdf } from '@documenso/signing';
 
 import type { RequestMetadata } from '../../universal/extract-request-metadata';
+import { triggerWebhook } from '../../universal/trigger-webhook';
 import { getFile } from '../../universal/upload/get-file';
 import { putFile } from '../../universal/upload/put-file';
 import { insertFieldInPDF } from '../pdf/insert-field-in-pdf';
@@ -134,4 +136,9 @@ export const sealDocument = async ({
   if (sendEmail) {
     await sendCompletedEmail({ documentId, requestMetadata });
   }
+
+  await triggerWebhook({
+    eventTrigger: WebhookTriggerEvents.DOCUMENT_COMPLETED,
+    documentData: document,
+  });
 };

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

@@ -10,12 +10,14 @@ import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-
 import { renderCustomEmailTemplate } from '@documenso/lib/utils/render-custom-email-template';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, RecipientRole, SendStatus } from '@documenso/prisma/client';
+import { WebhookTriggerEvents } from '@documenso/prisma/client';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
 import {
   RECIPIENT_ROLES_DESCRIPTION,
   RECIPIENT_ROLE_TO_EMAIL_TYPE,
 } from '../../constants/recipient-roles';
+import { triggerWebhook } from '../../universal/trigger-webhook';
 
 export type SendDocumentOptions = {
   documentId: number;
@@ -163,5 +165,10 @@ export const sendDocument = async ({
     },
   });
 
+  await triggerWebhook({
+    eventTrigger: WebhookTriggerEvents.DOCUMENT_SENT,
+    documentData: updatedDocument,
+  });
+
   return updatedDocument;
 };

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

@@ -3,6 +3,10 @@ import type { RequestMetadata } from '@documenso/lib/universal/extract-request-m
 import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 import { ReadStatus } from '@documenso/prisma/client';
+import { WebhookTriggerEvents } from '@documenso/prisma/client';
+
+import { triggerWebhook } from '../../universal/trigger-webhook';
+import { getDocumentAndSenderByToken } from './get-document-by-token';
 
 export type ViewedDocumentOptions = {
   token: string;
@@ -23,8 +27,8 @@ export const viewedDocument = async ({ token, requestMetadata }: ViewedDocumentO
 
   const { documentId } = recipient;
 
-  await prisma.$transaction(async (tx) => {
-    await tx.recipient.update({
+  const { updatedRecipient } = await prisma.$transaction(async (tx) => {
+    const updatedRecipient = await tx.recipient.update({
       where: {
         id: recipient.id,
       },
@@ -50,5 +54,25 @@ export const viewedDocument = async ({ token, requestMetadata }: ViewedDocumentO
         },
       }),
     });
+
+    return { updatedRecipient };
+  });
+
+  const document = await getDocumentAndSenderByToken({ token });
+
+  await triggerWebhook({
+    eventTrigger: WebhookTriggerEvents.DOCUMENT_OPENED,
+    documentData: {
+      id: document.id,
+      userId: document.userId,
+      title: document.title,
+      status: document.status,
+      documentDataId: document.documentDataId,
+      createdAt: document.createdAt,
+      updatedAt: document.updatedAt,
+      completedAt: document.completedAt,
+      deletedAt: document.deletedAt,
+      teamId: document.teamId,
+    },
   });
 };

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

@@ -0,0 +1,41 @@
+import { prisma } from '@documenso/prisma';
+import type { FieldType } from '@documenso/prisma/client';
+
+export type CreateFieldOptions = {
+  documentId: number;
+  recipientId: number;
+  type: FieldType;
+  pageNumber: number;
+  pageX: number;
+  pageY: number;
+  pageWidth: number;
+  pageHeight: number;
+};
+
+export const createField = async ({
+  documentId,
+  recipientId,
+  type,
+  pageNumber,
+  pageX,
+  pageY,
+  pageWidth,
+  pageHeight,
+}: CreateFieldOptions) => {
+  const field = await prisma.field.create({
+    data: {
+      documentId,
+      recipientId,
+      type,
+      page: pageNumber,
+      positionX: pageX,
+      positionY: pageY,
+      width: pageWidth,
+      height: pageHeight,
+      customText: '',
+      inserted: false,
+    },
+  });
+
+  return field;
+};

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

@@ -0,0 +1,17 @@
+import { prisma } from '@documenso/prisma';
+
+export type DeleteFieldOptions = {
+  fieldId: number;
+  documentId: number;
+};
+
+export const deleteField = async ({ fieldId, documentId }: DeleteFieldOptions) => {
+  const field = await prisma.field.delete({
+    where: {
+      id: fieldId,
+      documentId,
+    },
+  });
+
+  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,44 @@
+import { prisma } from '@documenso/prisma';
+import type { FieldType } from '@documenso/prisma/client';
+
+export type UpdateFieldOptions = {
+  fieldId: number;
+  documentId: number;
+  recipientId?: number;
+  type?: FieldType;
+  pageNumber?: number;
+  pageX?: number;
+  pageY?: number;
+  pageWidth?: number;
+  pageHeight?: number;
+};
+
+export const updateField = async ({
+  fieldId,
+  documentId,
+  recipientId,
+  type,
+  pageNumber,
+  pageX,
+  pageY,
+  pageWidth,
+  pageHeight,
+}: UpdateFieldOptions) => {
+  const field = await prisma.field.update({
+    where: {
+      id: fieldId,
+      documentId,
+    },
+    data: {
+      recipientId,
+      type,
+      page: pageNumber,
+      positionX: pageX,
+      positionY: pageY,
+      width: pageWidth,
+      height: pageHeight,
+    },
+  });
+
+  return field;
+};

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

@@ -0,0 +1,51 @@
+import type { Duration } from 'luxon';
+import { DateTime } from 'luxon';
+
+import { prisma } from '@documenso/prisma';
+
+// 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;
+  tokenName: string;
+  expirationDate: string | null;
+};
+
+export const createApiToken = async ({
+  userId,
+  tokenName,
+  expirationDate,
+}: CreateApiTokenInput) => {
+  const apiToken = `api_${alphaid(16)}`;
+
+  const hashedToken = hashString(apiToken);
+
+  const timeConstantsRecords: TimeConstants = timeConstants;
+
+  const dbToken = await prisma.apiToken.create({
+    data: {
+      token: hashedToken,
+      name: tokenName,
+      userId,
+      expires: expirationDate
+        ? DateTime.now().plus(timeConstantsRecords[expirationDate]).toJSDate()
+        : null,
+    },
+  });
+
+  if (!dbToken) {
+    throw new Error('Failed to create the API token');
+  }
+
+  return {
+    id: dbToken.id,
+    token: apiToken,
+  };
+};

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

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

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-user-by-token.ts

@@ -0,0 +1,37 @@
+import { prisma } from '@documenso/prisma';
+
+import { hashString } from '../auth/hash';
+
+export const getUserByApiToken = async ({ token }: { token: string }) => {
+  const hashedToken = hashString(token);
+
+  const user = await prisma.user.findFirst({
+    where: {
+      ApiToken: {
+        some: {
+          token: hashedToken,
+        },
+      },
+    },
+    include: {
+      ApiToken: true,
+    },
+  });
+
+  if (!user) {
+    throw new Error('Invalid token');
+  }
+
+  const retrievedToken = user.ApiToken.find((apiToken) => apiToken.token === hashedToken);
+
+  // This should be impossible but we need to satisfy TypeScript
+  if (!retrievedToken) {
+    throw new Error('Invalid token');
+  }
+
+  if (retrievedToken.expires && retrievedToken.expires < new Date()) {
+    throw new Error('Expired token');
+  }
+
+  return user;
+};

packages/lib/server-only/public-api/test-credentials.ts

@@ -0,0 +1,31 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { getUserByApiToken } from './get-user-by-token';
+
+export const testCredentialsHandler = async (req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    const { authorization } = 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) {
+      return res.status(500).json({
+        body: {
+          message: 'API token was not provided',
+        },
+      });
+    }
+
+    const user = await getUserByApiToken({ token });
+
+    return res.status(200).json({
+      username: user.name,
+      email: user.email,
+    });
+  } catch (err) {
+    return res.status(500).json({
+      message: 'Internal Server Error',
+    });
+  }
+};

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

@@ -0,0 +1,32 @@
+import { prisma } from '@documenso/prisma';
+import { SendStatus } from '@documenso/prisma/client';
+
+export type DeleteRecipientOptions = {
+  documentId: number;
+  recipientId: number;
+};
+
+export const deleteRecipient = async ({ documentId, recipientId }: DeleteRecipientOptions) => {
+  const recipient = await prisma.recipient.findFirst({
+    where: {
+      id: recipientId,
+      documentId,
+    },
+  });
+
+  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 deletedRecipient = await prisma.recipient.delete({
+    where: {
+      id: recipient.id,
+    },
+  });
+
+  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/update-recipient.ts

@@ -0,0 +1,42 @@
+import { prisma } from '@documenso/prisma';
+import type { RecipientRole } from '@documenso/prisma/client';
+
+export type UpdateRecipientOptions = {
+  documentId: number;
+  recipientId: number;
+  email?: string;
+  name?: string;
+  role?: RecipientRole;
+};
+
+export const updateRecipient = async ({
+  documentId,
+  recipientId,
+  email,
+  name,
+  role,
+}: UpdateRecipientOptions) => {
+  const recipient = await prisma.recipient.findFirst({
+    where: {
+      id: recipientId,
+      documentId,
+    },
+  });
+
+  if (!recipient) {
+    throw new Error('Recipient not found');
+  }
+
+  const updatedRecipient = await prisma.recipient.update({
+    where: {
+      id: recipient.id,
+    },
+    data: {
+      email: email?.toLowerCase() ?? recipient.email,
+      name: name ?? recipient.name,
+      role: role ?? recipient.role,
+    },
+  });
+
+  return updatedRecipient;
+};

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

@@ -1,14 +1,21 @@
 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;
+  recipients?: {
+    name?: string;
+    email: string;
+    role?: RecipientRole;
+  }[];
 };
 
 export const createDocumentFromTemplate = async ({
   templateId,
   userId,
+  recipients,
 }: CreateDocumentFromTemplateOptions) => {
   const template = await prisma.template.findUnique({
     where: {
@@ -63,7 +70,11 @@ export const createDocumentFromTemplate = async ({
     },
 
     include: {
-      Recipient: true,
+      Recipient: {
+        orderBy: {
+          id: 'asc',
+        },
+      },
     },
   });
 
@@ -88,5 +99,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/user/get-user-webhooks.ts

@@ -0,0 +1,17 @@
+import { prisma } from '@documenso/prisma';
+
+export interface GetUserWebhooksByIdOptions {
+  id: number;
+}
+
+export const getUserWebhooksById = async ({ id }: GetUserWebhooksByIdOptions) => {
+  return await prisma.user.findFirstOrThrow({
+    where: {
+      id,
+    },
+    select: {
+      email: true,
+      Webhooks: true,
+    },
+  });
+};

packages/lib/server-only/webhooks/create-webhook.ts

@@ -0,0 +1,28 @@
+import { prisma } from '@documenso/prisma';
+import type { WebhookTriggerEvents } from '@documenso/prisma/client';
+
+export interface CreateWebhookOptions {
+  webhookUrl: string;
+  eventTriggers: WebhookTriggerEvents[];
+  secret: string | null;
+  enabled: boolean;
+  userId: number;
+}
+
+export const createWebhook = async ({
+  webhookUrl,
+  eventTriggers,
+  secret,
+  enabled,
+  userId,
+}: CreateWebhookOptions) => {
+  return await prisma.webhook.create({
+    data: {
+      webhookUrl,
+      eventTriggers,
+      secret,
+      enabled,
+      userId,
+    },
+  });
+};

packages/lib/server-only/webhooks/delete-webhook-by-id.ts

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

packages/lib/server-only/webhooks/edit-webhook.ts

@@ -0,0 +1,21 @@
+import type { Prisma } from '@prisma/client';
+
+import { prisma } from '@documenso/prisma';
+
+export type EditWebhookOptions = {
+  id: number;
+  data: Prisma.WebhookUpdateInput;
+  userId: number;
+};
+
+export const editWebhook = async ({ id, data, userId }: EditWebhookOptions) => {
+  return await prisma.webhook.update({
+    where: {
+      id,
+      userId,
+    },
+    data: {
+      ...data,
+    },
+  });
+};

packages/lib/server-only/webhooks/get-all-webhooks-by-event-trigger.ts

@@ -0,0 +1,17 @@
+import { prisma } from '@documenso/prisma';
+import type { WebhookTriggerEvents } from '@documenso/prisma/client';
+
+export type GetAllWebhooksOptions = {
+  eventTrigger: WebhookTriggerEvents;
+};
+
+export const getAllWebhooksByEventTrigger = async ({ eventTrigger }: GetAllWebhooksOptions) => {
+  return prisma.webhook.findMany({
+    where: {
+      eventTriggers: {
+        has: eventTrigger,
+      },
+      enabled: true,
+    },
+  });
+};

packages/lib/server-only/webhooks/get-webhook-by-id.ts

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

packages/lib/server-only/webhooks/get-webhooks-by-user-id.ts

@@ -0,0 +1,12 @@
+import { prisma } from '@documenso/prisma';
+
+export const getWebhooksByUserId = async (userId: number) => {
+  return await prisma.webhook.findMany({
+    where: {
+      userId,
+    },
+    orderBy: {
+      createdAt: 'desc',
+    },
+  });
+};

packages/lib/server-only/webhooks/zapier/list-documents.ts

@@ -0,0 +1,51 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
+import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
+
+import { getWebhooksByUserId } from '../get-webhooks-by-user-id';
+import { validateApiToken } from './validateApiToken';
+
+export const listDocumentsHandler = async (req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    const { authorization } = req.headers;
+    const user = await validateApiToken({ authorization });
+
+    const documents = await findDocuments({ userId: user.id });
+    const allWebhooks = await getWebhooksByUserId(user.id);
+    const recipients = await getRecipientsForDocument({
+      documentId: documents.data[0].id,
+      userId: user.id,
+    });
+
+    if (documents.data.length > 0 && allWebhooks.length > 0) {
+      const testWebhook = {
+        event: allWebhooks[0].eventTriggers.toString(),
+        createdAt: allWebhooks[0].createdAt,
+        webhookEndpoint: allWebhooks[0].webhookUrl,
+        payload: {
+          id: documents.data[0].id,
+          userId: documents.data[0].userId,
+          title: documents.data[0].title,
+          status: documents.data[0].status,
+          documentDataId: documents.data[0].documentDataId,
+          createdAt: documents.data[0].createdAt,
+          updatedAt: documents.data[0].updatedAt,
+          completedAt: documents.data[0].completedAt,
+          deletedAt: documents.data[0].deletedAt,
+          teamId: documents.data[0].teamId,
+          Recipient: recipients,
+        },
+      };
+
+      return res.status(200).json([testWebhook]);
+    }
+
+    return res.status(200).json([]);
+  } catch (err) {
+    console.error(err);
+    return res.status(500).json({
+      message: 'Internal Server Error',
+    });
+  }
+};

packages/lib/server-only/webhooks/zapier/signed-document.ts

@@ -0,0 +1,67 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { findDocuments } from '@documenso/lib/server-only/document/find-documents';
+import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
+
+import { getWebhooksByUserId } from '../get-webhooks-by-user-id';
+import { validateApiToken } from './validateApiToken';
+
+export const signedDocumentHandler = async (req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    const { authorization } = req.headers;
+    const user = await validateApiToken({ authorization });
+
+    const documents = await findDocuments({ userId: user.id });
+
+    const allWebhooks = await getWebhooksByUserId(user.id);
+    const recipients = await getRecipientsForDocument({
+      documentId: documents.data[0].id,
+      userId: user.id,
+    });
+
+    if (documents.data.length > 0 && allWebhooks.length > 0 && recipients.length > 0) {
+      const testWebhook = {
+        event: allWebhooks[0].eventTriggers.toString(),
+        createdAt: allWebhooks[0].createdAt,
+        webhookEndpoint: allWebhooks[0].webhookUrl,
+        payload: {
+          id: documents.data[0].id,
+          userId: documents.data[0].userId,
+          title: documents.data[0].title,
+          status: documents.data[0].status,
+          documentDataId: documents.data[0].documentDataId,
+          createdAt: documents.data[0].createdAt,
+          updatedAt: documents.data[0].updatedAt,
+          completedAt: documents.data[0].completedAt,
+          deletedAt: documents.data[0].deletedAt,
+          teamId: documents.data[0].teamId,
+          Recipient: [
+            {
+              id: recipients[0].id,
+              documentId: recipients[0].documentId,
+              templateId: recipients[0].templateId,
+              email: recipients[0].email,
+              name: recipients[0].name,
+              token: recipients[0].token,
+              expired: recipients[0].expired,
+              signedAt: recipients[0].signedAt,
+              role: recipients[0].role,
+              readStatus: recipients[0].readStatus,
+              signingStatus: recipients[0].signingStatus,
+              sendStatus: recipients[0].sendStatus,
+            },
+          ],
+        },
+      };
+
+      return res.status(200).json([testWebhook]);
+    }
+
+    return res.status(200).json([]);
+  } catch (err) {
+    console.error(err);
+    return res.status(500).json({
+      message: 'Internal Server Error',
+    });
+  }
+};

packages/lib/server-only/webhooks/zapier/subscribe.ts

@@ -0,0 +1,29 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { prisma } from '@documenso/prisma';
+
+import { validateApiToken } from './validateApiToken';
+
+export const subscribeHandler = async (req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    const { authorization } = req.headers;
+    const { webhookUrl, eventTrigger } = req.body;
+    const user = await validateApiToken({ authorization });
+
+    const createdWebhook = await prisma.webhook.create({
+      data: {
+        webhookUrl,
+        eventTriggers: [eventTrigger],
+        secret: null,
+        enabled: true,
+        userId: user.id,
+      },
+    });
+
+    return res.status(200).json(createdWebhook);
+  } catch (err) {
+    return res.status(500).json({
+      message: 'Internal Server Error',
+    });
+  }
+};

packages/lib/server-only/webhooks/zapier/unsubscribe.ts

@@ -0,0 +1,26 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { prisma } from '@documenso/prisma';
+
+import { validateApiToken } from './validateApiToken';
+
+export const unsubscribeHandler = async (req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    const { authorization } = req.headers;
+    const { webhookId } = req.body;
+    const user = await validateApiToken({ authorization });
+
+    const deletedWebhook = await prisma.webhook.delete({
+      where: {
+        id: webhookId,
+        userId: user.id,
+      },
+    });
+
+    return res.status(200).json(deletedWebhook);
+  } catch (err) {
+    return res.status(500).json({
+      message: 'Internal Server Error',
+    });
+  }
+};

packages/lib/server-only/webhooks/zapier/validateApiToken.ts

@@ -0,0 +1,16 @@
+import { getUserByApiToken } from '../../public-api/get-user-by-token';
+
+type ValidateApiTokenOptions = {
+  authorization: string | undefined;
+};
+
+export const validateApiToken = async ({ authorization }: ValidateApiTokenOptions) => {
+  try {
+    // Support for both "Authorization: Bearer api_xxx" and "Authorization: api_xxx"
+    const [token] = (authorization || '').split('Bearer ').filter((s) => s.length > 0);
+
+    return await getUserByApiToken({ token });
+  } catch (err) {
+    throw new Error(`Failed to validate API token`);
+  }
+};

packages/lib/universal/post-webhook-payload.ts

@@ -0,0 +1,39 @@
+import type { Document, Webhook } from '@documenso/prisma/client';
+
+export type PostWebhookPayloadOptions = {
+  webhookData: Pick<Webhook, 'webhookUrl' | 'secret' | 'eventTriggers'>;
+  documentData: Document;
+};
+
+export const postWebhookPayload = async ({
+  webhookData,
+  documentData,
+}: PostWebhookPayloadOptions) => {
+  const { webhookUrl, secret } = webhookData;
+
+  const payload = {
+    event: webhookData.eventTriggers.toString(),
+    createdAt: new Date().toISOString(),
+    webhookEndpoint: webhookUrl,
+    payload: documentData,
+  };
+
+  const response = await fetch(webhookUrl, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Documenso-Secret': secret ?? '',
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Webhook failed with the status code ${response.status}`);
+  }
+
+  return {
+    status: response.status,
+    statusText: response.statusText,
+    message: 'Webhook sent successfully',
+  };
+};

packages/lib/universal/trigger-webhook.ts

@@ -0,0 +1,30 @@
+import type { Document, WebhookTriggerEvents } from '@documenso/prisma/client';
+
+import { getAllWebhooksByEventTrigger } from '../server-only/webhooks/get-all-webhooks-by-event-trigger';
+import { postWebhookPayload } from './post-webhook-payload';
+
+export type TriggerWebhookOptions = {
+  eventTrigger: WebhookTriggerEvents;
+  documentData: Document;
+};
+
+export const triggerWebhook = async ({ eventTrigger, documentData }: TriggerWebhookOptions) => {
+  try {
+    const allWebhooks = await getAllWebhooksByEventTrigger({ eventTrigger });
+
+    const webhookPromises = allWebhooks.map((webhook) => {
+      const { webhookUrl, secret } = webhook;
+
+      postWebhookPayload({
+        webhookData: { webhookUrl, secret, eventTriggers: [eventTrigger] },
+        documentData,
+      }).catch((_err) => {
+        throw new Error(`Failed to send webhook to ${webhookUrl}`);
+      });
+    });
+
+    return Promise.all(webhookPromises);
+  } catch (err) {
+    throw new Error(`Failed to trigger webhook`);
+  }
+};

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/20240206131417_add_user_webhooks/migration.sql

@@ -0,0 +1,19 @@
+-- CreateEnum
+CREATE TYPE "WebhookTriggerEvents" AS ENUM ('DOCUMENT_CREATED', 'DOCUMENT_SIGNED');
+
+-- CreateTable
+CREATE TABLE "Webhook" (
+    "id" SERIAL NOT NULL,
+    "webhookUrl" TEXT NOT NULL,
+    "eventTriggers" "WebhookTriggerEvents"[],
+    "secret" TEXT,
+    "enabled" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "userId" INTEGER NOT NULL,
+
+    CONSTRAINT "Webhook_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "Webhook" ADD CONSTRAINT "Webhook_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

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;

packages/prisma/migrations/20240223142426_extend_webhook_event_triggers/migration.sql

@@ -0,0 +1,11 @@
+-- AlterEnum
+-- This migration adds more than one value to an enum.
+-- With PostgreSQL versions 11 and earlier, this is not possible
+-- in a single migration. This can be worked around by creating
+-- multiple migrations, each migration adding only one value to
+-- the enum.
+
+
+ALTER TYPE "WebhookTriggerEvents" ADD VALUE 'DOCUMENT_SENT';
+ALTER TYPE "WebhookTriggerEvents" ADD VALUE 'DOCUMENT_OPENED';
+ALTER TYPE "WebhookTriggerEvents" ADD VALUE 'DOCUMENT_COMPLETED';

packages/prisma/schema.prisma

@@ -19,19 +19,19 @@ enum Role {
 }
 
 model User {
-  id                   Int                  @id @default(autoincrement())
+  id                   Int                    @id @default(autoincrement())
   name                 String?
-  customerId           String?              @unique
-  email                String               @unique
+  customerId           String?                @unique
+  email                String                 @unique
   emailVerified        DateTime?
   password             String?
   source               String?
   signature            String?
-  createdAt            DateTime             @default(now())
-  updatedAt            DateTime             @default(now()) @updatedAt
-  lastSignedIn         DateTime             @default(now())
-  roles                Role[]               @default([USER])
-  identityProvider     IdentityProvider     @default(DOCUMENSO)
+  createdAt            DateTime               @default(now())
+  updatedAt            DateTime               @default(now()) @updatedAt
+  lastSignedIn         DateTime               @default(now())
+  roles                Role[]                 @default([USER])
+  identityProvider     IdentityProvider       @default(DOCUMENSO)
   accounts             Account[]
   sessions             Session[]
   Document             Document[]
@@ -41,12 +41,13 @@ model User {
   ownedPendingTeams    TeamPending[]
   teamMembers          TeamMember[]
   twoFactorSecret      String?
-  twoFactorEnabled     Boolean              @default(false)
+  twoFactorEnabled     Boolean                @default(false)
   twoFactorBackupCodes String?
-
-  VerificationToken VerificationToken[]
-  Template          Template[]
-  securityAuditLogs UserSecurityAuditLog[]
+  VerificationToken    VerificationToken[]
+  ApiToken             ApiToken[]
+  Template             Template[]
+  securityAuditLogs    UserSecurityAuditLog[]
+  Webhooks             Webhook[]
 
   @@index([email])
 }
@@ -94,6 +95,41 @@ model VerificationToken {
   user       User     @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
 
+enum ApiTokenAlgorithm {
+  SHA512
+}
+
+model ApiToken {
+  id        Int               @id @default(autoincrement())
+  name      String
+  token     String            @unique
+  algorithm ApiTokenAlgorithm @default(SHA512)
+  expires   DateTime?
+  createdAt DateTime          @default(now())
+  userId    Int
+  user      User              @relation(fields: [userId], references: [id], onDelete: Cascade)
+}
+
+enum WebhookTriggerEvents {
+  DOCUMENT_CREATED
+  DOCUMENT_SENT
+  DOCUMENT_OPENED
+  DOCUMENT_SIGNED
+  DOCUMENT_COMPLETED
+}
+
+model Webhook {
+  id            Int                    @id @default(autoincrement())
+  webhookUrl    String
+  eventTriggers WebhookTriggerEvents[]
+  secret        String?
+  enabled       Boolean                @default(true)
+  createdAt     DateTime               @default(now())
+  updatedAt     DateTime               @default(now()) @updatedAt
+  userId        Int
+  User          User                   @relation(fields: [userId], references: [id], onDelete: Cascade)
+}
+
 enum SubscriptionStatus {
   ACTIVE
   PAST_DUE
@@ -210,15 +246,15 @@ model DocumentData {
 }
 
 model DocumentMeta {
-  id         String   @id @default(cuid())
-  subject    String?
-  message    String?
-  timezone   String?  @default("Etc/UTC") @db.Text
-  password   String?
-  dateFormat String?  @default("yyyy-MM-dd hh:mm a") @db.Text
-  documentId Int      @unique
-  document   Document @relation(fields: [documentId], references: [id], onDelete: Cascade)
-  redirectUrl String? 
+  id          String   @id @default(cuid())
+  subject     String?
+  message     String?
+  timezone    String?  @default("Etc/UTC") @db.Text
+  password    String?
+  dateFormat  String?  @default("yyyy-MM-dd hh:mm a") @db.Text
+  documentId  Int      @unique
+  document    Document @relation(fields: [documentId], references: [id], onDelete: Cascade)
+  redirectUrl String?
 }
 
 enum ReadStatus {

packages/tailwind-config/index.cjs

@@ -11,6 +11,9 @@ module.exports = {
         sans: ['var(--font-sans)', ...fontFamily.sans],
         signature: ['var(--font-signature)'],
       },
+      zIndex: {
+        9999: '9999',
+      },
       colors: {
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',

packages/trpc/package.json

@@ -17,6 +17,8 @@
     "@trpc/next": "^10.36.0",
     "@trpc/react-query": "^10.36.0",
     "@trpc/server": "^10.36.0",
+    "@ts-rest/core": "^3.30.5",
+    "@ts-rest/next": "^3.30.5",
     "luxon": "^3.4.0",
     "superjson": "^1.13.1",
     "ts-pattern": "^5.0.5",

packages/trpc/server/api-token-router/router.ts

@@ -0,0 +1,81 @@
+import { TRPCError } from '@trpc/server';
+
+import { createApiToken } from '@documenso/lib/server-only/public-api/create-api-token';
+import { deleteTokenById } from '@documenso/lib/server-only/public-api/delete-api-token-by-id';
+import { getUserTokens } from '@documenso/lib/server-only/public-api/get-all-user-tokens';
+import { getApiTokenById } from '@documenso/lib/server-only/public-api/get-api-token-by-id';
+
+import { authenticatedProcedure, router } from '../trpc';
+import {
+  ZCreateTokenMutationSchema,
+  ZDeleteTokenByIdMutationSchema,
+  ZGetApiTokenByIdQuerySchema,
+} from './schema';
+
+export const apiTokenRouter = router({
+  getTokens: authenticatedProcedure.query(async ({ ctx }) => {
+    try {
+      return await getUserTokens({ userId: ctx.user.id });
+    } catch (e) {
+      throw new TRPCError({
+        code: 'BAD_REQUEST',
+        message: 'We were unable to find your API tokens. Please try again.',
+      });
+    }
+  }),
+
+  getTokenById: authenticatedProcedure
+    .input(ZGetApiTokenByIdQuerySchema)
+    .query(async ({ input, ctx }) => {
+      try {
+        const { id } = input;
+
+        return await getApiTokenById({
+          id,
+          userId: ctx.user.id,
+        });
+      } catch (e) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to find this API token. Please try again.',
+        });
+      }
+    }),
+
+  createToken: authenticatedProcedure
+    .input(ZCreateTokenMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { tokenName, expirationDate } = input;
+
+        return await createApiToken({
+          userId: ctx.user.id,
+          tokenName,
+          expirationDate,
+        });
+      } catch (e) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to create an API token. Please try again.',
+        });
+      }
+    }),
+
+  deleteTokenById: authenticatedProcedure
+    .input(ZDeleteTokenByIdMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { id } = input;
+
+        return await deleteTokenById({
+          id,
+          userId: ctx.user.id,
+        });
+      } catch (e) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to delete this API Token. Please try again.',
+        });
+      }
+    }),
+});

packages/trpc/server/api-token-router/schema.ts

@@ -0,0 +1,20 @@
+import { z } from 'zod';
+
+export const ZGetApiTokenByIdQuerySchema = z.object({
+  id: z.number().min(1),
+});
+
+export type TGetApiTokenByIdQuerySchema = z.infer<typeof ZGetApiTokenByIdQuerySchema>;
+
+export const ZCreateTokenMutationSchema = z.object({
+  tokenName: z.string().min(3, { message: 'The token name should be 3 characters or longer' }),
+  expirationDate: z.string().nullable(),
+});
+
+export type TCreateTokenMutationSchema = z.infer<typeof ZCreateTokenMutationSchema>;
+
+export const ZDeleteTokenByIdMutationSchema = z.object({
+  id: z.number().min(1),
+});
+
+export type TDeleteTokenByIdMutationSchema = z.infer<typeof ZDeleteTokenByIdMutationSchema>;

packages/trpc/server/router.ts

@@ -1,4 +1,5 @@
 import { adminRouter } from './admin-router/router';
+import { apiTokenRouter } from './api-token-router/router';
 import { authRouter } from './auth-router/router';
 import { cryptoRouter } from './crypto/router';
 import { documentRouter } from './document-router/router';
@@ -11,6 +12,7 @@ import { teamRouter } from './team-router/router';
 import { templateRouter } from './template-router/router';
 import { router } from './trpc';
 import { twoFactorAuthenticationRouter } from './two-factor-authentication-router/router';
+import { webhookRouter } from './webhook-router/router';
 
 export const appRouter = router({
   auth: authRouter,
@@ -21,9 +23,11 @@ export const appRouter = router({
   recipient: recipientRouter,
   admin: adminRouter,
   shareLink: shareLinkRouter,
+  apiToken: apiTokenRouter,
   singleplayer: singleplayerRouter,
   team: teamRouter,
   template: templateRouter,
+  webhook: webhookRouter,
   twoFactorAuthentication: twoFactorAuthenticationRouter,
 });
 

packages/trpc/server/webhook-router/router.ts

@@ -0,0 +1,96 @@
+import { TRPCError } from '@trpc/server';
+
+import { createWebhook } from '@documenso/lib/server-only/webhooks/create-webhook';
+import { deleteWebhookById } from '@documenso/lib/server-only/webhooks/delete-webhook-by-id';
+import { editWebhook } from '@documenso/lib/server-only/webhooks/edit-webhook';
+import { getWebhookById } from '@documenso/lib/server-only/webhooks/get-webhook-by-id';
+import { getWebhooksByUserId } from '@documenso/lib/server-only/webhooks/get-webhooks-by-user-id';
+
+import { authenticatedProcedure, router } from '../trpc';
+import {
+  ZCreateWebhookFormSchema,
+  ZDeleteWebhookMutationSchema,
+  ZEditWebhookMutationSchema,
+  ZGetWebhookByIdQuerySchema,
+} from './schema';
+
+export const webhookRouter = router({
+  getWebhooks: authenticatedProcedure.query(async ({ ctx }) => {
+    try {
+      return await getWebhooksByUserId(ctx.user.id);
+    } catch (err) {
+      throw new TRPCError({
+        code: 'BAD_REQUEST',
+        message: 'We were unable to fetch your webhooks. Please try again later.',
+      });
+    }
+  }),
+  getWebhookById: authenticatedProcedure
+    .input(ZGetWebhookByIdQuerySchema)
+    .query(async ({ input, ctx }) => {
+      try {
+        const { id } = input;
+
+        return await getWebhookById({
+          id,
+          userId: ctx.user.id,
+        });
+      } catch (err) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to fetch your webhook. Please try again later.',
+        });
+      }
+    }),
+
+  createWebhook: authenticatedProcedure
+    .input(ZCreateWebhookFormSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        return await createWebhook({
+          ...input,
+          userId: ctx.user.id,
+        });
+      } catch (err) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to create this webhook. Please try again later.',
+        });
+      }
+    }),
+  deleteWebhook: authenticatedProcedure
+    .input(ZDeleteWebhookMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { id } = input;
+
+        return await deleteWebhookById({
+          id,
+          userId: ctx.user.id,
+        });
+      } catch (err) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to create this webhook. Please try again later.',
+        });
+      }
+    }),
+  editWebhook: authenticatedProcedure
+    .input(ZEditWebhookMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { id } = input;
+
+        return await editWebhook({
+          id,
+          data: input,
+          userId: ctx.user.id,
+        });
+      } catch (err) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to create this webhook. Please try again later.',
+        });
+      }
+    }),
+});

packages/trpc/server/webhook-router/schema.ts

@@ -0,0 +1,32 @@
+import { z } from 'zod';
+
+import { WebhookTriggerEvents } from '@documenso/prisma/client';
+
+export const ZCreateWebhookFormSchema = z.object({
+  webhookUrl: z.string().url(),
+  eventTriggers: z
+    .array(z.nativeEnum(WebhookTriggerEvents))
+    .min(1, { message: 'At least one event trigger is required' }),
+  secret: z.string().nullable(),
+  enabled: z.boolean(),
+});
+
+export const ZGetWebhookByIdQuerySchema = z.object({
+  id: z.number(),
+});
+
+export const ZEditWebhookMutationSchema = ZCreateWebhookFormSchema.extend({
+  id: z.number(),
+});
+
+export const ZDeleteWebhookMutationSchema = z.object({
+  id: z.number(),
+});
+
+export type TCreateWebhookFormSchema = z.infer<typeof ZCreateWebhookFormSchema>;
+
+export type TGetWebhookByIdQuerySchema = z.infer<typeof ZGetWebhookByIdQuerySchema>;
+
+export type TDeleteWebhookMutationSchema = z.infer<typeof ZDeleteWebhookMutationSchema>;
+
+export type TEditWebhookMutationSchema = z.infer<typeof ZEditWebhookMutationSchema>;

packages/trpc/tsconfig.json

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