feat: updated ui items

Signed-off-by: Adithya Krishna <adithya@documenso.com>

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

@@ -2,9 +2,12 @@
 
 import React, { useEffect, useState } from 'react';
 
+import Image from 'next/image';
 import { usePathname } from 'next/navigation';
 
+import backgroundPattern from '@documenso/assets/images/background-lw-2.png';
 import { cn } from '@documenso/ui/lib/utils';
+import { AnnouncementBar } from '@documenso/ui/primitives/announcement-bar';
 
 import { Footer } from '~/components/(marketing)/footer';
 import { Header } from '~/components/(marketing)/header';
@@ -38,6 +41,14 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
           'bg-background/50 backdrop-blur-md': scrollY > 5,
         })}
       >
+        <div className="absolute -inset-0 -z-[1] opacity-100">
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="h-[2rem] w-full object-cover"
+          />
+        </div>
+        <AnnouncementBar className="relative" isShown={true} />
         <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/client.tsx

@@ -85,6 +85,7 @@ export const SinglePlayerClient = () => {
     setFields(
       data.fields.map((field, i) => ({
         id: i,
+        secondaryId: i.toString(),
         documentId: -1,
         templateId: null,
         recipientId: -1,

apps/marketing/src/app/not-found.tsx

@@ -43,7 +43,7 @@ export default function NotFound() {
 
           <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
             <Button
-              variant="ghost"
+              variant="secondary"
               className="w-32"
               onClick={() => {
                 void router.back();

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">
+          -80%
         </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

@@ -74,6 +74,15 @@ export const Header = ({ className, ...props }: HeaderProps) => {
         >
           Sign in
         </Link>
+        <Link
+          href="https://app.documenso.com/signin"
+          target="_blank"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
+          <span className="bg-primary dark:text-background rounded-full px-3 py-2 text-xs">
+            Sign up
+          </span>
+        </Link>
       </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">
+              -80%
             </span>
           </Button>
 
@@ -190,42 +191,32 @@ export const Hero = ({ className, ...props }: HeroProps) => {
           <Widget className="mt-12">
             <strong>Documenso Supporter Pledge</strong>
             <p className="w-full max-w-[70ch]">
-              Our mission is to create an open signing infrastructure that empowers the world,
-              enabling businesses to embrace openness, cooperation, and transparency. We believe
-              that signing, as a fundamental act, should embody these values. By offering an
-              open-source signing solution, we aim to make document signing accessible, transparent,
-              and trustworthy.
+              Our mission is to create an open signing infrastructure that empowers the world. We
+              believe openness and cooperation are the way every business should be conducted.
             </p>
 
             <p className="w-full max-w-[70ch]">
-              Through our platform, called Documenso, we strive to earn your trust by allowing
-              self-hosting and providing complete visibility into its inner workings. We value
-              inclusivity and foster an environment where diverse perspectives and contributions are
-              welcomed, even though we may not implement them all.
+              By creating an open source signing solution we want to bring these values to
+              businesses' most fundamental act: signing. Document Signing should be open and
+              transparent, as should all trust based products.
             </p>
 
             <p className="w-full max-w-[70ch]">
-              At Documenso, we envision a web-enabled future for business and contracts, and we are
-              committed to being the leading provider of open signing infrastructure. By combining
-              exceptional product design with open-source principles, we aim to deliver a robust and
-              well-designed application that exceeds your expectations.
+              We aim to earn this trust by enabling everyone to self-host Documenso and inspect it’s
+              inner workings. We openly share our source, knowledge, and progress while creating
+              Documenso.
             </p>
 
             <p className="w-full max-w-[70ch]">
-              We understand that exceptional products are born from exceptional communities, and we
-              invite you to join our open-source community. Your contributions, whether technical or
-              non-technical, will help shape the future of signing. Together, we can create a better
-              future for everyone.
+              Exceptional products are the results of exceptional communities and we strive to
+              create an inclusive, creative environment, open to all who choose to support our
+              mission. We value the inputs, contributions, and perspectives of everyone in our
+              community, even though we can't apply them all.
             </p>
 
             <p className="w-full max-w-[70ch]">
-              Today we invite you to join us on this journey: By signing this mission statement you
-              signal your support of Documenso's mission{' '}
-              <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.
+              We are building the next generation of trust software and community the way it’s meant
+              to be: Beautifully designed and open for all to join.
             </p>
 
             <div className="flex h-24 items-center">

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

@@ -50,6 +50,10 @@ export const MENU_NAVIGATION_LINKS = [
     href: 'https://app.documenso.com/signin',
     text: 'Sign in',
   },
+  {
+    href: 'https://app.documenso.com/signup',
+    text: 'Sign up',
+  },
 ];
 
 export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigationProps) => {
@@ -104,7 +108,13 @@ export const MobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigat
                 onClick={() => handleMenuItemClick()}
                 target={target}
               >
-                {text}
+                {href === 'https://app.documenso.com/signup' ? (
+                  <span className="bg-primary dark:text-background rounded-full px-3 py-2 text-xl">
+                    {text}
+                  </span>
+                ) : (
+                  text
+                )}
               </Link>
             </motion.div>
           ))}

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

@@ -194,7 +194,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>
@@ -215,7 +215,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) =>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,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 { DocumentsPageView } from './documents-page-view';
+import { PublicProfileIntro } from './username-claim/public-profile-intro';
 
 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 (
+    <>
+      <PublicProfileIntro user={user} />
+      <DocumentsPageView searchParams={searchParams} />
+    </>
+  );
 }

apps/web/src/app/(dashboard)/documents/username-claim/public-profile-intro.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import React, { useRef, useState } from 'react';
+
+import Image from 'next/image';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { File } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import Check from '@documenso/assets/Check.svg';
+import Lucas from '@documenso/assets/images/Lucas.png';
+import Timur from '@documenso/assets/images/Timur.png';
+import type { User } from '@documenso/prisma/client';
+import { TRPCClientError } from '@documenso/trpc/client';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardHeader } from '@documenso/ui/primitives/card';
+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 { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZPublicProfileFormSchema = z.object({
+  profileURL: z.string().trim().min(1, { message: 'Please enter a valid URL slug.' }),
+});
+
+export type TPublicProfileFormSchema = z.infer<typeof ZPublicProfileFormSchema>;
+
+export type PublicProfileIntroProps = {
+  user: User;
+};
+
+export const PublicProfileIntro = ({ user }: PublicProfileIntroProps) => {
+  const form = useForm<TPublicProfileFormSchema>({
+    values: {
+      profileURL: user.profileURL || '',
+    },
+    resolver: zodResolver(ZPublicProfileFormSchema),
+  });
+  const textRef = useRef<HTMLSpanElement>(null);
+
+  const { toast } = useToast();
+  const { mutateAsync: updatePublicProfile } = trpc.profile.updatePublicProfile.useMutation();
+  const isSaving = form.formState.isSubmitting;
+
+  const isProfileURLClaimed = user.profileURL ? false : true;
+  const [showClaimingDialog, setShowClaimingDialog] = useState(isProfileURLClaimed);
+  const [showClaimedDialog, setShowClaimedDialog] = useState(true);
+
+  const onFormSubmit = async ({ profileURL }: TPublicProfileFormSchema) => {
+    try {
+      await updatePublicProfile({
+        profileURL,
+      });
+      setShowClaimingDialog(false);
+      setShowClaimedDialog(true);
+    } catch (err) {
+      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
+        toast({
+          title: 'An error occurred',
+          description: err.message,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: 'An unknown error occurred',
+          variant: 'destructive',
+          description:
+            'We encountered an unknown error while attempting to save your details. Please try again later.',
+        });
+      }
+    }
+  };
+
+  return (
+    <>
+      <Dialog open={showClaimingDialog} onOpenChange={setShowClaimingDialog}>
+        <DialogContent position="center" className="pb-4">
+          <DialogHeader>
+            <DialogTitle className="font-semi-bold text-center text-2xl">
+              Introducing public profile!
+            </DialogTitle>
+            <DialogDescription className="text-muted-foreground/60 text-center text-sm">
+              Reserve your Documenso public profile username
+            </DialogDescription>
+          </DialogHeader>
+
+          <Card className="relative flex flex-col items-center border-none bg-gray-50 px-6 py-6 pb-0 shadow-none">
+            <code className="rounded-md border-2 border-gray-200 px-1 py-1 text-sm">
+              <span>documenso.com/u/timur</span>
+            </code>
+            <Avatar className="dark:border-border mt-2 h-20 w-20 border-2 border-solid border-white bg-white">
+              <AvatarImage className="AvatarImage" src={Timur.src} alt="Timur" />
+              <AvatarFallback className="text-xs text-gray-400">Timur</AvatarFallback>
+            </Avatar>
+            <div className="flex flex-row gap-x-2">
+              Timur Ercan <Image alt="Check" src={Check} />
+            </div>
+            <span className="text-muted-foreground/60 text-center">
+              Hey I’m Timur <br /> Pick any of the following agreements below and start signing to
+              get started
+            </span>
+            <Card className="bg mt-2 w-full items-center shadow-none">
+              <CardHeader className="p-4 text-gray-500">Documents</CardHeader>
+              <hr className="mb-2" />
+              <div className="mb-2 flex flex-row items-center justify-between">
+                <div className="flex flex-row items-center gap-x-2">
+                  <File className="ml-3" />
+                  <div className="flex flex-col">
+                    <span className="text-md">NDA.pdf</span>
+                    <span className="text-muted-foreground mt-0.5 text-xs">
+                      Like to discuss about my work?
+                    </span>
+                  </div>
+                </div>
+                <Button className="mr-3" variant="default">
+                  Sign
+                </Button>
+              </div>
+            </Card>
+            <div
+              className="fade-overlay bg-black-100 absolute bottom-0 h-1/4 w-full"
+              style={{
+                background: `linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, white 75%, white 100%)`,
+              }}
+            ></div>
+          </Card>
+
+          <Form {...form}>
+            <form className={cn('flex w-full flex-col')} onSubmit={form.handleSubmit(onFormSubmit)}>
+              <fieldset className="flex w-full flex-col gap-y-4" disabled={isSaving}>
+                <FormField
+                  control={form.control}
+                  name="profileURL"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Public profile URL</FormLabel>
+                      <FormControl>
+                        <>
+                          <Input type="text" className="mb-2 mt-2" {...field} />
+                          <div className="mt-2">
+                            <code className="bg-muted rounded-md px-1 py-1 text-sm">
+                              <span ref={textRef} id="textToCopy">
+                                documenso.com/u/
+                              </span>
+                            </code>
+                          </div>
+                        </>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </fieldset>
+
+              <div className="mt-4 text-center">
+                <Button type="submit" loading={isSaving}>
+                  Claim your username
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+      <Dialog open={false} onOpenChange={setShowClaimedDialog}>
+        <DialogContent position="center" className="pb-4">
+          <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 feature is launched
+            </DialogDescription>
+          </DialogHeader>
+
+          <Card className="relative px-6 py-6">
+            <Card className="flex flex-col items-center px-6 py-6">
+              <code className="bg-muted rounded-md px-1 py-1 text-sm">
+                <span>documenso.com/u/lucas</span>
+              </code>
+              <Avatar className="dark:border-border mt-2 h-12 w-12 border-2 border-solid border-white">
+                <AvatarImage className="AvatarImage" src={Lucas.src} alt="Lucas" />
+                <AvatarFallback className="text-xs text-gray-400">Timur</AvatarFallback>
+              </Avatar>
+              <div className="flex flex-row gap-x-2">
+                Lucas Smith <Image alt="Check" src={Check} />
+              </div>
+              <div className="flex inline-flex h-full w-full flex-col items-center justify-center gap-3 py-2">
+                <Skeleton className="w-75 h-4 animate-none rounded-full" />
+                <Skeleton className="w-50 h-4 animate-none rounded-full" />
+              </div>
+            </Card>
+            <Card className="mt-2 items-center">
+              <CardHeader className="p-2">Documents</CardHeader>
+              <hr className="mb-2" />
+              <div className="mb-2 flex flex-row items-center justify-between">
+                <div className="flex flex-row items-center gap-x-2">
+                  <File className="ml-3" />
+                  <div className="flex flex-col">
+                    <span className="text-md">NDA.pdf</span>
+                    <span className="text-muted-foregroun mt-0.5 text-xs">
+                      Like to discuss about my work?
+                    </span>
+                  </div>
+                </div>
+                <Button className="mr-3" variant="default">
+                  Sign
+                </Button>
+              </div>
+            </Card>
+          </Card>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

apps/web/src/app/(dashboard)/settings/public-profile/layout.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export type PublicProfileSettingsLayout = {
+  children: React.ReactNode;
+};
+
+export default function PublicProfileSettingsLayout({ children }: PublicProfileSettingsLayout) {
+  return <div className="col-span-12 md:col-span-9">{children}</div>;
+}

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import type { Metadata } from 'next';
+import Link from 'next/link';
+
+import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
+
+export const metadata: Metadata = {
+  title: 'Public Profile',
+};
+
+export default function PublicProfilePage() {
+  return (
+    <>
+      <SettingsHeader
+        title="Public profile"
+        subtitle=""
+        className="max-w-xl"
+        titleChildren={
+          <Link
+            href="#"
+            className="bg-primary dark:text-background ml-2 rounded-full px-2 py-1 text-xs font-semibold sm:px-3"
+          >
+            Coming soon!
+          </Link>
+        }
+      />
+    </>
+  );
+}

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,11 @@ 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."
+        titleChildren={<ActivityPageBackButton />}
+      />
 
       <hr className="my-4" />
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -34,7 +34,7 @@ export default function ErrorPage({ error }: ErrorProps) {
 
         <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
           <Button
-            variant="ghost"
+            variant="secondary"
             className="w-32"
             onClick={() => {
               void router.back();

apps/web/src/app/(teams)/t/[teamUrl]/not-found.tsx

@@ -19,7 +19,7 @@ export default function NotFound() {
         </p>
 
         <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
-          <Button asChild className="w-32">
+          <Button variant="secondary" asChild className="w-32">
             <Link href="/settings/teams">
               <ChevronLeft className="mr-2 h-4 w-4" />
               Go Back

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Image from 'next/image';
+
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import { Card } from '@documenso/ui/primitives/card';
+
+import { NewHeader } from '../../../components/(dashboard)/layout/new/new-header';
+
+type CheckEmailLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function CheckEmailLayout({ children }: CheckEmailLayoutProps) {
+  return (
+    <>
+      <NewHeader className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+      <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">
+            <Image
+              src={backgroundPattern}
+              alt="background pattern"
+              className="dark:brightness-95 dark:contrast-[70%] dark:invert dark:sepia"
+            />
+          </div>
+          <Card className="px-6 py-6">
+            <div className="w-full">{children}</div>
+          </Card>
+        </div>
+      </main>
+    </>
+  );
+}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Image from 'next/image';
+
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import { Card } from '@documenso/ui/primitives/card';
+
+import { NewHeader } from '../../../components/(dashboard)/layout/new/new-header';
+
+type ForgotPasswordLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function ForgotPasswordLayout({ children }: ForgotPasswordLayoutProps) {
+  return (
+    <>
+      <NewHeader className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+      <main className="bg-sand-100 relative flex flex-col items-center justify-center overflow-hidden  px-4 py-12 md:p-12 lg:p-44">
+        <div className="absolute -inset-96 -z-[1] flex items-center justify-center bg-contain opacity-50">
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="dark:brightness-95 dark:contrast-[70%] dark:invert dark:sepia"
+          />
+        </div>
+        <div className="relative flex w-full max-w-md items-center gap-x-24">
+          <Card className="px-6 py-6">
+            <div className="w-full">{children}</div>
+          </Card>
+        </div>
+      </main>
+    </>
+  );
+}

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

@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 export default function ForgotPasswordPage() {
   return (
     <div>
-      <h1 className="text-4xl font-semibold">Forgot your password?</h1>
+      <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

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

@@ -1,27 +0,0 @@
-import React from 'react';
-
-import Image from 'next/image';
-
-import backgroundPattern from '@documenso/assets/images/background-pattern.png';
-
-type UnauthenticatedLayoutProps = {
-  children: React.ReactNode;
-};
-
-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">
-          <Image
-            src={backgroundPattern}
-            alt="background pattern"
-            className="dark:brightness-95 dark:contrast-[70%] dark:invert dark:sepia"
-          />
-        </div>
-
-        <div className="w-full">{children}</div>
-      </div>
-    </main>
-  );
-}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Image from 'next/image';
+
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import { Card } from '@documenso/ui/primitives/card';
+
+import { NewHeader } from '../../../components/(dashboard)/layout/new/new-header';
+
+type ResetPasswordLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function ResetPasswordLayout({ children }: ResetPasswordLayoutProps) {
+  return (
+    <>
+      <NewHeader className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+      <main className="bg-sand-100 relative flex flex-col items-center justify-center overflow-hidden  px-4 py-12 md:p-12 lg:p-56">
+        <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">
+            <Image
+              src={backgroundPattern}
+              alt="background pattern"
+              className="dark:brightness-95 dark:contrast-[70%] dark:invert dark:sepia"
+            />
+          </div>
+          <Card className="px-6 py-6">
+            <div className="w-full">{children}</div>
+          </Card>
+        </div>
+      </main>
+    </>
+  );
+}

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

@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 export default function ResetPasswordPage() {
   return (
     <div>
-      <h1 className="text-4xl font-semibold">Unable to reset password</h1>
+      <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

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Image from 'next/image';
+
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import { Card } from '@documenso/ui/primitives/card';
+
+import { NewHeader } from '../../../components/(dashboard)/layout/new/new-header';
+
+type SignInLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function SignInLayout({ children }: SignInLayoutProps) {
+  return (
+    <>
+      <NewHeader className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+      <main className="bg-sand-100 relative flex flex-col items-center justify-center overflow-hidden px-4 py-12 md:p-12 lg:p-[7.2rem]">
+        <div className="absolute -inset-96 -z-[1] flex items-center justify-center bg-contain opacity-50">
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="flex min-h-screen flex-col overflow-hidden dark:brightness-95 dark:contrast-[70%] dark:invert dark:sepia"
+          />
+        </div>
+        <div className="relative flex w-full max-w-md items-center gap-x-24">
+          <Card className="px-6 py-6">
+            <div className="w-full">{children}</div>
+          </Card>
+        </div>
+      </main>
+    </>
+  );
+}

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

@@ -26,36 +26,31 @@ export default function SignInPage({ searchParams }: SignInPageProps) {
   }
 
   return (
-    <div>
-      <h1 className="text-4xl font-semibold">Sign in to your account</h1>
+    <>
+      <div>
+        <h1 className="text-3xl 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}
-      />
-
-      {process.env.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/60 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>
-    </div>
+        <hr className="my-4" />
+
+        <SignInForm
+          className="mt-0"
+          initialEmail={email || undefined}
+          isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
+        />
+
+        {process.env.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>
+        )}
+      </div>
+    </>
   );
 }

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

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { NewHeader } from '../../../components/(dashboard)/layout/new/new-header';
+
+type SignUpLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function SignUpLayout({ children }: SignUpLayoutProps) {
+  return (
+    <>
+      <NewHeader className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+      <main
+        className="bg-sand-100 scale-90 items-center justify-center px-4 md:h-20 lg:mx-28 lg:px-8"
+        style={{ height: 'calc(100vh - 80px)' }}
+      >
+        <div className="grid grid-cols-12 gap-y-8 overflow-hidden p-2 lg:gap-x-8">{children}</div>
+      </main>
+    </>
+  );
+}

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

@@ -1,8 +1,6 @@
 import type { Metadata } from 'next';
-import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
-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';
@@ -30,26 +28,8 @@ 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>
+    <>
+      <SignUpForm className="mt-1" initialEmail={email || undefined} isGoogleSSOEnabled={true} />
+    </>
   );
 }

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Image from 'next/image';
+
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import { Card } from '@documenso/ui/primitives/card';
+
+import { NewHeader } from '../../../components/(dashboard)/layout/new/new-header';
+
+type TeamLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function TeamLayout({ children }: TeamLayoutProps) {
+  return (
+    <>
+      <NewHeader className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+      <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">
+            <Image
+              src={backgroundPattern}
+              alt="background pattern"
+              className="dark:brightness-95 dark:contrast-[70%] dark:invert dark:sepia"
+            />
+          </div>
+          <Card className="px-6 py-6">
+            <div className="w-full">{children}</div>
+          </Card>
+        </div>
+      </main>
+    </>
+  );
+}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Image from 'next/image';
+
+import backgroundPattern from '@documenso/assets/images/background-pattern.png';
+import { Card } from '@documenso/ui/primitives/card';
+
+import { NewHeader } from '../../../components/(dashboard)/layout/new/new-header';
+
+type VerifyEmailLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function VerifyEmailLayout({ children }: VerifyEmailLayoutProps) {
+  return (
+    <>
+      <NewHeader className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
+      <main className="bg-sand-100 relative flex flex-col items-center justify-center overflow-hidden  px-4 py-12 md:p-12 lg:p-[11.2rem]">
+        <div className="absolute -inset-96 -z-[1] flex items-center justify-center bg-contain opacity-50">
+          <Image
+            src={backgroundPattern}
+            alt="background pattern"
+            className="dark:brightness-95 dark:contrast-[70%] dark:invert dark:sepia"
+          />
+        </div>
+        <div className="relative flex w-full max-w-md items-center gap-x-24">
+          <Card className="px-6 py-6">
+            <div className="w-full">{children}</div>
+          </Card>
+        </div>
+      </main>
+    </>
+  );
+}

apps/web/src/components/(dashboard)/claim-username-card/claim-username-card.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import React from 'react';
+
+import Image from 'next/image';
+
+import { File } from 'lucide-react';
+
+import Check from '@documenso/assets/Check.svg';
+import Timur from '@documenso/assets/images/Timur.png';
+import backgroundPattern from '@documenso/assets/images/background-blog-og.png';
+import { cn } from '@documenso/ui/lib/utils';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardFooter, CardHeader } from '@documenso/ui/primitives/card';
+
+type ClaimUsernameCardProps = {
+  className: string;
+};
+
+export default function ClaimUsernameCard({ className }: ClaimUsernameCardProps) {
+  const onSignUpClick = () => {};
+  return (
+    <div className={cn('relative', className)}>
+      <Card className={cn('relative h-full overflow-hidden px-16 py-16 shadow-none')}>
+        <Image
+          src={backgroundPattern}
+          alt="background pattern"
+          className="absolute left-0 top-0 h-full w-full bg-cover opacity-50 dark:brightness-95 dark:contrast-[100%] dark:invert"
+        />
+        <Card className="mt-28 flex flex-col items-center px-6 py-6 shadow-none">
+          <code className="rounded-md border-2 border-gray-200 px-1 py-1 text-sm">
+            <span>documenso.com/u/timur</span>
+          </code>
+          <Avatar className="dark:border-border mt-2 h-20 w-20 border-2 border-solid border-white">
+            <AvatarImage className="AvatarImage" src={Timur.src} alt="Timur" />
+            <AvatarFallback className="text-xs text-gray-400">Timur</AvatarFallback>
+          </Avatar>
+          <div className="mb-2 flex flex-row gap-x-2">
+            Timur Ercan <Image alt="Check" src={Check} />
+          </div>
+          <span className="text-muted-foreground/60 text-center ">
+            Hey I’m Timur <br /> Pick any of the following agreements below and <br /> start signing
+            to get started
+          </span>
+          <Card className="mt-2 w-full items-center shadow-none">
+            <CardHeader className="p-4 text-gray-500">Documents</CardHeader>
+            <hr className="mb-2" />
+            <div className="mb-2 flex flex-row items-center justify-between">
+              <div className="flex flex-row items-center gap-x-2">
+                <File className="text-muted-foreground ml-3" />
+                <div className="flex flex-col">
+                  <span className="text-md">NDA.pdf</span>
+                  <span className="text-muted-foreground mt-0.5 text-xs">
+                    Like to discuss about my work?
+                  </span>
+                </div>
+              </div>
+              <Button className="mr-3 px-6" variant="default">
+                Sign
+              </Button>
+            </div>
+            <hr className="mb-2" />
+            <div className="mb-2 flex flex-row items-center justify-between">
+              <div className="flex flex-row items-center gap-x-2">
+                <File className="text-muted-foreground ml-3" />
+                <div className="flex flex-col">
+                  <span className="text-md">NDA.pdf</span>
+                  <span className="text-muted-foreground mt-0.5 text-xs">
+                    Like to discuss about my work?
+                  </span>
+                </div>
+              </div>
+              <Button className="mr-3 px-6" variant="default">
+                Sign
+              </Button>
+            </div>
+          </Card>
+        </Card>
+
+        <CardFooter className="mt-32 justify-center">
+          <Button
+            type="button"
+            variant="outline"
+            className="rounded-full bg-transparent backdrop-blur-sm"
+            onClick={onSignUpClick}
+          >
+            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">
+              -80%
+            </span>
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

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

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

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

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

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

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

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

@@ -0,0 +1,87 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+import { useState } from 'react';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import LogoImage from '@documenso/assets/logo.png';
+import { cn } from '@documenso/ui/lib/utils';
+
+import { NewHamburgerMenu } from './new-mobile-hamburger';
+import { NewMobileNavigation } from './new-mobile-navigation';
+
+export type HeaderProps = HTMLAttributes<HTMLElement>;
+
+export const NewHeader = ({ className, ...props }: HeaderProps) => {
+  const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
+
+  return (
+    <header className={cn('flex items-center justify-between', className)} {...props}>
+      <div className="flex items-center space-x-4">
+        <Link href="/" className="z-10" onClick={() => setIsHamburgerMenuOpen(false)}>
+          <Image
+            src={LogoImage}
+            alt="Documenso Logo"
+            className="dark:invert"
+            width={170}
+            height={25}
+          />
+        </Link>
+      </div>
+
+      <div className="hidden items-center gap-x-6 md:flex">
+        <Link
+          href="https://documenso.com/pricing"
+          target="_blank"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
+          Pricing
+        </Link>
+
+        <Link
+          href="https://documenso.com/blog"
+          target="_blank"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
+          Blog
+        </Link>
+
+        <Link
+          href="https://documenso.com/open"
+          target="_blank"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
+          Open Startup
+        </Link>
+
+        <Link
+          href="/signin"
+          target="_blank"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
+          Sign in
+        </Link>
+        <Link
+          href="/signup"
+          target="_blank"
+          className="text-muted-foreground hover:text-muted-foreground/80 text-sm font-semibold"
+        >
+          <span className="bg-primary dark:text-background rounded-full px-3 py-2 text-xs">
+            Sign up
+          </span>
+        </Link>
+      </div>
+
+      <NewHamburgerMenu
+        onToggleMenuOpen={() => setIsHamburgerMenuOpen((v) => !v)}
+        isMenuOpen={isHamburgerMenuOpen}
+      />
+      <NewMobileNavigation
+        isMenuOpen={isHamburgerMenuOpen}
+        onMenuOpenChange={setIsHamburgerMenuOpen}
+      />
+    </header>
+  );
+};

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

@@ -0,0 +1,20 @@
+'use client';
+
+import { Menu, X } from 'lucide-react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export interface HamburgerMenuProps {
+  isMenuOpen: boolean;
+  onToggleMenuOpen?: () => void;
+}
+
+export const NewHamburgerMenu = ({ isMenuOpen, onToggleMenuOpen }: HamburgerMenuProps) => {
+  return (
+    <div className="flex md:hidden">
+      <Button variant="outline" className="z-20 w-10 p-0" onClick={onToggleMenuOpen}>
+        {isMenuOpen ? <X /> : <Menu />}
+      </Button>
+    </div>
+  );
+};

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

@@ -0,0 +1,151 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { motion, useReducedMotion } from 'framer-motion';
+import { FaXTwitter } from 'react-icons/fa6';
+import { LiaDiscord } from 'react-icons/lia';
+import { LuGithub } from 'react-icons/lu';
+
+import LogoImage from '@documenso/assets/logo.png';
+import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
+
+export type MobileNavigationProps = {
+  isMenuOpen: boolean;
+  onMenuOpenChange?: (_value: boolean) => void;
+};
+
+export const MENU_NAVIGATION_LINKS = [
+  {
+    href: 'https://documenso.com/singleplayer',
+    text: 'Singleplayer',
+  },
+  {
+    href: 'https://documenso.com/blog',
+    text: 'Blog',
+  },
+  {
+    href: 'https://documenso.com/pricing',
+    text: 'Pricing',
+  },
+  {
+    href: 'https://documenso.com/open',
+    text: 'Open Startup',
+  },
+  {
+    href: 'https://status.documenso.com',
+    text: 'Status',
+  },
+  {
+    href: 'mailto:support@documenso.com',
+    text: 'Support',
+    target: '_blank',
+  },
+  {
+    href: 'https://documenso.com/privacy',
+    text: 'Privacy',
+  },
+  {
+    href: '/signin',
+    text: 'Sign in',
+  },
+  {
+    href: '/signup',
+    text: 'Sign up',
+  },
+];
+
+export const NewMobileNavigation = ({ isMenuOpen, onMenuOpenChange }: MobileNavigationProps) => {
+  const shouldReduceMotion = useReducedMotion();
+
+  const handleMenuItemClick = () => {
+    onMenuOpenChange?.(false);
+  };
+
+  return (
+    <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
+      <SheetContent className="w-full max-w-[400px]">
+        <Link href="/" className="z-10" onClick={handleMenuItemClick}>
+          <Image
+            src={LogoImage}
+            alt="Documenso Logo"
+            className="dark:invert"
+            width={170}
+            height={25}
+          />
+        </Link>
+
+        <motion.div
+          className="mt-12 flex w-full flex-col items-start gap-y-4"
+          initial="initial"
+          animate="animate"
+          transition={{
+            staggerChildren: 0.03,
+          }}
+        >
+          {MENU_NAVIGATION_LINKS.map(({ href, text, target }) => (
+            <motion.div
+              key={href}
+              variants={{
+                initial: {
+                  opacity: 0,
+                  x: shouldReduceMotion ? 0 : 100,
+                },
+                animate: {
+                  opacity: 1,
+                  x: 0,
+                  transition: {
+                    duration: 0.5,
+                    ease: 'backInOut',
+                  },
+                },
+              }}
+            >
+              <Link
+                className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+                href={href}
+                onClick={() => handleMenuItemClick()}
+                target={target}
+              >
+                {href === 'https://app.documenso.com/signup' ? (
+                  <span className="bg-primary dark:text-background rounded-full px-3 py-2 text-xl">
+                    {text}
+                  </span>
+                ) : (
+                  text
+                )}
+              </Link>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        <div className="mx-auto mt-8 flex w-full flex-wrap items-center gap-x-4 gap-y-4 ">
+          <Link
+            href="https://twitter.com/documenso"
+            target="_blank"
+            className="text-foreground hover:text-foreground/80"
+          >
+            <FaXTwitter className="h-6 w-6" />
+          </Link>
+
+          <Link
+            href="https://github.com/documenso/documenso"
+            target="_blank"
+            className="text-foreground hover:text-foreground/80"
+          >
+            <LuGithub className="h-6 w-6" />
+          </Link>
+
+          <Link
+            href="https://documen.so/discord"
+            target="_blank"
+            className="text-foreground hover:text-foreground/80"
+          >
+            <LiaDiscord className="h-7 w-7" />
+          </Link>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};

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 { CreditCard, Lock, User, Users } from 'lucide-react';
+import { CreditCard, Globe2, Lock, User, Users } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -78,6 +78,25 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
           </Button>
         </Link>
       )}
+
+      <Link href="#">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
+          )}
+        >
+          <Globe2 className="mr-2 h-5 w-5" />
+          Public profile
+          <Link
+            href="#"
+            className="bg-primary dark:text-background ml-2 rounded-full px-2 py-1 text-xs font-semibold sm:px-3"
+          >
+            Coming soon!
+          </Link>
+        </Button>
+      </Link>
     </div>
   );
 };

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

@@ -1,21 +1,33 @@
 import React from 'react';
 
+import { cn } from '@documenso/ui/lib/utils';
+
 export type SettingsHeaderProps = {
   title: string;
   subtitle: string;
   children?: React.ReactNode;
+  titleChildren?: React.ReactNode;
+  className?: string;
 };
 
-export const SettingsHeader = ({ children, title, subtitle }: SettingsHeaderProps) => {
+export const SettingsHeader = ({
+  children,
+  title,
+  subtitle,
+  titleChildren,
+  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>
 
           <p className="text-muted-foreground text-sm md:mt-2">{subtitle}</p>
         </div>
 
+        <div>{titleChildren}</div>
+
         {children}
       </div>
 

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

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { CreditCard, Lock, User, Users } from 'lucide-react';
+import { CreditCard, Globe2, Lock, User, Users } from 'lucide-react';
 
 import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { cn } from '@documenso/ui/lib/utils';
@@ -81,6 +81,25 @@ export const MobileNav = ({ className, ...props }: MobileNavProps) => {
           </Button>
         </Link>
       )}
+
+      <Link href="#">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
+          )}
+        >
+          <Globe2 className="mr-2 h-5 w-5" />
+          Public profile
+          <Link
+            href="#"
+            className="bg-primary dark:text-background ml-2 rounded-full px-2 py-1 text-xs font-semibold sm:px-3"
+          >
+            Coming soon!
+          </Link>
+        </Button>
+      </Link>
     </div>
   );
 };

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

@@ -2,6 +2,8 @@
 
 import { useState } from 'react';
 
+import Link from 'next/link';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
@@ -167,135 +169,147 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
   };
 
   return (
-    <Form {...form}>
-      <form
-        className={cn('flex w-full flex-col gap-y-4', className)}
-        onSubmit={form.handleSubmit(onFormSubmit)}
-      >
-        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Email</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>
-            )}
-          />
-        </fieldset>
-
-        <Button
-          type="submit"
-          size="lg"
-          loading={isSubmitting}
-          className="dark:bg-documenso dark:hover:opacity-90"
+    <div className={cn('mt-1')}>
+      <Form {...form}>
+        <form
+          className={cn('flex w-full flex-col gap-y-4', className)}
+          onSubmit={form.handleSubmit(onFormSubmit)}
         >
-          {isSubmitting ? 'Signing in...' : 'Sign In'}
-        </Button>
-
-        {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 continue with</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={onSignInWithGoogleClick}
-            >
-              <FcGoogle className="mr-2 h-5 w-5" />
-              Google
-            </Button>
-          </>
-        )}
-      </form>
-
-      <Dialog
-        open={isTwoFactorAuthenticationDialogOpen}
-        onOpenChange={onCloseTwoFactorAuthenticationDialog}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Two-Factor Authentication</DialogTitle>
-          </DialogHeader>
-
-          <form onSubmit={form.handleSubmit(onFormSubmit)}>
-            <fieldset disabled={isSubmitting}>
-              {twoFactorAuthenticationMethod === 'totp' && (
-                <FormField
-                  control={form.control}
-                  name="totpCode"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Authentication Token</FormLabel>
-                      <FormControl>
-                        <Input type="text" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
+          <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input type="email" placeholder="john@example.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
               )}
+            />
 
-              {twoFactorAuthenticationMethod === 'backup' && (
-                <FormField
-                  control={form.control}
-                  name="backupCode"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel> Backup Code</FormLabel>
-                      <FormControl>
-                        <Input type="text" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <>
+                      <PasswordInput placeholder="Password" {...field} />
+                      <p className="mt-2.5 text-right">
+                        <Link
+                          href="/forgot-password"
+                          className="text-muted-foreground/60 text-sm duration-200 hover:opacity-70"
+                        >
+                          Forgot your password?
+                        </Link>
+                      </p>
+                    </>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
               )}
+            />
+          </fieldset>
 
-              <DialogFooter className="mt-4">
-                <Button
-                  type="button"
-                  variant="secondary"
-                  onClick={onToggleTwoFactorAuthenticationMethodClick}
-                >
-                  {twoFactorAuthenticationMethod === 'totp'
-                    ? 'Use Backup Code'
-                    : 'Use Authenticator'}
-                </Button>
+          <Button
+            type="submit"
+            size="lg"
+            loading={isSubmitting}
+            className="dark:bg-documenso dark:hover:opacity-90"
+          >
+            {isSubmitting ? 'Signing in...' : 'Sign In'}
+          </Button>
 
-                <Button type="submit" loading={isSubmitting}>
-                  {isSubmitting ? 'Signing in...' : 'Sign In'}
-                </Button>
-              </DialogFooter>
-            </fieldset>
-          </form>
-        </DialogContent>
-      </Dialog>
-    </Form>
+          {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 continue with</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={onSignInWithGoogleClick}
+              >
+                <FcGoogle className="mr-2 h-5 w-5" />
+                Google
+              </Button>
+            </>
+          )}
+        </form>
+
+        <Dialog
+          open={isTwoFactorAuthenticationDialogOpen}
+          onOpenChange={onCloseTwoFactorAuthenticationDialog}
+        >
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Two-Factor Authentication</DialogTitle>
+            </DialogHeader>
+
+            <form onSubmit={form.handleSubmit(onFormSubmit)}>
+              <fieldset disabled={isSubmitting}>
+                {twoFactorAuthenticationMethod === 'totp' && (
+                  <FormField
+                    control={form.control}
+                    name="totpCode"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Authentication Token</FormLabel>
+                        <FormControl>
+                          <Input type="text" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                )}
+
+                {twoFactorAuthenticationMethod === 'backup' && (
+                  <FormField
+                    control={form.control}
+                    name="backupCode"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel> Backup Code</FormLabel>
+                        <FormControl>
+                          <Input type="text" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                )}
+
+                <DialogFooter className="mt-4">
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    onClick={onToggleTwoFactorAuthenticationMethodClick}
+                  >
+                    {twoFactorAuthenticationMethod === 'totp'
+                      ? 'Use Backup Code'
+                      : 'Use Authenticator'}
+                  </Button>
+
+                  <Button type="submit" loading={isSubmitting}>
+                    {isSubmitting ? 'Signing in...' : 'Sign In'}
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </DialogContent>
+        </Dialog>
+      </Form>
+    </div>
   );
 };

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

@@ -1,5 +1,10 @@
 'use client';
 
+import { useMemo, useState } from 'react';
+
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
@@ -12,6 +17,7 @@ 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 { Card } from '@documenso/ui/primitives/card';
 import {
   Form,
   FormControl,
@@ -25,6 +31,16 @@ 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 ClaimUsernameCard from '../(dashboard)/claim-username-card/claim-username-card';
+
+export const STEP = {
+  SIGNUP: 'SIGNUP',
+  CLAIM: 'CLAIM',
+} as const;
+
+type StepKeys = keyof typeof STEP;
+type StepValues = (typeof STEP)[StepKeys];
+
 const SIGN_UP_REDIRECT_PATH = '/documents';
 
 export const ZSignUpFormSchema = z
@@ -33,6 +49,7 @@ export const ZSignUpFormSchema = z
     email: z.string().email().min(1),
     password: ZPasswordSchema,
     signature: z.string().min(1, { message: 'We need your signature to sign documents' }),
+    profileURL: z.string().trim().min(1, { message: 'Please enter a valid URL slug.' }),
   })
   .refine(
     (data) => {
@@ -55,6 +72,13 @@ export type SignUpFormProps = {
 export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: SignUpFormProps) => {
   const { toast } = useToast();
   const analytics = useAnalytics();
+  const searchParams = useSearchParams();
+  const [step, setStep] = useState<StepValues>(STEP.SIGNUP);
+
+  let src: string | null = null;
+  if (searchParams) {
+    src = searchParams.get('src');
+  }
 
   const form = useForm<TSignUpFormSchema>({
     values: {
@@ -62,18 +86,33 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
       email: initialEmail ?? '',
       password: '',
       signature: '',
+      profileURL: '',
     },
     resolver: zodResolver(ZSignUpFormSchema),
   });
 
   const isSubmitting = form.formState.isSubmitting;
+  const isValid = form.formState.isValid;
+
+  const signature = form.watch('signature');
 
   const { mutateAsync: signup } = trpc.auth.signup.useMutation();
+  const { mutateAsync: updatePublicProfile } = trpc.profile.updatePublicProfile.useMutation();
 
-  const onFormSubmit = async ({ name, email, password, signature }: TSignUpFormSchema) => {
+  const onFormSubmit = async ({
+    name,
+    email,
+    password,
+    signature,
+    profileURL,
+  }: TSignUpFormSchema) => {
     try {
       await signup({ name, email, password, signature });
 
+      await updatePublicProfile({
+        profileURL,
+      });
+
       await signIn('credentials', {
         email,
         password,
@@ -83,6 +122,7 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
       analytics.capture('App: User Sign Up', {
         email,
         timestamp: new Date().toISOString(),
+        custom_campaign_params: { src },
       });
     } catch (err) {
       if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
@@ -102,6 +142,16 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
     }
   };
 
+  const onNextStepClick = () => {
+    if (step === STEP.SIGNUP) {
+      setStep(STEP.CLAIM);
+
+      setTimeout(() => {
+        document.querySelector<HTMLElement>('#signature')?.focus();
+      }, 0);
+    }
+  };
+
   const onSignUpWithGoogleClick = async () => {
     try {
       await signIn('google', { callbackUrl: SIGN_UP_REDIRECT_PATH });
@@ -115,107 +165,199 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
     }
   };
 
+  const stepsRemaining = useMemo(() => {
+    if (step === STEP.CLAIM) {
+      return 2;
+    }
+    return 1;
+  }, [step]);
+
   return (
-    <Form {...form}>
-      <form
-        className={cn('flex w-full flex-col gap-y-4', className)}
-        onSubmit={form.handleSubmit(onFormSubmit)}
-      >
-        <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
-          <FormField
-            control={form.control}
-            name="name"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Name</FormLabel>
-                <FormControl>
-                  <Input type="text" {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+    <>
+      <ClaimUsernameCard className="col-span-12 gap-y-4 lg:col-span-7" />
+      <Card className="col-span-12 gap-y-4 bg-gray-50 px-6 py-6 shadow-none lg:col-span-5">
+        <div className="w-full">
+          {step === STEP.SIGNUP && (
+            <>
+              <h1 className="text-3xl font-semibold">Create a new account</h1>
 
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Email</FormLabel>
-                <FormControl>
-                  <Input type="email" {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+              <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>
+            </>
+          )}
+          {step === STEP.CLAIM && (
+            <>
+              <h1 className="text-3xl font-semibold">Claim your username now</h1>
 
-          <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>
-            )}
-          />
-        </fieldset>
-
-        <Button
-          type="submit"
-          size="lg"
-          loading={isSubmitting}
-          className="dark:bg-documenso dark:hover:opacity-90"
-        >
-          {isSubmitting ? 'Signing up...' : 'Sign Up'}
-        </Button>
-
-        {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}
+              <p className="text-muted-foreground/60 mt-2 text-sm">
+                You will get notified & be able to set up your documenso public profile when we
+                launch the feature
+              </p>
+            </>
+          )}
+          <hr className="mb-6 mt-4" />
+          <Form {...form}>
+            <form
+              className={cn('flex h-full w-full flex-col gap-y-4', className)}
+              onSubmit={form.handleSubmit(onFormSubmit)}
             >
-              <FcGoogle className="mr-2 h-5 w-5" />
-              Sign Up with Google
-            </Button>
-          </>
-        )}
-      </form>
-    </Form>
+              <fieldset className="flex w-full flex-col gap-y-4" disabled={isSubmitting}>
+                <div className={cn(step === STEP.SIGNUP && 'hidden')}>
+                  <FormField
+                    control={form.control}
+                    name="profileURL"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Public profile URL</FormLabel>
+                        <FormControl>
+                          <>
+                            <Input id="username" type="text" className="mb-2 mt-2" {...field} />
+                            <div className="mt-2">
+                              <code className="bg-muted rounded-md px-1 py-1 text-sm">
+                                documenso.com/u/
+                              </code>
+                            </div>
+                          </>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+                <div className={cn('space-y-2', step === STEP.CLAIM && 'invisible')}>
+                  <FormField
+                    control={form.control}
+                    name="name"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Full Name</FormLabel>
+                        <FormControl>
+                          <Input type="text" className="bg-white" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="email"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Email Address</FormLabel>
+                        <FormControl>
+                          <Input type="email" className="bg-white" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="password"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Password</FormLabel>
+                        <FormControl>
+                          <PasswordInput className="bg-white" {...field} />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="signature"
+                    render={({ field: { onChange } }) => (
+                      <FormItem>
+                        <FormLabel>Sign Here</FormLabel>
+                        <FormControl>
+                          <SignaturePad
+                            id="signatureText"
+                            className="w-full"
+                            disabled={isSubmitting}
+                            containerClassName="mt-2 rounded-lg border bg-background"
+                            onChange={(v) => onChange(v ?? '')}
+                            height={200}
+                          />
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </fieldset>
+
+              {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 text-left text-sm">
+                Already have an account?{' '}
+                <Link href="/signin" className="text-primary duration-200 hover:opacity-70">
+                  Sign in instead
+                </Link>
+              </p>
+              <div className="mt-6 flex items-center justify-between">
+                <p className="text-muted-foreground text-xs">
+                  {isValid ? 'Claim username' : `Basic details ${stepsRemaining}/2`}
+                </p>
+
+                <p className="text-muted-foreground block text-xs md:hidden">Minimise contract</p>
+              </div>
+
+              <div className="bg-background relative h-[2px] w-full">
+                <div
+                  className={cn('bg-primary/60 absolute inset-y-0 left-0 duration-200', {
+                    'w-1/2': stepsRemaining === 1,
+                    'w-full': isValid,
+                  })}
+                />
+              </div>
+              {!isValid && (
+                <Button
+                  loading={isSubmitting}
+                  className="dark:bg-documenso ml-auto w-52 dark:hover:opacity-90"
+                  onClick={() => onNextStepClick()}
+                >
+                  Next
+                </Button>
+              )}
+              {isValid && (
+                <Button
+                  type="submit"
+                  loading={isSubmitting}
+                  className="dark:bg-documenso ml-auto w-52 dark:hover:opacity-90"
+                >
+                  Complete
+                </Button>
+              )}
+            </form>
+          </Form>
+        </div>
+      </Card>
+    </>
   );
 };

apps/web/src/components/partials/not-found.tsx

@@ -46,7 +46,7 @@ export default function NotFoundPartial({ children }: NotFoundPartialProps) {
 
           <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
             <Button
-              variant="ghost"
+              variant="secondary"
               className="w-32"
               onClick={() => {
                 void router.back();

apps/web/src/providers/posthog.tsx

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

package-lock.json

@@ -14503,6 +14503,7 @@
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.7.tgz",
       "integrity": "sha512-rUtR77ksqex/eZRLmQ21LKVH5nAAsVicAtAYudK7JgwenEDZ0UIQ1adUGqErz7sMkWYxWTTU1aeP2Jga6WQyJw==",
+      "peer": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -19495,14 +19496,14 @@
         "@react-email/section": "0.0.10",
         "@react-email/tailwind": "0.0.9",
         "@react-email/text": "0.0.6",
-        "nodemailer": "^6.9.3",
+        "nodemailer": "^6.9.9",
         "react-email": "^1.9.5",
         "resend": "^2.0.0"
       },
       "devDependencies": {
         "@documenso/tailwind-config": "*",
         "@documenso/tsconfig": "*",
-        "@types/nodemailer": "^6.4.8",
+        "@types/nodemailer": "^6.4.14",
         "tsup": "^7.1.0"
       }
     },
@@ -19520,6 +19521,14 @@
         "node": ">=16.0.0"
       }
     },
+    "packages/email/node_modules/nodemailer": {
+      "version": "6.9.9",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.9.tgz",
+      "integrity": "sha512-dexTll8zqQoVJEZPwQAKzxxtFn0qTnjdQTchoU6Re9BUUGBJiOy3YMn/0ShTW6J5M0dfQ1NeDeRTTl4oIWgQMA==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "packages/eslint-config": {
       "name": "@documenso/eslint-config",
       "version": "0.0.0",

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

@@ -0,0 +1,205 @@
+import { expect, test } from '@playwright/test';
+
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import { seedTeam, unseedTeam } from '@documenso/prisma/seed/teams';
+import { seedTemplate } from '@documenso/prisma/seed/templates';
+
+import { manualLogin } from '../fixtures/authentication';
+
+test.describe.configure({ mode: 'parallel' });
+
+test('[TEMPLATES]: view templates', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+  const teamMemberUser = team.members[1].user;
+
+  // Should only be visible to the owner in personal templates.
+  await seedTemplate({
+    title: 'Personal template',
+    userId: owner.id,
+  });
+
+  // Should be visible to team members.
+  await seedTemplate({
+    title: 'Team template 1',
+    userId: owner.id,
+    teamId: team.id,
+  });
+
+  // Should be visible to team members.
+  await seedTemplate({
+    title: 'Team template 2',
+    userId: teamMemberUser.id,
+    teamId: team.id,
+  });
+
+  await manualLogin({
+    page,
+    email: owner.email,
+    redirectPath: '/templates',
+  });
+
+  // Owner should see both team templates.
+  await page.goto(`${WEBAPP_BASE_URL}/t/${team.url}/templates`);
+  await expect(page.getByRole('main')).toContainText('Showing 2 results');
+
+  // Only should only see their personal template.
+  await page.goto(`${WEBAPP_BASE_URL}/templates`);
+  await expect(page.getByRole('main')).toContainText('Showing 1 result');
+
+  await unseedTeam(team.url);
+});
+
+test('[TEMPLATES]: delete template', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+  const teamMemberUser = team.members[1].user;
+
+  // Should only be visible to the owner in personal templates.
+  await seedTemplate({
+    title: 'Personal template',
+    userId: owner.id,
+  });
+
+  // Should be visible to team members.
+  await seedTemplate({
+    title: 'Team template 1',
+    userId: owner.id,
+    teamId: team.id,
+  });
+
+  // Should be visible to team members.
+  await seedTemplate({
+    title: 'Team template 2',
+    userId: teamMemberUser.id,
+    teamId: team.id,
+  });
+
+  await manualLogin({
+    page,
+    email: owner.email,
+    redirectPath: '/templates',
+  });
+
+  // Owner should be able to delete their personal template.
+  await page.getByRole('cell', { name: 'Use Template' }).getByRole('button').nth(1).click();
+  await page.getByRole('menuitem', { name: 'Delete' }).click();
+  await page.getByRole('button', { name: 'Delete' }).click();
+  await expect(page.getByText('Template deleted').first()).toBeVisible();
+
+  // Team member should be able to delete all templates.
+  await page.goto(`${WEBAPP_BASE_URL}/t/${team.url}/templates`);
+
+  for (const template of ['Team template 1', 'Team template 2']) {
+    await page
+      .getByRole('row', { name: template })
+      .getByRole('cell', { name: 'Use Template' })
+      .getByRole('button')
+      .nth(1)
+      .click();
+
+    await page.getByRole('menuitem', { name: 'Delete' }).click();
+    await page.getByRole('button', { name: 'Delete' }).click();
+    await expect(page.getByText('Template deleted').first()).toBeVisible();
+  }
+
+  await unseedTeam(team.url);
+});
+
+test('[TEMPLATES]: duplicate template', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+  const teamMemberUser = team.members[1].user;
+
+  // Should only be visible to the owner in personal templates.
+  await seedTemplate({
+    title: 'Personal template',
+    userId: owner.id,
+  });
+
+  // Should be visible to team members.
+  await seedTemplate({
+    title: 'Team template 1',
+    userId: teamMemberUser.id,
+    teamId: team.id,
+  });
+
+  await manualLogin({
+    page,
+    email: owner.email,
+    redirectPath: '/templates',
+  });
+
+  // Duplicate personal template.
+  await page.getByRole('cell', { name: 'Use Template' }).getByRole('button').nth(1).click();
+  await page.getByRole('menuitem', { name: 'Duplicate' }).click();
+  await page.getByRole('button', { name: 'Duplicate' }).click();
+  await expect(page.getByText('Template duplicated').first()).toBeVisible();
+  await expect(page.getByRole('main')).toContainText('Showing 2 results');
+
+  await page.goto(`${WEBAPP_BASE_URL}/t/${team.url}/templates`);
+
+  // Duplicate team template.
+  await page.getByRole('cell', { name: 'Use Template' }).getByRole('button').nth(1).click();
+  await page.getByRole('menuitem', { name: 'Duplicate' }).click();
+  await page.getByRole('button', { name: 'Duplicate' }).click();
+  await expect(page.getByText('Template duplicated').first()).toBeVisible();
+  await expect(page.getByRole('main')).toContainText('Showing 2 results');
+
+  await unseedTeam(team.url);
+});
+
+test('[TEMPLATES]: use template', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+  const teamMemberUser = team.members[1].user;
+
+  // Should only be visible to the owner in personal templates.
+  await seedTemplate({
+    title: 'Personal template',
+    userId: owner.id,
+  });
+
+  // Should be visible to team members.
+  await seedTemplate({
+    title: 'Team template 1',
+    userId: teamMemberUser.id,
+    teamId: team.id,
+  });
+
+  await manualLogin({
+    page,
+    email: owner.email,
+    redirectPath: '/templates',
+  });
+
+  // Use personal template.
+  await page.getByRole('button', { name: 'Use Template' }).click();
+  await page.waitForURL(/documents/);
+  await page.getByRole('main').getByRole('link', { name: 'Documents' }).click();
+  await page.waitForURL('/documents');
+  await expect(page.getByRole('main')).toContainText('Showing 1 result');
+
+  await page.goto(`${WEBAPP_BASE_URL}/t/${team.url}/templates`);
+
+  // Use team template.
+  await page.getByRole('button', { name: 'Use Template' }).click();
+  await page.waitForURL(/\/t\/.+\/documents/);
+  await page.getByRole('main').getByRole('link', { name: 'Documents' }).click();
+  await page.waitForURL(`/t/${team.url}/documents`);
+  await expect(page.getByRole('main')).toContainText('Showing 1 result');
+
+  await unseedTeam(team.url);
+});

packages/assets/Check.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.54572 1.10579C9.57786 -0.0821356 11.4223 -0.0821393 12.4545 1.10579L13.2585 2.03112C13.3917 2.18452 13.5947 2.25838 13.7954 2.22654L15.0061 2.03449C16.5603 1.78794 17.9732 2.97353 18.0003 4.54698L18.0214 5.77262C18.0249 5.97581 18.1329 6.16284 18.3071 6.26746L19.358 6.89855C20.7071 7.70873 21.0274 9.52517 20.0368 10.7479L19.2651 11.7004C19.1372 11.8583 19.0997 12.0709 19.1659 12.2631L19.5652 13.422C20.0779 14.9098 19.1557 16.5072 17.6109 16.8071L16.4075 17.0407C16.208 17.0794 16.0426 17.2182 15.9698 17.408L15.5308 18.5525C14.9672 20.0218 13.234 20.6526 11.8578 19.8893L10.7858 19.2948C10.6081 19.1962 10.3921 19.1962 10.2144 19.2948L9.14242 19.8893C7.76623 20.6526 6.033 20.0218 5.4694 18.5525L5.03038 17.408C4.9576 17.2182 4.79216 17.0794 4.59268 17.0407L3.38932 16.8071C1.84448 16.5072 0.922245 14.9098 1.43495 13.422L1.83431 12.2631C1.90052 12.0709 1.86302 11.8583 1.7351 11.7004L0.963432 10.7479C-0.0272148 9.52517 0.293068 7.70873 1.64218 6.89855L2.69306 6.26746C2.86728 6.16284 2.97526 5.97581 2.97875 5.77263L2.99985 4.54699C3.02694 2.97354 4.43987 1.78794 5.99413 2.03449L7.20481 2.22654C7.40551 2.25838 7.60845 2.18452 7.74173 2.03112L8.54572 1.10579ZM13.7072 9.42195C14.0977 9.03143 14.0977 8.39826 13.7072 8.00774C13.3167 7.61721 12.6835 7.61721 12.293 8.00774L9.5001 10.8006L8.7072 10.0077C8.31667 9.61721 7.68351 9.61721 7.29298 10.0077C6.90246 10.3983 6.90246 11.0314 7.29298 11.422L8.43944 12.5684C9.02522 13.1542 9.97497 13.1542 10.5608 12.5684L13.7072 9.42195Z" fill="#7AC455"/>
+</svg>

packages/email/package.json

@@ -35,14 +35,14 @@
     "@react-email/section": "0.0.10",
     "@react-email/tailwind": "0.0.9",
     "@react-email/text": "0.0.6",
-    "nodemailer": "^6.9.3",
+    "nodemailer": "^6.9.9",
     "react-email": "^1.9.5",
     "resend": "^2.0.0"
   },
   "devDependencies": {
     "@documenso/tailwind-config": "*",
     "@documenso/tsconfig": "*",
-    "@types/nodemailer": "^6.4.8",
+    "@types/nodemailer": "^6.4.14",
     "tsup": "^7.1.0"
   }
 }

packages/lib/constants/recipient-roles.ts

@@ -24,3 +24,9 @@ export const RECIPIENT_ROLES_DESCRIPTION: {
     roleName: 'Viewer',
   },
 };
+
+export const RECIPIENT_ROLE_TO_EMAIL_TYPE = {
+  [RecipientRole.SIGNER]: 'SIGNING_REQUEST',
+  [RecipientRole.VIEWER]: 'VIEW_REQUEST',
+  [RecipientRole.APPROVER]: 'APPROVE_REQUEST',
+} as const;

packages/lib/constants/teams.ts

@@ -1,6 +1,7 @@
 import { TeamMemberRole } from '@documenso/prisma/client';
 
 export const TEAM_URL_ROOT_REGEX = new RegExp('^/t/[^/]+$');
+export const TEAM_URL_REGEX = new RegExp('^/t/[^/]+');
 
 export const TEAM_MEMBER_ROLE_MAP: Record<keyof typeof TeamMemberRole, string> = {
   ADMIN: 'Admin',

packages/lib/constants/url-regex.ts

@@ -0,0 +1,2 @@
+export const URL_REGEX =
+  /^(https?):\/\/(?:www\.)?[a-zA-Z0-9-]+\.[a-zA-Z0-9()]{2,}(?:\/[a-zA-Z0-9-._?&=/]*)?$/i;

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

@@ -1,7 +1,7 @@
 'use server';
 
 import { prisma } from '@documenso/prisma';
-import { DocumentDataType } from '@documenso/prisma/client';
+import type { DocumentDataType } from '@documenso/prisma/client';
 
 export type CreateDocumentDataOptions = {
   type: DocumentDataType;

packages/lib/server-only/document-meta/upsert-document-meta.ts

@@ -1,5 +1,11 @@
 'use server';
 
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import {
+  createDocumentAuditLogData,
+  diffDocumentMetaChanges,
+} from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 
 export type CreateDocumentMetaOptions = {
@@ -9,7 +15,9 @@ export type CreateDocumentMetaOptions = {
   timezone?: string;
   password?: string;
   dateFormat?: string;
+  redirectUrl?: string;
   userId: number;
+  requestMetadata: RequestMetadata;
 };
 
 export const upsertDocumentMeta = async ({
@@ -18,47 +26,81 @@ export const upsertDocumentMeta = async ({
   timezone,
   dateFormat,
   documentId,
-  userId,
   password,
+  userId,
+  redirectUrl,
+  requestMetadata,
 }: CreateDocumentMetaOptions) => {
-  await prisma.document.findFirstOrThrow({
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    select: {
+      id: true,
+      email: true,
+      name: true,
+    },
+  });
+
+  const { documentMeta: originalDocumentMeta } = await prisma.document.findFirstOrThrow({
     where: {
       id: documentId,
       OR: [
         {
-          userId,
+          userId: user.id,
         },
         {
           team: {
             members: {
               some: {
-                userId,
+                userId: user.id,
               },
             },
           },
         },
       ],
     },
+    include: {
+      documentMeta: true,
+    },
   });
 
-  return await prisma.documentMeta.upsert({
-    where: {
-      documentId,
-    },
-    create: {
-      subject,
-      message,
-      dateFormat,
-      timezone,
-      password,
-      documentId,
-    },
-    update: {
-      subject,
-      message,
-      dateFormat,
-      password,
-      timezone,
-    },
+  return await prisma.$transaction(async (tx) => {
+    const upsertedDocumentMeta = await tx.documentMeta.upsert({
+      where: {
+        documentId,
+      },
+      create: {
+        subject,
+        message,
+        password,
+        dateFormat,
+        timezone,
+        documentId,
+        redirectUrl,
+      },
+      update: {
+        subject,
+        message,
+        password,
+        dateFormat,
+        timezone,
+        redirectUrl,
+      },
+    });
+
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_META_UPDATED,
+        documentId,
+        user,
+        requestMetadata,
+        data: {
+          changes: diffDocumentMetaChanges(originalDocumentMeta ?? {}, upsertedDocumentMeta),
+        },
+      }),
+    });
+
+    return upsertedDocumentMeta;
   });
 };

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

@@ -1,5 +1,8 @@
 'use server';
 
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+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 { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 
@@ -9,11 +12,13 @@ import { sendPendingEmail } from './send-pending-email';
 export type CompleteDocumentWithTokenOptions = {
   token: string;
   documentId: number;
+  requestMetadata?: RequestMetadata;
 };
 
 export const completeDocumentWithToken = async ({
   token,
   documentId,
+  requestMetadata,
 }: CompleteDocumentWithTokenOptions) => {
   'use server';
 
@@ -70,6 +75,24 @@ export const completeDocumentWithToken = async ({
     },
   });
 
+  await prisma.documentAuditLog.create({
+    data: createDocumentAuditLogData({
+      type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED,
+      documentId: document.id,
+      user: {
+        name: recipient.name,
+        email: recipient.email,
+      },
+      requestMetadata,
+      data: {
+        recipientEmail: recipient.email,
+        recipientName: recipient.name,
+        recipientId: recipient.id,
+        recipientRole: recipient.role,
+      },
+    }),
+  });
+
   const pendingRecipients = await prisma.recipient.count({
     where: {
       documentId: document.id,
@@ -99,6 +122,6 @@ export const completeDocumentWithToken = async ({
   });
 
   if (documents.count > 0) {
-    await sealDocument({ documentId: document.id });
+    await sealDocument({ documentId: document.id, requestMetadata });
   }
 };

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

@@ -1,5 +1,9 @@
 'use server';
 
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 
 export type CreateDocumentOptions = {
@@ -7,6 +11,7 @@ export type CreateDocumentOptions = {
   userId: number;
   teamId?: number;
   documentDataId: string;
+  requestMetadata?: RequestMetadata;
 };
 
 export const createDocument = async ({
@@ -14,22 +19,30 @@ export const createDocument = async ({
   title,
   documentDataId,
   teamId,
+  requestMetadata,
 }: CreateDocumentOptions) => {
-  return await prisma.$transaction(async (tx) => {
-    if (teamId !== undefined) {
-      await tx.team.findFirstOrThrow({
-        where: {
-          id: teamId,
-          members: {
-            some: {
-              userId,
-            },
-          },
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    include: {
+      teamMembers: {
+        select: {
+          teamId: true,
         },
-      });
-    }
+      },
+    },
+  });
 
-    return await tx.document.create({
+  if (
+    teamId !== undefined &&
+    !user.teamMembers.some((teamMember) => teamMember.teamId === teamId)
+  ) {
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Team not found');
+  }
+
+  return await prisma.$transaction(async (tx) => {
+    const document = await tx.document.create({
       data: {
         title,
         documentDataId,
@@ -37,5 +50,19 @@ export const createDocument = async ({
         teamId,
       },
     });
+
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_CREATED,
+        documentId: document.id,
+        user,
+        requestMetadata,
+        data: {
+          title,
+        },
+      }),
+    });
+
+    return document;
   });
 };

packages/lib/server-only/document/duplicate-document-by-id.ts

@@ -39,6 +39,7 @@ export const duplicateDocumentById = async ({
           dateFormat: true,
           password: true,
           timezone: true,
+          redirectUrl: true,
         },
       },
     },

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

@@ -27,6 +27,7 @@ export const getDocumentAndSenderByToken = async ({
     include: {
       User: true,
       documentData: true,
+      documentMeta: true,
     },
   });
 

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

@@ -4,12 +4,18 @@ import { mailer } from '@documenso/email/mailer';
 import { render } from '@documenso/email/render';
 import { DocumentInviteEmailTemplate } from '@documenso/email/templates/document-invite';
 import { FROM_ADDRESS, FROM_NAME } from '@documenso/lib/constants/email';
+import {
+  RECIPIENT_ROLES_DESCRIPTION,
+  RECIPIENT_ROLE_TO_EMAIL_TYPE,
+} from '@documenso/lib/constants/recipient-roles';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { renderCustomEmailTemplate } from '@documenso/lib/utils/render-custom-email-template';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@documenso/prisma/client';
 import type { Prisma } from '@documenso/prisma/client';
 
-import { RECIPIENT_ROLES_DESCRIPTION } from '../../constants/recipient-roles';
 import { getDocumentWhereInput } from './get-document-by-id';
 
 export type ResendDocumentOptions = {
@@ -17,6 +23,7 @@ export type ResendDocumentOptions = {
   userId: number;
   recipients: number[];
   teamId?: number;
+  requestMetadata: RequestMetadata;
 };
 
 export const resendDocument = async ({
@@ -24,6 +31,7 @@ export const resendDocument = async ({
   userId,
   recipients,
   teamId,
+  requestMetadata,
 }: ResendDocumentOptions) => {
   const user = await prisma.user.findFirstOrThrow({
     where: {
@@ -76,6 +84,8 @@ export const resendDocument = async ({
         return;
       }
 
+      const recipientEmailType = RECIPIENT_ROLE_TO_EMAIL_TYPE[recipient.role];
+
       const { email, name } = recipient;
 
       const customEmailTemplate = {
@@ -99,20 +109,39 @@ export const resendDocument = async ({
 
       const { actionVerb } = RECIPIENT_ROLES_DESCRIPTION[recipient.role];
 
-      await mailer.sendMail({
-        to: {
-          address: email,
-          name,
-        },
-        from: {
-          name: FROM_NAME,
-          address: FROM_ADDRESS,
-        },
-        subject: customEmail?.subject
-          ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
-          : `Please ${actionVerb.toLowerCase()} this document`,
-        html: render(template),
-        text: render(template, { plainText: true }),
+      await prisma.$transaction(async (tx) => {
+        await mailer.sendMail({
+          to: {
+            address: email,
+            name,
+          },
+          from: {
+            name: FROM_NAME,
+            address: FROM_ADDRESS,
+          },
+          subject: customEmail?.subject
+            ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
+            : `Please ${actionVerb.toLowerCase()} this document`,
+          html: render(template),
+          text: render(template, { plainText: true }),
+        });
+
+        await tx.documentAuditLog.create({
+          data: createDocumentAuditLogData({
+            type: DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT,
+            documentId: document.id,
+            user,
+            requestMetadata,
+            data: {
+              emailType: recipientEmailType,
+              recipientEmail: recipient.email,
+              recipientName: recipient.name,
+              recipientRole: recipient.role,
+              recipientId: recipient.id,
+              isResending: true,
+            },
+          }),
+        });
       });
     }),
   );

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

@@ -5,10 +5,13 @@ import path from 'node:path';
 import { PDFDocument } from 'pdf-lib';
 
 import PostHogServerClient from '@documenso/lib/server-only/feature-flags/get-post-hog-server-client';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, RecipientRole, SigningStatus } 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';
@@ -17,9 +20,14 @@ import { sendCompletedEmail } from './send-completed-email';
 export type SealDocumentOptions = {
   documentId: number;
   sendEmail?: boolean;
+  requestMetadata?: RequestMetadata;
 };
 
-export const sealDocument = async ({ documentId, sendEmail = true }: SealDocumentOptions) => {
+export const sealDocument = async ({
+  documentId,
+  sendEmail = true,
+  requestMetadata,
+}: SealDocumentOptions) => {
   'use server';
 
   const document = await prisma.document.findFirstOrThrow({
@@ -100,16 +108,30 @@ export const sealDocument = async ({ documentId, sendEmail = true }: SealDocumen
     });
   }
 
-  await prisma.documentData.update({
-    where: {
-      id: documentData.id,
-    },
-    data: {
-      data: newData,
-    },
+  await prisma.$transaction(async (tx) => {
+    await tx.documentData.update({
+      where: {
+        id: documentData.id,
+      },
+      data: {
+        data: newData,
+      },
+    });
+
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_COMPLETED,
+        documentId: document.id,
+        requestMetadata,
+        user: null,
+        data: {
+          transactionId: nanoid(),
+        },
+      }),
+    });
   });
 
   if (sendEmail) {
-    await sendCompletedEmail({ documentId });
+    await sendCompletedEmail({ documentId, requestMetadata });
   }
 };

packages/lib/server-only/document/send-completed-email.ts

@@ -5,13 +5,17 @@ import { render } from '@documenso/email/render';
 import { DocumentCompletedEmailTemplate } from '@documenso/email/templates/document-completed';
 import { prisma } from '@documenso/prisma';
 
+import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { getFile } from '../../universal/upload/get-file';
+import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
 
 export interface SendDocumentOptions {
   documentId: number;
+  requestMetadata?: RequestMetadata;
 }
 
-export const sendCompletedEmail = async ({ documentId }: SendDocumentOptions) => {
+export const sendCompletedEmail = async ({ documentId, requestMetadata }: SendDocumentOptions) => {
   const document = await prisma.document.findUnique({
     where: {
       id: documentId,
@@ -44,24 +48,43 @@ export const sendCompletedEmail = async ({ documentId }: SendDocumentOptions) =>
         downloadLink: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/sign/${token}/complete`,
       });
 
-      await mailer.sendMail({
-        to: {
-          address: email,
-          name,
-        },
-        from: {
-          name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
-          address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
-        },
-        subject: 'Signing Complete!',
-        html: render(template),
-        text: render(template, { plainText: true }),
-        attachments: [
-          {
-            filename: document.title,
-            content: Buffer.from(buffer),
+      await prisma.$transaction(async (tx) => {
+        await mailer.sendMail({
+          to: {
+            address: email,
+            name,
           },
-        ],
+          from: {
+            name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
+            address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
+          },
+          subject: 'Signing Complete!',
+          html: render(template),
+          text: render(template, { plainText: true }),
+          attachments: [
+            {
+              filename: document.title,
+              content: Buffer.from(buffer),
+            },
+          ],
+        });
+
+        await tx.documentAuditLog.create({
+          data: createDocumentAuditLogData({
+            type: DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT,
+            documentId: document.id,
+            user: null,
+            requestMetadata,
+            data: {
+              emailType: 'DOCUMENT_COMPLETED',
+              recipientEmail: recipient.email,
+              recipientName: recipient.name,
+              recipientId: recipient.id,
+              recipientRole: recipient.role,
+              isResending: false,
+            },
+          }),
+        });
       });
     }),
   );

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

@@ -4,22 +4,37 @@ import { mailer } from '@documenso/email/mailer';
 import { render } from '@documenso/email/render';
 import { DocumentInviteEmailTemplate } from '@documenso/email/templates/document-invite';
 import { FROM_ADDRESS, FROM_NAME } from '@documenso/lib/constants/email';
+import {
+  RECIPIENT_ROLES_DESCRIPTION,
+  RECIPIENT_ROLE_TO_EMAIL_TYPE,
+} from '@documenso/lib/constants/recipient-roles';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { renderCustomEmailTemplate } from '@documenso/lib/utils/render-custom-email-template';
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, RecipientRole, SendStatus } from '@documenso/prisma/client';
 
-import { RECIPIENT_ROLES_DESCRIPTION } from '../../constants/recipient-roles';
-
 export type SendDocumentOptions = {
   documentId: number;
   userId: number;
+  requestMetadata?: RequestMetadata;
 };
 
-export const sendDocument = async ({ documentId, userId }: SendDocumentOptions) => {
+export const sendDocument = async ({
+  documentId,
+  userId,
+  requestMetadata,
+}: SendDocumentOptions) => {
   const user = await prisma.user.findFirstOrThrow({
     where: {
       id: userId,
     },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+    },
   });
 
   const document = await prisma.document.findUnique({
@@ -66,6 +81,8 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
         return;
       }
 
+      const recipientEmailType = RECIPIENT_ROLE_TO_EMAIL_TYPE[recipient.role];
+
       const { email, name } = recipient;
 
       const customEmailTemplate = {
@@ -89,29 +106,48 @@ export const sendDocument = async ({ documentId, userId }: SendDocumentOptions)
 
       const { actionVerb } = RECIPIENT_ROLES_DESCRIPTION[recipient.role];
 
-      await mailer.sendMail({
-        to: {
-          address: email,
-          name,
-        },
-        from: {
-          name: FROM_NAME,
-          address: FROM_ADDRESS,
-        },
-        subject: customEmail?.subject
-          ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
-          : `Please ${actionVerb.toLowerCase()} this document`,
-        html: render(template),
-        text: render(template, { plainText: true }),
-      });
+      await prisma.$transaction(async (tx) => {
+        await mailer.sendMail({
+          to: {
+            address: email,
+            name,
+          },
+          from: {
+            name: FROM_NAME,
+            address: FROM_ADDRESS,
+          },
+          subject: customEmail?.subject
+            ? renderCustomEmailTemplate(customEmail.subject, customEmailTemplate)
+            : `Please ${actionVerb.toLowerCase()} this document`,
+          html: render(template),
+          text: render(template, { plainText: true }),
+        });
 
-      await prisma.recipient.update({
-        where: {
-          id: recipient.id,
-        },
-        data: {
-          sendStatus: SendStatus.SENT,
-        },
+        await tx.recipient.update({
+          where: {
+            id: recipient.id,
+          },
+          data: {
+            sendStatus: SendStatus.SENT,
+          },
+        });
+
+        await tx.documentAuditLog.create({
+          data: createDocumentAuditLogData({
+            type: DOCUMENT_AUDIT_LOG_TYPE.EMAIL_SENT,
+            documentId: document.id,
+            user,
+            requestMetadata,
+            data: {
+              emailType: recipientEmailType,
+              recipientEmail: recipient.email,
+              recipientName: recipient.name,
+              recipientRole: recipient.role,
+              recipientId: recipient.id,
+              isResending: false,
+            },
+          }),
+        });
       });
     }),
   );

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

@@ -1,34 +1,76 @@
 'use server';
 
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 
 export type UpdateTitleOptions = {
   userId: number;
   documentId: number;
   title: string;
+  requestMetadata?: RequestMetadata;
 };
 
-export const updateTitle = async ({ userId, documentId, title }: UpdateTitleOptions) => {
-  return await prisma.document.update({
+export const updateTitle = async ({
+  userId,
+  documentId,
+  title,
+  requestMetadata,
+}: UpdateTitleOptions) => {
+  const user = await prisma.user.findFirstOrThrow({
     where: {
-      id: documentId,
-      OR: [
-        {
-          userId,
-        },
-        {
-          team: {
-            members: {
-              some: {
-                userId,
+      id: userId,
+    },
+  });
+
+  return await prisma.$transaction(async (tx) => {
+    const document = await tx.document.findFirstOrThrow({
+      where: {
+        id: documentId,
+        OR: [
+          {
+            userId,
+          },
+          {
+            team: {
+              members: {
+                some: {
+                  userId,
+                },
               },
             },
           },
+        ],
+      },
+    });
+
+    if (document.title === title) {
+      return document;
+    }
+
+    const updatedDocument = await tx.document.update({
+      where: {
+        id: documentId,
+      },
+      data: {
+        title,
+      },
+    });
+
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_TITLE_UPDATED,
+        documentId,
+        user,
+        requestMetadata,
+        data: {
+          from: document.title,
+          to: updatedDocument.title,
         },
-      ],
-    },
-    data: {
-      title,
-    },
+      }),
+    });
+
+    return updatedDocument;
   });
 };

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

@@ -1,11 +1,15 @@
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+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 { ReadStatus } from '@documenso/prisma/client';
 
 export type ViewedDocumentOptions = {
   token: string;
+  requestMetadata?: RequestMetadata;
 };
 
-export const viewedDocument = async ({ token }: ViewedDocumentOptions) => {
+export const viewedDocument = async ({ token, requestMetadata }: ViewedDocumentOptions) => {
   const recipient = await prisma.recipient.findFirst({
     where: {
       token,
@@ -13,16 +17,38 @@ export const viewedDocument = async ({ token }: ViewedDocumentOptions) => {
     },
   });
 
-  if (!recipient) {
+  if (!recipient || !recipient.documentId) {
     return;
   }
 
-  await prisma.recipient.update({
-    where: {
-      id: recipient.id,
-    },
-    data: {
-      readStatus: ReadStatus.OPENED,
-    },
+  const { documentId } = recipient;
+
+  await prisma.$transaction(async (tx) => {
+    await tx.recipient.update({
+      where: {
+        id: recipient.id,
+      },
+      data: {
+        readStatus: ReadStatus.OPENED,
+      },
+    });
+
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED,
+        documentId,
+        user: {
+          name: recipient.name,
+          email: recipient.email,
+        },
+        requestMetadata,
+        data: {
+          recipientEmail: recipient.email,
+          recipientId: recipient.id,
+          recipientName: recipient.name,
+          recipientRole: recipient.role,
+        },
+      }),
+    });
   });
 };

packages/lib/server-only/field/get-fields-for-template.ts

@@ -10,7 +10,20 @@ export const getFieldsForTemplate = async ({ templateId, userId }: GetFieldsForT
     where: {
       templateId,
       Template: {
-        userId,
+        OR: [
+          {
+            userId,
+          },
+          {
+            team: {
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          },
+        ],
       },
     },
     orderBy: {

packages/lib/server-only/field/remove-signed-field-with-token.ts

@@ -1,16 +1,21 @@
 'use server';
 
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+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 { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
 
 export type RemovedSignedFieldWithTokenOptions = {
   token: string;
   fieldId: number;
+  requestMetadata?: RequestMetadata;
 };
 
 export const removeSignedFieldWithToken = async ({
   token,
   fieldId,
+  requestMetadata,
 }: RemovedSignedFieldWithTokenOptions) => {
   const field = await prisma.field.findFirstOrThrow({
     where: {
@@ -44,8 +49,8 @@ export const removeSignedFieldWithToken = async ({
     throw new Error(`Field ${fieldId} has no recipientId`);
   }
 
-  await Promise.all([
-    prisma.field.update({
+  await prisma.$transaction(async (tx) => {
+    await tx.field.update({
       where: {
         id: field.id,
       },
@@ -53,11 +58,28 @@ export const removeSignedFieldWithToken = async ({
         customText: '',
         inserted: false,
       },
-    }),
-    prisma.signature.deleteMany({
+    });
+
+    await tx.signature.deleteMany({
       where: {
         fieldId: field.id,
       },
-    }),
-  ]);
+    });
+
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_UNINSERTED,
+        documentId: document.id,
+        user: {
+          name: recipient?.name,
+          email: recipient?.email,
+        },
+        requestMetadata,
+        data: {
+          field: field.type,
+          fieldId: field.secondaryId,
+        },
+      }),
+    });
+  });
 };

packages/lib/server-only/field/set-fields-for-document.ts

@@ -1,3 +1,9 @@
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import {
+  createDocumentAuditLogData,
+  diffFieldChanges,
+} from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 import type { FieldType } from '@documenso/prisma/client';
 import { SendStatus, SigningStatus } from '@documenso/prisma/client';
@@ -15,12 +21,14 @@ export interface SetFieldsForDocumentOptions {
     pageWidth: number;
     pageHeight: number;
   }[];
+  requestMetadata?: RequestMetadata;
 }
 
 export const setFieldsForDocument = async ({
   userId,
   documentId,
   fields,
+  requestMetadata,
 }: SetFieldsForDocumentOptions) => {
   const document = await prisma.document.findFirst({
     where: {
@@ -42,10 +50,25 @@ export const setFieldsForDocument = async ({
     },
   });
 
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+    },
+  });
+
   if (!document) {
     throw new Error('Document not found');
   }
 
+  if (document.completedAt) {
+    throw new Error('Document already complete');
+  }
+
   const existingFields = await prisma.field.findMany({
     where: {
       documentId,
@@ -75,56 +98,123 @@ export const setFieldsForDocument = async ({
       );
     });
 
-  const persistedFields = await prisma.$transaction(
-    // Disabling as wrapping promises here causes type issues
-    // eslint-disable-next-line @typescript-eslint/promise-function-async
-    linkedFields.map((field) =>
-      prisma.field.upsert({
-        where: {
-          id: field._persisted?.id ?? -1,
-          documentId,
-        },
-        update: {
-          page: field.pageNumber,
-          positionX: field.pageX,
-          positionY: field.pageY,
-          width: field.pageWidth,
-          height: field.pageHeight,
-        },
-        create: {
-          type: field.type,
-          page: field.pageNumber,
-          positionX: field.pageX,
-          positionY: field.pageY,
-          width: field.pageWidth,
-          height: field.pageHeight,
-          customText: '',
-          inserted: false,
-          Document: {
-            connect: {
-              id: documentId,
-            },
+  const persistedFields = await prisma.$transaction(async (tx) => {
+    await Promise.all(
+      linkedFields.map(async (field) => {
+        const fieldSignerEmail = field.signerEmail.toLowerCase();
+
+        const upsertedField = await tx.field.upsert({
+          where: {
+            id: field._persisted?.id ?? -1,
+            documentId,
           },
-          Recipient: {
-            connect: {
-              documentId_email: {
-                documentId,
-                email: field.signerEmail.toLowerCase(),
+          update: {
+            page: field.pageNumber,
+            positionX: field.pageX,
+            positionY: field.pageY,
+            width: field.pageWidth,
+            height: field.pageHeight,
+          },
+          create: {
+            type: field.type,
+            page: field.pageNumber,
+            positionX: field.pageX,
+            positionY: field.pageY,
+            width: field.pageWidth,
+            height: field.pageHeight,
+            customText: '',
+            inserted: false,
+            Document: {
+              connect: {
+                id: documentId,
+              },
+            },
+            Recipient: {
+              connect: {
+                documentId_email: {
+                  documentId,
+                  email: fieldSignerEmail,
+                },
               },
             },
           },
-        },
+        });
+
+        if (upsertedField.recipientId === null) {
+          throw new Error('Not possible');
+        }
+
+        const baseAuditLog = {
+          fieldId: upsertedField.secondaryId,
+          fieldRecipientEmail: fieldSignerEmail,
+          fieldRecipientId: upsertedField.recipientId,
+          fieldType: upsertedField.type,
+        };
+
+        const changes = field._persisted ? diffFieldChanges(field._persisted, upsertedField) : [];
+
+        // Handle field updated audit log.
+        if (field._persisted && changes.length > 0) {
+          await tx.documentAuditLog.create({
+            data: createDocumentAuditLogData({
+              type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_UPDATED,
+              documentId: documentId,
+              user,
+              requestMetadata,
+              data: {
+                changes,
+                ...baseAuditLog,
+              },
+            }),
+          });
+        }
+
+        // Handle field created audit log.
+        if (!field._persisted) {
+          await tx.documentAuditLog.create({
+            data: createDocumentAuditLogData({
+              type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_CREATED,
+              documentId: documentId,
+              user,
+              requestMetadata,
+              data: {
+                ...baseAuditLog,
+              },
+            }),
+          });
+        }
+
+        return upsertedField;
       }),
-    ),
-  );
+    );
+  });
 
   if (removedFields.length > 0) {
-    await prisma.field.deleteMany({
-      where: {
-        id: {
-          in: removedFields.map((field) => field.id),
+    await prisma.$transaction(async (tx) => {
+      await tx.field.deleteMany({
+        where: {
+          id: {
+            in: removedFields.map((field) => field.id),
+          },
         },
-      },
+      });
+
+      await tx.documentAuditLog.createMany({
+        data: removedFields.map((field) =>
+          createDocumentAuditLogData({
+            type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_DELETED,
+            documentId: documentId,
+            user,
+            requestMetadata,
+            data: {
+              fieldId: field.secondaryId,
+              fieldRecipientEmail: field.Recipient?.email ?? '',
+              fieldRecipientId: field.recipientId ?? -1,
+              fieldType: field.type,
+            },
+          }),
+        ),
+      });
     });
   }
 

packages/lib/server-only/field/set-fields-for-template.ts

@@ -27,7 +27,20 @@ export const setFieldsForTemplate = async ({
   const template = await prisma.template.findFirst({
     where: {
       id: templateId,
-      userId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
     },
   });
 

packages/lib/server-only/field/sign-field-with-token.ts

@@ -1,18 +1,23 @@
 'use server';
 
 import { DateTime } from 'luxon';
+import { match } from 'ts-pattern';
 
 import { prisma } from '@documenso/prisma';
 import { DocumentStatus, FieldType, SigningStatus } from '@documenso/prisma/client';
 
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '../../constants/date-formats';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '../../constants/time-zones';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
 
 export type SignFieldWithTokenOptions = {
   token: string;
   fieldId: number;
   value: string;
   isBase64?: boolean;
+  requestMetadata?: RequestMetadata;
 };
 
 export const signFieldWithToken = async ({
@@ -20,6 +25,7 @@ export const signFieldWithToken = async ({
   fieldId,
   value,
   isBase64,
+  requestMetadata,
 }: SignFieldWithTokenOptions) => {
   const field = await prisma.field.findFirstOrThrow({
     where: {
@@ -40,6 +46,10 @@ export const signFieldWithToken = async ({
     throw new Error(`Document not found for field ${field.id}`);
   }
 
+  if (!recipient) {
+    throw new Error(`Recipient not found for field ${field.id}`);
+  }
+
   if (document.status === DocumentStatus.COMPLETED) {
     throw new Error(`Document ${document.id} has already been completed`);
   }
@@ -123,6 +133,38 @@ export const signFieldWithToken = async ({
       });
     }
 
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_INSERTED,
+        documentId: document.id,
+        user: {
+          email: recipient.email,
+          name: recipient.name,
+        },
+        requestMetadata,
+        data: {
+          recipientEmail: recipient.email,
+          recipientId: recipient.id,
+          recipientName: recipient.name,
+          recipientRole: recipient.role,
+          fieldId: updatedField.secondaryId,
+          field: match(updatedField.type)
+            .with(FieldType.SIGNATURE, FieldType.FREE_SIGNATURE, (type) => ({
+              type,
+              data: signatureImageAsBase64 || typedSignature || '',
+            }))
+            .with(FieldType.DATE, FieldType.EMAIL, FieldType.NAME, FieldType.TEXT, (type) => ({
+              type,
+              data: updatedField.customText,
+            }))
+            .exhaustive(),
+          fieldSecurity: {
+            type: 'NONE',
+          },
+        },
+      }),
+    });
+
     return updatedField;
   });
 };

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

@@ -13,7 +13,20 @@ export const getRecipientsForTemplate = async ({
     where: {
       templateId,
       Template: {
-        userId,
+        OR: [
+          {
+            userId,
+          },
+          {
+            team: {
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          },
+        ],
       },
     },
     orderBy: {

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

@@ -1,9 +1,14 @@
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import { nanoid } from '@documenso/lib/universal/id';
+import {
+  createDocumentAuditLogData,
+  diffRecipientChanges,
+} from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
 import { RecipientRole } from '@documenso/prisma/client';
 import { SendStatus, SigningStatus } from '@documenso/prisma/client';
 
-import { nanoid } from '../../universal/id';
-
 export interface SetRecipientsForDocumentOptions {
   userId: number;
   documentId: number;
@@ -13,12 +18,14 @@ export interface SetRecipientsForDocumentOptions {
     name: string;
     role: RecipientRole;
   }[];
+  requestMetadata?: RequestMetadata;
 }
 
 export const setRecipientsForDocument = async ({
   userId,
   documentId,
   recipients,
+  requestMetadata,
 }: SetRecipientsForDocumentOptions) => {
   const document = await prisma.document.findFirst({
     where: {
@@ -40,10 +47,25 @@ export const setRecipientsForDocument = async ({
     },
   });
 
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+    },
+  });
+
   if (!document) {
     throw new Error('Document not found');
   }
 
+  if (document.completedAt) {
+    throw new Error('Document already complete');
+  }
+
   const normalizedRecipients = recipients.map((recipient) => ({
     ...recipient,
     email: recipient.email.toLowerCase(),
@@ -77,49 +99,127 @@ export const setRecipientsForDocument = async ({
     })
     .filter((recipient) => {
       return (
-        recipient._persisted?.sendStatus !== SendStatus.SENT &&
-        recipient._persisted?.signingStatus !== SigningStatus.SIGNED
+        recipient._persisted?.role === RecipientRole.CC ||
+        (recipient._persisted?.sendStatus !== SendStatus.SENT &&
+          recipient._persisted?.signingStatus !== SigningStatus.SIGNED)
       );
     });
 
-  const persistedRecipients = await prisma.$transaction(
-    // Disabling as wrapping promises here causes type issues
-    // eslint-disable-next-line @typescript-eslint/promise-function-async
-    linkedRecipients.map((recipient) =>
-      prisma.recipient.upsert({
-        where: {
-          id: recipient._persisted?.id ?? -1,
-          documentId,
-        },
-        update: {
-          name: recipient.name,
-          email: recipient.email,
-          role: recipient.role,
-          documentId,
-          signingStatus:
-            recipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
-        },
-        create: {
-          name: recipient.name,
-          email: recipient.email,
-          role: recipient.role,
-          token: nanoid(),
-          documentId,
-          sendStatus: recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
-          signingStatus:
-            recipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
-        },
+  const persistedRecipients = await prisma.$transaction(async (tx) => {
+    await Promise.all(
+      linkedRecipients.map(async (recipient) => {
+        const upsertedRecipient = await tx.recipient.upsert({
+          where: {
+            id: recipient._persisted?.id ?? -1,
+            documentId,
+          },
+          update: {
+            name: recipient.name,
+            email: recipient.email,
+            role: recipient.role,
+            documentId,
+            sendStatus: recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
+            signingStatus:
+              recipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
+          },
+          create: {
+            name: recipient.name,
+            email: recipient.email,
+            role: recipient.role,
+            token: nanoid(),
+            documentId,
+            sendStatus: recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
+            signingStatus:
+              recipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
+          },
+        });
+
+        const recipientId = upsertedRecipient.id;
+
+        // Clear all fields if the recipient role is changed to a type that cannot have fields.
+        if (
+          recipient._persisted &&
+          recipient._persisted.role !== recipient.role &&
+          (recipient.role === RecipientRole.CC || recipient.role === RecipientRole.VIEWER)
+        ) {
+          await tx.field.deleteMany({
+            where: {
+              recipientId,
+            },
+          });
+        }
+
+        const baseAuditLog = {
+          recipientEmail: upsertedRecipient.email,
+          recipientName: upsertedRecipient.name,
+          recipientId,
+          recipientRole: upsertedRecipient.role,
+        };
+
+        const changes = recipient._persisted
+          ? diffRecipientChanges(recipient._persisted, upsertedRecipient)
+          : [];
+
+        // Handle recipient updated audit log.
+        if (recipient._persisted && changes.length > 0) {
+          await tx.documentAuditLog.create({
+            data: createDocumentAuditLogData({
+              type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_UPDATED,
+              documentId: documentId,
+              user,
+              requestMetadata,
+              data: {
+                changes,
+                ...baseAuditLog,
+              },
+            }),
+          });
+        }
+
+        // Handle recipient created audit log.
+        if (!recipient._persisted) {
+          await tx.documentAuditLog.create({
+            data: createDocumentAuditLogData({
+              type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_CREATED,
+              documentId: documentId,
+              user,
+              requestMetadata,
+              data: baseAuditLog,
+            }),
+          });
+        }
+
+        return upsertedRecipient;
       }),
-    ),
-  );
+    );
+  });
 
   if (removedRecipients.length > 0) {
-    await prisma.recipient.deleteMany({
-      where: {
-        id: {
-          in: removedRecipients.map((recipient) => recipient.id),
+    await prisma.$transaction(async (tx) => {
+      await tx.recipient.deleteMany({
+        where: {
+          id: {
+            in: removedRecipients.map((recipient) => recipient.id),
+          },
         },
-      },
+      });
+
+      await tx.documentAuditLog.createMany({
+        data: removedRecipients.map((recipient) =>
+          createDocumentAuditLogData({
+            type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_DELETED,
+            documentId: documentId,
+            user,
+            requestMetadata,
+            data: {
+              recipientEmail: recipient.email,
+              recipientName: recipient.name,
+              recipientId: recipient.id,
+              recipientRole: recipient.role,
+            },
+          }),
+        ),
+      });
     });
   }
 

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

@@ -20,7 +20,20 @@ export const setRecipientsForTemplate = async ({
   const template = await prisma.template.findFirst({
     where: {
       id: templateId,
-      userId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
     },
   });
 

packages/lib/server-only/team/get-team.ts

@@ -72,8 +72,20 @@ export const getTeamByUrl = async ({ userId, teamUrl }: GetTeamByUrlOptions) =>
     where: whereFilter,
     include: {
       teamEmail: true,
-      emailVerification: true,
-      transferVerification: true,
+      emailVerification: {
+        select: {
+          expiresAt: true,
+          name: true,
+          email: true,
+        },
+      },
+      transferVerification: {
+        select: {
+          expiresAt: true,
+          name: true,
+          email: true,
+        },
+      },
       subscription: true,
       members: {
         where: {

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

@@ -11,7 +11,23 @@ export const createDocumentFromTemplate = async ({
   userId,
 }: CreateDocumentFromTemplateOptions) => {
   const template = await prisma.template.findUnique({
-    where: { id: templateId, userId },
+    where: {
+      id: templateId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
+    },
     include: {
       Recipient: true,
       Field: true,
@@ -34,6 +50,7 @@ export const createDocumentFromTemplate = async ({
   const document = await prisma.document.create({
     data: {
       userId,
+      teamId: template.teamId,
       title: template.title,
       documentDataId: documentData.id,
       Recipient: {

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

@@ -1,20 +1,36 @@
 import { prisma } from '@documenso/prisma';
-import { TCreateTemplateMutationSchema } from '@documenso/trpc/server/template-router/schema';
+import type { TCreateTemplateMutationSchema } from '@documenso/trpc/server/template-router/schema';
 
 export type CreateTemplateOptions = TCreateTemplateMutationSchema & {
   userId: number;
+  teamId?: number;
 };
 
 export const createTemplate = async ({
   title,
   userId,
+  teamId,
   templateDocumentDataId,
 }: CreateTemplateOptions) => {
+  if (teamId) {
+    await prisma.team.findFirstOrThrow({
+      where: {
+        id: teamId,
+        members: {
+          some: {
+            userId,
+          },
+        },
+      },
+    });
+  }
+
   return await prisma.template.create({
     data: {
       title,
       userId,
       templateDocumentDataId,
+      teamId,
     },
   });
 };