fix: return the recipient as an array to match other formats from zapier (#971)

Return the recipient as an array to match the other formats for Zapier.
Otherwise, Zaps with the "DOCUMENT_OPENED" hooks won't work.

All the other webhooks return the "Recipient" field as an array.

README.md

@@ -1,4 +1,4 @@
->We are nominated for a Product Hunt Gold Kitty 😺✨ and appreciate any support: https://documen.so/kitty
+> 🚨 It is Launch Week #2 - Day 1: We launches teams 🎉 https://documen.so/day1
 
 <img src="https://github.com/documenso/documenso/assets/13398220/a643571f-0239-46a6-a73e-6bef38d1228b" alt="Documenso Logo">
 

apps/marketing/content/blog/early-adopters.mdx

@@ -24,6 +24,8 @@ tags:
   </figcaption>
 </figure>
 
+> 🔔 UPDATE: We launched <a href="https://documen.so/day1" target="_blank">teams</a> and the early adopters plan will be replaced by the new teams pricing as soon as all availible early adopters seats are filled.
+
 ## Community-Driven Development
 
 As we ramp up hiring and development speed for Documenso, I want to discuss how we plan to build its core version.

apps/marketing/content/blog/launch-week-2-day-1.mdx

@@ -0,0 +1,64 @@
+---
+title: Launch Week II - Day 1 - Teams
+description: Teams for Documenso are here. And they come free for early adopters!
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-02-26
+tags:
+  - Launch Week
+  - Teams
+  - Early Adopter Perks
+---
+
+<video
+  id="vid"
+  width="100%"
+  src="https://github.com/documenso/design/assets/1309312/12a85ec7-20bb-4813-9714-e4da42c9cfba"
+  autoPlay
+  loop
+  muted
+></video>
+
+> TLDR; Docucmenso now supports teams that share documents, templates and a team mail address. Early Adopter get UNLIMITED<sup>1</sup> Users.
+
+## Kicking off Launch Week II - "Connected"
+
+The day has come! Roughly 5 months after kicked off our first launch week with open sourcing our design and Malfunction Mania, Launch Week #2 is here 🎉 This Launch Week's theme is "connected", since this is all about connecting humans, machines and documents.
+
+Working with documents and getting that signature is a team sport. This is why we are kicking it off today with a very long-awaited feature: Documenso now supports teams!
+
+## Introducing Teams for Documenso
+
+You can now create teams next to your personal account: Simply invite your colleagues, and you can include everyone you like in working with your documents. With teams, you can:
+
+- Send unlimited signature requests with unlimited recipients
+- Create, view, edit and sign documents owned by the team
+- Define a dedicated team email, to receive signing requests into a team inbox for the owner to sign
+- Manage team roles: Member (Create+Edit), Managers (+Manage Team Members), Owner (+Transfer Team +Delete Team + Sign Documents sent to team email)
+
+## Pricing
+
+Together with Teams, we are announcing the new teams pricing:
+
+- $10 per seat per month
+- 5 seats minimum
+- You can add seats dynamically as needed
+
+This pricing will take effect, as soon as the early adopter seats run out. Want to check out teams: [https://documen.so/teams](https://documen.so/teams).
+
+## Early Adopter Perks
+
+There is one more point on pricing I have been looking forward to for a long time:
+
+All early adopter plans now include **UNLIMITED teams and users**<sup>1</sup> . We appreciate your support so far very much, and I'm happy to announce this first of more early adopter perks to come. We have roughly 48 early adopter plans left, so if you plan to onboard your team, now is a great time to [grab your early adopter seat.](https://documen.so/claim-early-adopters-plan)
+
+We are eager to hear from all teams users how you like this addition and what we can add to make it even better. Connect with us on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments! We're always here, and we would love to hear from you :)
+
+> 🚨 We need you help to help us to make this the biggest launch week yet: <a href="https://twitter.com/intent/tweet?text=It's @Documenso Launch Week Day 1! Teams just dropped. Check it out https://documen.so/day1 🚀"> Support us on Twitter </a> or anywhere to spread awareness for open signing! The best posts will receive merch codes 👀
+
+Best from Hamburg\
+Timur
+
+\
+[1] Within reason. If you are unsure what that means, feel free to contact hi@documenso.com and ask for clarification if it's more than 100.

apps/marketing/content/blog/launch-week-2-day-2.mdx

@@ -0,0 +1,76 @@
+---
+title: Launch Week II - Day 2 - Templates
+description: Templates help you prepare regular documents faster. And you can share them with your team!
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-02-27
+tags:
+  - Launch Week
+  - Templates
+---
+
+<video
+  id="vid"
+  width="100%"
+  src="https://github.com/documenso/design/assets/1309312/c9504db1-26b7-4033-88ed-a95cabd02e92"
+  autoPlay
+  loop
+  muted
+></video>
+
+> TLDR; You can now reuse documents via templates. More field types coming soon as well.
+
+## Introducing Templates
+
+It's day 2 of Launch Week, everybody 🙌 After introducing [Teams](https://documenso.com/blog/launch-week-2-day-1) yesterday, today we are looking at making Documenso faster for daily use:
+We are launching templates for Documenso! Templates are an easy way to reuse documents you send out often with just a few clicks. With templates, you can:
+
+<figure>
+  <MdxNextImage
+    src="/blog/quickfill.png"
+    width="1260"
+    height="630"
+    alt="Template recipients quick fill view"
+  />
+
+  <figcaption className="text-center">
+    Quickly fill out recipients, when creating from a template
+  </figcaption>
+</figure>
+
+- Save often-uploaded documents for reuse
+- Pre-define fields, so you just have to send the document
+- Quickly fill out recipients and roles for new documents
+- Share templates with your team to make working together even easier
+
+<figure>
+  <MdxNextImage
+    src="/blog/template.png"
+    width="1260"
+    height="630"
+    alt="Create from template view"
+  />
+
+  <figcaption className="text-center">
+  POV: You are a diligent german and create custom receipts with Documenso
+  </figcaption>
+</figure>
+
+## Pricing
+
+Templates are **included in all Documenso Plans!** That includes our free tier: The limit of 5 documents per month still applies, but you are free to reach it with less friction using templates. Sharing templates with other users is only possible with the teams plan. If you want to share templates with people not in your team, we might have something coming up later this week 👀
+
+## What's Next for Templates
+
+We have a lot of great stuff coming up for templates as well:
+
+- More Field Types are in the pipeline
+- Sharing Templates Externally 👀
+
+Check out templates [here](https://documen.so/templates) and let us know what you think and what we can improve. Which field types are you missing? Connect with us on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments! We're always here and would love to hear from you :)
+
+> 🚨 We need you help to help us to make this the biggest launch week yet: <a href="https://twitter.com/intent/tweet?text=It's @Documenso Launch Week Day 2! They just launched templates, and I'm pumped 🎉🚀🚀🚀. Check it out https://documen.so/day2"> Support us on Twitter </a> or anywhere to spread awareness for open signing! The best posts will receive merch codes 👀
+
+Best from Hamburg\
+Timur

apps/marketing/content/blog/launch-week-2-day-3.mdx

@@ -0,0 +1,53 @@
+---
+title: Launch Week II - Day 3 - API
+description: Documenso's mission is to create a plattform developers all around the world can build upon. Today we are releasing the first version of our public API, included in all plans!
+authorName: 'Timur Ercan'
+authorImage: '/blog/blog-author-timur.jpeg'
+authorRole: 'Co-Founder'
+date: 2024-02-28
+tags:
+  - Launch Week
+  - API
+---
+
+<video
+  id="vid"
+  width="100%"
+  src="https://github.com/documenso/design/assets/1309312/cb74d6cb-a127-4cac-a166-ad6b56c6140d"
+  autoPlay
+  loop
+  muted
+></video>
+
+> TLDR; The public API is now availible for all plans.
+
+## Introducing the public Documenso API
+
+Launch. Week. Day. 3 🎉 Documenso's mission is to create a platform that developers all around the world can build upon. Today we are releasing the first version of our public API, and we are pumped. Since this is the first version, we focused on the basics. With the new API you can:
+
+- Get Documents (Individual or all Accessible)
+- Upload Documents
+- Delete Documents
+- Create Documents from Templates
+- Trigger Sending Documents for Singing
+
+You can check out the detailed API documentation here:
+
+> API DOCUMENTATION: [https://app.documenso.com/api/v1/openapi](https://app.documenso.com/api/v1/openapi)
+
+## Pricing
+
+We are building Documenso to be an open and extendable platform; therefore the API is included in all current plans. The API is authenticated via auth tokens, which every user can create at no extra cost, as can teams. Existing limits still apply (i.e., the number of included documents for the free plan). While we don't have all the details yet, we don't intend to price the API usage in itself (rather the accounts using it) since we want you to build on Documenso without being smothered by API costs.
+
+> Try the API here for free: [https://documen.so/api](https://documen.so/api)
+
+## What's next for the API
+
+You tell us. This is by far the most requested feature, so we would like to hear from you. What should we add? How can we integrate even better?
+
+Connect with us on [Twitter / X](https://twitter.com/eltimuro) (DM open) or [Discord](https://documen.so/discord) if you have any questions or comments! We're always here and would love to hear from you :)
+
+> 🚨 We need you help to help us to make this the biggest launch week yet: <a href="https://twitter.com/intent/tweet?text=It's @Documenso Launch Week Day 3! The public API is here 👀 Check it out https://documen.so/day3"> Support us on Twitter </a> or anywhere to spread awareness for open signing! The best posts will receive merch codes 👀
+
+Best from Hamburg\
+Timur

apps/marketing/src/app/(marketing)/layout.tsx

@@ -2,8 +2,12 @@
 
 import React, { useEffect, useState } from 'react';
 
+import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 
+import launchWeekTwoImage from '@documenso/assets/images/background-lw-2.png';
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 
 import { Footer } from '~/components/(marketing)/footer';
@@ -17,6 +21,10 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
   const [scrollY, setScrollY] = useState(0);
   const pathname = usePathname();
 
+  const { getFlag } = useFeatureFlags();
+
+  const showProfilesAnnouncementBar = getFlag('marketing_profiles_announcement_bar');
+
   useEffect(() => {
     const onScroll = () => {
       setScrollY(window.scrollY);
@@ -38,6 +46,31 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
           'bg-background/50 backdrop-blur-md': scrollY > 5,
         })}
       >
+        {showProfilesAnnouncementBar && (
+          <div className="relative inline-flex w-full items-center justify-center overflow-hidden px-4 py-2.5">
+            <div className="absolute inset-0 -z-[1]">
+              <Image
+                src={launchWeekTwoImage}
+                className="h-full w-full object-cover"
+                alt="Launch Week 2"
+              />
+            </div>
+
+            <div className="text-background text-center text-sm">
+              Claim your documenso public profile username now!{' '}
+              <span className="hidden font-semibold md:inline">documenso.com/u/yourname</span>
+              <div className="mt-1.5 block md:ml-4 md:mt-0 md:inline-block">
+                <a
+                  href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=marketing-announcement-bar`}
+                  className="bg-background text-foreground rounded-md px-2.5 py-1 text-xs font-medium duration-300"
+                >
+                  Claim Now
+                </a>
+              </div>
+            </div>
+          </div>
+        )}
+
         <Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
       </div>
 

apps/marketing/src/app/(marketing)/singleplayer/[token]/success/page.tsx

@@ -27,7 +27,7 @@ export default async function SinglePlayerModeSuccessPage({
     return notFound();
   }
 
-  const signatures = await getRecipientSignatures({ recipientId: document.Recipient.id });
+  const signatures = await getRecipientSignatures({ recipientId: document.Recipient[0].id });
 
   return <SinglePlayerModeSuccess document={document} signatures={signatures} />;
 }

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

@@ -191,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={`${NEXT_PUBLIC_WEBAPP_URL()}/signup`}
+            href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=singleplayer`}
             target="_blank"
             className="hover:text-foreground/80 font-semibold transition-colors"
           >

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

@@ -40,9 +40,9 @@ export const Callout = ({ starCount }: CalloutProps) => {
         className="rounded-full bg-transparent backdrop-blur-sm"
         onClick={onSignUpClick}
       >
-        Get the Early Adopters Plan
-        <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
-          $30/mo. forever!
+        Claim Community Plan
+        <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs font-medium">
+          $30/mo
         </span>
       </Button>
 

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Image from 'next/image';
 

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

@@ -9,6 +9,7 @@ import Link from 'next/link';
 import LogoImage from '@documenso/assets/logo.png';
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
 
 import { HamburgerMenu } from './mobile-hamburger';
 import { MobileNavigation } from './mobile-navigation';
@@ -68,12 +69,18 @@ export const Header = ({ className, ...props }: HeaderProps) => {
         </Link>
 
         <Link
-          href="https://app.documenso.com/signin"
+          href="https://app.documenso.com/signin?utm_source=marketing-header"
           target="_blank"
           className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
         >
           Sign in
         </Link>
+
+        <Button className="rounded-full" size="sm" asChild>
+          <Link href="https://app.documenso.com/signup?utm_source=marketing-header" target="_blank">
+            Sign up
+          </Link>
+        </Button>
       </div>
 
       <HamburgerMenu

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

@@ -3,7 +3,8 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { Variants, motion } from 'framer-motion';
+import type { Variants } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { usePlausible } from 'next-plausible';
 import { LuGithub } from 'react-icons/lu';
 import { match } from 'ts-pattern';
@@ -113,9 +114,9 @@ export const Hero = ({ className, ...props }: HeroProps) => {
             className="rounded-full bg-transparent backdrop-blur-sm"
             onClick={onSignUpClick}
           >
-            Get the Early Adopters Plan
-            <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs">
-              $30/mo. forever!
+            Claim Community Plan
+            <span className="bg-primary dark:text-background -mr-2.5 ml-2.5 rounded-full px-2 py-1.5 text-xs font-medium">
+              $30/mo
             </span>
           </Button>
 
@@ -224,8 +225,7 @@ export const Hero = ({ className, ...props }: HeroProps) => {
               <span className="bg-primary text-black">
                 (in a non-legally binding, but heartfelt way)
               </span>{' '}
-              and lock in the early supporter plan for forever, including everything we build this
-              year.
+              and lock in the community plan for forever, including everything we build this year.
             </p>
 
             <div className="flex h-24 items-center">

apps/marketing/src/components/(marketing)/mobile-navigation.tsx

@@ -47,9 +47,13 @@ export const MENU_NAVIGATION_LINKS = [
     text: 'Privacy',
   },
   {
-    href: 'https://app.documenso.com/signin',
+    href: 'https://app.documenso.com/signin?utm_source=marketing-header',
     text: 'Sign in',
   },
+  {
+    href: 'https://app.documenso.com/signup?utm_source=marketing-header',
+    text: 'Sign up',
+  },
 ];
 
 export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigationProps) => {

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

@@ -83,7 +83,11 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           </p>
 
           <Button className="rounded-full text-base" asChild>
-            <Link href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup`} target="_blank" className="mt-6">
+            <Link
+              href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=pricing-free-plan`}
+              target="_blank"
+              className="mt-6"
+            >
               Signup Now
             </Link>
           </Button>
@@ -114,35 +118,31 @@ export const PricingTable = ({ className, ...props }: PricingTableProps) => {
           </p>
 
           <Button className="mt-6 rounded-full text-base" asChild>
-            <Link href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup`} target="_blank">
+            <Link
+              href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=pricing-community`}
+              target="_blank"
+            >
               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" rel="noreferrer">
-                The Early Adopter Deal:
+            <p className="text-foreground py-4">
+              <a
+                href="https://documen.so/early-adopters-pricing-page"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Limited Time Offer: <span className="text-documenso-700">Read More</span>
               </a>
             </p>
-            <p className="text-foreground py-4">Join the movement</p>
-            <p className="text-foreground py-4">Simple signing solution</p>
+            <p className="text-foregro‚und py-4">Unlimited Teams</p>
+            <p className="text-foregro‚und py-4">Unlimited Users</p>
+            <p className="text-foregro‚und py-4">Unlimited Documents per month</p>
+            <p className="text-foreground py-4">Includes all upcoming features</p>
             <p className="text-foreground py-4">Email, Discord and Slack assistance</p>
-            <p className="text-foreground py-4">
-              <strong>
-                {' '}
-                <a
-                  href="https://documenso.com/blog/early-adopters"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  Includes all upcoming features
-                </a>
-              </strong>
-            </p>
-            <p className="text-foreground py-4">Fixed, straightforward pricing</p>
           </div>
+          <div className="flex-1" />
         </div>
 
         <div

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

@@ -55,7 +55,7 @@ export const SinglePlayerModeSuccess = ({
 
       <SigningCard3D
         className="mt-8"
-        name={document.Recipient.name || document.Recipient.email}
+        name={document.Recipient[0].name || document.Recipient[0].email}
         signature={signatures.at(0)}
         signingCelebrationImage={signingCelebration}
       />
@@ -65,7 +65,7 @@ export const SinglePlayerModeSuccess = ({
           <div className="grid w-full max-w-sm grid-cols-2 gap-4">
             <DocumentShareButton
               documentId={document.id}
-              token={document.Recipient.token}
+              token={document.Recipient[0].token}
               className="flex-1 bg-transparent backdrop-blur-sm"
             />
 
@@ -86,7 +86,7 @@ export const SinglePlayerModeSuccess = ({
       <p className="text-muted-foreground/60 mt-16 text-center text-sm">
         Create a{' '}
         <Link
-          href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup`}
+          href={`${NEXT_PUBLIC_WEBAPP_URL()}/signup?utm_source=singleplayer`}
           target="_blank"
           className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
         >

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

@@ -199,7 +199,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
             className="bg-foreground/5 col-span-12 flex flex-col rounded-2xl p-6 lg:col-span-5"
             onSubmit={handleSubmit(onFormSubmit)}
           >
-            <h3 className="text-2xl font-semibold">Sign up for the early adopters plan</h3>
+            <h3 className="text-xl font-semibold">Sign up to Community Plan</h3>
             <p className="text-muted-foreground mt-2 text-xs">
               with Timur Ercan & Lucas Smith from Documenso
             </p>
@@ -208,7 +208,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
 
             <AnimatePresence>
               <motion.div key="email">
-                <label htmlFor="email" className="text-foreground text-lg font-semibold lg:text-xl">
+                <label htmlFor="email" className="text-foreground font-medium ">
                   What’s your email?
                 </label>
 
@@ -220,7 +220,7 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                       <Input
                         id="email"
                         type="email"
-                        placeholder=""
+                        placeholder="your@example.com"
                         className="bg-background w-full pr-16"
                         disabled={isSubmitting}
                         onKeyDown={(e) =>
@@ -265,11 +265,8 @@ export const Widget = ({ className, children, ...props }: WidgetProps) => {
                     transform: 'translateX(25%)',
                   }}
                 >
-                  <label
-                    htmlFor="name"
-                    className="text-foreground text-lg font-semibold lg:text-xl"
-                  >
-                    and your name?
+                  <label htmlFor="name" className="text-foreground font-medium ">
+                    And your name?
                   </label>
 
                   <Controller

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

@@ -1,7 +1,10 @@
 import type { Metadata } from 'next';
 
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+
 import type { DocumentsPageViewProps } from './documents-page-view';
 import { DocumentsPageView } from './documents-page-view';
+import { UpcomingProfileClaimTeaser } from './upcoming-profile-claim-teaser';
 
 export type DocumentsPageProps = {
   searchParams?: DocumentsPageViewProps['searchParams'];
@@ -11,6 +14,12 @@ export const metadata: Metadata = {
   title: 'Documents',
 };
 
-export default function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
-  return <DocumentsPageView searchParams={searchParams} />;
+export default async function DocumentsPage({ searchParams = {} }: DocumentsPageProps) {
+  const { user } = await getRequiredServerComponentSession();
+  return (
+    <>
+      <UpcomingProfileClaimTeaser user={user} />
+      <DocumentsPageView searchParams={searchParams} />
+    </>
+  );
 }

apps/web/src/app/(dashboard)/documents/upcoming-profile-claim-teaser.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+
+import type { User } from '@documenso/prisma/client';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { ClaimPublicProfileDialogForm } from '~/components/forms/public-profile-claim-dialog';
+
+export type UpcomingProfileClaimTeaserProps = {
+  user: User;
+};
+
+export const UpcomingProfileClaimTeaser = ({ user }: UpcomingProfileClaimTeaserProps) => {
+  const { toast } = useToast();
+
+  const [open, setOpen] = useState(false);
+  const [claimed, setClaimed] = useState(false);
+
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open && !claimed) {
+        toast({
+          title: 'Claim your profile later',
+          description: 'You can claim your profile later on by going to your profile settings!',
+        });
+      }
+
+      setOpen(open);
+      localStorage.setItem('app.hasShownProfileClaimDialog', 'true');
+    },
+    [claimed, toast],
+  );
+
+  useEffect(() => {
+    const hasShownProfileClaimDialog =
+      localStorage.getItem('app.hasShownProfileClaimDialog') === 'true';
+
+    if (!user.url && !hasShownProfileClaimDialog) {
+      onOpenChange(true);
+    }
+  }, [onOpenChange, user.url]);
+
+  return (
+    <ClaimPublicProfileDialogForm
+      open={open}
+      onOpenChange={onOpenChange}
+      onClaimed={() => setClaimed(true)}
+      user={user}
+    />
+  );
+};

apps/web/src/app/(dashboard)/settings/profile/claim-profile-alert-dialog.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useState } from 'react';
+
+import type { User } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { ClaimPublicProfileDialogForm } from '~/components/forms/public-profile-claim-dialog';
+
+export type ClaimProfileAlertDialogProps = {
+  className?: string;
+  user: User;
+};
+
+export const ClaimProfileAlertDialog = ({ className, user }: ClaimProfileAlertDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Alert
+        className={cn(
+          'flex flex-col items-center justify-between gap-4 p-6 md:flex-row',
+          className,
+        )}
+        variant="neutral"
+      >
+        <div>
+          <AlertTitle>Claim your profile</AlertTitle>
+          <AlertDescription className="mr-2">
+            Profiles are coming soon! Claim your profile username now to reserve your corner of the
+            signing revolution.
+          </AlertDescription>
+        </div>
+
+        <div className="flex-shrink-0">
+          <Button onClick={() => setOpen(true)}>Claim Now</Button>
+        </div>
+      </Alert>
+
+      <ClaimPublicProfileDialogForm open={open} onOpenChange={setOpen} user={user} />
+    </>
+  );
+};

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

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

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

@@ -1,5 +1,8 @@
 import type { Metadata } from 'next';
 
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+
+import ActivityPageBackButton from '../../../../../components/(dashboard)/settings/layout/activity-back';
 import { UserSecurityActivityDataTable } from './user-security-activity-data-table';
 
 export const metadata: Metadata = {
@@ -9,11 +12,14 @@ export const metadata: Metadata = {
 export default function SettingsSecurityActivityPage() {
   return (
     <div>
-      <h3 className="text-2xl font-semibold">Security activity</h3>
-
-      <p className="text-muted-foreground mt-2 text-sm">
-        View all recent security activity related to your account.
-      </p>
+      <SettingsHeader
+        title="Security activity"
+        subtitle="View all recent security activity related to your account."
+      >
+        <div>
+          <ActivityPageBackButton />
+        </div>
+      </SettingsHeader>
 
       <hr className="my-4" />
 

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

@@ -1,5 +1,6 @@
 import { DateTime } from 'luxon';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 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';
@@ -18,7 +19,15 @@ export default async function ApiTokensPage() {
       <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.
+        On this page, you can create new API tokens and manage the existing ones. <br />
+        You can view our swagger docs{' '}
+        <a
+          className="text-primary underline"
+          href={`${NEXT_PUBLIC_WEBAPP_URL()}/api/v1/openapi`}
+          target="_blank"
+        >
+          here
+        </a>
       </p>
 
       <hr className="my-4" />

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

@@ -0,0 +1,201 @@
+'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,
+  FormDescription,
+  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 { TriggerMultiSelectCombobox } from '~/components/(dashboard)/settings/webhooks/trigger-multiselect-combobox';
+
+const ZEditWebhookFormSchema = ZEditWebhookMutationSchema.omit({ id: true });
+
+type TEditWebhookFormSchema = z.infer<typeof ZEditWebhookFormSchema>;
+
+export type WebhookPageOptions = {
+  params: {
+    id: string;
+  };
+};
+
+export default function WebhookPage({ params }: WebhookPageOptions) {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const { data: webhook, isLoading } = trpc.webhook.getWebhookById.useQuery(
+    {
+      id: 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: 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 max-w-xl flex-col gap-y-6"
+            disabled={form.formState.isSubmitting}
+          >
+            <div className="flex flex-col-reverse gap-4 md:flex-row">
+              <FormField
+                control={form.control}
+                name="webhookUrl"
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormLabel required>Webhook URL</FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} />
+                    </FormControl>
+
+                    <FormDescription>
+                      The URL for Documenso to send webhook events to.
+                    </FormDescription>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="enabled"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Enabled</FormLabel>
+
+                    <div>
+                      <FormControl>
+                        <Switch
+                          className="bg-background"
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                    </div>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="eventTriggers"
+              render={({ field: { onChange, value } }) => (
+                <FormItem className="flex flex-col gap-2">
+                  <FormLabel required>Triggers</FormLabel>
+                  <FormControl>
+                    <TriggerMultiSelectCombobox
+                      listValues={value}
+                      onChange={(values: string[]) => {
+                        onChange(values);
+                      }}
+                    />
+                  </FormControl>
+
+                  <FormDescription>
+                    The events that will trigger a webhook to be sent to your URL.
+                  </FormDescription>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="secret"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Secret</FormLabel>
+                  <FormControl>
+                    <PasswordInput className="bg-background" {...field} value={field.value ?? ''} />
+                  </FormControl>
+
+                  <FormDescription>
+                    A secret that will be sent to your URL so you can verify that the request has
+                    been sent by Documenso.
+                  </FormDescription>
+                  <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,101 @@
+'use client';
+
+import Link from 'next/link';
+
+import { Loader } from 'lucide-react';
+import { DateTime } from 'luxon';
+
+import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Badge } from '@documenso/ui/primitives/badge';
+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';
+import { LocaleDate } from '~/components/formatter/locale-date';
+
+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={cn(
+                'border-border rounded-lg border p-4',
+                !webhook.enabled && 'bg-muted/40',
+              )}
+            >
+              <div className="flex flex-col gap-x-4 sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                  <div className="truncate font-mono text-xs">{webhook.id}</div>
+
+                  <div className="mt-1.5 flex items-center gap-4">
+                    <h5
+                      className="max-w-[30rem] truncate text-sm sm:max-w-[18rem]"
+                      title={webhook.webhookUrl}
+                    >
+                      {webhook.webhookUrl}
+                    </h5>
+
+                    <Badge variant={webhook.enabled ? 'neutral' : 'warning'} size="small">
+                      {webhook.enabled ? 'Enabled' : 'Disabled'}
+                    </Badge>
+                  </div>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    Listening to{' '}
+                    {webhook.eventTriggers
+                      .map((trigger) => toFriendlyWebhookEventName(trigger))
+                      .join(', ')}
+                  </p>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    Created on{' '}
+                    <LocaleDate date={webhook.createdAt} format={DateTime.DATETIME_FULL} />
+                  </p>
+                </div>
+
+                <div className="mt-4 flex flex-shrink-0 gap-4 sm:mt-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>
+      )}
+    </div>
+  );
+}

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

@@ -1,5 +1,6 @@
 import { DateTime } from 'luxon';
 
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getTeamTokens } from '@documenso/lib/server-only/public-api/get-all-team-tokens';
 import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
@@ -29,7 +30,15 @@ export default async function ApiTokensPage({ params }: ApiTokensPageProps) {
       <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.
+        On this page, you can create new API tokens and manage the existing ones. <br />
+        You can view our swagger docs{' '}
+        <a
+          className="text-primary underline"
+          href={`${NEXT_PUBLIC_WEBAPP_URL()}/api/v1/openapi`}
+          target="_blank"
+        >
+          here
+        </a>
       </p>
 
       <hr className="my-4" />

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

@@ -0,0 +1,206 @@
+'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,
+  FormDescription,
+  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 { TriggerMultiSelectCombobox } from '~/components/(dashboard)/settings/webhooks/trigger-multiselect-combobox';
+import { useCurrentTeam } from '~/providers/team';
+
+const ZEditWebhookFormSchema = ZEditWebhookMutationSchema.omit({ id: true });
+
+type TEditWebhookFormSchema = z.infer<typeof ZEditWebhookFormSchema>;
+
+export type WebhookPageOptions = {
+  params: {
+    id: string;
+  };
+};
+
+export default function WebhookPage({ params }: WebhookPageOptions) {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const team = useCurrentTeam();
+
+  const { data: webhook, isLoading } = trpc.webhook.getWebhookById.useQuery(
+    {
+      id: params.id,
+      teamId: team.id,
+    },
+    { enabled: !!params.id && !!team.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: params.id,
+        teamId: team.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 max-w-xl flex-col gap-y-6"
+            disabled={form.formState.isSubmitting}
+          >
+            <div className="flex flex-col-reverse gap-4 md:flex-row">
+              <FormField
+                control={form.control}
+                name="webhookUrl"
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormLabel required>Webhook URL</FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} />
+                    </FormControl>
+
+                    <FormDescription>
+                      The URL for Documenso to send webhook events to.
+                    </FormDescription>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="enabled"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Enabled</FormLabel>
+
+                    <div>
+                      <FormControl>
+                        <Switch
+                          className="bg-background"
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                    </div>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="eventTriggers"
+              render={({ field: { onChange, value } }) => (
+                <FormItem className="flex flex-col gap-2">
+                  <FormLabel required>Triggers</FormLabel>
+                  <FormControl>
+                    <TriggerMultiSelectCombobox
+                      listValues={value}
+                      onChange={(values: string[]) => {
+                        onChange(values);
+                      }}
+                    />
+                  </FormControl>
+
+                  <FormDescription>
+                    The events that will trigger a webhook to be sent to your URL.
+                  </FormDescription>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="secret"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Secret</FormLabel>
+                  <FormControl>
+                    <PasswordInput className="bg-background" {...field} value={field.value ?? ''} />
+                  </FormControl>
+
+                  <FormDescription>
+                    A secret that will be sent to your URL so you can verify that the request has
+                    been sent by Documenso.
+                  </FormDescription>
+                  <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/(teams)/t/[teamUrl]/settings/webhooks/page.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import Link from 'next/link';
+
+import { Loader } from 'lucide-react';
+import { DateTime } from 'luxon';
+
+import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Badge } from '@documenso/ui/primitives/badge';
+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';
+import { LocaleDate } from '~/components/formatter/locale-date';
+import { useCurrentTeam } from '~/providers/team';
+
+export default function WebhookPage() {
+  const team = useCurrentTeam();
+
+  const { data: webhooks, isLoading } = trpc.webhook.getTeamWebhooks.useQuery({
+    teamId: team.id,
+  });
+
+  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={cn(
+                'border-border rounded-lg border p-4',
+                !webhook.enabled && 'bg-muted/40',
+              )}
+            >
+              <div className="flex flex-col gap-x-4 sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                  <div className="truncate font-mono text-xs">{webhook.id}</div>
+
+                  <div className="mt-1.5 flex items-center gap-2">
+                    <h5
+                      className="max-w-[30rem] truncate text-sm sm:max-w-[18rem]"
+                      title={webhook.webhookUrl}
+                    >
+                      {webhook.webhookUrl}
+                    </h5>
+
+                    <Badge variant={webhook.enabled ? 'neutral' : 'warning'} size="small">
+                      {webhook.enabled ? 'Enabled' : 'Disabled'}
+                    </Badge>
+                  </div>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    Listening to{' '}
+                    {webhook.eventTriggers
+                      .map((trigger) => toFriendlyWebhookEventName(trigger))
+                      .join(', ')}
+                  </p>
+
+                  <p className="text-muted-foreground mt-2 text-xs">
+                    Created on{' '}
+                    <LocaleDate date={webhook.createdAt} format={DateTime.DATETIME_FULL} />
+                  </p>
+                </div>
+
+                <div className="mt-4 flex flex-shrink-0 gap-4 sm:mt-0">
+                  <Button asChild variant="outline">
+                    <Link href={`/t/${team.url}/settings/webhooks/${webhook.id}`}>Edit</Link>
+                  </Button>
+                  <DeleteWebhookDialog webhook={webhook}>
+                    <Button variant="destructive">Delete</Button>
+                  </DeleteWebhookDialog>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/app/(unauthenticated)/check-email/page.tsx

@@ -9,17 +9,19 @@ export const metadata: Metadata = {
 
 export default function ForgotPasswordPage() {
   return (
-    <div>
-      <h1 className="text-4xl font-semibold">Email sent!</h1>
+    <div className="w-screen max-w-lg px-4">
+      <div className="w-full">
+        <h1 className="text-4xl font-semibold">Email sent!</h1>
 
-      <p className="text-muted-foreground mb-4 mt-2 text-sm">
-        A password reset email has been sent, if you have an account you should see it in your inbox
-        shortly.
-      </p>
+        <p className="text-muted-foreground mb-4 mt-2 text-sm">
+          A password reset email has been sent, if you have an account you should see it in your
+          inbox shortly.
+        </p>
 
-      <Button asChild>
-        <Link href="/signin">Return to sign in</Link>
-      </Button>
+        <Button asChild>
+          <Link href="/signin">Return to sign in</Link>
+        </Button>
+      </div>
     </div>
   );
 }

apps/web/src/app/(unauthenticated)/forgot-password/page.tsx

@@ -9,22 +9,24 @@ export const metadata: Metadata = {
 
 export default function ForgotPasswordPage() {
   return (
-    <div>
-      <h1 className="text-4xl font-semibold">Forgot your password?</h1>
+    <div className="w-screen max-w-lg px-4">
+      <div className="w-full">
+        <h1 className="text-3xl font-semibold">Forgot your password?</h1>
 
-      <p className="text-muted-foreground mt-2 text-sm">
-        No worries, it happens! Enter your email and we'll email you a special link to reset your
-        password.
-      </p>
+        <p className="text-muted-foreground mt-2 text-sm">
+          No worries, it happens! Enter your email and we'll email you a special link to reset your
+          password.
+        </p>
 
-      <ForgotPasswordForm className="mt-4" />
+        <ForgotPasswordForm className="mt-4" />
 
-      <p className="text-muted-foreground mt-6 text-center text-sm">
-        Remembered your password?{' '}
-        <Link href="/signin" className="text-primary duration-200 hover:opacity-70">
-          Sign In
-        </Link>
-      </p>
+        <p className="text-muted-foreground mt-6 text-center text-sm">
+          Remembered your password?{' '}
+          <Link href="/signin" className="text-primary duration-200 hover:opacity-70">
+            Sign In
+          </Link>
+        </p>
+      </div>
     </div>
   );
 }

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

@@ -10,9 +10,9 @@ type UnauthenticatedLayoutProps = {
 
 export default function UnauthenticatedLayout({ children }: UnauthenticatedLayoutProps) {
   return (
-    <main className="bg-sand-100 relative flex min-h-screen flex-col items-center justify-center overflow-hidden  px-4 py-12 md:p-12 lg:p-24">
-      <div className="relative flex w-full max-w-md items-center gap-x-24">
-        <div className="absolute -inset-96 -z-[1] flex items-center justify-center opacity-50">
+    <main className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden  px-4 py-12 md:p-12 lg:p-24">
+      <div>
+        <div className="absolute -inset-[min(600px,max(400px,60vw))] -z-[1] flex items-center justify-center opacity-70">
           <Image
             src={backgroundPattern}
             alt="background pattern"
@@ -20,7 +20,7 @@ export default function UnauthenticatedLayout({ children }: UnauthenticatedLayou
           />
         </div>
 
-        <div className="w-full">{children}</div>
+        <div className="relative w-full">{children}</div>
       </div>
     </main>
   );

apps/web/src/app/(unauthenticated)/reset-password/[token]/page.tsx

@@ -19,19 +19,21 @@ export default async function ResetPasswordPage({ params: { token } }: ResetPass
   }
 
   return (
-    <div className="w-full">
-      <h1 className="text-4xl font-semibold">Reset Password</h1>
+    <div className="w-screen max-w-lg px-4">
+      <div className="w-full">
+        <h1 className="text-4xl font-semibold">Reset Password</h1>
 
-      <p className="text-muted-foreground mt-2 text-sm">Please choose your new password </p>
+        <p className="text-muted-foreground mt-2 text-sm">Please choose your new password </p>
 
-      <ResetPasswordForm token={token} className="mt-4" />
+        <ResetPasswordForm token={token} className="mt-4" />
 
-      <p className="text-muted-foreground mt-6 text-center text-sm">
-        Don't have an account?{' '}
-        <Link href="/signup" className="text-primary duration-200 hover:opacity-70">
-          Sign up
-        </Link>
-      </p>
+        <p className="text-muted-foreground mt-6 text-center text-sm">
+          Don't have an account?{' '}
+          <Link href="/signup" className="text-primary duration-200 hover:opacity-70">
+            Sign up
+          </Link>
+        </p>
+      </div>
     </div>
   );
 }

apps/web/src/app/(unauthenticated)/reset-password/page.tsx

@@ -9,17 +9,19 @@ export const metadata: Metadata = {
 
 export default function ResetPasswordPage() {
   return (
-    <div>
-      <h1 className="text-4xl font-semibold">Unable to reset password</h1>
+    <div className="w-screen max-w-lg px-4">
+      <div className="w-full">
+        <h1 className="text-3xl font-semibold">Unable to reset password</h1>
 
-      <p className="text-muted-foreground mt-2 text-sm">
-        The token you have used to reset your password is either expired or it never existed. If you
-        have still forgotten your password, please request a new reset link.
-      </p>
+        <p className="text-muted-foreground mt-2 text-sm">
+          The token you have used to reset your password is either expired or it never existed. If
+          you have still forgotten your password, please request a new reset link.
+        </p>
 
-      <Button className="mt-4" asChild>
-        <Link href="/signin">Return to sign in</Link>
-      </Button>
+        <Button className="mt-4" asChild>
+          <Link href="/signin">Return to sign in</Link>
+        </Button>
+      </div>
     </div>
   );
 }

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

@@ -30,36 +30,27 @@ export default function SignInPage({ searchParams }: SignInPageProps) {
   }
 
   return (
-    <div>
-      <h1 className="text-4xl font-semibold">Sign in to your account</h1>
+    <div className="w-screen max-w-lg px-4">
+      <div className="border-border dark:bg-background z-10 rounded-xl border bg-neutral-100 p-6">
+        <h1 className="text-2xl font-semibold">Sign in to your account</h1>
 
-      <p className="text-muted-foreground/60 mt-2 text-sm">
-        Welcome back, we are lucky to have you.
-      </p>
-
-      <SignInForm
-        className="mt-4"
-        initialEmail={email || undefined}
-        isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
-      />
-
-      {NEXT_PUBLIC_DISABLE_SIGNUP !== 'true' && (
-        <p className="text-muted-foreground mt-6 text-center text-sm">
-          Don't have an account?{' '}
-          <Link href="/signup" className="text-primary duration-200 hover:opacity-70">
-            Sign up
-          </Link>
+        <p className="text-muted-foreground mt-2 text-sm">
+          Welcome back, we are lucky to have you.
         </p>
-      )}
 
-      <p className="mt-2.5 text-center">
-        <Link
-          href="/forgot-password"
-          className="text-muted-foreground text-sm duration-200 hover:opacity-70"
-        >
-          Forgot your password?
-        </Link>
-      </p>
+        <hr className="-mx-6 my-4" />
+
+        <SignInForm initialEmail={email || undefined} isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED} />
+
+        {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-documenso-700 duration-200 hover:opacity-70">
+              Sign up
+            </Link>
+          </p>
+        )}
+      </div>
     </div>
   );
 }

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

@@ -1,5 +1,4 @@
 import type { Metadata } from 'next';
-import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
 import { env } from 'next-runtime-env';
@@ -7,7 +6,7 @@ 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';
 
-import { SignUpForm } from '~/components/forms/signup';
+import { SignUpFormV2 } from '~/components/forms/v2/signup';
 
 export const metadata: Metadata = {
   title: 'Sign Up',
@@ -34,26 +33,10 @@ export default function SignUpPage({ searchParams }: SignUpPageProps) {
   }
 
   return (
-    <div>
-      <h1 className="text-4xl font-semibold">Create a new account</h1>
-
-      <p className="text-muted-foreground/60 mt-2 text-sm">
-        Create your account and start using state-of-the-art document signing. Open and beautiful
-        signing is within your grasp.
-      </p>
-
-      <SignUpForm
-        className="mt-4"
-        initialEmail={email || undefined}
-        isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
-      />
-
-      <p className="text-muted-foreground mt-6 text-center text-sm">
-        Already have an account?{' '}
-        <Link href="/signin" className="text-primary duration-200 hover:opacity-70">
-          Sign in instead
-        </Link>
-      </p>
-    </div>
+    <SignUpFormV2
+      className="w-screen max-w-screen-2xl px-4 md:px-16"
+      initialEmail={email || undefined}
+      isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
+    />
   );
 }

apps/web/src/app/(unauthenticated)/team/invite/[token]/page.tsx

@@ -29,16 +29,18 @@ export default async function AcceptInvitationPage({
 
   if (!teamMemberInvite) {
     return (
-      <div>
-        <h1 className="text-4xl font-semibold">Invalid token</h1>
+      <div className="w-screen max-w-lg px-4">
+        <div className="w-full">
+          <h1 className="text-4xl font-semibold">Invalid token</h1>
 
-        <p className="text-muted-foreground mb-4 mt-2 text-sm">
-          This token is invalid or has expired. Please contact your team for a new invitation.
-        </p>
+          <p className="text-muted-foreground mb-4 mt-2 text-sm">
+            This token is invalid or has expired. Please contact your team for a new invitation.
+          </p>
 
-        <Button asChild>
-          <Link href="/">Return</Link>
-        </Button>
+          <Button asChild>
+            <Link href="/">Return</Link>
+          </Button>
+        </div>
       </div>
     );
   }

apps/web/src/app/(unauthenticated)/team/verify/email/[token]/page.tsx

@@ -22,16 +22,18 @@ export default async function VerifyTeamEmailPage({ params: { token } }: VerifyT
 
   if (!teamEmailVerification || isTokenExpired(teamEmailVerification.expiresAt)) {
     return (
-      <div>
-        <h1 className="text-4xl font-semibold">Invalid link</h1>
+      <div className="w-screen max-w-lg px-4">
+        <div className="w-full">
+          <h1 className="text-4xl font-semibold">Invalid link</h1>
 
-        <p className="text-muted-foreground mb-4 mt-2 text-sm">
-          This link is invalid or has expired. Please contact your team to resend a verification.
-        </p>
+          <p className="text-muted-foreground mb-4 mt-2 text-sm">
+            This link is invalid or has expired. Please contact your team to resend a verification.
+          </p>
 
-        <Button asChild>
-          <Link href="/">Return</Link>
-        </Button>
+          <Button asChild>
+            <Link href="/">Return</Link>
+          </Button>
+        </div>
       </div>
     );
   }

apps/web/src/app/(unauthenticated)/team/verify/transfer/[token]/page.tsx

@@ -25,17 +25,19 @@ export default async function VerifyTeamTransferPage({
 
   if (!teamTransferVerification || isTokenExpired(teamTransferVerification.expiresAt)) {
     return (
-      <div>
-        <h1 className="text-4xl font-semibold">Invalid link</h1>
+      <div className="w-screen max-w-lg px-4">
+        <div className="w-full">
+          <h1 className="text-4xl font-semibold">Invalid link</h1>
 
-        <p className="text-muted-foreground mb-4 mt-2 text-sm">
-          This link is invalid or has expired. Please contact your team to resend a transfer
-          request.
-        </p>
+          <p className="text-muted-foreground mb-4 mt-2 text-sm">
+            This link is invalid or has expired. Please contact your team to resend a transfer
+            request.
+          </p>
 
-        <Button asChild>
-          <Link href="/">Return</Link>
-        </Button>
+          <Button asChild>
+            <Link href="/">Return</Link>
+          </Button>
+        </div>
       </div>
     );
   }

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

@@ -4,23 +4,25 @@ import { SendConfirmationEmailForm } from '~/components/forms/send-confirmation-
 
 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>
+    <div className="w-screen max-w-lg px-4">
+      <div className="flex 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">
+            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>
+          <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 />
+          <SendConfirmationEmailForm />
+        </div>
       </div>
     </div>
   );

apps/web/src/app/(unauthenticated)/verify-email/[token]/page.tsx

@@ -14,15 +14,17 @@ export type PageProps = {
 export default async function VerifyEmailPage({ params: { token } }: PageProps) {
   if (!token) {
     return (
-      <div className="w-full">
-        <div className="mb-4 text-red-300">
-          <XOctagon />
-        </div>
+      <div className="w-screen max-w-lg px-4">
+        <div className="w-full">
+          <div className="mb-4 text-red-300">
+            <XOctagon />
+          </div>
 
-        <h2 className="text-4xl font-semibold">No token provided</h2>
-        <p className="text-muted-foreground mt-2 text-base">
-          It seems that there is no token provided. Please check your email and try again.
-        </p>
+          <h2 className="text-4xl font-semibold">No token provided</h2>
+          <p className="text-muted-foreground mt-2 text-base">
+            It seems that there is no token provided. Please check your email and try again.
+          </p>
+        </div>
       </div>
     );
   }
@@ -31,22 +33,24 @@ export default async function VerifyEmailPage({ params: { token } }: PageProps)
 
   if (verified === null) {
     return (
-      <div className="flex w-full items-start">
-        <div className="mr-4 mt-1 hidden md:block">
-          <AlertTriangle className="h-10 w-10 text-yellow-500" strokeWidth={2} />
-        </div>
+      <div className="w-screen max-w-lg px-4">
+        <div className="flex w-full items-start">
+          <div className="mr-4 mt-1 hidden md:block">
+            <AlertTriangle className="h-10 w-10 text-yellow-500" strokeWidth={2} />
+          </div>
 
-        <div>
-          <h2 className="text-2xl font-bold md:text-4xl">Something went wrong</h2>
+          <div>
+            <h2 className="text-2xl font-bold md:text-4xl">Something went wrong</h2>
 
-          <p className="text-muted-foreground mt-4">
-            We were unable to verify your email. If your email is not verified already, please try
-            again.
-          </p>
+            <p className="text-muted-foreground mt-4">
+              We were unable to verify your email. If your email is not verified already, please try
+              again.
+            </p>
 
-          <Button className="mt-4" asChild>
-            <Link href="/">Go back home</Link>
-          </Button>
+            <Button className="mt-4" asChild>
+              <Link href="/">Go back home</Link>
+            </Button>
+          </div>
         </div>
       </div>
     );
@@ -54,17 +58,41 @@ export default async function VerifyEmailPage({ params: { token } }: PageProps)
 
   if (!verified) {
     return (
+      <div className="w-screen max-w-lg px-4">
+        <div className="flex w-full items-start">
+          <div className="mr-4 mt-1 hidden md:block">
+            <XCircle className="text-destructive h-10 w-10" strokeWidth={2} />
+          </div>
+
+          <div>
+            <h2 className="text-2xl font-bold md:text-4xl">Your token has expired!</h2>
+
+            <p className="text-muted-foreground mt-4">
+              It seems that the provided token has expired. We've just sent you another token,
+              please check your email and try again.
+            </p>
+
+            <Button className="mt-4" asChild>
+              <Link href="/">Go back home</Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-screen max-w-lg px-4">
       <div className="flex w-full items-start">
         <div className="mr-4 mt-1 hidden md:block">
-          <XCircle className="text-destructive h-10 w-10" strokeWidth={2} />
+          <CheckCircle2 className="h-10 w-10 text-green-500" strokeWidth={2} />
         </div>
 
         <div>
-          <h2 className="text-2xl font-bold md:text-4xl">Your token has expired!</h2>
+          <h2 className="text-2xl font-bold md:text-4xl">Email Confirmed!</h2>
 
           <p className="text-muted-foreground mt-4">
-            It seems that the provided token has expired. We've just sent you another token, please
-            check your email and try again.
+            Your email has been successfully confirmed! You can now use all features of Documenso.
           </p>
 
           <Button className="mt-4" asChild>
@@ -72,26 +100,6 @@ export default async function VerifyEmailPage({ params: { token } }: PageProps)
           </Button>
         </div>
       </div>
-    );
-  }
-
-  return (
-    <div className="flex w-full items-start">
-      <div className="mr-4 mt-1 hidden md:block">
-        <CheckCircle2 className="h-10 w-10 text-green-500" strokeWidth={2} />
-      </div>
-
-      <div>
-        <h2 className="text-2xl font-bold md:text-4xl">Email Confirmed!</h2>
-
-        <p className="text-muted-foreground mt-4">
-          Your email has been successfully confirmed! You can now use all features of Documenso.
-        </p>
-
-        <Button className="mt-4" asChild>
-          <Link href="/">Go back home</Link>
-        </Button>
-      </div>
     </div>
   );
 }

apps/web/src/app/(unauthenticated)/verify-email/page.tsx

@@ -11,22 +11,26 @@ export const metadata: Metadata = {
 
 export default function EmailVerificationWithoutTokenPage() {
   return (
-    <div className="flex w-full items-start">
-      <div className="mr-4 mt-1 hidden md:block">
-        <XCircle className="text-destructive h-10 w-10" strokeWidth={2} />
-      </div>
+    <div className="w-screen max-w-lg px-4">
+      <div className="flex w-full items-start">
+        <div className="mr-4 mt-1 hidden md:block">
+          <XCircle className="text-destructive h-10 w-10" strokeWidth={2} />
+        </div>
 
-      <div>
-        <h2 className="text-2xl font-bold md:text-4xl">Uh oh! Looks like you're missing a token</h2>
+        <div>
+          <h2 className="text-2xl font-bold md:text-4xl">
+            Uh oh! Looks like you're missing a token
+          </h2>
 
-        <p className="text-muted-foreground mt-4">
-          It seems that there is no token provided, if you are trying to verify your email please
-          follow the link in your email.
-        </p>
+          <p className="text-muted-foreground mt-4">
+            It seems that there is no token provided, if you are trying to verify your email please
+            follow the link in your email.
+          </p>
 
-        <Button className="mt-4" asChild>
-          <Link href="/">Go back home</Link>
-        </Button>
+          <Button className="mt-4" asChild>
+            <Link href="/">Go back home</Link>
+          </Button>
+        </div>
       </div>
     </div>
   );

apps/web/src/components/(dashboard)/settings/layout/activity-back.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export default function ActivityPageBackButton() {
+  const router = useRouter();
+  return (
+    <div>
+      <Button
+        className="flex-shrink-0"
+        variant="secondary"
+        onClick={() => {
+          void router.back();
+        }}
+      >
+        Back
+      </Button>
+    </div>
+  );
+}

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 { Braces, 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';
@@ -77,6 +77,19 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
         </Button>
       </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>
+
       {isBillingEnabled && (
         <Link href="/settings/billing">
           <Button

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

@@ -1,15 +1,18 @@
 import React from 'react';
 
+import { cn } from '@documenso/ui/lib/utils';
+
 export type SettingsHeaderProps = {
   title: string;
   subtitle: string;
   children?: React.ReactNode;
+  className?: string;
 };
 
-export const SettingsHeader = ({ children, title, subtitle }: SettingsHeaderProps) => {
+export const SettingsHeader = ({ children, title, subtitle, className }: SettingsHeaderProps) => {
   return (
     <>
-      <div className="flex flex-row items-center justify-between">
+      <div className={cn('flex flex-row items-center justify-between', className)}>
         <div>
           <h3 className="text-lg font-medium">{title}</h3>
 

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 { Braces, 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';
@@ -80,6 +80,19 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
         </Button>
       </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>
+
       {isBillingEnabled && (
         <Link href="/settings/billing">
           <Button

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

@@ -0,0 +1,232 @@
+'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 { ZCreateWebhookMutationSchema } 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,
+  FormDescription,
+  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 { useOptionalCurrentTeam } from '~/providers/team';
+
+import { TriggerMultiSelectCombobox } from './trigger-multiselect-combobox';
+
+const ZCreateWebhookFormSchema = ZCreateWebhookMutationSchema.omit({ teamId: true });
+
+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 team = useOptionalCurrentTeam();
+
+  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 ({
+    enabled,
+    eventTriggers,
+    secret,
+    webhookUrl,
+  }: TCreateWebhookFormSchema) => {
+    try {
+      await createWebhook({
+        enabled,
+        eventTriggers,
+        secret,
+        webhookUrl,
+        teamId: team?.id,
+      });
+
+      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 className="max-w-lg" 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}
+            >
+              <div className="flex flex-col-reverse gap-4 md:flex-row">
+                <FormField
+                  control={form.control}
+                  name="webhookUrl"
+                  render={({ field }) => (
+                    <FormItem className="flex-1">
+                      <FormLabel required>Webhook URL</FormLabel>
+                      <FormControl>
+                        <Input className="bg-background" {...field} />
+                      </FormControl>
+
+                      <FormDescription>
+                        The URL for Documenso to send webhook events to.
+                      </FormDescription>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="enabled"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Enabled</FormLabel>
+
+                      <div>
+                        <FormControl>
+                          <Switch
+                            className="bg-background"
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                      </div>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <FormField
+                control={form.control}
+                name="eventTriggers"
+                render={({ field: { onChange, value } }) => (
+                  <FormItem className="flex flex-col gap-2">
+                    <FormLabel required>Triggers</FormLabel>
+                    <FormControl>
+                      <TriggerMultiSelectCombobox
+                        listValues={value}
+                        onChange={(values: string[]) => {
+                          onChange(values);
+                        }}
+                      />
+                    </FormControl>
+
+                    <FormDescription>
+                      The events that will trigger a webhook to be sent to your URL.
+                    </FormDescription>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="secret"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Secret</FormLabel>
+                    <FormControl>
+                      <PasswordInput
+                        className="bg-background"
+                        {...field}
+                        value={field.value ?? ''}
+                      />
+                    </FormControl>
+
+                    <FormDescription>
+                      A secret that will be sent to your URL so you can verify that the request has
+                      been sent by Documenso.
+                    </FormDescription>
+                    <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,172 @@
+'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';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+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 team = useOptionalCurrentTeam();
+
+  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, teamId: team?.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/trigger-multiselect-combobox.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+
+import { WebhookTriggerEvents } from '@prisma/client/';
+import { Check, ChevronsUpDown } from 'lucide-react';
+
+import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
+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 TriggerMultiSelectComboboxProps = {
+  listValues: string[];
+  onChange: (_values: string[]) => void;
+};
+
+export const TriggerMultiSelectCombobox = ({
+  listValues,
+  onChange,
+}: TriggerMultiSelectComboboxProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+  const triggerEvents = Object.values(WebhookTriggerEvents);
+
+  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-full max-w-[280px] p-0">
+        <Command>
+          <CommandInput
+            placeholder={truncateTitle(
+              selectedValues.map((v) => toFriendlyWebhookEventName(v)).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',
+                  )}
+                />
+                {toFriendlyWebhookEventName(value)}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};

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

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

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

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

apps/web/src/components/forms/public-profile-claim-dialog.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import React, { useState } from 'react';
+
+import Image from 'next/image';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import profileClaimTeaserImage from '@documenso/assets/images/profile-claim-teaser.png';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { User } from '@documenso/prisma/client';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} 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';
+
+import { UserProfileSkeleton } from '../ui/user-profile-skeleton';
+
+export const ZClaimPublicProfileFormSchema = z.object({
+  url: z
+    .string()
+    .trim()
+    .toLowerCase()
+    .min(1, { message: 'Please enter a valid username.' })
+    .regex(/^[a-z0-9-]+$/, {
+      message: 'Username can only container alphanumeric characters and dashes.',
+    }),
+});
+
+export type TClaimPublicProfileFormSchema = z.infer<typeof ZClaimPublicProfileFormSchema>;
+
+export type ClaimPublicProfileDialogFormProps = {
+  open: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onClaimed?: () => void;
+  user: User;
+};
+
+export const ClaimPublicProfileDialogForm = ({
+  open,
+  onOpenChange,
+  onClaimed,
+  user,
+}: ClaimPublicProfileDialogFormProps) => {
+  const { toast } = useToast();
+
+  const [claimed, setClaimed] = useState(false);
+
+  const baseUrl = new URL(NEXT_PUBLIC_WEBAPP_URL() ?? 'http://localhost:3000');
+
+  const form = useForm<TClaimPublicProfileFormSchema>({
+    values: {
+      url: user.url || '',
+    },
+    resolver: zodResolver(ZClaimPublicProfileFormSchema),
+  });
+
+  const { mutateAsync: updatePublicProfile } = trpc.profile.updatePublicProfile.useMutation();
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const onFormSubmit = async ({ url }: TClaimPublicProfileFormSchema) => {
+    try {
+      await updatePublicProfile({
+        url,
+      });
+
+      setClaimed(true);
+      onClaimed?.();
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.PROFILE_URL_TAKEN) {
+        form.setError('url', {
+          type: 'manual',
+          message: 'This username is already taken',
+        });
+      } else if (error.code === AppErrorCode.PREMIUM_PROFILE_URL) {
+        form.setError('url', {
+          type: 'manual',
+          message: error.message,
+        });
+      } else if (error.code !== AppErrorCode.UNKNOWN_ERROR) {
+        toast({
+          title: 'An error occurred',
+          description: error.userMessage ?? error.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            'We encountered an unknown error while attempting to save your details. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent position="center" className="max-w-lg overflow-hidden">
+        {!claimed && (
+          <>
+            <DialogHeader>
+              <DialogTitle className="font-semi-bold text-center text-xl">
+                Introducing public profiles!
+              </DialogTitle>
+
+              <DialogDescription className="text-center">
+                Reserve your Documenso public profile username
+              </DialogDescription>
+            </DialogHeader>
+
+            <Image src={profileClaimTeaserImage} alt="profile claim teaser" />
+
+            <Form {...form}>
+              <form
+                className={cn(
+                  'to-background -mt-32 flex w-full flex-col bg-gradient-to-b from-transparent to-15% pt-16 md:-mt-44',
+                )}
+                onSubmit={form.handleSubmit(onFormSubmit)}
+              >
+                <fieldset className="-mt-6 flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+                  <FormField
+                    control={form.control}
+                    name="url"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Public profile username</FormLabel>
+
+                        <FormControl>
+                          <Input type="text" className="mb-2 mt-2" {...field} />
+                        </FormControl>
+
+                        <FormMessage />
+
+                        <div className="bg-muted/50 text-muted-foreground mt-2 inline-block truncate rounded-md px-2 py-1 text-sm">
+                          {baseUrl.host}/u/{field.value || '<username>'}
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                </fieldset>
+
+                <div className="mt-4 text-center">
+                  <Button type="submit" loading={isSubmitting}>
+                    Claim your username
+                  </Button>
+                </div>
+              </form>
+            </Form>
+          </>
+        )}
+
+        {claimed && (
+          <>
+            <DialogHeader>
+              <DialogTitle className="font-semi-bold text-center text-xl">All set!</DialogTitle>
+
+              <DialogDescription className="text-center">
+                We will let you know as soon as this features is launched
+              </DialogDescription>
+            </DialogHeader>
+
+            <UserProfileSkeleton className="mt-4" user={user} rows={1} />
+
+            <div className="to-background -mt-12 flex w-full flex-col items-center bg-gradient-to-b from-transparent to-15% px-4 pt-8 md:-mt-12">
+              <Button className="w-full" onClick={() => onOpenChange?.(false)}>
+                Can't wait!
+              </Button>
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -195,9 +196,11 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Email</FormLabel>
+
                 <FormControl>
                   <Input type="email" {...field} />
                 </FormControl>
+
                 <FormMessage />
               </FormItem>
             )}
@@ -209,9 +212,19 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Password</FormLabel>
+
                 <FormControl>
                   <PasswordInput {...field} />
                 </FormControl>
+
+                <p className="mt-2 text-right">
+                  <Link
+                    href="/forgot-password"
+                    className="text-muted-foreground text-sm duration-200 hover:opacity-70"
+                  >
+                    Forgot your password?
+                  </Link>
+                </p>
                 <FormMessage />
               </FormItem>
             )}

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

@@ -0,0 +1,463 @@
+'use client';
+
+import { useState } from 'react';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { AnimatePresence, motion } from 'framer-motion';
+import { signIn } from 'next-auth/react';
+import { useForm } from 'react-hook-form';
+import { FcGoogle } from 'react-icons/fc';
+import { z } from 'zod';
+
+import communityCardsImage from '@documenso/assets/images/community-cards.png';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc } from '@documenso/trpc/react';
+import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
+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 { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { UserProfileSkeleton } from '~/components/ui/user-profile-skeleton';
+import { UserProfileTimur } from '~/components/ui/user-profile-timur';
+
+const SIGN_UP_REDIRECT_PATH = '/documents';
+
+type SignUpStep = 'BASIC_DETAILS' | 'CLAIM_USERNAME';
+
+export const ZSignUpFormV2Schema = z
+  .object({
+    name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+    email: z.string().email().min(1),
+    password: ZPasswordSchema,
+    signature: z.string().min(1, { message: 'We need your signature to sign documents' }),
+    url: z
+      .string()
+      .trim()
+      .toLowerCase()
+      .min(1, { message: 'We need a username to create your profile' })
+      .regex(/^[a-z0-9-]+$/, {
+        message: 'Username can only container alphanumeric characters and dashes.',
+      }),
+  })
+  .refine(
+    (data) => {
+      const { name, email, password } = data;
+      return !password.includes(name) && !password.includes(email.split('@')[0]);
+    },
+    {
+      message: 'Password should not be common or based on personal information',
+    },
+  );
+
+export type TSignUpFormV2Schema = z.infer<typeof ZSignUpFormV2Schema>;
+
+export type SignUpFormV2Props = {
+  className?: string;
+  initialEmail?: string;
+  isGoogleSSOEnabled?: boolean;
+};
+
+export const SignUpFormV2 = ({
+  className,
+  initialEmail,
+  isGoogleSSOEnabled,
+}: SignUpFormV2Props) => {
+  const { toast } = useToast();
+  const analytics = useAnalytics();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [step, setStep] = useState<SignUpStep>('BASIC_DETAILS');
+
+  const utmSrc = searchParams?.get('utm_source') ?? null;
+
+  const baseUrl = new URL(NEXT_PUBLIC_WEBAPP_URL() ?? 'http://localhost:3000');
+
+  const form = useForm<TSignUpFormV2Schema>({
+    values: {
+      name: '',
+      email: initialEmail ?? '',
+      password: '',
+      signature: '',
+      url: '',
+    },
+    mode: 'onBlur',
+    resolver: zodResolver(ZSignUpFormV2Schema),
+  });
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const name = form.watch('name');
+  const url = form.watch('url');
+
+  // To continue we need to make sure name, email, password and signature are valid
+  const canContinue =
+    form.formState.dirtyFields.name &&
+    form.formState.errors.name === undefined &&
+    form.formState.dirtyFields.email &&
+    form.formState.errors.email === undefined &&
+    form.formState.dirtyFields.password &&
+    form.formState.errors.password === undefined &&
+    form.formState.dirtyFields.signature &&
+    form.formState.errors.signature === undefined;
+
+  console.log({ formSTate: form.formState });
+
+  const { mutateAsync: signup } = trpc.auth.signup.useMutation();
+
+  const onFormSubmit = async ({ name, email, password, signature, url }: TSignUpFormV2Schema) => {
+    try {
+      await signup({ name, email, password, signature, url });
+
+      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', {
+        email,
+        timestamp: new Date().toISOString(),
+        custom_campaign_params: { src: utmSrc },
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.PROFILE_URL_TAKEN) {
+        form.setError('url', {
+          type: 'manual',
+          message: 'This username has already been taken',
+        });
+      } else if (error.code === AppErrorCode.PREMIUM_PROFILE_URL) {
+        form.setError('url', {
+          type: 'manual',
+          message: error.message,
+        });
+      } else if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: err.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          description:
+            'We encountered an unknown error while attempting to sign you up. Please try again later.',
+          variant: 'destructive',
+        });
+      }
+    }
+  };
+
+  const onSignUpWithGoogleClick = async () => {
+    try {
+      await signIn('google', { callbackUrl: SIGN_UP_REDIRECT_PATH });
+    } catch (err) {
+      toast({
+        title: 'An unknown error occurred',
+        description:
+          'We encountered an unknown error while attempting to sign you Up. Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div className={cn('flex justify-center gap-x-12', className)}>
+      <div className="border-border relative hidden flex-1 overflow-hidden rounded-xl border xl:flex">
+        <div className="absolute -inset-8 -z-[2] backdrop-blur">
+          <Image
+            src={communityCardsImage}
+            fill={true}
+            alt="community-cards"
+            className="dark:brightness-95 dark:contrast-[70%] dark:invert"
+          />
+        </div>
+
+        <div className="bg-background/50 absolute -inset-8 -z-[1] backdrop-blur-[2px]" />
+
+        <div className="relative flex h-full w-full flex-col items-center justify-evenly">
+          <div className="bg-background rounded-2xl border px-4 py-1 text-sm font-medium">
+            User profiles are coming soon!
+          </div>
+
+          <AnimatePresence>
+            {step === 'BASIC_DETAILS' ? (
+              <motion.div className="w-full max-w-md" layoutId="user-profile">
+                <UserProfileTimur
+                  rows={2}
+                  className="bg-background border-border rounded-2xl border shadow-md"
+                />
+              </motion.div>
+            ) : (
+              <motion.div className="w-full max-w-md" layoutId="user-profile">
+                <UserProfileSkeleton
+                  user={{ name, url }}
+                  rows={2}
+                  className="bg-background border-border rounded-2xl border shadow-md"
+                />
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          <div />
+        </div>
+      </div>
+
+      <div className="border-border dark:bg-background relative z-10 flex min-h-[min(800px,80vh)] w-full max-w-lg flex-col rounded-xl border bg-neutral-100 p-6">
+        {step === 'BASIC_DETAILS' && (
+          <div className="h-20">
+            <h1 className="text-2xl font-semibold">Create a new account</h1>
+
+            <p className="text-muted-foreground mt-2 text-sm">
+              Create your account and start using state-of-the-art document signing. Open and
+              beautiful signing is within your grasp.
+            </p>
+          </div>
+        )}
+
+        {step === 'CLAIM_USERNAME' && (
+          <div className="h-20">
+            <h1 className="text-2xl font-semibold">Claim your username now</h1>
+
+            <p className="text-muted-foreground mt-2 text-sm">
+              You will get notified & be able to set up your documenso public profile when we launch
+              the feature.
+            </p>
+          </div>
+        )}
+
+        <hr className="-mx-6 my-4" />
+
+        <Form {...form}>
+          <form
+            className="flex w-full flex-1 flex-col gap-y-4"
+            onSubmit={form.handleSubmit(onFormSubmit)}
+          >
+            {step === 'BASIC_DETAILS' && (
+              <fieldset
+                className={cn(
+                  'flex h-[500px] w-full flex-col gap-y-4',
+                  isGoogleSSOEnabled && 'h-[600px]',
+                )}
+                disabled={isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Full Name</FormLabel>
+                      <FormControl>
+                        <Input type="text" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Email Address</FormLabel>
+                      <FormControl>
+                        <Input type="email" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="password"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Password</FormLabel>
+
+                      <FormControl>
+                        <PasswordInput {...field} />
+                      </FormControl>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="signature"
+                  render={({ field: { onChange } }) => (
+                    <FormItem>
+                      <FormLabel>Sign Here</FormLabel>
+                      <FormControl>
+                        <SignaturePad
+                          className="h-36 w-full"
+                          disabled={isSubmitting}
+                          containerClassName="mt-2 rounded-lg border bg-background"
+                          onChange={(v) => onChange(v ?? '')}
+                        />
+                      </FormControl>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {isGoogleSSOEnabled && (
+                  <>
+                    <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
+                      <div className="bg-border h-px flex-1" />
+                      <span className="text-muted-foreground bg-transparent">Or</span>
+                      <div className="bg-border h-px flex-1" />
+                    </div>
+
+                    <Button
+                      type="button"
+                      size="lg"
+                      variant={'outline'}
+                      className="bg-background text-muted-foreground border"
+                      disabled={isSubmitting}
+                      onClick={onSignUpWithGoogleClick}
+                    >
+                      <FcGoogle className="mr-2 h-5 w-5" />
+                      Sign Up with Google
+                    </Button>
+                  </>
+                )}
+
+                <p className="text-muted-foreground mt-4 text-sm">
+                  Already have an account?{' '}
+                  <Link href="/signin" className="text-documenso-700 duration-200 hover:opacity-70">
+                    Sign in instead
+                  </Link>
+                </p>
+              </fieldset>
+            )}
+
+            {step === 'CLAIM_USERNAME' && (
+              <fieldset
+                className={cn(
+                  'flex h-[500px] w-full flex-col gap-y-4',
+                  isGoogleSSOEnabled && 'h-[600px]',
+                )}
+                disabled={isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="url"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Public profile username</FormLabel>
+
+                      <FormControl>
+                        <Input type="text" className="mb-2 mt-2 lowercase" {...field} />
+                      </FormControl>
+
+                      <FormMessage />
+
+                      <div className="bg-muted/50 border-border text-muted-foreground mt-2 inline-block truncate rounded-md border px-2 py-1 text-sm lowercase">
+                        {baseUrl.host}/u/{field.value || '<username>'}
+                      </div>
+                    </FormItem>
+                  )}
+                />
+              </fieldset>
+            )}
+
+            <div className="mt-6">
+              {step === 'BASIC_DETAILS' && (
+                <p className="text-muted-foreground text-sm">
+                  <span className="font-medium">Basic details</span> 1/2
+                </p>
+              )}
+
+              {step === 'CLAIM_USERNAME' && (
+                <p className="text-muted-foreground text-sm">
+                  <span className="font-medium">Claim username</span> 2/2
+                </p>
+              )}
+
+              <div className="bg-foreground/40 relative mt-4 h-1.5 rounded-full">
+                <motion.div
+                  layout="size"
+                  layoutId="document-flow-container-step"
+                  className="bg-documenso absolute inset-y-0 left-0 rounded-full"
+                  style={{
+                    width: step === 'BASIC_DETAILS' ? '50%' : '100%',
+                  }}
+                />
+              </div>
+            </div>
+
+            <div className="flex items-center gap-x-4">
+              {/* Go back button, disabled if step is basic details */}
+              <Button
+                type="button"
+                size="lg"
+                variant="secondary"
+                className="flex-1"
+                disabled={step === 'BASIC_DETAILS'}
+                loading={form.formState.isSubmitting}
+                onClick={() => setStep('BASIC_DETAILS')}
+              >
+                Back
+              </Button>
+
+              {/* Continue button */}
+              {step === 'BASIC_DETAILS' && (
+                <Button
+                  type="button"
+                  size="lg"
+                  className="flex-1 disabled:cursor-not-allowed"
+                  disabled={!canContinue}
+                  loading={form.formState.isSubmitting}
+                  onClick={() => setStep('CLAIM_USERNAME')}
+                >
+                  Next
+                </Button>
+              )}
+
+              {/* Sign up button */}
+              {step === 'CLAIM_USERNAME' && (
+                <Button
+                  loading={form.formState.isSubmitting}
+                  disabled={!form.formState.isValid}
+                  type="submit"
+                  size="lg"
+                  className="flex-1"
+                >
+                  Complete
+                </Button>
+              )}
+            </div>
+          </form>
+        </Form>
+      </div>
+    </div>
+  );
+};

apps/web/src/components/ui/user-profile-skeleton.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { File, User2 } from 'lucide-react';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import type { User } from '@documenso/prisma/client';
+import { VerifiedIcon } from '@documenso/ui/icons/verified';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type UserProfileSkeletonProps = {
+  className?: string;
+  user: Pick<User, 'name' | 'url'>;
+  rows?: number;
+};
+
+export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSkeletonProps) => {
+  const baseUrl = new URL(NEXT_PUBLIC_WEBAPP_URL() ?? 'http://localhost:3000');
+
+  return (
+    <div
+      className={cn(
+        'dark:bg-background flex flex-col items-center rounded-xl bg-neutral-100 p-4',
+        className,
+      )}
+    >
+      <div className="border-border bg-background text-muted-foreground inline-flex items-center rounded-md border px-2.5 py-1.5 text-sm">
+        <span>{baseUrl.host}/u/</span>
+        <span className="inline-block max-w-[8rem] truncate lowercase">{user.url}</span>
+      </div>
+
+      <div className="mt-4">
+        <div className="bg-primary/10 rounded-full p-1.5">
+          <div className="bg-background flex h-20 w-20 items-center justify-center rounded-full border-2">
+            <User2 className="h-12 w-12 text-[hsl(228,10%,90%)]" />
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-6">
+        <div className="flex items-center justify-center gap-x-2">
+          <h2 className="max-w-[12rem] truncate text-2xl font-semibold">{user.name}</h2>
+
+          <VerifiedIcon className="text-primary h-8 w-8" />
+        </div>
+
+        <div className="dark:bg-foreground/30 mx-auto mt-4 h-2 w-52 rounded-full bg-neutral-300" />
+        <div className="dark:bg-foreground/20 mx-auto mt-2 h-2 w-36 rounded-full bg-neutral-200" />
+      </div>
+
+      <div className="mt-8 w-full">
+        <div className="dark:divide-foreground/30 dark:border-foreground/30 divide-y-2 divide-neutral-200 overflow-hidden rounded-lg border-2 border-neutral-200">
+          <div className="text-muted-foreground dark:bg-foreground/20 bg-neutral-50 p-4 font-medium">
+            Documents
+          </div>
+
+          {Array(rows)
+            .fill(0)
+            .map((_, index) => (
+              <div
+                key={index}
+                className="bg-background flex items-center justify-between gap-x-6 p-4"
+              >
+                <div className="flex items-center gap-x-2">
+                  <File className="text-muted-foreground/80 h-8 w-8" strokeWidth={1.5} />
+
+                  <div className="space-y-2">
+                    <div className="dark:bg-foreground/30 h-1.5 w-24 rounded-full bg-neutral-300 md:w-36" />
+                    <div className="dark:bg-foreground/20 h-1.5 w-16 rounded-full bg-neutral-200 md:w-24" />
+                  </div>
+                </div>
+
+                <div className="flex-shrink-0">
+                  <Button type="button" size="sm" className="pointer-events-none w-32">
+                    Sign
+                  </Button>
+                </div>
+              </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};

apps/web/src/components/ui/user-profile-timur.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import Image from 'next/image';
+
+import { File } from 'lucide-react';
+
+import timurImage from '@documenso/assets/images/timur.png';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { VerifiedIcon } from '@documenso/ui/icons/verified';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type UserProfileTimurProps = {
+  className?: string;
+  rows?: number;
+};
+
+export const UserProfileTimur = ({ className, rows = 2 }: UserProfileTimurProps) => {
+  const baseUrl = new URL(NEXT_PUBLIC_WEBAPP_URL() ?? 'http://localhost:3000');
+
+  return (
+    <div
+      className={cn(
+        'dark:bg-background flex flex-col items-center rounded-xl bg-neutral-100 p-4',
+        className,
+      )}
+    >
+      <div className="border-border bg-background text-muted-foreground inline-block rounded-md border px-2.5 py-1.5 text-sm">
+        {baseUrl.host}/u/timur
+      </div>
+
+      <div className="mt-4">
+        <Image
+          src={timurImage}
+          className="h-20 w-20 rounded-full"
+          alt="image of timur ercan founder of documenso"
+        />
+      </div>
+
+      <div className="mt-6">
+        <div className="flex items-center justify-center gap-x-2">
+          <h2 className="text-2xl font-semibold">Timur Ercan</h2>
+
+          <VerifiedIcon className="text-primary h-8 w-8" />
+        </div>
+
+        <p className="text-muted-foreground mt-4 max-w-[40ch] text-center text-sm">Hey I’m Timur</p>
+
+        <p className="text-muted-foreground mt-1 max-w-[40ch] text-center text-sm">
+          Pick any of the following agreements below and start signing to get started
+        </p>
+      </div>
+
+      <div className="mt-8 w-full">
+        <div className="dark:divide-foreground/30 dark:border-foreground/30 divide-y-2 divide-neutral-200 overflow-hidden rounded-lg border-2 border-neutral-200">
+          <div className="text-muted-foreground dark:bg-foreground/20 bg-neutral-50 p-4 font-medium">
+            Documents
+          </div>
+
+          {Array(rows)
+            .fill(0)
+            .map((_, index) => (
+              <div
+                key={index}
+                className="bg-background flex items-center justify-between gap-x-6 p-4"
+              >
+                <div className="flex items-center gap-x-2">
+                  <File className="text-muted-foreground/80 h-8 w-8" strokeWidth={1.5} />
+
+                  <div className="space-y-2">
+                    <div className="dark:bg-foreground/30 h-1.5 w-24 rounded-full bg-neutral-300 md:w-36" />
+                    <div className="dark:bg-foreground/20 h-1.5 w-16 rounded-full bg-neutral-200 md:w-24" />
+                  </div>
+                </div>
+
+                <div className="flex-shrink-0">
+                  <Button type="button" size="sm" className="pointer-events-none w-32">
+                    Sign
+                  </Button>
+                </div>
+              </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};

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/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/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;

apps/web/src/pages/api/webhook/trigger.ts

@@ -0,0 +1,12 @@
+import { handlerTriggerWebhooks } from '@documenso/lib/server-only/webhooks/trigger/handler';
+
+export const config = {
+  maxDuration: 300,
+  api: {
+    bodyParser: {
+      sizeLimit: '50mb',
+    },
+  },
+};
+
+export default handlerTriggerWebhooks;

apps/web/src/providers/posthog.tsx

@@ -32,6 +32,7 @@ export function PostHogPageview() {
             // Do nothing.
           });
       },
+      custom_campaign_params: ['src'],
     });
   }
 

apps/web/src/providers/team.tsx

@@ -12,7 +12,7 @@ interface TeamProviderProps {
 
 const TeamContext = createContext<Team | null>(null);
 
-export const useCurrentTeam = (): Team | null => {
+export const useCurrentTeam = () => {
   const context = useContext(TeamContext);
 
   if (!context) {
@@ -22,7 +22,7 @@ export const useCurrentTeam = (): Team | null => {
   return context;
 };
 
-export const useOptionalCurrentTeam = (): Team | null => {
+export const useOptionalCurrentTeam = () => {
   return useContext(TeamContext);
 };
 

packages/app-tests/e2e/fixtures/authentication.ts

@@ -34,6 +34,7 @@ export const manualLogin = async ({
 };
 
 export const manualSignout = async ({ page }: ManualLoginOptions) => {
+  await page.waitForTimeout(1000);
   await page.getByTestId('menu-switcher').click();
   await page.getByRole('menuitem', { name: 'Sign Out' }).click();
   await page.waitForURL(`${WEBAPP_BASE_URL}/signin`);

packages/app-tests/e2e/test-auth-flow.spec.ts

@@ -29,7 +29,10 @@ test('user can sign up with email and password', async ({ page }: { page: Page }
     await page.mouse.up();
   }
 
-  await page.getByRole('button', { name: 'Sign Up', exact: true }).click();
+  await page.getByRole('button', { name: 'Next', exact: true }).click();
+  await page.getByLabel('Public profile username').fill('username-123');
+
+  await page.getByRole('button', { name: 'Complete', exact: true }).click();
 
   await page.waitForURL('/unverified-account');
 

packages/lib/constants/feature-flags.ts

@@ -25,6 +25,7 @@ export const LOCAL_FEATURE_FLAGS: Record<string, boolean> = {
   app_teams: true,
   app_document_page_view_history_sheet: false,
   marketing_header_single_player_mode: false,
+  marketing_profiles_announcement_bar: true,
 } as const;
 
 /**

packages/lib/errors/app-error.ts

@@ -18,6 +18,8 @@ export enum AppErrorCode {
   'RETRY_EXCEPTION' = 'RetryException',
   'SCHEMA_FAILED' = 'SchemaFailed',
   'TOO_MANY_REQUESTS' = 'TooManyRequests',
+  'PROFILE_URL_TAKEN' = 'ProfileUrlTaken',
+  'PREMIUM_PROFILE_URL' = 'PremiumProfileUrl',
 }
 
 const genericErrorCodeToTrpcErrorCodeMap: Record<string, TRPCError['code']> = {
@@ -32,6 +34,8 @@ const genericErrorCodeToTrpcErrorCodeMap: Record<string, TRPCError['code']> = {
   [AppErrorCode.RETRY_EXCEPTION]: 'INTERNAL_SERVER_ERROR',
   [AppErrorCode.SCHEMA_FAILED]: 'INTERNAL_SERVER_ERROR',
   [AppErrorCode.TOO_MANY_REQUESTS]: 'TOO_MANY_REQUESTS',
+  [AppErrorCode.PROFILE_URL_TAKEN]: 'BAD_REQUEST',
+  [AppErrorCode.PREMIUM_PROFILE_URL]: 'BAD_REQUEST',
 };
 
 export const ZAppErrorJsonSchema = z.object({

packages/lib/server-only/crypto/sign.ts

@@ -0,0 +1,12 @@
+import { hashString } from '../auth/hash';
+import { encryptSecondaryData } from './encrypt';
+
+export const sign = (data: unknown) => {
+  const stringified = JSON.stringify(data);
+
+  const hashed = hashString(stringified);
+
+  const signature = encryptSecondaryData({ data: hashed });
+
+  return signature;
+};

packages/lib/server-only/crypto/verify.ts

@@ -0,0 +1,12 @@
+import { hashString } from '../auth/hash';
+import { decryptSecondaryData } from './decrypt';
+
+export const verify = (data: unknown, signature: string) => {
+  const stringified = JSON.stringify(data);
+
+  const hashed = hashString(stringified);
+
+  const decrypted = decryptSecondaryData(signature);
+
+  return decrypted === hashed;
+};

packages/lib/server-only/document/complete-document-with-token.ts

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

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

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

packages/lib/server-only/document/get-document-by-token.ts

@@ -70,6 +70,6 @@ export const getDocumentAndRecipientByToken = async ({
 
   return {
     ...result,
-    Recipient: result.Recipient[0],
+    Recipient: result.Recipient,
   };
 };

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

@@ -9,12 +9,14 @@ import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-log
 import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
+import { WebhookTriggerEvents } from '@documenso/prisma/client';
 import { signPdf } from '@documenso/signing';
 
 import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { getFile } from '../../universal/upload/get-file';
 import { putFile } from '../../universal/upload/put-file';
 import { insertFieldInPDF } from '../pdf/insert-field-in-pdf';
+import { triggerWebhook } from '../webhooks/trigger/trigger-webhook';
 import { sendCompletedEmail } from './send-completed-email';
 
 export type SealDocumentOptions = {
@@ -36,6 +38,7 @@ export const sealDocument = async ({
     },
     include: {
       documentData: true,
+      Recipient: true,
     },
   });
 
@@ -134,4 +137,11 @@ export const sealDocument = async ({
   if (sendEmail) {
     await sendCompletedEmail({ documentId, requestMetadata });
   }
+
+  await triggerWebhook({
+    event: WebhookTriggerEvents.DOCUMENT_COMPLETED,
+    data: document,
+    userId: document.userId,
+    teamId: document.teamId ?? undefined,
+  });
 };

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

@@ -10,12 +10,14 @@ import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-
 import { renderCustomEmailTemplate } from '@documenso/lib/utils/render-custom-email-template';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, RecipientRole, SendStatus } from '@documenso/prisma/client';
+import { WebhookTriggerEvents } from '@documenso/prisma/client';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
 import {
   RECIPIENT_ROLES_DESCRIPTION,
   RECIPIENT_ROLE_TO_EMAIL_TYPE,
 } from '../../constants/recipient-roles';
+import { triggerWebhook } from '../webhooks/trigger/trigger-webhook';
 
 export type SendDocumentOptions = {
   documentId: number;
@@ -180,8 +182,18 @@ export const sendDocument = async ({
       data: {
         status: DocumentStatus.PENDING,
       },
+      include: {
+        Recipient: true,
+      },
     });
   });
 
+  await triggerWebhook({
+    event: WebhookTriggerEvents.DOCUMENT_SENT,
+    data: updatedDocument,
+    userId,
+    teamId,
+  });
+
   return updatedDocument;
 };

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

@@ -3,6 +3,10 @@ import type { RequestMetadata } from '@documenso/lib/universal/extract-request-m
 import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 import { ReadStatus } from '@documenso/prisma/client';
+import { WebhookTriggerEvents } from '@documenso/prisma/client';
+
+import { triggerWebhook } from '../webhooks/trigger/trigger-webhook';
+import { getDocumentAndRecipientByToken } from './get-document-by-token';
 
 export type ViewedDocumentOptions = {
   token: string;
@@ -51,4 +55,13 @@ export const viewedDocument = async ({ token, requestMetadata }: ViewedDocumentO
       }),
     });
   });
+
+  const document = await getDocumentAndRecipientByToken({ token });
+
+  await triggerWebhook({
+    event: WebhookTriggerEvents.DOCUMENT_OPENED,
+    data: document,
+    userId: document.userId,
+    teamId: document.teamId ?? undefined,
+  });
 };

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

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

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

@@ -0,0 +1,19 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { validateApiToken } from '@documenso/lib/server-only/webhooks/zapier/validateApiToken';
+
+export const testCredentialsHandler = async (req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    const { authorization } = req.headers;
+
+    const result = await validateApiToken({ authorization });
+
+    return res.status(200).json({
+      name: result.team?.name ?? result.user.name,
+    });
+  } catch (err) {
+    return res.status(500).json({
+      message: 'Internal Server Error',
+    });
+  }
+};

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

@@ -7,15 +7,17 @@ import { IdentityProvider, Prisma, TeamMemberInviteStatus } from '@documenso/pri
 
 import { IS_BILLING_ENABLED } from '../../constants/app';
 import { SALT_ROUNDS } from '../../constants/auth';
+import { AppError, AppErrorCode } from '../../errors/app-error';
 
 export interface CreateUserOptions {
   name: string;
   email: string;
   password: string;
   signature?: string | null;
+  url?: string;
 }
 
-export const createUser = async ({ name, email, password, signature }: CreateUserOptions) => {
+export const createUser = async ({ name, email, password, signature, url }: CreateUserOptions) => {
   const hashedPassword = await hash(password, SALT_ROUNDS);
 
   const userExists = await prisma.user.findFirst({
@@ -28,6 +30,22 @@ export const createUser = async ({ name, email, password, signature }: CreateUse
     throw new Error('User already exists');
   }
 
+  if (url) {
+    const urlExists = await prisma.user.findFirst({
+      where: {
+        url,
+      },
+    });
+
+    if (urlExists) {
+      throw new AppError(
+        AppErrorCode.PROFILE_URL_TAKEN,
+        'Profile username is taken',
+        'The profile username is already taken',
+      );
+    }
+  }
+
   const user = await prisma.user.create({
     data: {
       name,
@@ -35,6 +53,7 @@ export const createUser = async ({ name, email, password, signature }: CreateUse
       password: hashedPassword,
       signature,
       identityProvider: IdentityProvider.DOCUMENSO,
+      url,
     },
   });
 

packages/lib/server-only/user/update-public-profile.ts

@@ -0,0 +1,49 @@
+import { prisma } from '@documenso/prisma';
+
+import { AppError, AppErrorCode } from '../../errors/app-error';
+
+export type UpdatePublicProfileOptions = {
+  userId: number;
+  url: string;
+};
+
+export const updatePublicProfile = async ({ userId, url }: UpdatePublicProfileOptions) => {
+  const isUrlTaken = await prisma.user.findFirst({
+    select: {
+      id: true,
+    },
+    where: {
+      id: {
+        not: userId,
+      },
+      url,
+    },
+  });
+
+  if (isUrlTaken) {
+    throw new AppError(
+      AppErrorCode.PROFILE_URL_TAKEN,
+      'Profile username is taken',
+      'The profile username is already taken',
+    );
+  }
+
+  return await prisma.user.update({
+    where: {
+      id: userId,
+    },
+    data: {
+      url,
+      userProfile: {
+        upsert: {
+          create: {
+            bio: '',
+          },
+          update: {
+            bio: '',
+          },
+        },
+      },
+    },
+  });
+};

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

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

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

@@ -0,0 +1,30 @@
+import { prisma } from '@documenso/prisma';
+
+export type DeleteWebhookByIdOptions = {
+  id: string;
+  userId: number;
+  teamId?: number;
+};
+
+export const deleteWebhookById = async ({ id, userId, teamId }: DeleteWebhookByIdOptions) => {
+  return await prisma.webhook.delete({
+    where: {
+      id,
+      ...(teamId
+        ? {
+            team: {
+              id: teamId,
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          }
+        : {
+            userId,
+            teamId: null,
+          }),
+    },
+  });
+};

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

@@ -0,0 +1,36 @@
+import type { Prisma } from '@prisma/client';
+
+import { prisma } from '@documenso/prisma';
+
+export type EditWebhookOptions = {
+  id: string;
+  data: Omit<Prisma.WebhookUpdateInput, 'id' | 'userId' | 'teamId'>;
+  userId: number;
+  teamId?: number;
+};
+
+export const editWebhook = async ({ id, data, userId, teamId }: EditWebhookOptions) => {
+  return await prisma.webhook.update({
+    where: {
+      id,
+      ...(teamId
+        ? {
+            team: {
+              id: teamId,
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          }
+        : {
+            userId,
+            teamId: null,
+          }),
+    },
+    data: {
+      ...data,
+    },
+  });
+};

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

@@ -0,0 +1,38 @@
+import { prisma } from '@documenso/prisma';
+import type { WebhookTriggerEvents } from '@documenso/prisma/client';
+
+export type GetAllWebhooksByEventTriggerOptions = {
+  event: WebhookTriggerEvents;
+  userId: number;
+  teamId?: number;
+};
+
+export const getAllWebhooksByEventTrigger = async ({
+  event,
+  userId,
+  teamId,
+}: GetAllWebhooksByEventTriggerOptions) => {
+  return prisma.webhook.findMany({
+    where: {
+      enabled: true,
+      eventTriggers: {
+        has: event,
+      },
+      ...(teamId
+        ? {
+            team: {
+              id: teamId,
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          }
+        : {
+            userId,
+            teamId: null,
+          }),
+    },
+  });
+};

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

@@ -0,0 +1,30 @@
+import { prisma } from '@documenso/prisma';
+
+export type GetWebhookByIdOptions = {
+  id: string;
+  userId: number;
+  teamId?: number;
+};
+
+export const getWebhookById = async ({ id, userId, teamId }: GetWebhookByIdOptions) => {
+  return await prisma.webhook.findFirstOrThrow({
+    where: {
+      id,
+      ...(teamId
+        ? {
+            team: {
+              id: teamId,
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          }
+        : {
+            userId,
+            teamId: null,
+          }),
+    },
+  });
+};

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

@@ -0,0 +1,19 @@
+import { prisma } from '@documenso/prisma';
+
+export const getWebhooksByTeamId = async (teamId: number, userId: number) => {
+  return await prisma.webhook.findMany({
+    where: {
+      team: {
+        id: teamId,
+        members: {
+          some: {
+            userId,
+          },
+        },
+      },
+    },
+    orderBy: {
+      createdAt: 'desc',
+    },
+  });
+};

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

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

packages/lib/server-only/webhooks/trigger/execute-webhook.ts

@@ -0,0 +1,58 @@
+import { prisma } from '@documenso/prisma';
+import {
+  Prisma,
+  type Webhook,
+  WebhookCallStatus,
+  type WebhookTriggerEvents,
+} from '@documenso/prisma/client';
+
+export type ExecuteWebhookOptions = {
+  event: WebhookTriggerEvents;
+  webhook: Webhook;
+  data: unknown;
+};
+
+export const executeWebhook = async ({ event, webhook, data }: ExecuteWebhookOptions) => {
+  const { webhookUrl: url, secret } = webhook;
+
+  console.log('Executing webhook', { event, url });
+
+  const payload = {
+    event,
+    payload: data,
+    createdAt: new Date().toISOString(),
+    webhookEndpoint: url,
+  };
+
+  const response = await fetch(url, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Documenso-Secret': secret ?? '',
+    },
+  });
+
+  const body = await response.text();
+
+  let responseBody: Prisma.InputJsonValue | Prisma.JsonNullValueInput = Prisma.JsonNull;
+
+  try {
+    responseBody = JSON.parse(body);
+  } catch (err) {
+    responseBody = body;
+  }
+
+  await prisma.webhookCall.create({
+    data: {
+      url,
+      event,
+      status: response.ok ? WebhookCallStatus.SUCCESS : WebhookCallStatus.FAILED,
+      requestBody: payload as Prisma.InputJsonValue,
+      responseCode: response.status,
+      responseBody,
+      responseHeaders: Object.fromEntries(response.headers.entries()),
+      webhookId: webhook.id,
+    },
+  });
+};

packages/lib/server-only/webhooks/trigger/handler.ts

@@ -0,0 +1,58 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { verify } from '../../crypto/verify';
+import { getAllWebhooksByEventTrigger } from '../get-all-webhooks-by-event-trigger';
+import { executeWebhook } from './execute-webhook';
+import { ZTriggerWebhookBodySchema } from './schema';
+
+export type HandlerTriggerWebhooksResponse =
+  | {
+      success: true;
+      message: string;
+    }
+  | {
+      success: false;
+      error: string;
+    };
+
+export const handlerTriggerWebhooks = async (
+  req: NextApiRequest,
+  res: NextApiResponse<HandlerTriggerWebhooksResponse>,
+) => {
+  const signature = req.headers['x-webhook-signature'];
+
+  if (typeof signature !== 'string') {
+    console.log('Missing signature');
+    return res.status(400).json({ success: false, error: 'Missing signature' });
+  }
+
+  const valid = verify(req.body, signature);
+
+  if (!valid) {
+    console.log('Invalid signature');
+    return res.status(400).json({ success: false, error: 'Invalid signature' });
+  }
+
+  const result = ZTriggerWebhookBodySchema.safeParse(req.body);
+
+  if (!result.success) {
+    console.log('Invalid request body');
+    return res.status(400).json({ success: false, error: 'Invalid request body' });
+  }
+
+  const { event, data, userId, teamId } = result.data;
+
+  const allWebhooks = await getAllWebhooksByEventTrigger({ event, userId, teamId });
+
+  await Promise.allSettled(
+    allWebhooks.map(async (webhook) =>
+      executeWebhook({
+        event,
+        webhook,
+        data,
+      }),
+    ),
+  );
+
+  return res.status(200).json({ success: true, message: 'Webhooks executed successfully' });
+};

packages/lib/server-only/webhooks/trigger/schema.ts

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+import { WebhookTriggerEvents } from '@documenso/prisma/client';
+
+export const ZTriggerWebhookBodySchema = z.object({
+  event: z.nativeEnum(WebhookTriggerEvents),
+  data: z.unknown(),
+  userId: z.number(),
+  teamId: z.number().optional(),
+});
+
+export type TTriggerWebhookBodySchema = z.infer<typeof ZTriggerWebhookBodySchema>;

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

@@ -0,0 +1,40 @@
+import type { WebhookTriggerEvents } from '@documenso/prisma/client';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '../../../constants/app';
+import { sign } from '../../crypto/sign';
+
+export type TriggerWebhookOptions = {
+  event: WebhookTriggerEvents;
+  data: Record<string, unknown>;
+  userId: number;
+  teamId?: number;
+};
+
+export const triggerWebhook = async ({ event, data, userId, teamId }: TriggerWebhookOptions) => {
+  try {
+    const body = {
+      event,
+      data,
+      userId,
+      teamId,
+    };
+
+    const signature = sign(body);
+
+    await Promise.race([
+      fetch(`${NEXT_PUBLIC_WEBAPP_URL()}/api/webhook/trigger`, {
+        method: 'POST',
+        headers: {
+          'content-type': 'application/json',
+          'x-webhook-signature': signature,
+        },
+        body: JSON.stringify(body),
+      }),
+      new Promise((_, reject) => {
+        setTimeout(() => reject(new Error('Request timeout')), 500);
+      }),
+    ]).catch(() => null);
+  } catch (err) {
+    throw new Error(`Failed to trigger webhook`);
+  }
+};

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

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

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

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

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

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

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

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

packages/lib/universal/webhook/to-friendly-webhook-event-name.ts

@@ -0,0 +1,3 @@
+export const toFriendlyWebhookEventName = (eventName: string) => {
+  return eventName.replace(/_/g, '.').toLowerCase();
+};