extend webhook triggers

fixes #938 



https://github.com/documenso/documenso/assets/81948346/8bf807ae-41b0-417b-9f55-d96584e71acb

.husky/pre-commit

@@ -1,4 +1,16 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+SCRIPT_DIR="$(readlink -f "$(dirname "$0")")"
+MONOREPO_ROOT="$(readlink -f "$SCRIPT_DIR/../")"
+
+echo "Copying pdf.js"
+npm run copy:pdfjs --workspace apps/**
+
+echo "Copying .well-known/ contents"
+node "$MONOREPO_ROOT/scripts/copy-wellknown.cjs"
+
+git add "$MONOREPO_ROOT/apps/web/public/"
+git add "$MONOREPO_ROOT/apps/marketing/public/"
+
 npx lint-staged

.well-known/security.txt

@@ -0,0 +1,7 @@
+# General Issues
+Contact: https://github.com/documenso/documenso/issues/new?assignees=&labels=bug&projects=&template=bug-report.yml
+
+# Report critical issues privately to let us take appropriate action before publishing.
+Contact: mailto:security@documenso.com
+Preferred-Languages: en
+Canonical: https://documenso.com/.well-known/security.txt

apps/marketing/content/blog/commodifying-signing.mdx

@@ -5,7 +5,7 @@ authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'
 date: 2024-01-25
-Tags:
+tags:
   - Vision
   - Mission
   - Open Source

apps/marketing/content/blog/linear-gh.mdx

@@ -5,7 +5,7 @@ authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'
 date: 2024-01-10
-Tags:
+tags:
   - GitHub
   - Backlog
   - Roadmap

apps/marketing/content/blog/why-i-started-documenso.mdx

@@ -5,7 +5,7 @@ authorName: 'Timur Ercan'
 authorImage: '/blog/blog-author-timur.jpeg'
 authorRole: 'Co-Founder'
 date: 2024-02-06
-Tags:
+tags:
   - Founders
   - Mission
   - Open Source

apps/marketing/public/.well-known/security.txt

@@ -0,0 +1,7 @@
+# General Issues
+Contact: https://github.com/documenso/documenso/issues/new?assignees=&labels=bug&projects=&template=bug-report.yml
+
+# Report critical issues privately to let us take appropriate action before publishing.
+Contact: mailto:security@documenso.com
+Preferred-Languages: en
+Canonical: https://documenso.com/.well-known/security.txt

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

@@ -5,14 +5,13 @@ import { allDocuments } from 'contentlayer/generated';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
-export const generateStaticParams = () =>
-  allDocuments.map((post) => ({ post: post._raw.flattenedPath }));
+export const dynamic = 'force-dynamic';
 
 export const generateMetadata = ({ params }: { params: { content: string } }) => {
-  const document = allDocuments.find((post) => post._raw.flattenedPath === params.content);
+  const document = allDocuments.find((doc) => doc._raw.flattenedPath === params.content);
 
   if (!document) {
-    notFound();
+    return { title: 'Not Found' };
   }
 
   return { title: document.title };

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

@@ -7,14 +7,15 @@ import { ChevronLeft } from 'lucide-react';
 import type { MDXComponents } from 'mdx/types';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 
-export const generateStaticParams = () =>
-  allBlogPosts.map((post) => ({ post: post._raw.flattenedPath }));
+export const dynamic = 'force-dynamic';
 
 export const generateMetadata = ({ params }: { params: { post: string } }) => {
   const blogPost = allBlogPosts.find((post) => post._raw.flattenedPath === `blog/${params.post}`);
 
   if (!blogPost) {
-    notFound();
+    return {
+      title: 'Not Found',
+    };
   }
 
   return {

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

@@ -5,6 +5,7 @@ import { allBlogPosts } from 'contentlayer/generated';
 export const metadata: Metadata = {
   title: 'Blog',
 };
+
 export default function BlogPage() {
   const blogPosts = allBlogPosts.sort((a, b) => {
     const dateA = new Date(a.date);

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

@@ -4,6 +4,7 @@ import { redirect } from 'next/navigation';
 
 import { ArrowRight } from 'lucide-react';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { redis } from '@documenso/lib/server-only/redis';
 import { stripe } from '@documenso/lib/server-only/stripe';
 import { prisma } from '@documenso/prisma';
@@ -12,6 +13,8 @@ import { Button } from '@documenso/ui/primitives/button';
 
 import { PasswordReveal } from '~/components/(marketing)/password-reveal';
 
+export const dynamic = 'force-dynamic';
+
 const fontCaveat = Caveat({
   weight: ['500'],
   subsets: ['latin'],
@@ -175,11 +178,7 @@ export default async function ClaimedPlanPage({ searchParams = {} }: ClaimedPlan
           This is a temporary password. Please change it as soon as possible.
         </p>
 
-        <Link
-          href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signin`}
-          target="_blank"
-          className="mt-4 block"
-        >
+        <Link href={`${NEXT_PUBLIC_WEBAPP_URL()}/signin`} target="_blank" className="mt-4 block">
           <Button size="lg" className="text-base">
             Let's get started!
             <ArrowRight className="ml-2 h-5 w-5" />

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

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

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

@@ -15,6 +15,8 @@ export const metadata: Metadata = {
   title: 'Pricing',
 };
 
+export const dynamic = 'force-dynamic';
+
 export type PricingPageProps = {
   searchParams?: {
     planId?: string;
@@ -53,7 +55,7 @@ export default function PricingPage() {
 
         <div className="mt-4 flex justify-center">
           <Button variant="outline" size="lg" className="rounded-full hover:cursor-pointer" asChild>
-            <Link href="https://github.com/documenso/documenso" target="_blank">
+            <Link href="https://github.com/documenso/documenso" target="_blank" rel="noreferrer">
               Get Started
             </Link>
           </Button>
@@ -166,6 +168,7 @@ export default function PricingPage() {
               <Link
                 className="text-documenso-700 font-bold"
                 target="_blank"
+                rel="noreferrer"
                 href="mailto:support@documenso.com"
               >
                 support@documenso.com
@@ -175,6 +178,7 @@ export default function PricingPage() {
                 className="text-documenso-700 font-bold"
                 href="https://documen.so/discord"
                 target="_blank"
+                rel="noreferrer"
               >
                 in our Discord-Support-Channel
               </a>{' '}

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

@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { base64 } from '@documenso/lib/universal/base64';
 import { putFile } from '@documenso/lib/universal/upload/put-file';
 import type { Field, Recipient } from '@documenso/prisma/client';
@@ -85,6 +86,7 @@ export const SinglePlayerClient = () => {
     setFields(
       data.fields.map((field, i) => ({
         id: i,
+        secondaryId: i.toString(),
         documentId: -1,
         templateId: null,
         recipientId: -1,
@@ -189,7 +191,7 @@ export const SinglePlayerClient = () => {
         <p className="text-foreground mx-auto mt-4 max-w-[50ch] text-lg leading-normal">
           Create a{' '}
           <Link
-            href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}
+            href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup`}
             target="_blank"
             className="hover:text-foreground/80 font-semibold transition-colors"
           >

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

@@ -7,6 +7,7 @@ export const metadata: Metadata = {
 };
 
 export const revalidate = 0;
+export const dynamic = 'force-dynamic';
 
 // !: This entire file is a hack to get around failed prerendering of
 // !: the Single Player Mode page. This regression was introduced during

apps/marketing/src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Suspense } from 'react';
 import { Caveat, Inter } from 'next/font/google';
 
 import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
+import { NEXT_PUBLIC_MARKETING_URL } from '@documenso/lib/constants/app';
 import { getAllAnonymousFlags } from '@documenso/lib/universal/get-feature-flag';
 import { TrpcProvider } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -17,32 +18,35 @@ import './globals.css';
 const fontInter = Inter({ subsets: ['latin'], variable: '--font-sans' });
 const fontCaveat = Caveat({ subsets: ['latin'], variable: '--font-signature' });
 
-export const metadata = {
-  title: {
-    template: '%s - Documenso',
-    default: 'Documenso',
-  },
-  description:
-    'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
-  keywords:
-    'Documenso, open source, DocuSign alternative, document signing, open signing infrastructure, open-source community, fast signing, beautiful signing, smart templates',
-  authors: { name: 'Documenso, Inc.' },
-  robots: 'index, follow',
-  openGraph: {
-    title: 'Documenso - The Open Source DocuSign Alternative',
+export function generateMetadata() {
+  return {
+    title: {
+      template: '%s - Documenso',
+      default: 'Documenso',
+    },
     description:
       'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
-    type: 'website',
-    images: [`${process.env.NEXT_PUBLIC_MARKETING_URL}/opengraph-image.jpg`],
-  },
-  twitter: {
-    site: '@documenso',
-    card: 'summary_large_image',
-    images: [`${process.env.NEXT_PUBLIC_MARKETING_URL}/opengraph-image.jpg`],
-    description:
-      'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
-  },
-};
+    keywords:
+      'Documenso, open source, DocuSign alternative, document signing, open signing infrastructure, open-source community, fast signing, beautiful signing, smart templates',
+    authors: { name: 'Documenso, Inc.' },
+    robots: 'index, follow',
+    metadataBase: new URL(NEXT_PUBLIC_MARKETING_URL() ?? 'http://localhost:3000'),
+    openGraph: {
+      title: 'Documenso - The Open Source DocuSign Alternative',
+      description:
+        'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
+      type: 'website',
+      images: ['/opengraph-image.jpg'],
+    },
+    twitter: {
+      site: '@documenso',
+      card: 'summary_large_image',
+      images: ['/opengraph-image.jpg'],
+      description:
+        'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
+    },
+  };
+}
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const flags = await getAllAnonymousFlags();

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

@@ -8,6 +8,7 @@ import Link from 'next/link';
 import { AnimatePresence, motion } from 'framer-motion';
 import { usePlausible } from 'next-plausible';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 
@@ -82,11 +83,7 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           </p>
 
           <Button className="rounded-full text-base" asChild>
-            <Link
-              href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}
-              target="_blank"
-              className="mt-6"
-            >
+            <Link href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup`} target="_blank" className="mt-6">
               Signup Now
             </Link>
           </Button>
@@ -117,13 +114,13 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           </p>
 
           <Button className="mt-6 rounded-full text-base" asChild>
-            <Link href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}>Signup Now</Link>
+            <Link href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup`}>Signup Now</Link>
           </Button>
 
           <div className="mt-8 flex w-full flex-col divide-y">
             <p className="text-foreground py-4 font-medium">
               {' '}
-              <a href="https://documenso.com/blog/early-adopters" target="_blank">
+              <a href="https://documenso.com/blog/early-adopters" target="_blank" rel="noreferrer">
                 The Early Adopter Deal:
               </a>
             </p>
@@ -133,7 +130,11 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
             <p className="text-foreground py-4">
               <strong>
                 {' '}
-                <a href="https://documenso.com/blog/early-adopters" target="_blank">
+                <a
+                  href="https://documenso.com/blog/early-adopters"
+                  target="_blank"
+                  rel="noreferrer"
+                >
                   Includes all upcoming features
                 </a>
               </strong>

apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 
 import signingCelebration from '@documenso/assets/images/signing-celebration.png';
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import type { Signature } from '@documenso/prisma/client';
 import { DocumentStatus } from '@documenso/prisma/client';
 import type { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
@@ -85,7 +86,7 @@ export const SinglePlayerModeSuccess = ({
       <p className="text-muted-foreground/60 mt-16 text-center text-sm">
         Create a{' '}
         <Link
-          href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}
+          href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup`}
           target="_blank"
           className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
         >

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

@@ -7,6 +7,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Loader } from 'lucide-react';
 import { usePlausible } from 'next-plausible';
+import { env } from 'next-runtime-env';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -144,7 +145,11 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
         setTimeout(resolve, 1000);
       });
 
-      const planId = process.env.NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID;
+      const planId = env('NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID');
+
+      if (!planId) {
+        throw new Error('No plan ID found.');
+      }
 
       const claimPlanInput = signatureDataUrl
         ? {

apps/marketing/src/pages/api/claim-plan/index.ts

@@ -1,13 +1,15 @@
-import { NextApiRequest, NextApiResponse } from 'next';
+import type { NextApiRequest, NextApiResponse } from 'next';
 
 import { randomUUID } from 'crypto';
 
-import { TEarlyAdopterCheckoutMetadataSchema } from '@documenso/ee/server-only/stripe/webhook/early-adopter-checkout-metadata';
+import type { TEarlyAdopterCheckoutMetadataSchema } from '@documenso/ee/server-only/stripe/webhook/early-adopter-checkout-metadata';
+import { NEXT_PUBLIC_MARKETING_URL, NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { redis } from '@documenso/lib/server-only/redis';
 import { stripe } from '@documenso/lib/server-only/stripe';
 import { prisma } from '@documenso/prisma';
 
-import { TClaimPlanResponseSchema, ZClaimPlanRequestSchema } from '~/api/claim-plan/types';
+import type { TClaimPlanResponseSchema } from '~/api/claim-plan/types';
+import { ZClaimPlanRequestSchema } from '~/api/claim-plan/types';
 
 export default async function handler(
   req: NextApiRequest,
@@ -40,7 +42,7 @@ export default async function handler(
 
     if (user) {
       return res.status(200).json({
-        redirectUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/signin`,
+        redirectUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/signin`,
       });
     }
 
@@ -77,8 +79,8 @@ export default async function handler(
       mode: 'subscription',
       metadata,
       allow_promotion_codes: true,
-      success_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}/claimed?sessionId={CHECKOUT_SESSION_ID}`,
-      cancel_url: `${process.env.NEXT_PUBLIC_MARKETING_URL}`,
+      success_url: `${NEXT_PUBLIC_MARKETING_URL()}/claimed?sessionId={CHECKOUT_SESSION_ID}`,
+      cancel_url: `${NEXT_PUBLIC_MARKETING_URL()}`,
     });
 
     if (!checkout.url) {

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/public/.well-known/security.txt

@@ -0,0 +1,7 @@
+# General Issues
+Contact: https://github.com/documenso/documenso/issues/new?assignees=&labels=bug&projects=&template=bug-report.yml
+
+# Report critical issues privately to let us take appropriate action before publishing.
+Contact: mailto:security@documenso.com
+Preferred-Languages: en
+Canonical: https://documenso.com/.well-known/security.txt

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

@@ -25,7 +25,7 @@ export type DocumentPageViewProps = {
   team?: Team;
 };
 
-export default async function DocumentPageView({ params, team }: DocumentPageViewProps) {
+export const DocumentPageView = async ({ params, team }: DocumentPageViewProps) => {
   const { id } = params;
 
   const documentId = Number(id);
@@ -128,4 +128,4 @@ export default async function DocumentPageView({ params, team }: DocumentPageVie
       )}
     </div>
   );
-}
+};

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

@@ -151,7 +151,7 @@ export const EditDocumentForm = ({
   };
 
   const onAddSubjectFormSubmit = async (data: TAddSubjectFormSchema) => {
-    const { subject, message, timezone, dateFormat } = data.meta;
+    const { subject, message, timezone, dateFormat, redirectUrl } = data.meta;
 
     try {
       await sendDocument({
@@ -159,8 +159,9 @@ export const EditDocumentForm = ({
         meta: {
           subject,
           message,
-          timezone,
           dateFormat,
+          timezone,
+          redirectUrl,
         },
       });
 

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

@@ -1,4 +1,4 @@
-import DocumentPageView from './document-page-view';
+import { DocumentPageView } from './document-page-view';
 
 export type DocumentPageProps = {
   params: {

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

@@ -108,88 +108,86 @@ export const ResendDocumentActionItem = ({
   };
 
   return (
-    <>
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogTrigger asChild>
-          <DropdownMenuItem disabled={isDisabled} onSelect={(e) => e.preventDefault()}>
-            <History className="mr-2 h-4 w-4" />
-            Resend
-          </DropdownMenuItem>
-        </DialogTrigger>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem disabled={isDisabled} onSelect={(e) => e.preventDefault()}>
+          <History className="mr-2 h-4 w-4" />
+          Resend
+        </DropdownMenuItem>
+      </DialogTrigger>
 
-        <DialogContent className="sm:max-w-sm" hideClose>
-          <DialogHeader>
-            <DialogTitle>
-              <h1 className="text-center text-xl">Who do you want to remind?</h1>
-            </DialogTitle>
-          </DialogHeader>
+      <DialogContent className="sm:max-w-sm" hideClose>
+        <DialogHeader>
+          <DialogTitle>
+            <h1 className="text-center text-xl">Who do you want to remind?</h1>
+          </DialogTitle>
+        </DialogHeader>
 
-          <Form {...form}>
-            <form id={FORM_ID} onSubmit={handleSubmit(onFormSubmit)} className="px-3">
-              <FormField
-                control={form.control}
-                name="recipients"
-                render={({ field: { value, onChange } }) => (
-                  <>
-                    {recipients.map((recipient) => (
-                      <FormItem
-                        key={recipient.id}
-                        className="flex flex-row items-center justify-between gap-x-3"
+        <Form {...form}>
+          <form id={FORM_ID} onSubmit={handleSubmit(onFormSubmit)} className="px-3">
+            <FormField
+              control={form.control}
+              name="recipients"
+              render={({ field: { value, onChange } }) => (
+                <>
+                  {recipients.map((recipient) => (
+                    <FormItem
+                      key={recipient.id}
+                      className="flex flex-row items-center justify-between gap-x-3"
+                    >
+                      <FormLabel
+                        className={cn('my-2 flex items-center gap-2 font-normal', {
+                          'opacity-50': !value.includes(recipient.id),
+                        })}
                       >
-                        <FormLabel
-                          className={cn('my-2 flex items-center gap-2 font-normal', {
-                            'opacity-50': !value.includes(recipient.id),
-                          })}
-                        >
-                          <StackAvatar
-                            key={recipient.id}
-                            type={getRecipientType(recipient)}
-                            fallbackText={recipientAbbreviation(recipient)}
-                          />
-                          {recipient.email}
-                        </FormLabel>
+                        <StackAvatar
+                          key={recipient.id}
+                          type={getRecipientType(recipient)}
+                          fallbackText={recipientAbbreviation(recipient)}
+                        />
+                        {recipient.email}
+                      </FormLabel>
 
-                        <FormControl>
-                          <Checkbox
-                            className="h-5 w-5 rounded-full data-[state=checked]:border-black data-[state=checked]:bg-black "
-                            checkClassName="text-white"
-                            value={recipient.id}
-                            checked={value.includes(recipient.id)}
-                            onCheckedChange={(checked: boolean) =>
-                              checked
-                                ? onChange([...value, recipient.id])
-                                : onChange(value.filter((v) => v !== recipient.id))
-                            }
-                          />
-                        </FormControl>
-                      </FormItem>
-                    ))}
-                  </>
-                )}
-              />
-            </form>
-          </Form>
+                      <FormControl>
+                        <Checkbox
+                          className="h-5 w-5 rounded-full data-[state=checked]:border-black data-[state=checked]:bg-black "
+                          checkClassName="text-white"
+                          value={recipient.id}
+                          checked={value.includes(recipient.id)}
+                          onCheckedChange={(checked: boolean) =>
+                            checked
+                              ? onChange([...value, recipient.id])
+                              : onChange(value.filter((v) => v !== recipient.id))
+                          }
+                        />
+                      </FormControl>
+                    </FormItem>
+                  ))}
+                </>
+              )}
+            />
+          </form>
+        </Form>
 
-          <DialogFooter>
-            <div className="flex w-full flex-1 flex-nowrap gap-4">
-              <DialogClose asChild>
-                <Button
-                  type="button"
-                  className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
-                  variant="secondary"
-                  disabled={isSubmitting}
-                >
-                  Cancel
-                </Button>
-              </DialogClose>
-
-              <Button className="flex-1" loading={isSubmitting} type="submit" form={FORM_ID}>
-                Send reminder
+        <DialogFooter>
+          <div className="flex w-full flex-1 flex-nowrap gap-4">
+            <DialogClose asChild>
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                disabled={isSubmitting}
+              >
+                Cancel
               </Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
+            </DialogClose>
+
+            <Button className="flex-1" loading={isSubmitting} type="submit" form={FORM_ID}>
+              Send reminder
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };

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

@@ -114,7 +114,7 @@ export const DataTableActionDropdown = ({ row, team }: DataTableActionDropdownPr
       <DropdownMenuContent className="w-52" align="start" forceMount>
         <DropdownMenuLabel>Action</DropdownMenuLabel>
 
-        {recipient?.role !== RecipientRole.CC && (
+        {recipient && recipient?.role !== RecipientRole.CC && (
           <DropdownMenuItem disabled={!recipient || isComplete} asChild>
             <Link href={`/sign/${recipient?.token}`}>
               {recipient?.role === RecipientRole.VIEWER && (

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

@@ -33,10 +33,7 @@ export type DocumentsPageViewProps = {
   team?: Team & { teamEmail?: TeamEmail | null };
 };
 
-export default async function DocumentsPageView({
-  searchParams = {},
-  team,
-}: DocumentsPageViewProps) {
+export const DocumentsPageView = async ({ searchParams = {}, team }: DocumentsPageViewProps) => {
   const { user } = await getRequiredServerComponentSession();
 
   const status = isExtendedDocumentStatus(searchParams.status) ? searchParams.status : 'ALL';
@@ -155,4 +152,4 @@ export default async function DocumentsPageView({
       </div>
     </div>
   );
-}
+};

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

@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
 
 import type { DocumentsPageViewProps } from './documents-page-view';
-import DocumentsPageView from './documents-page-view';
+import { DocumentsPageView } from './documents-page-view';
 
 export type DocumentsPageProps = {
   searchParams?: DocumentsPageViewProps['searchParams'];

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

@@ -117,7 +117,7 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
   return (
     <div className={cn('relative', className)}>
       <DocumentDropzone
-        className="min-h-[40vh]"
+        className="h-[min(400px,50vh)]"
         disabled={remaining.documents === 0 || !session?.user.emailVerified}
         disabledMessage={disabledMessage}
         onDrop={onFileDrop}

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

@@ -2,6 +2,7 @@
 
 import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 
 export const createBillingPortal = async () => {
@@ -11,6 +12,6 @@ export const createBillingPortal = async () => {
 
   return getPortalSession({
     customerId: stripeCustomer.id,
-    returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
+    returnUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/settings/billing`,
   });
 };

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

@@ -3,6 +3,7 @@
 import { getCheckoutSession } from '@documenso/ee/server-only/stripe/get-checkout-session';
 import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getSubscriptionsByUserId } from '@documenso/lib/server-only/subscription/get-subscriptions-by-user-id';
 
@@ -27,13 +28,13 @@ export const createCheckout = async ({ priceId }: CreateCheckoutOptions) => {
   if (foundSubscription) {
     return getPortalSession({
       customerId: stripeCustomer.id,
-      returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
+      returnUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/settings/billing`,
     });
   }
 
   return getCheckoutSession({
     customerId: stripeCustomer.id,
     priceId,
-    returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
+    returnUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/settings/billing`,
   });
 };

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

@@ -5,7 +5,7 @@ import { match } from 'ts-pattern';
 
 import { getStripeCustomerByUser } from '@documenso/ee/server-only/stripe/get-customer';
 import { getPricesByInterval } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
-import { getPricesByPlan } from '@documenso/ee/server-only/stripe/get-prices-by-plan';
+import { getPrimaryAccountPlanPrices } from '@documenso/ee/server-only/stripe/get-primary-account-plan-prices';
 import { getProductByPriceId } from '@documenso/ee/server-only/stripe/get-product-by-price-id';
 import { STRIPE_PLAN_TYPE } from '@documenso/lib/constants/billing';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
@@ -37,23 +37,23 @@ export default async function BillingSettingsPage() {
     user = await getStripeCustomerByUser(user).then((result) => result.user);
   }
 
-  const [subscriptions, prices, communityPlanPrices] = await Promise.all([
+  const [subscriptions, prices, primaryAccountPlanPrices] = await Promise.all([
     getSubscriptionsByUserId({ userId: user.id }),
     getPricesByInterval({ plan: STRIPE_PLAN_TYPE.COMMUNITY }),
-    getPricesByPlan(STRIPE_PLAN_TYPE.COMMUNITY),
+    getPrimaryAccountPlanPrices(),
   ]);
 
-  const communityPlanPriceIds = communityPlanPrices.map(({ id }) => id);
+  const primaryAccountPlanPriceIds = primaryAccountPlanPrices.map(({ id }) => id);
 
   let subscriptionProduct: Stripe.Product | null = null;
 
-  const communityPlanUserSubscriptions = subscriptions.filter(({ priceId }) =>
-    communityPlanPriceIds.includes(priceId),
+  const primaryAccountPlanSubscriptions = subscriptions.filter(({ priceId }) =>
+    primaryAccountPlanPriceIds.includes(priceId),
   );
 
   const subscription =
-    communityPlanUserSubscriptions.find(({ status }) => status === SubscriptionStatus.ACTIVE) ??
-    communityPlanUserSubscriptions[0];
+    primaryAccountPlanSubscriptions.find(({ status }) => status === SubscriptionStatus.ACTIVE) ??
+    primaryAccountPlanSubscriptions[0];
 
   if (subscription?.priceId) {
     subscriptionProduct = await getProductByPriceId({ priceId: subscription.priceId }).catch(

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/(dashboard)/templates/[id]/edit-template.tsx

@@ -28,6 +28,7 @@ export type EditTemplateFormProps = {
   recipients: Recipient[];
   fields: Field[];
   documentData: DocumentData;
+  templateRootPath: string;
 };
 
 type EditTemplateStep = 'signers' | 'fields';
@@ -40,6 +41,7 @@ export const EditTemplateForm = ({
   fields,
   user: _user,
   documentData,
+  templateRootPath,
 }: EditTemplateFormProps) => {
   const { toast } = useToast();
   const router = useRouter();
@@ -98,7 +100,7 @@ export const EditTemplateForm = ({
         duration: 5000,
       });
 
-      router.push('/templates');
+      router.push(templateRootPath);
     } catch (err) {
       toast({
         title: 'Error',

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

@@ -1,81 +1,10 @@
 import React from 'react';
 
-import Link from 'next/link';
-import { redirect } from 'next/navigation';
+import type { TemplatePageViewProps } from './template-page-view';
+import { TemplatePageView } from './template-page-view';
 
-import { ChevronLeft } from 'lucide-react';
+type TemplatePageProps = Pick<TemplatePageViewProps, 'params'>;
 
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { getFieldsForTemplate } from '@documenso/lib/server-only/field/get-fields-for-template';
-import { getRecipientsForTemplate } from '@documenso/lib/server-only/recipient/get-recipients-for-template';
-import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
-
-import { TemplateType } from '~/components/formatter/template-type';
-
-import { EditTemplateForm } from './edit-template';
-
-export type TemplatePageProps = {
-  params: {
-    id: string;
-  };
-};
-
-export default async function TemplatePage({ params }: TemplatePageProps) {
-  const { id } = params;
-
-  const templateId = Number(id);
-
-  if (!templateId || Number.isNaN(templateId)) {
-    redirect('/documents');
-  }
-
-  const { user } = await getRequiredServerComponentSession();
-
-  const template = await getTemplateById({
-    id: templateId,
-    userId: user.id,
-  }).catch(() => null);
-
-  if (!template || !template.templateDocumentData) {
-    redirect('/documents');
-  }
-
-  const { templateDocumentData } = template;
-
-  const [templateRecipients, templateFields] = await Promise.all([
-    getRecipientsForTemplate({
-      templateId,
-      userId: user.id,
-    }),
-    getFieldsForTemplate({
-      templateId,
-      userId: user.id,
-    }),
-  ]);
-
-  return (
-    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-      <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
-        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Templates
-      </Link>
-
-      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>
-        {template.title}
-      </h1>
-
-      <div className="mt-2.5 flex items-center gap-x-6">
-        <TemplateType inheritColor type={template.type} className="text-muted-foreground" />
-      </div>
-
-      <EditTemplateForm
-        className="mt-8"
-        template={template}
-        user={user}
-        recipients={templateRecipients}
-        fields={templateFields}
-        documentData={templateDocumentData}
-      />
-    </div>
-  );
+export default function TemplatePage({ params }: TemplatePageProps) {
+  return <TemplatePageView params={params} />;
 }

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

@@ -0,0 +1,86 @@
+import React from 'react';
+
+import Link from 'next/link';
+import { redirect } from 'next/navigation';
+
+import { ChevronLeft } from 'lucide-react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getFieldsForTemplate } from '@documenso/lib/server-only/field/get-fields-for-template';
+import { getRecipientsForTemplate } from '@documenso/lib/server-only/recipient/get-recipients-for-template';
+import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
+import { formatTemplatesPath } from '@documenso/lib/utils/teams';
+import type { Team } from '@documenso/prisma/client';
+
+import { TemplateType } from '~/components/formatter/template-type';
+
+import { EditTemplateForm } from './edit-template';
+
+export type TemplatePageViewProps = {
+  params: {
+    id: string;
+  };
+  team?: Team;
+};
+
+export const TemplatePageView = async ({ params, team }: TemplatePageViewProps) => {
+  const { id } = params;
+
+  const templateId = Number(id);
+  const templateRootPath = formatTemplatesPath(team?.url);
+
+  if (!templateId || Number.isNaN(templateId)) {
+    redirect(templateRootPath);
+  }
+
+  const { user } = await getRequiredServerComponentSession();
+
+  const template = await getTemplateById({
+    id: templateId,
+    userId: user.id,
+  }).catch(() => null);
+
+  if (!template || !template.templateDocumentData) {
+    redirect(templateRootPath);
+  }
+
+  const { templateDocumentData } = template;
+
+  const [templateRecipients, templateFields] = await Promise.all([
+    getRecipientsForTemplate({
+      templateId,
+      userId: user.id,
+    }),
+    getFieldsForTemplate({
+      templateId,
+      userId: user.id,
+    }),
+  ]);
+
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+      <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
+        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+        Templates
+      </Link>
+
+      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>
+        {template.title}
+      </h1>
+
+      <div className="mt-2.5 flex items-center gap-x-6">
+        <TemplateType inheritColor type={template.type} className="text-muted-foreground" />
+      </div>
+
+      <EditTemplateForm
+        className="mt-8"
+        template={template}
+        user={user}
+        recipients={templateRecipients}
+        fields={templateFields}
+        documentData={templateDocumentData}
+        templateRootPath={templateRootPath}
+      />
+    </div>
+  );
+};

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

@@ -21,9 +21,15 @@ import { DuplicateTemplateDialog } from './duplicate-template-dialog';
 
 export type DataTableActionDropdownProps = {
   row: Template;
+  templateRootPath: string;
+  teamId?: number;
 };
 
-export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) => {
+export const DataTableActionDropdown = ({
+  row,
+  templateRootPath,
+  teamId,
+}: DataTableActionDropdownProps) => {
   const { data: session } = useSession();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -34,6 +40,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
   }
 
   const isOwner = row.userId === session.user.id;
+  const isTeamTemplate = row.teamId === teamId;
 
   return (
     <DropdownMenu>
@@ -44,20 +51,25 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
       <DropdownMenuContent className="w-52" align="start" forceMount>
         <DropdownMenuLabel>Action</DropdownMenuLabel>
 
-        <DropdownMenuItem disabled={!isOwner} asChild>
-          <Link href={`/templates/${row.id}`}>
+        <DropdownMenuItem disabled={!isOwner && !isTeamTemplate} asChild>
+          <Link href={`${templateRootPath}/${row.id}`}>
             <Edit className="mr-2 h-4 w-4" />
             Edit
           </Link>
         </DropdownMenuItem>
 
-        {/* <DropdownMenuItem disabled={!isOwner} onClick={async () => onDuplicateButtonClick(row.id)}> */}
-        <DropdownMenuItem disabled={!isOwner} onClick={() => setDuplicateDialogOpen(true)}>
+        <DropdownMenuItem
+          disabled={!isOwner && !isTeamTemplate}
+          onClick={() => setDuplicateDialogOpen(true)}
+        >
           <Copy className="mr-2 h-4 w-4" />
           Duplicate
         </DropdownMenuItem>
 
-        <DropdownMenuItem disabled={!isOwner} onClick={() => setDeleteDialogOpen(true)}>
+        <DropdownMenuItem
+          disabled={!isOwner && !isTeamTemplate}
+          onClick={() => setDeleteDialogOpen(true)}
+        >
           <Trash2 className="mr-2 h-4 w-4" />
           Delete
         </DropdownMenuItem>
@@ -65,6 +77,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
 
       <DuplicateTemplateDialog
         id={row.id}
+        teamId={teamId}
         open={isDuplicateDialogOpen}
         onOpenChange={setDuplicateDialogOpen}
       />

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

@@ -28,6 +28,9 @@ type TemplatesDataTableProps = {
   perPage: number;
   page: number;
   totalPages: number;
+  documentRootPath: string;
+  templateRootPath: string;
+  teamId?: number;
 };
 
 export const TemplatesDataTable = ({
@@ -35,6 +38,9 @@ export const TemplatesDataTable = ({
   perPage,
   page,
   totalPages,
+  documentRootPath,
+  templateRootPath,
+  teamId,
 }: TemplatesDataTableProps) => {
   const [isPending, startTransition] = useTransition();
   const updateSearchParams = useUpdateSearchParams();
@@ -70,7 +76,7 @@ export const TemplatesDataTable = ({
         duration: 5000,
       });
 
-      router.push(`/documents/${id}`);
+      router.push(`${documentRootPath}/${id}`);
     } catch (err) {
       toast({
         title: 'Error',
@@ -131,7 +137,12 @@ export const TemplatesDataTable = ({
                     {!isRowLoading && <Plus className="-ml-1 mr-2 h-4 w-4" />}
                     Use Template
                   </Button>
-                  <DataTableActionDropdown row={row.original} />
+
+                  <DataTableActionDropdown
+                    row={row.original}
+                    teamId={teamId}
+                    templateRootPath={templateRootPath}
+                  />
                 </div>
               );
             },

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

@@ -35,20 +35,15 @@ export const DeleteTemplateDialog = ({ id, open, onOpenChange }: DeleteTemplateD
 
       onOpenChange(false);
     },
-  });
-
-  const onDeleteTemplate = async () => {
-    try {
-      await deleteTemplate({ id });
-    } catch {
+    onError: () => {
       toast({
         title: 'Something went wrong',
         description: 'This template could not be deleted at this time. Please try again.',
         variant: 'destructive',
         duration: 7500,
       });
-    }
-  };
+    },
+  });
 
   return (
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
@@ -63,20 +58,18 @@ export const DeleteTemplateDialog = ({ id, open, onOpenChange }: DeleteTemplateD
         </DialogHeader>
 
         <DialogFooter>
-          <div className="flex w-full flex-1 flex-nowrap gap-4">
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => onOpenChange(false)}
-              className="flex-1"
-            >
-              Cancel
-            </Button>
+          <Button
+            type="button"
+            variant="secondary"
+            disabled={isLoading}
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
 
-            <Button type="button" loading={isLoading} onClick={onDeleteTemplate} className="flex-1">
-              Delete
-            </Button>
-          </div>
+          <Button type="button" loading={isLoading} onClick={async () => deleteTemplate({ id })}>
+            Delete
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

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

@@ -14,12 +14,14 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 type DuplicateTemplateDialogProps = {
   id: number;
+  teamId?: number;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
 };
 
 export const DuplicateTemplateDialog = ({
   id,
+  teamId,
   open,
   onOpenChange,
 }: DuplicateTemplateDialogProps) => {
@@ -40,22 +42,15 @@ export const DuplicateTemplateDialog = ({
 
         onOpenChange(false);
       },
+      onError: () => {
+        toast({
+          title: 'Error',
+          description: 'An error occurred while duplicating template.',
+          variant: 'destructive',
+        });
+      },
     });
 
-  const onDuplicate = async () => {
-    try {
-      await duplicateTemplate({
-        templateId: id,
-      });
-    } catch (err) {
-      toast({
-        title: 'Error',
-        description: 'An error occurred while duplicating template.',
-        variant: 'destructive',
-      });
-    }
-  };
-
   return (
     <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
       <DialogContent>
@@ -66,20 +61,27 @@ export const DuplicateTemplateDialog = ({
         </DialogHeader>
 
         <DialogFooter>
-          <div className="flex w-full flex-1 flex-nowrap gap-4">
-            <Button
-              type="button"
-              variant="secondary"
-              onClick={() => onOpenChange(false)}
-              className="flex-1"
-            >
-              Cancel
-            </Button>
+          <Button
+            type="button"
+            disabled={isLoading}
+            variant="secondary"
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
 
-            <Button type="button" loading={isLoading} onClick={onDuplicate} className="flex-1">
-              Duplicate
-            </Button>
-          </div>
+          <Button
+            type="button"
+            loading={isLoading}
+            onClick={async () =>
+              duplicateTemplate({
+                templateId: id,
+                teamId,
+              })
+            }
+          >
+            Duplicate
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

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

@@ -43,8 +43,14 @@ const ZCreateTemplateFormSchema = z.object({
 
 type TCreateTemplateFormSchema = z.infer<typeof ZCreateTemplateFormSchema>;
 
-export const NewTemplateDialog = () => {
+type NewTemplateDialogProps = {
+  teamId?: number;
+  templateRootPath: string;
+};
+
+export const NewTemplateDialog = ({ teamId, templateRootPath }: NewTemplateDialogProps) => {
   const router = useRouter();
+
   const { data: session } = useSession();
   const { toast } = useToast();
 
@@ -99,6 +105,7 @@ export const NewTemplateDialog = () => {
       });
 
       const { id } = await createTemplate({
+        teamId,
         title: values.name ? values.name : file.name,
         templateDocumentDataId,
       });
@@ -112,7 +119,7 @@ export const NewTemplateDialog = () => {
 
       setShowNewTemplateDialog(false);
 
-      void router.push(`/templates/${id}`);
+      router.push(`${templateRootPath}/${id}`);
     } catch {
       toast({
         title: 'Something went wrong',

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

@@ -2,57 +2,17 @@ import React from 'react';
 
 import type { Metadata } from 'next';
 
-import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
-import { getTemplates } from '@documenso/lib/server-only/template/get-templates';
-
-import { TemplatesDataTable } from './data-table-templates';
-import { EmptyTemplateState } from './empty-state';
-import { NewTemplateDialog } from './new-template-dialog';
+import { TemplatesPageView } from './templates-page-view';
+import type { TemplatesPageViewProps } from './templates-page-view';
 
 type TemplatesPageProps = {
-  searchParams?: {
-    page?: number;
-    perPage?: number;
-  };
+  searchParams?: TemplatesPageViewProps['searchParams'];
 };
 
 export const metadata: Metadata = {
   title: 'Templates',
 };
 
-export default async function TemplatesPage({ searchParams = {} }: TemplatesPageProps) {
-  const { user } = await getRequiredServerComponentSession();
-  const page = Number(searchParams.page) || 1;
-  const perPage = Number(searchParams.perPage) || 10;
-
-  const { templates, totalPages } = await getTemplates({
-    userId: user.id,
-    page: page,
-    perPage: perPage,
-  });
-
-  return (
-    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
-      <div className="flex items-baseline justify-between">
-        <h1 className="mb-5 mt-2 truncate text-2xl font-semibold md:text-3xl">Templates</h1>
-
-        <div>
-          <NewTemplateDialog />
-        </div>
-      </div>
-
-      <div className="relative">
-        {templates.length > 0 ? (
-          <TemplatesDataTable
-            templates={templates}
-            page={page}
-            perPage={perPage}
-            totalPages={totalPages}
-          />
-        ) : (
-          <EmptyTemplateState />
-        )}
-      </div>
-    </div>
-  );
+export default function TemplatesPage({ searchParams = {} }: TemplatesPageProps) {
+  return <TemplatesPageView searchParams={searchParams} />;
 }

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

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { findTemplates } from '@documenso/lib/server-only/template/find-templates';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import type { Team } from '@documenso/prisma/client';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+
+import { TemplatesDataTable } from './data-table-templates';
+import { EmptyTemplateState } from './empty-state';
+import { NewTemplateDialog } from './new-template-dialog';
+
+export type TemplatesPageViewProps = {
+  searchParams?: {
+    page?: number;
+    perPage?: number;
+  };
+  team?: Team;
+};
+
+export const TemplatesPageView = async ({ searchParams = {}, team }: TemplatesPageViewProps) => {
+  const { user } = await getRequiredServerComponentSession();
+  const page = Number(searchParams.page) || 1;
+  const perPage = Number(searchParams.perPage) || 10;
+
+  const documentRootPath = formatDocumentsPath(team?.url);
+  const templateRootPath = formatTemplatesPath(team?.url);
+
+  const { templates, totalPages } = await findTemplates({
+    userId: user.id,
+    teamId: team?.id,
+    page: page,
+    perPage: perPage,
+  });
+
+  return (
+    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+      <div className="flex items-baseline justify-between">
+        <div className="flex flex-row items-center">
+          {team && (
+            <Avatar className="dark:border-border mr-3 h-12 w-12 border-2 border-solid border-white">
+              <AvatarFallback className="text-xs text-gray-400">
+                {team.name.slice(0, 1)}
+              </AvatarFallback>
+            </Avatar>
+          )}
+
+          <h1 className="truncate text-2xl font-semibold md:text-3xl">Templates</h1>
+        </div>
+
+        <div>
+          <NewTemplateDialog templateRootPath={templateRootPath} teamId={team?.id} />
+        </div>
+      </div>
+
+      <div className="relative mt-5">
+        {templates.length > 0 ? (
+          <TemplatesDataTable
+            templates={templates}
+            page={page}
+            perPage={perPage}
+            totalPages={totalPages}
+            documentRootPath={documentRootPath}
+            templateRootPath={templateRootPath}
+            teamId={team?.id}
+          />
+        ) : (
+          <EmptyTemplateState />
+        )}
+      </div>
+    </div>
+  );
+};

apps/web/src/app/(share)/share/[slug]/opengraph/route.tsx

@@ -3,6 +3,8 @@ import { NextResponse } from 'next/server';
 
 import { P, match } from 'ts-pattern';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+
 import type { ShareHandlerAPIResponse } from '~/pages/api/share';
 
 export const runtime = 'edge';
@@ -37,7 +39,7 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
     ),
   ]);
 
-  const baseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+  const baseUrl = NEXT_PUBLIC_WEBAPP_URL() || 'http://localhost:3000';
 
   const recipientOrSender: ShareHandlerAPIResponse = await fetch(
     new URL(`/api/share?slug=${slug}`, baseUrl),

apps/web/src/app/(share)/share/[slug]/page.tsx

@@ -1,8 +1,8 @@
-import { Metadata } from 'next';
+import type { Metadata } from 'next';
 import { headers } from 'next/headers';
 import { redirect } from 'next/navigation';
 
-import { APP_BASE_URL } from '@documenso/lib/constants/app';
+import { NEXT_PUBLIC_MARKETING_URL } from '@documenso/lib/constants/app';
 
 type SharePageProps = {
   params: { slug: string };
@@ -16,12 +16,12 @@ export function generateMetadata({ params: { slug } }: SharePageProps) {
       title: 'Documenso - Join the open source signing revolution',
       description: 'I just signed with Documenso!',
       type: 'website',
-      images: [`${APP_BASE_URL}/share/${slug}/opengraph`],
+      images: [`/share/${slug}/opengraph`],
     },
     twitter: {
       site: '@documenso',
       card: 'summary_large_image',
-      images: [`${APP_BASE_URL}/share/${slug}/opengraph`],
+      images: [`/share/${slug}/opengraph`],
       description: 'I just signed with Documenso!',
     },
   } satisfies Metadata;
@@ -35,5 +35,5 @@ export default function SharePage() {
     return null;
   }
 
-  redirect(process.env.NEXT_PUBLIC_MARKETING_URL ?? 'http://localhost:3001');
+  redirect(NEXT_PUBLIC_MARKETING_URL() ?? 'http://localhost:3001');
 }

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

@@ -26,9 +26,10 @@ export type SigningFormProps = {
   document: Document;
   recipient: Recipient;
   fields: Field[];
+  redirectUrl?: string | null;
 };
 
-export const SigningForm = ({ document, recipient, fields }: SigningFormProps) => {
+export const SigningForm = ({ document, recipient, fields, redirectUrl }: SigningFormProps) => {
   const router = useRouter();
   const analytics = useAnalytics();
   const { data: session } = useSession();
@@ -74,7 +75,7 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
       timestamp: new Date().toISOString(),
     });
 
-    router.push(`/sign/${recipient.token}/complete`);
+    redirectUrl ? router.push(redirectUrl) : router.push(`/sign/${recipient.token}/complete`);
   };
 
   return (

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

@@ -118,7 +118,7 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
             <span className="text-muted-foreground">({recipient.email})</span>
           </DialogTitle>
 
-          <div className="py-4">
+          <div>
             <Label htmlFor="signature">Full Name</Label>
 
             <Input

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

@@ -1,3 +1,4 @@
+import { headers } from 'next/headers';
 import { notFound, redirect } from 'next/navigation';
 
 import { match } from 'ts-pattern';
@@ -8,12 +9,12 @@ import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
 import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
-import { getDocumentMetaByDocumentId } from '@documenso/lib/server-only/document/get-document-meta-by-document-id';
 import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
 import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
 import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
 import { getRecipientSignatures } from '@documenso/lib/server-only/recipient/get-recipient-signatures';
 import { symmetricDecrypt } from '@documenso/lib/universal/crypto';
+import { extractNextHeaderRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { DocumentStatus, FieldType, RecipientRole, SigningStatus } from '@documenso/prisma/client';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
@@ -40,24 +41,26 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     return notFound();
   }
 
+  const requestHeaders = Object.fromEntries(headers().entries());
+
+  const requestMetadata = extractNextHeaderRequestMetadata(requestHeaders);
+
   const [document, fields, recipient] = await Promise.all([
     getDocumentAndSenderByToken({
       token,
     }).catch(() => null),
     getFieldsForToken({ token }),
     getRecipientByToken({ token }).catch(() => null),
-    viewedDocument({ token }).catch(() => null),
+    viewedDocument({ token, requestMetadata }).catch(() => null),
   ]);
 
-  const documentMeta = await getDocumentMetaByDocumentId({ id: document!.id }).catch(() => null);
-
   if (!document || !document.documentData || !recipient) {
     return notFound();
   }
 
   const truncatedTitle = truncateTitle(document.title);
 
-  const { documentData } = document;
+  const { documentData, documentMeta } = document;
 
   const { user } = await getServerComponentSession();
 
@@ -65,7 +68,9 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     document.status === DocumentStatus.COMPLETED ||
     recipient.signingStatus === SigningStatus.SIGNED
   ) {
-    redirect(`/sign/${token}/complete`);
+    documentMeta?.redirectUrl
+      ? redirect(documentMeta.redirectUrl)
+      : redirect(`/sign/${token}/complete`);
   }
 
   if (documentMeta?.password) {
@@ -133,7 +138,12 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
           </Card>
 
           <div className="col-span-12 lg:col-span-5 xl:col-span-4">
-            <SigningForm document={document} recipient={recipient} fields={fields} />
+            <SigningForm
+              document={document}
+              recipient={recipient}
+              fields={fields}
+              redirectUrl={documentMeta?.redirectUrl}
+            />
           </div>
         </div>
 

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

@@ -1,7 +1,7 @@
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 
-import DocumentPageComponent from '~/app/(dashboard)/documents/[id]/document-page-view';
+import { DocumentPageView } from '~/app/(dashboard)/documents/[id]/document-page-view';
 
 export type DocumentPageProps = {
   params: {
@@ -16,5 +16,5 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
   const { user } = await getRequiredServerComponentSession();
   const team = await getTeamByUrl({ userId: user.id, teamUrl });
 
-  return <DocumentPageComponent params={params} team={team} />;
+  return <DocumentPageView params={params} team={team} />;
 }

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

@@ -2,7 +2,7 @@ import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 
 import type { DocumentsPageViewProps } from '~/app/(dashboard)/documents/documents-page-view';
-import DocumentsPageView from '~/app/(dashboard)/documents/documents-page-view';
+import { DocumentsPageView } from '~/app/(dashboard)/documents/documents-page-view';
 
 export type TeamsDocumentPageProps = {
   params: {

apps/web/src/app/(teams)/t/[teamUrl]/settings/team-transfer-status.tsx

@@ -18,7 +18,7 @@ export type TeamTransferStatusProps = {
   className?: string;
   currentUserTeamRole: TeamMemberRole;
   teamId: number;
-  transferVerification: TeamTransferVerification | null;
+  transferVerification: Pick<TeamTransferVerification, 'email' | 'expiresAt' | 'name'> | null;
 };
 
 export const TeamTransferStatus = ({

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+
+import type { TemplatePageViewProps } from '~/app/(dashboard)/templates/[id]/template-page-view';
+import { TemplatePageView } from '~/app/(dashboard)/templates/[id]/template-page-view';
+
+type TeamTemplatePageProps = {
+  params: TemplatePageViewProps['params'] & {
+    teamUrl: string;
+  };
+};
+
+export default async function TeamTemplatePage({ params }: TeamTemplatePageProps) {
+  const { teamUrl } = params;
+
+  const { user } = await getRequiredServerComponentSession();
+  const team = await getTeamByUrl({ userId: user.id, teamUrl });
+
+  return <TemplatePageView params={params} team={team} />;
+}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
+
+import type { TemplatesPageViewProps } from '~/app/(dashboard)/templates/templates-page-view';
+import { TemplatesPageView } from '~/app/(dashboard)/templates/templates-page-view';
+
+type TeamTemplatesPageProps = {
+  searchParams?: TemplatesPageViewProps['searchParams'];
+  params: {
+    teamUrl: string;
+  };
+};
+
+export default async function TeamTemplatesPage({
+  searchParams = {},
+  params,
+}: TeamTemplatesPageProps) {
+  const { teamUrl } = params;
+
+  const { user } = await getRequiredServerComponentSession();
+  const team = await getTeamByUrl({ userId: user.id, teamUrl });
+
+  return <TemplatesPageView searchParams={searchParams} team={team} />;
+}

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

@@ -2,6 +2,8 @@ import type { Metadata } from 'next';
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
+import { env } from 'next-runtime-env';
+
 import { IS_GOOGLE_SSO_ENABLED } from '@documenso/lib/constants/auth';
 import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
 
@@ -18,6 +20,8 @@ type SignInPageProps = {
 };
 
 export default function SignInPage({ searchParams }: SignInPageProps) {
+  const NEXT_PUBLIC_DISABLE_SIGNUP = env('NEXT_PUBLIC_DISABLE_SIGNUP');
+
   const rawEmail = typeof searchParams.email === 'string' ? searchParams.email : undefined;
   const email = rawEmail ? decryptSecondaryData(rawEmail) : null;
 
@@ -39,7 +43,7 @@ export default function SignInPage({ searchParams }: SignInPageProps) {
         isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
       />
 
-      {process.env.NEXT_PUBLIC_DISABLE_SIGNUP !== 'true' && (
+      {NEXT_PUBLIC_DISABLE_SIGNUP !== 'true' && (
         <p className="text-muted-foreground mt-6 text-center text-sm">
           Don't have an account?{' '}
           <Link href="/signup" className="text-primary duration-200 hover:opacity-70">

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

@@ -2,6 +2,8 @@ import type { Metadata } from 'next';
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
+import { env } from 'next-runtime-env';
+
 import { IS_GOOGLE_SSO_ENABLED } from '@documenso/lib/constants/auth';
 import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
 
@@ -18,7 +20,9 @@ type SignUpPageProps = {
 };
 
 export default function SignUpPage({ searchParams }: SignUpPageProps) {
-  if (process.env.NEXT_PUBLIC_DISABLE_SIGNUP === 'true') {
+  const NEXT_PUBLIC_DISABLE_SIGNUP = env('NEXT_PUBLIC_DISABLE_SIGNUP');
+
+  if (NEXT_PUBLIC_DISABLE_SIGNUP === 'true') {
     redirect('/signin');
   }
 

apps/web/src/app/(unauthenticated)/unverified-account/page.tsx

@@ -0,0 +1,27 @@
+import { Mails } from 'lucide-react';
+
+import { SendConfirmationEmailForm } from '~/components/forms/send-confirmation-email';
+
+export default function UnverifiedAccount() {
+  return (
+    <div className="flex w-full items-start">
+      <div className="mr-4 mt-1 hidden md:block">
+        <Mails className="text-primary h-10 w-10" strokeWidth={2} />
+      </div>
+      <div className="">
+        <h2 className="text-2xl font-bold md:text-4xl">Confirm email</h2>
+
+        <p className="text-muted-foreground mt-4">
+          To gain access to your account, please confirm your email address by clicking on the
+          confirmation link from your inbox.
+        </p>
+
+        <p className="text-muted-foreground mt-4">
+          If you don't find the confirmation link in your inbox, you can request a new one below.
+        </p>
+
+        <SendConfirmationEmailForm />
+      </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/app/layout.tsx

@@ -2,8 +2,11 @@ import { Suspense } from 'react';
 
 import { Caveat, Inter } from 'next/font/google';
 
+import { PublicEnvScript } from 'next-runtime-env';
+
 import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
 import { LocaleProvider } from '@documenso/lib/client-only/providers/locale';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getServerComponentAllFlags } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
 import { getLocale } from '@documenso/lib/server-only/headers/get-locale';
 import { TrpcProvider } from '@documenso/trpc/react';
@@ -19,32 +22,35 @@ import './globals.css';
 const fontInter = Inter({ subsets: ['latin'], variable: '--font-sans' });
 const fontCaveat = Caveat({ subsets: ['latin'], variable: '--font-signature' });
 
-export const metadata = {
-  title: {
-    template: '%s - Documenso',
-    default: 'Documenso',
-  },
-  description:
-    'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
-  keywords:
-    'Documenso, open source, DocuSign alternative, document signing, open signing infrastructure, open-source community, fast signing, beautiful signing, smart templates',
-  authors: { name: 'Documenso, Inc.' },
-  robots: 'index, follow',
-  openGraph: {
-    title: 'Documenso - The Open Source DocuSign Alternative',
+export function generateMetadata() {
+  return {
+    title: {
+      template: '%s - Documenso',
+      default: 'Documenso',
+    },
     description:
       'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
-    type: 'website',
-    images: [`${process.env.NEXT_PUBLIC_WEBAPP_URL}/opengraph-image.jpg`],
-  },
-  twitter: {
-    site: '@documenso',
-    card: 'summary_large_image',
-    images: [`${process.env.NEXT_PUBLIC_WEBAPP_URL}/opengraph-image.jpg`],
-    description:
-      'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
-  },
-};
+    keywords:
+      'Documenso, open source, DocuSign alternative, document signing, open signing infrastructure, open-source community, fast signing, beautiful signing, smart templates',
+    authors: { name: 'Documenso, Inc.' },
+    robots: 'index, follow',
+    metadataBase: new URL(NEXT_PUBLIC_WEBAPP_URL() ?? 'http://localhost:3000'),
+    openGraph: {
+      title: 'Documenso - The Open Source DocuSign Alternative',
+      description:
+        'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
+      type: 'website',
+      images: ['/opengraph-image.jpg'],
+    },
+    twitter: {
+      site: '@documenso',
+      card: 'summary_large_image',
+      images: ['/opengraph-image.jpg'],
+      description:
+        'Join Documenso, the open signing infrastructure, and get a 10x better signing experience. Pricing starts at $30/mo. forever! Sign in now and enjoy a faster, smarter, and more beautiful document signing process. Integrates with your favorite tools, customizable, and expandable. Support our mission and become a part of our open-source community.',
+    },
+  };
+}
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const flags = await getServerComponentAllFlags();
@@ -62,6 +68,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
         <link rel="manifest" href="/site.webmanifest" />
+        <PublicEnvScript />
       </head>
 
       <Suspense>

apps/web/src/components/(dashboard)/avatar/avatar-with-recipient.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
 import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
 import type { Recipient } from '@documenso/prisma/client';
@@ -25,7 +26,7 @@ export function AvatarWithRecipient({ recipient }: AvatarWithRecipientProps) {
       return;
     }
 
-    void copy(`${process.env.NEXT_PUBLIC_WEBAPP_URL}/sign/${recipient.token}`).then(() => {
+    void copy(`${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`).then(() => {
       toast({
         title: 'Copied to clipboard',
         description: 'The signing link has been copied to your clipboard.',

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

@@ -52,24 +52,22 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
       {...props}
     >
       <div className="flex items-baseline gap-x-6">
-        {navigationLinks
-          .filter(({ href }) => href !== '/templates' || rootHref === '') // Remove templates for team pages.
-          .map(({ href, label }) => (
-            <Link
-              key={href}
-              href={`${rootHref}${href}`}
-              className={cn(
-                'text-muted-foreground dark:text-muted focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
-                {
-                  'text-foreground dark:text-muted-foreground': pathname?.startsWith(
-                    `${rootHref}${href}`,
-                  ),
-                },
-              )}
-            >
-              {label}
-            </Link>
-          ))}
+        {navigationLinks.map(({ href, label }) => (
+          <Link
+            key={href}
+            href={`${rootHref}${href}`}
+            className={cn(
+              'text-muted-foreground dark:text-muted focus-visible:ring-ring ring-offset-background rounded-md font-medium leading-5 hover:opacity-80 focus-visible:outline-none focus-visible:ring-2',
+              {
+                'text-foreground dark:text-muted-foreground': pathname?.startsWith(
+                  `${rootHref}${href}`,
+                ),
+              },
+            )}
+          >
+            {label}
+          </Link>
+        ))}
       </div>
 
       <CommandMenu open={open} onOpenChange={setOpen} />

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

@@ -6,7 +6,7 @@ import { usePathname } from 'next/navigation';
 import { CheckCircle2, ChevronsUpDown, Plus, Settings2 } from 'lucide-react';
 import { signOut } from 'next-auth/react';
 
-import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { TEAM_MEMBER_ROLE_MAP, TEAM_URL_REGEX } from '@documenso/lib/constants/teams';
 import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
 import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
@@ -71,6 +71,22 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
     return TEAM_MEMBER_ROLE_MAP[team.currentTeamMember.role];
   };
 
+  /**
+   * Formats the redirect URL so we can switch between documents and templates page
+   * seemlessly between teams and personal accounts.
+   */
+  const formatRedirectUrlOnSwitch = (teamUrl?: string) => {
+    const baseUrl = teamUrl ? `/t/${teamUrl}/` : '/';
+
+    const currentPathname = (pathname ?? '/').replace(TEAM_URL_REGEX, '');
+
+    if (currentPathname === '/templates') {
+      return `${baseUrl}templates`;
+    }
+
+    return baseUrl;
+  };
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -100,7 +116,7 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
             <DropdownMenuLabel>Personal</DropdownMenuLabel>
 
             <DropdownMenuItem asChild>
-              <Link href="/">
+              <Link href={formatRedirectUrlOnSwitch()}>
                 <AvatarWithText
                   avatarFallback={formatAvatarFallback()}
                   primaryText={user.name}
@@ -152,7 +168,7 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
 
             {teams.map((team) => (
               <DropdownMenuItem asChild key={team.id}>
-                <Link href={`/t/${team.url}`}>
+                <Link href={formatRedirectUrlOnSwitch(team.url)}>
                   <AvatarWithText
                     avatarFallback={formatAvatarFallback(team.name)}
                     primaryText={team.name}

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

@@ -42,7 +42,7 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
       href: '/settings/profile',
       text: 'Settings',
     },
-  ].filter(({ text, href }) => text !== 'Templates' || href === '/templates'); // Filter out templates for teams.
+  ];
 
   return (
     <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>

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/(teams)/dialogs/transfer-team-dialog.tsx

@@ -238,7 +238,7 @@ export const TransferTeamDialog = ({
                 <Alert variant="neutral">
                   <AlertDescription>
                     <ul className="list-outside list-disc space-y-2 pl-4">
-                      {IS_BILLING_ENABLED && (
+                      {IS_BILLING_ENABLED() && (
                         // Temporary removed.
                         // <li>
                         //   {form.getValues('clearPaymentMethods')

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

@@ -48,7 +48,7 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </Link>
 
-      {IS_BILLING_ENABLED && (
+      {IS_BILLING_ENABLED() && (
         <Link href={billingPath}>
           <Button
             variant="ghost"

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

@@ -56,7 +56,7 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </Link>
 
-      {IS_BILLING_ENABLED && (
+      {IS_BILLING_ENABLED() && (
         <Link href={billingPath}>
           <Button
             variant="ghost"

apps/web/src/components/(teams)/tables/teams-member-page-data-table.tsx

@@ -67,7 +67,7 @@ export const TeamsMemberPageDataTable = ({
         <Tabs value={currentTab} className="flex-shrink-0 overflow-x-auto">
           <TabsList>
             <TabsTrigger className="min-w-[60px]" value="members" asChild>
-              <Link href={pathname ?? '/'}>All</Link>
+              <Link href={pathname ?? '/'}>Active</Link>
             </TabsTrigger>
 
             <TabsTrigger className="min-w-[60px]" value="invites" asChild>

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

@@ -1,14 +1,12 @@
 import { useMemo } from 'react';
 
-import { useRouter } from 'next/navigation';
-
 import { zodResolver } from '@hookform/resolvers/zod';
-import { flushSync } from 'react-dom';
 import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 import { renderSVG } from 'uqr';
 import { z } from 'zod';
 
+import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -54,14 +52,16 @@ export const EnableAuthenticatorAppDialog = ({
   open,
   onOpenChange,
 }: EnableAuthenticatorAppDialogProps) => {
-  const router = useRouter();
   const { toast } = useToast();
 
   const { mutateAsync: setupTwoFactorAuthentication, data: setupTwoFactorAuthenticationData } =
     trpc.twoFactorAuthentication.setup.useMutation();
 
-  const { mutateAsync: enableTwoFactorAuthentication, data: enableTwoFactorAuthenticationData } =
-    trpc.twoFactorAuthentication.enable.useMutation();
+  const {
+    mutateAsync: enableTwoFactorAuthentication,
+    data: enableTwoFactorAuthenticationData,
+    isLoading: isEnableTwoFactorAuthenticationDataLoading,
+  } = trpc.twoFactorAuthentication.enable.useMutation();
 
   const setupTwoFactorAuthenticationForm = useForm<TSetupTwoFactorAuthenticationForm>({
     defaultValues: {
@@ -115,6 +115,19 @@ export const EnableAuthenticatorAppDialog = ({
     }
   };
 
+  const downloadRecoveryCodes = () => {
+    if (enableTwoFactorAuthenticationData && enableTwoFactorAuthenticationData.recoveryCodes) {
+      const blob = new Blob([enableTwoFactorAuthenticationData.recoveryCodes.join('\n')], {
+        type: 'text/plain',
+      });
+
+      downloadFile({
+        filename: 'documenso-2FA-recovery-codes.txt',
+        data: blob,
+      });
+    }
+  };
+
   const onEnableTwoFactorAuthenticationFormSubmit = async ({
     token,
   }: TEnableTwoFactorAuthenticationForm) => {
@@ -136,14 +149,6 @@ export const EnableAuthenticatorAppDialog = ({
     }
   };
 
-  const onCompleteClick = () => {
-    flushSync(() => {
-      onOpenChange(false);
-    });
-
-    router.refresh();
-  };
-
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
@@ -270,9 +275,16 @@ export const EnableAuthenticatorAppDialog = ({
                 <RecoveryCodeList recoveryCodes={enableTwoFactorAuthenticationData.recoveryCodes} />
               )}
 
-              <div className="mt-4 flex w-full flex-row-reverse items-center justify-between">
-                <Button type="button" onClick={() => onCompleteClick()}>
-                  Complete
+              <div className="mt-4 flex flex-row-reverse items-center gap-2">
+                <Button onClick={() => onOpenChange(false)}>Complete</Button>
+
+                <Button
+                  variant="secondary"
+                  onClick={downloadRecoveryCodes}
+                  disabled={!enableTwoFactorAuthenticationData?.recoveryCodes}
+                  loading={isEnableTwoFactorAuthenticationDataLoading}
+                >
+                  Download
                 </Button>
               </div>
             </div>

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

@@ -5,6 +5,7 @@ import { useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
 
+import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -42,8 +43,11 @@ export type ViewRecoveryCodesDialogProps = {
 export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCodesDialogProps) => {
   const { toast } = useToast();
 
-  const { mutateAsync: viewRecoveryCodes, data: viewRecoveryCodesData } =
-    trpc.twoFactorAuthentication.viewRecoveryCodes.useMutation();
+  const {
+    mutateAsync: viewRecoveryCodes,
+    data: viewRecoveryCodesData,
+    isLoading: isViewRecoveryCodesDataLoading,
+  } = trpc.twoFactorAuthentication.viewRecoveryCodes.useMutation();
 
   const viewRecoveryCodesForm = useForm<TViewRecoveryCodesForm>({
     defaultValues: {
@@ -62,6 +66,19 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
     return 'view';
   }, [viewRecoveryCodesData, isViewRecoveryCodesSubmitting]);
 
+  const downloadRecoveryCodes = () => {
+    if (viewRecoveryCodesData && viewRecoveryCodesData.recoveryCodes) {
+      const blob = new Blob([viewRecoveryCodesData.recoveryCodes.join('\n')], {
+        type: 'text/plain',
+      });
+
+      downloadFile({
+        filename: 'documenso-2FA-recovery-codes.txt',
+        data: blob,
+      });
+    }
+  };
+
   const onViewRecoveryCodesFormSubmit = async ({ password }: TViewRecoveryCodesForm) => {
     try {
       await viewRecoveryCodes({ password });
@@ -139,8 +156,17 @@ export const ViewRecoveryCodesDialog = ({ open, onOpenChange }: ViewRecoveryCode
                 <RecoveryCodeList recoveryCodes={viewRecoveryCodesData.recoveryCodes} />
               )}
 
-              <div className="mt-4 flex flex-row-reverse items-center justify-between">
+              <div className="mt-4 flex flex-row-reverse items-center gap-2">
                 <Button onClick={() => onOpenChange(false)}>Complete</Button>
+
+                <Button
+                  variant="secondary"
+                  disabled={!viewRecoveryCodesData?.recoveryCodes}
+                  loading={isViewRecoveryCodesDataLoading}
+                  onClick={downloadRecoveryCodes}
+                >
+                  Download
+                </Button>
               </div>
             </div>
           ))

apps/web/src/components/forms/send-confirmation-email.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  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 const ZSendConfirmationEmailFormSchema = z.object({
+  email: z.string().email().min(1),
+});
+
+export type TSendConfirmationEmailFormSchema = z.infer<typeof ZSendConfirmationEmailFormSchema>;
+
+export type SendConfirmationEmailFormProps = {
+  className?: string;
+};
+
+export const SendConfirmationEmailForm = ({ className }: SendConfirmationEmailFormProps) => {
+  const { toast } = useToast();
+
+  const form = useForm<TSendConfirmationEmailFormSchema>({
+    values: {
+      email: '',
+    },
+    resolver: zodResolver(ZSendConfirmationEmailFormSchema),
+  });
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const { mutateAsync: sendConfirmationEmail } = trpc.profile.sendConfirmationEmail.useMutation();
+
+  const onFormSubmit = async ({ email }: TSendConfirmationEmailFormSchema) => {
+    try {
+      await sendConfirmationEmail({ email });
+
+      toast({
+        title: 'Confirmation email sent',
+        description:
+          'A confirmation email has been sent, and it should arrive in your inbox shortly.',
+        duration: 5000,
+      });
+
+      form.reset();
+    } catch (err) {
+      toast({
+        title: 'An error occurred while sending your confirmation email',
+        description: 'Please try again and make sure you enter the correct email address.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        className={cn('mt-6 flex w-full flex-col gap-y-4', className)}
+        onSubmit={form.handleSubmit(onFormSubmit)}
+      >
+        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email address</FormLabel>
+                <FormControl>
+                  <Input type="email" {...field} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          <FormMessage />
+
+          <Button size="lg" type="submit" disabled={isSubmitting} loading={isSubmitting}>
+            Send confirmation email
+          </Button>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

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

@@ -2,6 +2,8 @@
 
 import { useState } from 'react';
 
+import { useRouter } from 'next/navigation';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
@@ -38,6 +40,8 @@ const ERROR_MESSAGES: Partial<Record<keyof typeof ErrorCode, string>> = {
     'This account appears to be using a social login method, please sign in using that method',
   [ErrorCode.INCORRECT_TWO_FACTOR_CODE]: 'The two-factor authentication code provided is incorrect',
   [ErrorCode.INCORRECT_TWO_FACTOR_BACKUP_CODE]: 'The backup code provided is incorrect',
+  [ErrorCode.UNVERIFIED_EMAIL]:
+    'This account has not been verified. Please verify your account before signing in.',
 };
 
 const TwoFactorEnabledErrorCode = ErrorCode.TWO_FACTOR_MISSING_CREDENTIALS;
@@ -63,6 +67,7 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
   const { toast } = useToast();
   const [isTwoFactorAuthenticationDialogOpen, setIsTwoFactorAuthenticationDialogOpen] =
     useState(false);
+  const router = useRouter();
 
   const [twoFactorAuthenticationMethod, setTwoFactorAuthenticationMethod] = useState<
     'totp' | 'backup'
@@ -130,6 +135,17 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
 
         const errorMessage = ERROR_MESSAGES[result.error];
 
+        if (result.error === ErrorCode.UNVERIFIED_EMAIL) {
+          router.push(`/unverified-account`);
+
+          toast({
+            title: 'Unable to sign in',
+            description: errorMessage ?? 'An unknown error occurred',
+          });
+
+          return;
+        }
+
         toast({
           variant: 'destructive',
           title: 'Unable to sign in',

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

@@ -1,5 +1,7 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
@@ -55,6 +57,7 @@ export type SignUpFormProps = {
 export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: SignUpFormProps) => {
   const { toast } = useToast();
   const analytics = useAnalytics();
+  const router = useRouter();
 
   const form = useForm<TSignUpFormSchema>({
     values: {
@@ -74,10 +77,13 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
     try {
       await signup({ name, email, password, signature });
 
-      await signIn('credentials', {
-        email,
-        password,
-        callbackUrl: SIGN_UP_REDIRECT_PATH,
+      router.push(`/unverified-account`);
+
+      toast({
+        title: 'Registration Successful',
+        description:
+          'You have successfully registered. Please verify your account by clicking on the link you received in the email.',
+        duration: 5000,
       });
 
       analytics.capture('App: User Sign Up', {

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/helpers/get-asset-buffer.ts

@@ -1,3 +1,5 @@
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+
 /**
  * getAssetBuffer is used to retrieve array buffers for various assets
  * that are hosted in the `public` folder.
@@ -8,7 +10,7 @@
  * @param path The path to the asset, relative to the `public` folder.
  */
 export const getAssetBuffer = async (path: string) => {
-  const baseUrl = process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000';
+  const baseUrl = NEXT_PUBLIC_WEBAPP_URL() || 'http://localhost:3000';
 
   return fetch(new URL(path, baseUrl)).then(async (res) => res.arrayBuffer());
 };

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;

lint-staged.config.cjs

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

package.json

@@ -47,7 +47,6 @@
     "apps/*",
     "packages/*"
   ],
-  "dependencies": {},
   "overrides": {
     "next-auth": {
       "next": "14.0.3"
@@ -55,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} />;
+};