feat: migrate nextjs to rr7

apps/remix/.bin/build.sh

@@ -0,0 +1,28 @@
+#!/usr/bin/env bash
+
+# Exit on error.
+set -eo pipefail
+
+cd "$(dirname "$0")/.."
+
+start_time=$(date +%s)
+
+echo "[Build]: Extracting and compiling translations"
+npm run translate --prefix ../../
+
+echo "[Build]: Building app"
+npm run build:app
+
+echo "[Build]: Building server"
+npm run build:server
+
+# Copy over the entry point for the server.
+cp server/main.js build/server/main.js
+
+# Copy over all web.js translations
+cp -r ../../packages/lib/translations build/server/hono/packages/lib/translations
+
+# Time taken
+end_time=$(date +%s)
+
+echo "[Build]: Done in $((end_time - start_time)) seconds"

apps/remix/.dockerignore

@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md

apps/remix/.gitignore

@@ -0,0 +1,9 @@
+.DS_Store
+/node_modules/
+
+# React Router
+/.react-router/
+/build/
+
+# Vite
+vite.config.*.timestamp*

apps/remix/Dockerfile

@@ -0,0 +1,22 @@
+FROM node:20-alpine AS development-dependencies-env
+COPY . /app
+WORKDIR /app
+RUN npm ci
+
+FROM node:20-alpine AS production-dependencies-env
+COPY ./package.json package-lock.json /app/
+WORKDIR /app
+RUN npm ci --omit=dev
+
+FROM node:20-alpine AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN npm run build
+
+FROM node:20-alpine
+COPY ./package.json package-lock.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["npm", "run", "start"]

apps/remix/Dockerfile.bun

@@ -0,0 +1,25 @@
+FROM oven/bun:1 AS dependencies-env
+COPY . /app
+
+FROM dependencies-env AS development-dependencies-env
+COPY ./package.json bun.lockb /app/
+WORKDIR /app
+RUN bun i --frozen-lockfile
+
+FROM dependencies-env AS production-dependencies-env
+COPY ./package.json bun.lockb /app/
+WORKDIR /app
+RUN bun i --production
+
+FROM dependencies-env AS build-env
+COPY ./package.json bun.lockb /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN bun run build
+
+FROM dependencies-env
+COPY ./package.json bun.lockb /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["bun", "run", "start"]

apps/remix/Dockerfile.pnpm

@@ -0,0 +1,26 @@
+FROM node:20-alpine AS dependencies-env
+RUN npm i -g pnpm
+COPY . /app
+
+FROM dependencies-env AS development-dependencies-env
+COPY ./package.json pnpm-lock.yaml /app/
+WORKDIR /app
+RUN pnpm i --frozen-lockfile
+
+FROM dependencies-env AS production-dependencies-env
+COPY ./package.json pnpm-lock.yaml /app/
+WORKDIR /app
+RUN pnpm i --prod --frozen-lockfile
+
+FROM dependencies-env AS build-env
+COPY ./package.json pnpm-lock.yaml /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN pnpm build
+
+FROM dependencies-env
+COPY ./package.json pnpm-lock.yaml /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["pnpm", "start"]

apps/remix/README.md

@@ -0,0 +1,100 @@
+# Welcome to React Router!
+
+A modern, production-ready template for building full-stack React applications using React Router.
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
+
+## Features
+
+- 🚀 Server-side rendering
+- ⚡️ Hot Module Replacement (HMR)
+- 📦 Asset bundling and optimization
+- 🔄 Data loading and mutations
+- 🔒 TypeScript by default
+- 🎉 TailwindCSS for styling
+- 📖 [React Router docs](https://reactrouter.com/)
+
+## Getting Started
+
+### Installation
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+### Development
+
+Start the development server with HMR:
+
+```bash
+npm run dev
+```
+
+Your application will be available at `http://localhost:5173`.
+
+## Building for Production
+
+Create a production build:
+
+```bash
+npm run build
+```
+
+## Deployment
+
+### Docker Deployment
+
+This template includes three Dockerfiles optimized for different package managers:
+
+- `Dockerfile` - for npm
+- `Dockerfile.pnpm` - for pnpm
+- `Dockerfile.bun` - for bun
+
+To build and run using Docker:
+
+```bash
+# For npm
+docker build -t my-app .
+
+# For pnpm
+docker build -f Dockerfile.pnpm -t my-app .
+
+# For bun
+docker build -f Dockerfile.bun -t my-app .
+
+# Run the container
+docker run -p 3000:3000 my-app
+```
+
+The containerized application can be deployed to any platform that supports Docker, including:
+
+- AWS ECS
+- Google Cloud Run
+- Azure Container Apps
+- Digital Ocean App Platform
+- Fly.io
+- Railway
+
+### DIY Deployment
+
+If you're familiar with deploying Node applications, the built-in app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+```
+├── package.json
+├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
+├── build/
+│   ├── client/    # Static assets
+│   └── server/    # Server-side code
+```
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
+
+---
+
+Built with ❤️ using React Router.

apps/remix/app/app.css

@@ -0,0 +1,24 @@
+@import '@documenso/ui/styles/theme.css';
+
+@font-face {
+  font-family: 'Inter';
+  src: url('/public/fonts/inter-regular.ttf') format('ttf');
+  /* font-weight: 400;
+  font-style: normal;
+  font-display: swap; */
+}
+
+@font-face {
+  font-family: 'Caveat';
+  src: url('/public/fonts/caveat.ttf') format('ttf');
+  /* font-weight: 400;
+  font-style: normal;
+  font-display: swap; */
+}
+
+@layer base {
+  :root {
+    --font-sans: 'Inter';
+    --font-signature: 'Caveat';
+  }
+}

apps/remix/app/components/dialogs/account-delete-dialog.tsx

@@ -0,0 +1,155 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+
+import { authClient } from '@documenso/auth/client';
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type AccountDeleteDialogProps = {
+  className?: string;
+};
+
+export const AccountDeleteDialog = ({ className }: AccountDeleteDialogProps) => {
+  const { user } = useSession();
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const hasTwoFactorAuthentication = user.twoFactorEnabled;
+
+  const [enteredEmail, setEnteredEmail] = useState<string>('');
+
+  const { mutateAsync: deleteAccount, isPending: isDeletingAccount } =
+    trpc.profile.deleteAccount.useMutation();
+
+  const onDeleteAccount = async () => {
+    try {
+      await deleteAccount();
+
+      toast({
+        title: _(msg`Account deleted`),
+        description: _(msg`Your account has been deleted successfully.`),
+        duration: 5000,
+      });
+
+      return await authClient.signOut();
+    } catch (err) {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        variant: 'destructive',
+        description: _(
+          msg`We encountered an unknown error while attempting to delete your account. Please try again later.`,
+        ),
+      });
+    }
+  };
+
+  return (
+    <div className={className}>
+      <Alert
+        className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row"
+        variant="neutral"
+      >
+        <div>
+          <AlertTitle>
+            <Trans>Delete Account</Trans>
+          </AlertTitle>
+          <AlertDescription className="mr-2">
+            <Trans>
+              Delete your account and all its contents, including completed documents. This action
+              is irreversible and will cancel your subscription, so proceed with caution.
+            </Trans>
+          </AlertDescription>
+        </div>
+
+        <div className="flex-shrink-0">
+          <Dialog onOpenChange={() => setEnteredEmail('')}>
+            <DialogTrigger asChild>
+              <Button variant="destructive">
+                <Trans>Delete Account</Trans>
+              </Button>
+            </DialogTrigger>
+
+            <DialogContent>
+              <DialogHeader className="space-y-4">
+                <DialogTitle>
+                  <Trans>Delete Account</Trans>
+                </DialogTitle>
+
+                <Alert variant="destructive">
+                  <AlertDescription className="selection:bg-red-100">
+                    <Trans>This action is not reversible. Please be certain.</Trans>
+                  </AlertDescription>
+                </Alert>
+
+                {hasTwoFactorAuthentication && (
+                  <Alert variant="destructive">
+                    <AlertDescription className="selection:bg-red-100">
+                      <Trans>Disable Two Factor Authentication before deleting your account.</Trans>
+                    </AlertDescription>
+                  </Alert>
+                )}
+
+                <DialogDescription>
+                  <Trans>
+                    Documenso will delete{' '}
+                    <span className="font-semibold">all of your documents</span>, along with all of
+                    your completed documents, signatures, and all other resources belonging to your
+                    Account.
+                  </Trans>
+                </DialogDescription>
+              </DialogHeader>
+
+              {!hasTwoFactorAuthentication && (
+                <div>
+                  <Label>
+                    <Trans>
+                      Please type{' '}
+                      <span className="text-muted-foreground font-semibold">{user.email}</span> to
+                      confirm.
+                    </Trans>
+                  </Label>
+
+                  <Input
+                    type="text"
+                    className="mt-2"
+                    aria-label="Confirm Email"
+                    value={enteredEmail}
+                    onChange={(e) => setEnteredEmail(e.target.value)}
+                  />
+                </div>
+              )}
+              <DialogFooter>
+                <Button
+                  onClick={onDeleteAccount}
+                  loading={isDeletingAccount}
+                  variant="destructive"
+                  disabled={hasTwoFactorAuthentication || enteredEmail !== user.email}
+                >
+                  {isDeletingAccount ? _(msg`Deleting account...`) : _(msg`Confirm Deletion`)}
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </Alert>
+    </div>
+  );
+};

apps/remix/app/components/dialogs/admin-document-delete-dialog.tsx

@@ -0,0 +1,133 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Document } from '@prisma/client';
+import { useNavigate } from 'react-router';
+
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type AdminDocumentDeleteDialogProps = {
+  document: Document;
+};
+
+export const AdminDocumentDeleteDialog = ({ document }: AdminDocumentDeleteDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const navigate = useNavigate();
+
+  const [reason, setReason] = useState('');
+
+  const { mutateAsync: deleteDocument, isPending: isDeletingDocument } =
+    trpc.admin.deleteDocument.useMutation();
+
+  const handleDeleteDocument = async () => {
+    try {
+      if (!reason) {
+        return;
+      }
+
+      await deleteDocument({ id: document.id, reason });
+
+      toast({
+        title: _(msg`Document deleted`),
+        description: 'The Document has been deleted successfully.',
+        duration: 5000,
+      });
+
+      await navigate('/admin/documents');
+    } catch (err) {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        variant: 'destructive',
+        description:
+          'We encountered an unknown error while attempting to delete your document. Please try again later.',
+      });
+    }
+  };
+
+  return (
+    <div>
+      <div>
+        <Alert
+          className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row"
+          variant="neutral"
+        >
+          <div>
+            <AlertTitle>
+              <Trans>Delete Document</Trans>
+            </AlertTitle>
+            <AlertDescription className="mr-2">
+              <Trans>
+                Delete the document. This action is irreversible so proceed with caution.
+              </Trans>
+            </AlertDescription>
+          </div>
+
+          <div className="flex-shrink-0">
+            <Dialog>
+              <DialogTrigger asChild>
+                <Button variant="destructive">
+                  <Trans>Delete Document</Trans>
+                </Button>
+              </DialogTrigger>
+
+              <DialogContent>
+                <DialogHeader className="space-y-4">
+                  <DialogTitle>
+                    <Trans>Delete Document</Trans>
+                  </DialogTitle>
+
+                  <Alert variant="destructive">
+                    <AlertDescription className="selection:bg-red-100">
+                      <Trans>This action is not reversible. Please be certain.</Trans>
+                    </AlertDescription>
+                  </Alert>
+                </DialogHeader>
+
+                <div>
+                  <DialogDescription>
+                    <Trans>To confirm, please enter the reason</Trans>
+                  </DialogDescription>
+
+                  <Input
+                    className="mt-2"
+                    type="text"
+                    value={reason}
+                    onChange={(e) => setReason(e.target.value)}
+                  />
+                </div>
+
+                <DialogFooter>
+                  <Button
+                    onClick={handleDeleteDocument}
+                    loading={isDeletingDocument}
+                    variant="destructive"
+                    disabled={!reason}
+                  >
+                    <Trans>Delete document</Trans>
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </Alert>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/dialogs/admin-user-delete-dialog.tsx

@@ -0,0 +1,138 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { User } from '@prisma/client';
+import { useNavigate } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type AdminUserDeleteDialogProps = {
+  className?: string;
+  user: User;
+};
+
+export const AdminUserDeleteDialog = ({ className, user }: AdminUserDeleteDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const navigate = useNavigate();
+  const [email, setEmail] = useState('');
+
+  const { mutateAsync: deleteUser, isPending: isDeletingUser } =
+    trpc.admin.deleteUser.useMutation();
+
+  const onDeleteAccount = async () => {
+    try {
+      await deleteUser({
+        id: user.id,
+      });
+
+      await navigate('/admin/users');
+
+      toast({
+        title: _(msg`Account deleted`),
+        description: _(msg`The account has been deleted successfully.`),
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(AppErrorCode.NOT_FOUND, () => msg`User not found.`)
+        .with(AppErrorCode.UNAUTHORIZED, () => msg`You are not authorized to delete this user.`)
+        .otherwise(() => msg`An error occurred while deleting the user.`);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(errorMessage),
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  return (
+    <div className={className}>
+      <Alert
+        className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row"
+        variant="neutral"
+      >
+        <div>
+          <AlertTitle>Delete Account</AlertTitle>
+          <AlertDescription className="mr-2">
+            <Trans>
+              Delete the users account and all its contents. This action is irreversible and will
+              cancel their subscription, so proceed with caution.
+            </Trans>
+          </AlertDescription>
+        </div>
+
+        <div className="flex-shrink-0">
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="destructive">
+                <Trans>Delete Account</Trans>
+              </Button>
+            </DialogTrigger>
+
+            <DialogContent>
+              <DialogHeader className="space-y-4">
+                <DialogTitle>
+                  <Trans>Delete Account</Trans>
+                </DialogTitle>
+
+                <Alert variant="destructive">
+                  <AlertDescription className="selection:bg-red-100">
+                    <Trans>This action is not reversible. Please be certain.</Trans>
+                  </AlertDescription>
+                </Alert>
+              </DialogHeader>
+
+              <div>
+                <DialogDescription>
+                  <Trans>
+                    To confirm, please enter the accounts email address <br />({user.email}).
+                  </Trans>
+                </DialogDescription>
+
+                <Input
+                  className="mt-2"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </div>
+
+              <DialogFooter>
+                <Button
+                  onClick={onDeleteAccount}
+                  loading={isDeletingUser}
+                  variant="destructive"
+                  disabled={email !== user.email}
+                >
+                  <Trans>Delete account</Trans>
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </Alert>
+    </div>
+  );
+};

apps/remix/app/components/dialogs/admin-user-disable-dialog.tsx

@@ -0,0 +1,143 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { User } from '@prisma/client';
+import { match } from 'ts-pattern';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type AdminUserDisableDialogProps = {
+  className?: string;
+  userToDisable: User;
+};
+
+export const AdminUserDisableDialog = ({
+  className,
+  userToDisable,
+}: AdminUserDisableDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [email, setEmail] = useState('');
+
+  const { mutateAsync: disableUser, isPending: isDisablingUser } =
+    trpc.admin.disableUser.useMutation();
+
+  const onDisableAccount = async () => {
+    try {
+      await disableUser({
+        id: userToDisable.id,
+      });
+
+      toast({
+        title: _(msg`Account disabled`),
+        description: _(msg`The account has been disabled successfully.`),
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(AppErrorCode.NOT_FOUND, () => msg`User not found.`)
+        .with(AppErrorCode.UNAUTHORIZED, () => msg`You are not authorized to disable this user.`)
+        .otherwise(() => msg`An error occurred while disabling the user.`);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(errorMessage),
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  return (
+    <div className={className}>
+      <Alert
+        className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row"
+        variant="neutral"
+      >
+        <div>
+          <AlertTitle>Disable Account</AlertTitle>
+          <AlertDescription className="mr-2">
+            <Trans>
+              Disabling the user results in the user not being able to use the account. It also
+              disables all the related contents such as subscription, webhooks, teams, and API keys.
+            </Trans>
+          </AlertDescription>
+        </div>
+
+        <div className="flex-shrink-0">
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="destructive">
+                <Trans>Disable Account</Trans>
+              </Button>
+            </DialogTrigger>
+
+            <DialogContent>
+              <DialogHeader className="space-y-4">
+                <DialogTitle>
+                  <Trans>Disable Account</Trans>
+                </DialogTitle>
+
+                <Alert variant="destructive">
+                  <AlertDescription className="selection:bg-red-100">
+                    <Trans>
+                      This action is reversible, but please be careful as the account may be
+                      affected permanently (e.g. their settings and contents not being restored
+                      properly).
+                    </Trans>
+                  </AlertDescription>
+                </Alert>
+              </DialogHeader>
+
+              <div>
+                <DialogDescription>
+                  <Trans>
+                    To confirm, please enter the accounts email address <br />({userToDisable.email}
+                    ).
+                  </Trans>
+                </DialogDescription>
+
+                <Input
+                  className="mt-2"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </div>
+
+              <DialogFooter>
+                <Button
+                  onClick={onDisableAccount}
+                  loading={isDisablingUser}
+                  variant="destructive"
+                  disabled={email !== userToDisable.email}
+                >
+                  <Trans>Disable account</Trans>
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </Alert>
+    </div>
+  );
+};

apps/remix/app/components/dialogs/admin-user-enable-dialog.tsx

@@ -0,0 +1,129 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { User } from '@prisma/client';
+import { match } from 'ts-pattern';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type AdminUserEnableDialogProps = {
+  className?: string;
+  userToEnable: User;
+};
+
+export const AdminUserEnableDialog = ({ className, userToEnable }: AdminUserEnableDialogProps) => {
+  const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const [email, setEmail] = useState('');
+
+  const { mutateAsync: enableUser, isPending: isEnablingUser } =
+    trpc.admin.enableUser.useMutation();
+
+  const onEnableAccount = async () => {
+    try {
+      await enableUser({
+        id: userToEnable.id,
+      });
+
+      toast({
+        title: _(msg`Account enabled`),
+        description: _(msg`The account has been enabled successfully.`),
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(AppErrorCode.NOT_FOUND, () => msg`User not found.`)
+        .with(AppErrorCode.UNAUTHORIZED, () => msg`You are not authorized to enable this user.`)
+        .otherwise(() => msg`An error occurred while enabling the user.`);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(errorMessage),
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  return (
+    <div className={className}>
+      <Alert
+        className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row"
+        variant="neutral"
+      >
+        <div>
+          <AlertTitle>Enable Account</AlertTitle>
+          <AlertDescription className="mr-2">
+            <Trans>
+              Enabling the account results in the user being able to use the account again, and all
+              the related features such as webhooks, teams, and API keys for example.
+            </Trans>
+          </AlertDescription>
+        </div>
+
+        <div className="flex-shrink-0">
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button>
+                <Trans>Enable Account</Trans>
+              </Button>
+            </DialogTrigger>
+
+            <DialogContent>
+              <DialogHeader className="space-y-4">
+                <DialogTitle>
+                  <Trans>Enable Account</Trans>
+                </DialogTitle>
+              </DialogHeader>
+
+              <div>
+                <DialogDescription>
+                  <Trans>
+                    To confirm, please enter the accounts email address <br />({userToEnable.email}
+                    ).
+                  </Trans>
+                </DialogDescription>
+
+                <Input
+                  className="mt-2"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </div>
+
+              <DialogFooter>
+                <Button
+                  onClick={onEnableAccount}
+                  loading={isEnablingUser}
+                  disabled={email !== userToEnable.email}
+                >
+                  <Trans>Enable account</Trans>
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </Alert>
+    </div>
+  );
+};

apps/remix/app/components/dialogs/document-delete-dialog.tsx

@@ -0,0 +1,202 @@
+import { useEffect, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { DocumentStatus } from '@prisma/client';
+import { match } from 'ts-pattern';
+
+import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type DocumentDeleteDialogProps = {
+  id: number;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+  onDelete?: () => Promise<void> | void;
+  status: DocumentStatus;
+  documentTitle: string;
+  teamId?: number;
+  canManageDocument: boolean;
+};
+
+export const DocumentDeleteDialog = ({
+  id,
+  open,
+  onOpenChange,
+  onDelete,
+  status,
+  documentTitle,
+  canManageDocument,
+}: DocumentDeleteDialogProps) => {
+  const { toast } = useToast();
+  const { refreshLimits } = useLimits();
+  const { _ } = useLingui();
+
+  const deleteMessage = msg`delete`;
+
+  const [inputValue, setInputValue] = useState('');
+  const [isDeleteEnabled, setIsDeleteEnabled] = useState(status === DocumentStatus.DRAFT);
+
+  const { mutateAsync: deleteDocument, isPending } = trpcReact.document.deleteDocument.useMutation({
+    onSuccess: async () => {
+      void refreshLimits();
+
+      toast({
+        title: _(msg`Document deleted`),
+        description: _(msg`"${documentTitle}" has been successfully deleted`),
+        duration: 5000,
+      });
+
+      await onDelete?.();
+
+      onOpenChange(false);
+    },
+    onError: () => {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`This document could not be deleted at this time. Please try again.`),
+        variant: 'destructive',
+        duration: 7500,
+      });
+    },
+  });
+
+  useEffect(() => {
+    if (open) {
+      setInputValue('');
+      setIsDeleteEnabled(status === DocumentStatus.DRAFT);
+    }
+  }, [open, status]);
+
+  const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+    setIsDeleteEnabled(event.target.value === _(deleteMessage));
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isPending && onOpenChange(value)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            {canManageDocument ? (
+              <Trans>
+                You are about to delete <strong>"{documentTitle}"</strong>
+              </Trans>
+            ) : (
+              <Trans>
+                You are about to hide <strong>"{documentTitle}"</strong>
+              </Trans>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        {canManageDocument ? (
+          <Alert variant="warning" className="-mt-1">
+            {match(status)
+              .with(DocumentStatus.DRAFT, () => (
+                <AlertDescription>
+                  <Trans>
+                    Please note that this action is <strong>irreversible</strong>. Once confirmed,
+                    this document will be permanently deleted.
+                  </Trans>
+                </AlertDescription>
+              ))
+              .with(DocumentStatus.PENDING, () => (
+                <AlertDescription>
+                  <p>
+                    <Trans>
+                      Please note that this action is <strong>irreversible</strong>.
+                    </Trans>
+                  </p>
+
+                  <p className="mt-1">
+                    <Trans>Once confirmed, the following will occur:</Trans>
+                  </p>
+
+                  <ul className="mt-0.5 list-inside list-disc">
+                    <li>
+                      <Trans>Document will be permanently deleted</Trans>
+                    </li>
+                    <li>
+                      <Trans>Document signing process will be cancelled</Trans>
+                    </li>
+                    <li>
+                      <Trans>All inserted signatures will be voided</Trans>
+                    </li>
+                    <li>
+                      <Trans>All recipients will be notified</Trans>
+                    </li>
+                  </ul>
+                </AlertDescription>
+              ))
+              .with(DocumentStatus.COMPLETED, () => (
+                <AlertDescription>
+                  <p>
+                    <Trans>By deleting this document, the following will occur:</Trans>
+                  </p>
+
+                  <ul className="mt-0.5 list-inside list-disc">
+                    <li>
+                      <Trans>The document will be hidden from your account</Trans>
+                    </li>
+                    <li>
+                      <Trans>Recipients will still retain their copy of the document</Trans>
+                    </li>
+                  </ul>
+                </AlertDescription>
+              ))
+              .exhaustive()}
+          </Alert>
+        ) : (
+          <Alert variant="warning" className="-mt-1">
+            <AlertDescription>
+              <Trans>Please contact support if you would like to revert this action.</Trans>
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {status !== DocumentStatus.DRAFT && canManageDocument && (
+          <Input
+            type="text"
+            value={inputValue}
+            onChange={onInputChange}
+            placeholder={_(msg`Please type ${`'${_(deleteMessage)}'`} to confirm`)}
+          />
+        )}
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <Button
+            type="button"
+            loading={isPending}
+            onClick={() => void deleteDocument({ documentId: id })}
+            disabled={!isDeleteEnabled && canManageDocument}
+            variant="destructive"
+          >
+            {canManageDocument ? _(msg`Delete`) : _(msg`Hide`)}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/document-duplicate-dialog.tsx

@@ -0,0 +1,129 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useNavigate } from 'react-router';
+
+import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+type DocumentDuplicateDialogProps = {
+  id: number;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+};
+
+export const DocumentDuplicateDialog = ({
+  id,
+  open,
+  onOpenChange,
+}: DocumentDuplicateDialogProps) => {
+  const navigate = useNavigate();
+
+  const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const team = useOptionalCurrentTeam();
+
+  const { data: document, isLoading } = trpcReact.document.getDocumentById.useQuery(
+    {
+      documentId: id,
+    },
+    {
+      enabled: open === true,
+    },
+  );
+
+  const documentData = document?.documentData
+    ? {
+        ...document.documentData,
+        data: document.documentData.initialData,
+      }
+    : undefined;
+
+  const documentsPath = formatDocumentsPath(team?.url);
+
+  const { mutateAsync: duplicateDocument, isPending: isDuplicateLoading } =
+    trpcReact.document.duplicateDocument.useMutation({
+      onSuccess: async ({ documentId }) => {
+        toast({
+          title: _(msg`Document Duplicated`),
+          description: _(msg`Your document has been successfully duplicated.`),
+          duration: 5000,
+        });
+
+        await navigate(`${documentsPath}/${documentId}/edit`);
+        onOpenChange(false);
+      },
+    });
+
+  const onDuplicate = async () => {
+    try {
+      await duplicateDocument({ documentId: id });
+    } catch {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`This document could not be duplicated at this time. Please try again.`),
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Duplicate</Trans>
+          </DialogTitle>
+        </DialogHeader>
+        {!documentData || isLoading ? (
+          <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
+            <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
+              <Trans>Loading Document...</Trans>
+            </h1>
+          </div>
+        ) : (
+          <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll">
+            <LazyPDFViewer key={document?.id} documentData={documentData} />
+          </div>
+        )}
+
+        <DialogFooter>
+          <div className="flex w-full flex-1 flex-nowrap gap-4">
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={() => onOpenChange(false)}
+              className="flex-1"
+            >
+              <Trans>Cancel</Trans>
+            </Button>
+
+            <Button
+              type="button"
+              disabled={isDuplicateLoading || isLoading}
+              loading={isDuplicateLoading}
+              onClick={onDuplicate}
+              className="flex-1"
+            >
+              <Trans>Duplicate</Trans>
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/document-move-dialog.tsx

@@ -0,0 +1,124 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { trpc } from '@documenso/trpc/react';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type DocumentMoveDialogProps = {
+  documentId: number;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+};
+
+export const DocumentMoveDialog = ({ documentId, open, onOpenChange }: DocumentMoveDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [selectedTeamId, setSelectedTeamId] = useState<number | null>(null);
+
+  const { data: teams, isLoading: isLoadingTeams } = trpc.team.getTeams.useQuery();
+
+  const { mutateAsync: moveDocument, isPending } = trpc.document.moveDocumentToTeam.useMutation({
+    onSuccess: () => {
+      toast({
+        title: _(msg`Document moved`),
+        description: _(msg`The document has been successfully moved to the selected team.`),
+        duration: 5000,
+      });
+
+      onOpenChange(false);
+    },
+    onError: (error) => {
+      toast({
+        title: _(msg`Error`),
+        description: error.message || _(msg`An error occurred while moving the document.`),
+        variant: 'destructive',
+        duration: 7500,
+      });
+    },
+  });
+
+  const onMove = async () => {
+    if (!selectedTeamId) {
+      return;
+    }
+
+    await moveDocument({ documentId, teamId: selectedTeamId });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Move Document to Team</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Select a team to move this document to. This action cannot be undone.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Select onValueChange={(value) => setSelectedTeamId(Number(value))}>
+          <SelectTrigger>
+            <SelectValue placeholder={_(msg`Select a team`)} />
+          </SelectTrigger>
+          <SelectContent>
+            {isLoadingTeams ? (
+              <SelectItem value="loading" disabled>
+                <Trans>Loading teams...</Trans>
+              </SelectItem>
+            ) : (
+              teams?.map((team) => (
+                <SelectItem key={team.id} value={team.id.toString()}>
+                  <div className="flex items-center gap-4">
+                    <Avatar className="h-8 w-8">
+                      {team.avatarImageId && (
+                        <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />
+                      )}
+
+                      <AvatarFallback className="text-sm text-gray-400">
+                        {team.name.slice(0, 1).toUpperCase()}
+                      </AvatarFallback>
+                    </Avatar>
+
+                    <span>{team.name}</span>
+                  </div>
+                </SelectItem>
+              ))
+            )}
+          </SelectContent>
+        </Select>
+
+        <DialogFooter>
+          <Button variant="secondary" onClick={() => onOpenChange(false)}>
+            <Trans>Cancel</Trans>
+          </Button>
+          <Button onClick={onMove} loading={isPending} disabled={!selectedTeamId || isPending}>
+            {isPending ? <Trans>Moving...</Trans> : <Trans>Move</Trans>}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/document-resend-dialog.tsx

@@ -0,0 +1,195 @@
+import { useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Team } from '@prisma/client';
+import { type Document, type Recipient, SigningStatus } from '@prisma/client';
+import { History } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { DropdownMenuItem } from '@documenso/ui/primitives/dropdown-menu';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+import { StackAvatar } from '../general/stack-avatar';
+
+const FORM_ID = 'resend-email';
+
+export type DocumentResendDialogProps = {
+  document: Document & {
+    team: Pick<Team, 'id' | 'url'> | null;
+  };
+  recipients: Recipient[];
+};
+
+export const ZResendDocumentFormSchema = z.object({
+  recipients: z.array(z.number()).min(1, {
+    message: 'You must select at least one item.',
+  }),
+});
+
+export type TResendDocumentFormSchema = z.infer<typeof ZResendDocumentFormSchema>;
+
+export const DocumentResendDialog = ({ document, recipients }: DocumentResendDialogProps) => {
+  const { user } = useSession();
+  const team = useOptionalCurrentTeam();
+
+  const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const isOwner = document.userId === user.id;
+  const isCurrentTeamDocument = team && document.team?.url === team.url;
+
+  const isDisabled =
+    (!isOwner && !isCurrentTeamDocument) ||
+    document.status !== 'PENDING' ||
+    !recipients.some((r) => r.signingStatus === SigningStatus.NOT_SIGNED);
+
+  const { mutateAsync: resendDocument } = trpcReact.document.resendDocument.useMutation();
+
+  const form = useForm<TResendDocumentFormSchema>({
+    resolver: zodResolver(ZResendDocumentFormSchema),
+    defaultValues: {
+      recipients: [],
+    },
+  });
+
+  const {
+    handleSubmit,
+    formState: { isSubmitting },
+  } = form;
+
+  const onFormSubmit = async ({ recipients }: TResendDocumentFormSchema) => {
+    try {
+      await resendDocument({ documentId: document.id, recipients });
+
+      toast({
+        title: _(msg`Document re-sent`),
+        description: _(msg`Your document has been re-sent successfully.`),
+        duration: 5000,
+      });
+
+      setIsOpen(false);
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`This document could not be re-sent at this time. Please try again.`),
+        variant: 'destructive',
+        duration: 7500,
+      });
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem disabled={isDisabled} onSelect={(e) => e.preventDefault()}>
+          <History className="mr-2 h-4 w-4" />
+          <Trans>Resend</Trans>
+        </DropdownMenuItem>
+      </DialogTrigger>
+
+      <DialogContent className="sm:max-w-sm" hideClose>
+        <DialogHeader>
+          <DialogTitle asChild>
+            <h1 className="text-center text-xl">
+              <Trans>Who do you want to remind?</Trans>
+            </h1>
+          </DialogTitle>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form id={FORM_ID} onSubmit={handleSubmit(onFormSubmit)} className="px-3">
+            <FormField
+              control={form.control}
+              name="recipients"
+              render={({ field: { value, onChange } }) => (
+                <>
+                  {recipients.map((recipient) => (
+                    <FormItem
+                      key={recipient.id}
+                      className="flex flex-row items-center justify-between gap-x-3"
+                    >
+                      <FormLabel
+                        className={cn('my-2 flex items-center gap-2 font-normal', {
+                          'opacity-50': !value.includes(recipient.id),
+                        })}
+                      >
+                        <StackAvatar
+                          key={recipient.id}
+                          type={getRecipientType(recipient)}
+                          fallbackText={recipientAbbreviation(recipient)}
+                        />
+                        {recipient.email}
+                      </FormLabel>
+
+                      <FormControl>
+                        <Checkbox
+                          className="h-5 w-5 rounded-full"
+                          value={recipient.id}
+                          checked={value.includes(recipient.id)}
+                          onCheckedChange={(checked: boolean) =>
+                            checked
+                              ? onChange([...value, recipient.id])
+                              : onChange(value.filter((v) => v !== recipient.id))
+                          }
+                        />
+                      </FormControl>
+                    </FormItem>
+                  ))}
+                </>
+              )}
+            />
+          </form>
+        </Form>
+
+        <DialogFooter>
+          <div className="flex w-full flex-1 flex-nowrap gap-4">
+            <DialogClose asChild>
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                disabled={isSubmitting}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+            </DialogClose>
+
+            <Button className="flex-1" loading={isSubmitting} type="submit" form={FORM_ID}>
+              <Trans>Send reminder</Trans>
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/passkey-create-dialog.tsx

@@ -0,0 +1,260 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { startRegistration } from '@simplewebauthn/browser';
+import { KeyRoundIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import { UAParser } from 'ua-parser-js';
+import { z } from 'zod';
+
+import { MAXIMUM_PASSKEYS } from '@documenso/lib/constants/auth';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type PasskeyCreateDialogProps = {
+  trigger?: React.ReactNode;
+  onSuccess?: () => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZCreatePasskeyFormSchema = z.object({
+  passkeyName: z.string().min(3),
+});
+
+type TCreatePasskeyFormSchema = z.infer<typeof ZCreatePasskeyFormSchema>;
+
+const parser = new UAParser();
+
+export const PasskeyCreateDialog = ({ trigger, onSuccess, ...props }: PasskeyCreateDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const form = useForm<TCreatePasskeyFormSchema>({
+    resolver: zodResolver(ZCreatePasskeyFormSchema),
+    defaultValues: {
+      passkeyName: '',
+    },
+  });
+
+  const { mutateAsync: createPasskeyRegistrationOptions, isPending } =
+    trpc.auth.createPasskeyRegistrationOptions.useMutation();
+
+  const { mutateAsync: createPasskey } = trpc.auth.createPasskey.useMutation();
+
+  const onFormSubmit = async ({ passkeyName }: TCreatePasskeyFormSchema) => {
+    setFormError(null);
+
+    try {
+      const passkeyRegistrationOptions = await createPasskeyRegistrationOptions();
+
+      const registrationResult = await startRegistration(passkeyRegistrationOptions);
+
+      await createPasskey({
+        passkeyName,
+        verificationResponse: registrationResult,
+      });
+
+      toast({
+        description: _(msg`Successfully created passkey`),
+        duration: 5000,
+      });
+
+      onSuccess?.();
+      setOpen(false);
+    } catch (err) {
+      if (err.name === 'NotAllowedError') {
+        return;
+      }
+
+      const error = AppError.parseError(err);
+
+      setFormError(err.code || error.code);
+    }
+  };
+
+  const extractDefaultPasskeyName = () => {
+    if (!window || !window.navigator) {
+      return;
+    }
+
+    parser.setUA(window.navigator.userAgent);
+
+    const result = parser.getResult();
+    const operatingSystem = result.os.name;
+    const browser = result.browser.name;
+
+    let passkeyName = '';
+
+    if (operatingSystem && browser) {
+      passkeyName = `${browser} (${operatingSystem})`;
+    }
+
+    return passkeyName;
+  };
+
+  useEffect(() => {
+    if (!open) {
+      const defaultPasskeyName = extractDefaultPasskeyName();
+
+      form.reset({
+        passkeyName: defaultPasskeyName,
+      });
+
+      setFormError(null);
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button variant="secondary" loading={isPending}>
+            <KeyRoundIcon className="-ml-1 mr-1 h-5 w-5" />
+            <Trans>Add passkey</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Add passkey</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>
+              Passkeys allow you to sign in and authenticate using biometrics, password managers,
+              etc.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="passkeyName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Passkey name</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" placeholder="eg. Mac" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Alert variant="neutral">
+                <AlertDescription>
+                  <Trans>
+                    When you click continue, you will be prompted to add the first available
+                    authenticator on your system.
+                  </Trans>
+                </AlertDescription>
+
+                <AlertDescription className="mt-2">
+                  <Trans>
+                    If you do not want to use the authenticator prompted, you can close it, which
+                    will then display the next available authenticator.
+                  </Trans>
+                </AlertDescription>
+              </Alert>
+
+              {formError && (
+                <Alert variant="destructive">
+                  {match(formError)
+                    .with('ERROR_AUTHENTICATOR_PREVIOUSLY_REGISTERED', () => (
+                      <AlertDescription>
+                        <Trans>This passkey has already been registered.</Trans>
+                      </AlertDescription>
+                    ))
+                    .with('TOO_MANY_PASSKEYS', () => (
+                      <AlertDescription>
+                        <Trans>You cannot have more than {MAXIMUM_PASSKEYS} passkeys.</Trans>
+                      </AlertDescription>
+                    ))
+                    .with('InvalidStateError', () => (
+                      <>
+                        <AlertTitle className="text-sm">
+                          <Trans>
+                            Passkey creation cancelled due to one of the following reasons:
+                          </Trans>
+                        </AlertTitle>
+                        <AlertDescription>
+                          <ul className="mt-1 list-inside list-disc">
+                            <li>
+                              <Trans>Cancelled by user</Trans>
+                            </li>
+                            <li>
+                              <Trans>Passkey already exists for the provided authenticator</Trans>
+                            </li>
+                            <li>
+                              <Trans>Exceeded timeout</Trans>
+                            </li>
+                          </ul>
+                        </AlertDescription>
+                      </>
+                    ))
+                    .otherwise(() => (
+                      <AlertDescription>
+                        <Trans>Something went wrong. Please try again or contact support.</Trans>
+                      </AlertDescription>
+                    ))}
+                </Alert>
+              )}
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  <Trans>Continue</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/public-profile-template-manage-dialog.tsx

@@ -0,0 +1,467 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Plural, Trans } from '@lingui/react/macro';
+import type { Template, TemplateDirectLink } from '@prisma/client';
+import { TemplateType } from '@prisma/client';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { CheckCircle2Icon, CircleIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { P, match } from 'ts-pattern';
+import { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import {
+  MAX_TEMPLATE_PUBLIC_DESCRIPTION_LENGTH,
+  MAX_TEMPLATE_PUBLIC_TITLE_LENGTH,
+} from '@documenso/trpc/server/template-router/schema';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+export type ManagePublicTemplateDialogProps = {
+  directTemplates: (Template & {
+    directLink: Pick<TemplateDirectLink, 'token' | 'enabled'>;
+  })[];
+  initialTemplateId?: number | null;
+  initialStep?: ProfileTemplateStep;
+  trigger?: React.ReactNode;
+  isOpen?: boolean;
+  onIsOpenChange?: (value: boolean) => unknown;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZUpdatePublicTemplateFormSchema = z.object({
+  publicTitle: z
+    .string()
+    .min(1, { message: 'Title is required' })
+    .max(MAX_TEMPLATE_PUBLIC_TITLE_LENGTH, {
+      message: `Title cannot be longer than ${MAX_TEMPLATE_PUBLIC_TITLE_LENGTH} characters`,
+    }),
+  publicDescription: z
+    .string()
+    .min(1, { message: 'Description is required' })
+    .max(MAX_TEMPLATE_PUBLIC_DESCRIPTION_LENGTH, {
+      message: `Description cannot be longer than ${MAX_TEMPLATE_PUBLIC_DESCRIPTION_LENGTH} characters`,
+    }),
+});
+
+type TUpdatePublicTemplateFormSchema = z.infer<typeof ZUpdatePublicTemplateFormSchema>;
+
+type ProfileTemplateStep = 'SELECT_TEMPLATE' | 'MANAGE' | 'CONFIRM_DISABLE';
+
+export const ManagePublicTemplateDialog = ({
+  directTemplates,
+  trigger,
+  initialTemplateId = null,
+  initialStep = 'SELECT_TEMPLATE',
+  isOpen = false,
+  onIsOpenChange,
+  ...props
+}: ManagePublicTemplateDialogProps) => {
+  const { _, i18n } = useLingui();
+  const { toast } = useToast();
+
+  const [open, onOpenChange] = useState(isOpen);
+
+  const team = useOptionalCurrentTeam();
+
+  const [selectedTemplateId, setSelectedTemplateId] = useState<number | null>(initialTemplateId);
+
+  const [currentStep, setCurrentStep] = useState<ProfileTemplateStep>(() => {
+    if (initialStep) {
+      return initialStep;
+    }
+
+    return selectedTemplateId ? 'MANAGE' : 'SELECT_TEMPLATE';
+  });
+
+  const form = useForm({
+    resolver: zodResolver(ZUpdatePublicTemplateFormSchema),
+    defaultValues: {
+      publicTitle: '',
+      publicDescription: '',
+    },
+  });
+
+  const { mutateAsync: updateTemplateSettings, isPending: isUpdatingTemplateSettings } =
+    trpc.template.updateTemplate.useMutation();
+
+  const setTemplateToPrivate = async (templateId: number) => {
+    try {
+      await updateTemplateSettings({
+        templateId,
+        data: {
+          type: TemplateType.PRIVATE,
+        },
+      });
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Template has been removed from your public profile.`),
+        duration: 5000,
+      });
+
+      handleOnOpenChange(false);
+    } catch {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to remove this template from your profile. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onFormSubmit = async ({
+    publicTitle,
+    publicDescription,
+  }: TUpdatePublicTemplateFormSchema) => {
+    if (!selectedTemplateId) {
+      return;
+    }
+
+    try {
+      await updateTemplateSettings({
+        templateId: selectedTemplateId,
+        data: {
+          type: TemplateType.PUBLIC,
+          publicTitle,
+          publicDescription,
+        },
+      });
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Template has been updated.`),
+        duration: 5000,
+      });
+
+      onOpenChange(false);
+    } catch {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to update the template. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const selectedTemplate = useMemo(
+    () => directTemplates.find((template) => template.id === selectedTemplateId),
+    [directTemplates, selectedTemplateId],
+  );
+
+  const onManageStep = () => {
+    if (!selectedTemplate) {
+      return;
+    }
+
+    form.reset({
+      publicTitle: selectedTemplate.publicTitle,
+      publicDescription: selectedTemplate.publicDescription,
+    });
+
+    setCurrentStep('MANAGE');
+  };
+
+  const isLoading = isUpdatingTemplateSettings || form.formState.isSubmitting;
+
+  useEffect(() => {
+    const initialTemplate = directTemplates.find((template) => template.id === initialTemplateId);
+
+    if (initialTemplate) {
+      setSelectedTemplateId(initialTemplate.id);
+
+      form.reset({
+        publicTitle: initialTemplate.publicTitle,
+        publicDescription: initialTemplate.publicDescription,
+      });
+    } else {
+      setSelectedTemplateId(null);
+    }
+
+    const step = initialStep || (selectedTemplateId ? 'MANAGE' : 'SELECT_TEMPLATE');
+
+    setCurrentStep(step);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialTemplateId, initialStep, open, isOpen]);
+
+  const handleOnOpenChange = (value: boolean) => {
+    if (isLoading || typeof value !== 'boolean') {
+      return;
+    }
+
+    onOpenChange(value);
+    onIsOpenChange?.(value);
+  };
+
+  return (
+    <Dialog {...props} open={isOpen || open} onOpenChange={handleOnOpenChange}>
+      <fieldset disabled={isLoading} className="relative flex-shrink-0">
+        <DialogTrigger asChild>{trigger}</DialogTrigger>
+
+        <AnimateGenericFadeInOut motionKey={currentStep}>
+          {match({ templateId: selectedTemplateId, currentStep })
+            .with({ currentStep: 'SELECT_TEMPLATE' }, () => (
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>
+                    {team?.name ? (
+                      <Trans>{team.name} direct signing templates</Trans>
+                    ) : (
+                      <Trans>Your direct signing templates</Trans>
+                    )}
+                  </DialogTitle>
+
+                  <DialogDescription>
+                    {team ? (
+                      <Trans>
+                        Select a template you'd like to display on your team's public profile
+                      </Trans>
+                    ) : (
+                      <Trans>Select a template you'd like to display on your public profile</Trans>
+                    )}
+                  </DialogDescription>
+                </DialogHeader>
+
+                <div className="custom-scrollbar max-h-[60vh] overflow-y-auto rounded-md border">
+                  <Table overflowHidden>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>
+                          <Trans>Template</Trans>
+                        </TableHead>
+                        <TableHead>
+                          <Trans>Created</Trans>
+                        </TableHead>
+                        <TableHead></TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {directTemplates.length === 0 && (
+                        <TableRow>
+                          <TableCell colSpan={3} className="h-16 text-center">
+                            <p className="text-muted-foreground">
+                              <Trans>No valid direct templates found</Trans>
+                            </p>
+                          </TableCell>
+                        </TableRow>
+                      )}
+
+                      {directTemplates.map((row) => (
+                        <TableRow
+                          className="w-full cursor-pointer"
+                          key={row.id}
+                          onClick={() => setSelectedTemplateId(row.id)}
+                        >
+                          <TableCell className="text-muted-foreground max-w-[30ch] text-sm">
+                            {row.title}
+                          </TableCell>
+
+                          <TableCell className="text-muted-foreground text-sm">
+                            {i18n.date(row.createdAt)}
+                          </TableCell>
+
+                          <TableCell>
+                            {selectedTemplateId === row.id ? (
+                              <CheckCircle2Icon className="h-5 w-5 text-neutral-600 dark:text-neutral-200" />
+                            ) : (
+                              <CircleIcon className="h-5 w-5 text-neutral-300 dark:text-neutral-600" />
+                            )}
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button type="button" variant="secondary">
+                      <Trans>Close</Trans>
+                    </Button>
+                  </DialogClose>
+
+                  <Button
+                    type="button"
+                    disabled={selectedTemplateId === null}
+                    onClick={() => onManageStep()}
+                  >
+                    <Trans>Continue</Trans>
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            ))
+            .with({ templateId: P.number, currentStep: 'MANAGE' }, () => (
+              <DialogContent className="relative">
+                <DialogHeader>
+                  <DialogTitle>
+                    <Trans>Configure template</Trans>
+                  </DialogTitle>
+
+                  <DialogDescription>
+                    <Trans>Manage details for this public template</Trans>
+                  </DialogDescription>
+                </DialogHeader>
+
+                <Form {...form}>
+                  <form
+                    className="flex h-full flex-col space-y-4"
+                    onSubmit={form.handleSubmit(onFormSubmit)}
+                  >
+                    <FormField
+                      control={form.control}
+                      name="publicTitle"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel required>Title</FormLabel>
+                          <FormControl>
+                            <Input
+                              placeholder={_(msg`The public name for your template`)}
+                              {...field}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="publicDescription"
+                      render={({ field }) => {
+                        const remaningLength =
+                          MAX_TEMPLATE_PUBLIC_DESCRIPTION_LENGTH - (field.value || '').length;
+
+                        return (
+                          <FormItem>
+                            <FormLabel required>Description</FormLabel>
+                            <FormControl>
+                              <Textarea
+                                placeholder={_(
+                                  msg`The public description that will be displayed with this template`,
+                                )}
+                                {...field}
+                              />
+                            </FormControl>
+
+                            {!form.formState.errors.publicDescription && (
+                              <p className="text-muted-foreground text-sm">
+                                {remaningLength >= 0 ? (
+                                  <Plural
+                                    value={remaningLength}
+                                    one={<Trans># character remaining</Trans>}
+                                    other={<Trans># characters remaining</Trans>}
+                                  />
+                                ) : (
+                                  <Plural
+                                    value={Math.abs(remaningLength)}
+                                    one={<Trans># character over the limit</Trans>}
+                                    other={<Trans># characters over the limit</Trans>}
+                                  />
+                                )}
+                              </p>
+                            )}
+
+                            <FormMessage />
+                          </FormItem>
+                        );
+                      }}
+                    />
+
+                    <DialogFooter>
+                      {selectedTemplate?.type === TemplateType.PUBLIC && (
+                        <Button
+                          variant="destructive"
+                          className="mr-auto w-full sm:w-auto"
+                          onClick={() => setCurrentStep('CONFIRM_DISABLE')}
+                        >
+                          <Trans>Disable</Trans>
+                        </Button>
+                      )}
+
+                      <DialogClose asChild>
+                        <Button variant="secondary">
+                          <Trans>Close</Trans>
+                        </Button>
+                      </DialogClose>
+
+                      <Button type="submit" loading={isUpdatingTemplateSettings}>
+                        <Trans>Update</Trans>
+                      </Button>
+                    </DialogFooter>
+                  </form>
+                </Form>
+              </DialogContent>
+            ))
+            .with({ templateId: P.number, currentStep: 'CONFIRM_DISABLE' }, ({ templateId }) => (
+              <DialogContent className="relative">
+                <DialogHeader>
+                  <DialogTitle>
+                    <Trans>Are you sure?</Trans>
+                  </DialogTitle>
+
+                  <DialogDescription>
+                    <Trans>The template will be removed from your profile</Trans>
+                  </DialogDescription>
+                </DialogHeader>
+
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button type="button" variant="secondary">
+                      <Trans>Cancel</Trans>
+                    </Button>
+                  </DialogClose>
+
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    loading={isUpdatingTemplateSettings}
+                    onClick={() => void setTemplateToPrivate(templateId)}
+                  >
+                    <Trans>Confirm</Trans>
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            ))
+            .otherwise(() => null)}
+        </AnimateGenericFadeInOut>
+      </fieldset>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/team-checkout-create-dialog.tsx

@@ -0,0 +1,188 @@
+import { useMemo, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Loader, TagIcon } from 'lucide-react';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TeamCheckoutCreateDialogProps = {
+  pendingTeamId: number | null;
+  onClose: () => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const MotionCard = motion(Card);
+
+export const TeamCheckoutCreateDialog = ({
+  pendingTeamId,
+  onClose,
+  ...props
+}: TeamCheckoutCreateDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [interval, setInterval] = useState<'monthly' | 'yearly'>('monthly');
+
+  const { data, isLoading } = trpc.team.getTeamPrices.useQuery();
+
+  const { mutateAsync: createCheckout, isPending: isCreatingCheckout } =
+    trpc.team.createTeamPendingCheckout.useMutation({
+      onSuccess: (checkoutUrl) => {
+        window.open(checkoutUrl, '_blank');
+        onClose();
+      },
+      onError: () =>
+        toast({
+          title: _(msg`Something went wrong`),
+          description: _(
+            msg`We were unable to create a checkout session. Please try again, or contact support`,
+          ),
+          variant: 'destructive',
+        }),
+    });
+
+  const selectedPrice = useMemo(() => {
+    if (!data) {
+      return null;
+    }
+
+    return data[interval];
+  }, [data, interval]);
+
+  const handleOnOpenChange = (open: boolean) => {
+    if (pendingTeamId === null) {
+      return;
+    }
+
+    if (!open) {
+      onClose();
+    }
+  };
+
+  if (pendingTeamId === null) {
+    return null;
+  }
+
+  return (
+    <Dialog {...props} open={pendingTeamId !== null} onOpenChange={handleOnOpenChange}>
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Team checkout</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>Payment is required to finalise the creation of your team.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        {(isLoading || !data) && (
+          <div className="flex h-20 items-center justify-center text-sm">
+            {isLoading ? (
+              <Loader className="text-documenso h-6 w-6 animate-spin" />
+            ) : (
+              <p>
+                <Trans>Something went wrong</Trans>
+              </p>
+            )}
+          </div>
+        )}
+
+        {data && selectedPrice && !isLoading && (
+          <div>
+            <Tabs
+              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+              onValueChange={(value) => setInterval(value as 'monthly' | 'yearly')}
+              value={interval}
+              className="mb-4"
+            >
+              <TabsList className="w-full">
+                {[data.monthly, data.yearly].map((price) => (
+                  <TabsTrigger key={price.priceId} className="w-full" value={price.interval}>
+                    {price.friendlyInterval}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+
+            <AnimatePresence mode="wait">
+              <MotionCard
+                key={selectedPrice.priceId}
+                initial={{ opacity: 0, y: 15 }}
+                animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
+                exit={{ opacity: 0, transition: { duration: 0.15 } }}
+              >
+                <CardContent className="flex h-full flex-col p-6">
+                  {selectedPrice.interval === 'monthly' ? (
+                    <div className="text-muted-foreground text-lg font-medium">
+                      $50 USD <span className="text-xs">per month</span>
+                    </div>
+                  ) : (
+                    <div className="text-muted-foreground flex items-center justify-between text-lg font-medium">
+                      <span>
+                        $480 USD <span className="text-xs">per year</span>
+                      </span>
+                      <div className="bg-primary text-primary-foreground ml-2 inline-flex flex-row items-center justify-center rounded px-2 py-1 text-xs">
+                        <TagIcon className="mr-1 h-4 w-4" />
+                        20% off
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="text-muted-foreground mt-1.5 text-sm">
+                    <p>
+                      <Trans>This price includes minimum 5 seats.</Trans>
+                    </p>
+
+                    <p className="mt-1">
+                      <Trans>Adding and removing seats will adjust your invoice accordingly.</Trans>
+                    </p>
+                  </div>
+                </CardContent>
+              </MotionCard>
+            </AnimatePresence>
+
+            <DialogFooter className="mt-4">
+              <Button
+                type="button"
+                variant="secondary"
+                disabled={isCreatingCheckout}
+                onClick={() => onClose()}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="submit"
+                loading={isCreatingCheckout}
+                onClick={async () =>
+                  createCheckout({
+                    interval: selectedPrice.interval,
+                    pendingTeamId,
+                  })
+                }
+              >
+                <Trans>Checkout</Trans>
+              </Button>
+            </DialogFooter>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/team-create-dialog.tsx

@@ -0,0 +1,234 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { useSearchParams } from 'react-router';
+import { useNavigate } from 'react-router';
+import type { z } from 'zod';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateTeamMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TeamCreateDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZCreateTeamFormSchema = ZCreateTeamMutationSchema.pick({
+  teamName: true,
+  teamUrl: true,
+});
+
+type TCreateTeamFormSchema = z.infer<typeof ZCreateTeamFormSchema>;
+
+export const TeamCreateDialog = ({ trigger, ...props }: TeamCreateDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const updateSearchParams = useUpdateSearchParams();
+
+  const [open, setOpen] = useState(false);
+
+  const actionSearchParam = searchParams?.get('action');
+
+  const form = useForm({
+    resolver: zodResolver(ZCreateTeamFormSchema),
+    defaultValues: {
+      teamName: '',
+      teamUrl: '',
+    },
+  });
+
+  const { mutateAsync: createTeam } = trpc.team.createTeam.useMutation();
+
+  const onFormSubmit = async ({ teamName, teamUrl }: TCreateTeamFormSchema) => {
+    try {
+      const response = await createTeam({
+        teamName,
+        teamUrl,
+      });
+
+      setOpen(false);
+
+      if (response.paymentRequired) {
+        await navigate(`/settings/teams?tab=pending&checkout=${response.pendingTeamId}`);
+        return;
+      }
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Your team has been created.`),
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        form.setError('teamUrl', {
+          type: 'manual',
+          message: _(msg`This URL is already in use.`),
+        });
+
+        return;
+      }
+
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to create a team. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const mapTextToUrl = (text: string) => {
+    return text.toLowerCase().replace(/\s+/g, '-');
+  };
+
+  useEffect(() => {
+    if (actionSearchParam === 'add-team') {
+      setOpen(true);
+      updateSearchParams({ action: null });
+    }
+  }, [actionSearchParam, open, setOpen, updateSearchParams]);
+
+  useEffect(() => {
+    form.reset();
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button className="flex-shrink-0" variant="secondary">
+            <Trans>Create team</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Create team</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>Create a team to collaborate with your team members.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="teamName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Team Name</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-background"
+                        {...field}
+                        onChange={(event) => {
+                          const oldGeneratedUrl = mapTextToUrl(field.value);
+                          const newGeneratedUrl = mapTextToUrl(event.target.value);
+
+                          const urlField = form.getValues('teamUrl');
+                          if (urlField === oldGeneratedUrl) {
+                            form.setValue('teamUrl', newGeneratedUrl);
+                          }
+
+                          field.onChange(event);
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="teamUrl"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Team URL</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} />
+                    </FormControl>
+                    {!form.formState.errors.teamUrl && (
+                      <span className="text-foreground/50 text-xs font-normal">
+                        {field.value ? (
+                          `${NEXT_PUBLIC_WEBAPP_URL()}/t/${field.value}`
+                        ) : (
+                          <Trans>A unique URL to identify your team</Trans>
+                        )}
+                      </span>
+                    )}
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button
+                  type="submit"
+                  data-testid="dialog-create-team-button"
+                  loading={form.formState.isSubmitting}
+                >
+                  <Trans>Create Team</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/team-delete-dialog.tsx

@@ -0,0 +1,174 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+import { z } from 'zod';
+
+import { AppError } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import type { Toast } from '@documenso/ui/primitives/use-toast';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TeamDeleteDialogProps = {
+  teamId: number;
+  teamName: string;
+  trigger?: React.ReactNode;
+};
+
+export const TeamDeleteDialog = ({ trigger, teamId, teamName }: TeamDeleteDialogProps) => {
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const deleteMessage = _(msg`delete ${teamName}`);
+
+  const ZDeleteTeamFormSchema = z.object({
+    teamName: z.literal(deleteMessage, {
+      errorMap: () => ({ message: _(msg`You must enter '${deleteMessage}' to proceed`) }),
+    }),
+  });
+
+  const form = useForm({
+    resolver: zodResolver(ZDeleteTeamFormSchema),
+    defaultValues: {
+      teamName: '',
+    },
+  });
+
+  const { mutateAsync: deleteTeam } = trpc.team.deleteTeam.useMutation();
+
+  const onFormSubmit = async () => {
+    try {
+      await deleteTeam({ teamId });
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Your team has been successfully deleted.`),
+        duration: 5000,
+      });
+
+      await navigate('/settings/teams');
+
+      setOpen(false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      let toastError: Toast = {
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to delete this team. Please try again later.`,
+        ),
+        variant: 'destructive',
+        duration: 10000,
+      };
+
+      if (error.code === 'resource_missing') {
+        toastError = {
+          title: _(msg`Unable to delete team`),
+          description: _(
+            msg`Something went wrong while updating the team billing subscription, please contact support.`,
+          ),
+          variant: 'destructive',
+          duration: 15000,
+        };
+      }
+
+      toast(toastError);
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="destructive">
+            <Trans>Delete team</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure you wish to delete this team?</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>
+              Please note that you will lose access to all documents associated with this team & all
+              the members will be removed and notified
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="teamName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>
+                        Confirm by typing <span className="text-destructive">{deleteMessage}</span>
+                      </Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button type="submit" variant="destructive" loading={form.formState.isSubmitting}>
+                  <Trans>Delete</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/team-email-add-dialog.tsx

@@ -0,0 +1,195 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Plus } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
+import type { z } from 'zod';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateTeamEmailVerificationMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TeamEmailAddDialogProps = {
+  teamId: number;
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZCreateTeamEmailFormSchema = ZCreateTeamEmailVerificationMutationSchema.pick({
+  name: true,
+  email: true,
+});
+
+type TCreateTeamEmailFormSchema = z.infer<typeof ZCreateTeamEmailFormSchema>;
+
+export const TeamEmailAddDialog = ({ teamId, trigger, ...props }: TeamEmailAddDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const form = useForm<TCreateTeamEmailFormSchema>({
+    resolver: zodResolver(ZCreateTeamEmailFormSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+    },
+  });
+
+  const { mutateAsync: createTeamEmailVerification, isPending } =
+    trpc.team.createTeamEmailVerification.useMutation();
+
+  const onFormSubmit = async ({ name, email }: TCreateTeamEmailFormSchema) => {
+    try {
+      await createTeamEmailVerification({
+        teamId,
+        name,
+        email,
+      });
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`We have sent a confirmation email for verification.`),
+        duration: 5000,
+      });
+
+      await revalidate();
+
+      setOpen(false);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        form.setError('email', {
+          type: 'manual',
+          message: _(msg`This email is already being used by another team.`),
+        });
+
+        return;
+      }
+
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to add this email. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild={true}>
+        {trigger ?? (
+          <Button variant="outline" loading={isPending} className="bg-background">
+            <Plus className="-ml-1 mr-1 h-5 w-5" />
+            <Trans>Add email</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Add team email</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>A verification email will be sent to the provided email.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Name</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" placeholder="eg. Legal" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Email</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        className="bg-background"
+                        placeholder="example@example.com"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  <Trans>Add</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/team-email-delete-dialog.tsx

@@ -0,0 +1,163 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Prisma } from '@prisma/client';
+import { useRevalidator } from 'react-router';
+
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { trpc } from '@documenso/trpc/react';
+import { Alert } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TeamEmailDeleteDialogProps = {
+  trigger?: React.ReactNode;
+  teamName: string;
+  team: Prisma.TeamGetPayload<{
+    include: {
+      teamEmail: true;
+      emailVerification: {
+        select: {
+          expiresAt: true;
+          name: true;
+          email: true;
+        };
+      };
+    };
+  }>;
+};
+
+export const TeamEmailDeleteDialog = ({ trigger, teamName, team }: TeamEmailDeleteDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const { mutateAsync: deleteTeamEmail, isPending: isDeletingTeamEmail } =
+    trpc.team.deleteTeamEmail.useMutation({
+      onSuccess: () => {
+        toast({
+          title: _(msg`Success`),
+          description: _(msg`Team email has been removed`),
+          duration: 5000,
+        });
+      },
+      onError: () => {
+        toast({
+          title: _(msg`Something went wrong`),
+          description: _(msg`Unable to remove team email at this time. Please try again.`),
+          variant: 'destructive',
+          duration: 10000,
+        });
+      },
+    });
+
+  const { mutateAsync: deleteTeamEmailVerification, isPending: isDeletingTeamEmailVerification } =
+    trpc.team.deleteTeamEmailVerification.useMutation({
+      onSuccess: () => {
+        toast({
+          title: _(msg`Success`),
+          description: _(msg`Email verification has been removed`),
+          duration: 5000,
+        });
+      },
+      onError: () => {
+        toast({
+          title: _(msg`Something went wrong`),
+          description: _(msg`Unable to remove email verification at this time. Please try again.`),
+          variant: 'destructive',
+          duration: 10000,
+        });
+      },
+    });
+
+  const onRemove = async () => {
+    if (team.teamEmail) {
+      await deleteTeamEmail({ teamId: team.id });
+    }
+
+    if (team.emailVerification) {
+      await deleteTeamEmailVerification({ teamId: team.id });
+    }
+
+    await revalidate();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="destructive">
+            <Trans>Remove team email</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>
+              You are about to delete the following team email from{' '}
+              <span className="font-semibold">{teamName}</span>.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="neutral" padding="tight">
+          <AvatarWithText
+            avatarClass="h-12 w-12"
+            avatarSrc={formatAvatarUrl(team.avatarImageId)}
+            avatarFallback={extractInitials(
+              (team.teamEmail?.name || team.emailVerification?.name) ?? '',
+            )}
+            primaryText={
+              <span className="text-foreground/80 text-sm font-semibold">
+                {team.teamEmail?.name || team.emailVerification?.name}
+              </span>
+            }
+            secondaryText={
+              <span className="text-sm">
+                {team.teamEmail?.email || team.emailVerification?.email}
+              </span>
+            }
+          />
+        </Alert>
+
+        <fieldset disabled={isDeletingTeamEmail || isDeletingTeamEmailVerification}>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              <Trans>Cancel</Trans>
+            </Button>
+
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isDeletingTeamEmail || isDeletingTeamEmailVerification}
+              onClick={async () => onRemove()}
+            >
+              <Trans>Remove</Trans>
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/team-email-update-dialog.tsx

@@ -0,0 +1,172 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { TeamEmail } from '@prisma/client';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
+import { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TeamEmailUpdateDialogProps = {
+  teamEmail: TeamEmail;
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZUpdateTeamEmailFormSchema = z.object({
+  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+});
+
+type TUpdateTeamEmailFormSchema = z.infer<typeof ZUpdateTeamEmailFormSchema>;
+
+export const TeamEmailUpdateDialog = ({
+  teamEmail,
+  trigger,
+  ...props
+}: TeamEmailUpdateDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const form = useForm<TUpdateTeamEmailFormSchema>({
+    resolver: zodResolver(ZUpdateTeamEmailFormSchema),
+    defaultValues: {
+      name: teamEmail.name,
+    },
+  });
+
+  const { mutateAsync: updateTeamEmail } = trpc.team.updateTeamEmail.useMutation();
+
+  const onFormSubmit = async ({ name }: TUpdateTeamEmailFormSchema) => {
+    try {
+      await updateTeamEmail({
+        teamId: teamEmail.teamId,
+        data: {
+          name,
+        },
+      });
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Team email was updated.`),
+        duration: 5000,
+      });
+
+      await revalidate();
+
+      setOpen(false);
+    } catch (err) {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting update the team email. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? (
+          <Button variant="outline" className="bg-background">
+            <Trans>Update team email</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Update team email</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>To change the email you must remove and add a new email address.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel required>
+                      <Trans>Name</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" placeholder="eg. Legal" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormItem>
+                <FormLabel required>
+                  <Trans>Email</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input className="bg-background" value={teamEmail.email} disabled={true} />
+                </FormControl>
+              </FormItem>
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  <Trans>Update</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/team-leave-dialog.tsx

@@ -0,0 +1,117 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { TeamMemberRole } from '@prisma/client';
+
+import { TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { trpc } from '@documenso/trpc/react';
+import { Alert } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TeamLeaveDialogProps = {
+  teamId: number;
+  teamName: string;
+  teamAvatarImageId?: string | null;
+  role: TeamMemberRole;
+  trigger?: React.ReactNode;
+};
+
+export const TeamLeaveDialog = ({
+  trigger,
+  teamId,
+  teamName,
+  teamAvatarImageId,
+  role,
+}: TeamLeaveDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { mutateAsync: leaveTeam, isPending: isLeavingTeam } = trpc.team.leaveTeam.useMutation({
+    onSuccess: () => {
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`You have successfully left this team.`),
+        duration: 5000,
+      });
+
+      setOpen(false);
+    },
+    onError: () => {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to leave this team. Please try again later.`,
+        ),
+        variant: 'destructive',
+        duration: 10000,
+      });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLeavingTeam && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="destructive">
+            <Trans>Leave team</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>You are about to leave the following team.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="neutral" padding="tight">
+          <AvatarWithText
+            avatarClass="h-12 w-12"
+            avatarSrc={formatAvatarUrl(teamAvatarImageId)}
+            avatarFallback={teamName.slice(0, 1).toUpperCase()}
+            primaryText={teamName}
+            secondaryText={_(TEAM_MEMBER_ROLE_MAP[role])}
+          />
+        </Alert>
+
+        <fieldset disabled={isLeavingTeam}>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              <Trans>Cancel</Trans>
+            </Button>
+
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isLeavingTeam}
+              onClick={async () => leaveTeam({ teamId })}
+            >
+              <Trans>Leave</Trans>
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/team-member-delete-dialog.tsx

@@ -0,0 +1,119 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+
+import { trpc } from '@documenso/trpc/react';
+import { Alert } from '@documenso/ui/primitives/alert';
+import { AvatarWithText } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TeamMemberDeleteDialogProps = {
+  teamId: number;
+  teamName: string;
+  teamMemberId: number;
+  teamMemberName: string;
+  teamMemberEmail: string;
+  trigger?: React.ReactNode;
+};
+
+export const TeamMemberDeleteDialog = ({
+  trigger,
+  teamId,
+  teamName,
+  teamMemberId,
+  teamMemberName,
+  teamMemberEmail,
+}: TeamMemberDeleteDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { mutateAsync: deleteTeamMembers, isPending: isDeletingTeamMember } =
+    trpc.team.deleteTeamMembers.useMutation({
+      onSuccess: () => {
+        toast({
+          title: _(msg`Success`),
+          description: _(msg`You have successfully removed this user from the team.`),
+          duration: 5000,
+        });
+
+        setOpen(false);
+      },
+      onError: () => {
+        toast({
+          title: _(msg`An unknown error occurred`),
+          description: _(
+            msg`We encountered an unknown error while attempting to remove this user. Please try again later.`,
+          ),
+          variant: 'destructive',
+          duration: 10000,
+        });
+      },
+    });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isDeletingTeamMember && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="secondary">
+            <Trans>Delete team member</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>
+              You are about to remove the following user from{' '}
+              <span className="font-semibold">{teamName}</span>.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="neutral" padding="tight">
+          <AvatarWithText
+            avatarClass="h-12 w-12"
+            avatarFallback={teamMemberName.slice(0, 1).toUpperCase()}
+            primaryText={<span className="font-semibold">{teamMemberName}</span>}
+            secondaryText={teamMemberEmail}
+          />
+        </Alert>
+
+        <fieldset disabled={isDeletingTeamMember}>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+              <Trans>Cancel</Trans>
+            </Button>
+
+            <Button
+              type="submit"
+              variant="destructive"
+              loading={isDeletingTeamMember}
+              onClick={async () => deleteTeamMembers({ teamId, teamMemberIds: [teamMemberId] })}
+            >
+              <Trans>Delete</Trans>
+            </Button>
+          </DialogFooter>
+        </fieldset>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/team-member-invite-dialog.tsx

@@ -0,0 +1,415 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { TeamMemberRole } from '@prisma/client';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Download, Mail, MailIcon, PlusCircle, Trash, Upload, UsersIcon } from 'lucide-react';
+import Papa, { type ParseResult } from 'papaparse';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { downloadFile } from '@documenso/lib/client-only/download-file';
+import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateTeamMemberInvitesMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useCurrentTeam } from '~/providers/team';
+
+export type TeamMemberInviteDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZInviteTeamMembersFormSchema = z
+  .object({
+    invitations: ZCreateTeamMemberInvitesMutationSchema.shape.invitations,
+  })
+  // Display exactly which rows are duplicates.
+  .superRefine((items, ctx) => {
+    const uniqueEmails = new Map<string, number>();
+
+    for (const [index, invitation] of items.invitations.entries()) {
+      const email = invitation.email.toLowerCase();
+
+      const firstFoundIndex = uniqueEmails.get(email);
+
+      if (firstFoundIndex === undefined) {
+        uniqueEmails.set(email, index);
+        continue;
+      }
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Emails must be unique',
+        path: ['invitations', index, 'email'],
+      });
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Emails must be unique',
+        path: ['invitations', firstFoundIndex, 'email'],
+      });
+    }
+  });
+
+type TInviteTeamMembersFormSchema = z.infer<typeof ZInviteTeamMembersFormSchema>;
+
+type TabTypes = 'INDIVIDUAL' | 'BULK';
+
+const ZImportTeamMemberSchema = z.array(
+  z.object({
+    email: z.string().email(),
+    role: z.nativeEnum(TeamMemberRole),
+  }),
+);
+
+export const TeamMemberInviteDialog = ({ trigger, ...props }: TeamMemberInviteDialogProps) => {
+  const [open, setOpen] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [invitationType, setInvitationType] = useState<TabTypes>('INDIVIDUAL');
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const team = useCurrentTeam();
+
+  const form = useForm<TInviteTeamMembersFormSchema>({
+    resolver: zodResolver(ZInviteTeamMembersFormSchema),
+    defaultValues: {
+      invitations: [
+        {
+          email: '',
+          role: TeamMemberRole.MEMBER,
+        },
+      ],
+    },
+  });
+
+  const {
+    append: appendTeamMemberInvite,
+    fields: teamMemberInvites,
+    remove: removeTeamMemberInvite,
+  } = useFieldArray({
+    control: form.control,
+    name: 'invitations',
+  });
+
+  const { mutateAsync: createTeamMemberInvites } = trpc.team.createTeamMemberInvites.useMutation();
+
+  const onAddTeamMemberInvite = () => {
+    appendTeamMemberInvite({
+      email: '',
+      role: TeamMemberRole.MEMBER,
+    });
+  };
+
+  const onFormSubmit = async ({ invitations }: TInviteTeamMembersFormSchema) => {
+    try {
+      await createTeamMemberInvites({
+        teamId: team.id,
+        invitations,
+      });
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Team invitations have been sent.`),
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to invite team members. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+      setInvitationType('INDIVIDUAL');
+    }
+  }, [open, form]);
+
+  const onFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files?.length) {
+      return;
+    }
+
+    const csvFile = e.target.files[0];
+
+    Papa.parse(csvFile, {
+      skipEmptyLines: true,
+      comments: 'Work email,Job title',
+      complete: (results: ParseResult<string[]>) => {
+        const members = results.data.map((row) => {
+          const [email, role] = row;
+
+          return {
+            email: email.trim(),
+            role: role.trim().toUpperCase(),
+          };
+        });
+
+        // Remove the first row if it contains the headers.
+        if (members.length > 1 && members[0].role.toUpperCase() === 'ROLE') {
+          members.shift();
+        }
+
+        try {
+          const importedInvitations = ZImportTeamMemberSchema.parse(members);
+
+          form.setValue('invitations', importedInvitations);
+          form.clearErrors('invitations');
+
+          setInvitationType('INDIVIDUAL');
+        } catch (err) {
+          console.error(err);
+
+          toast({
+            title: _(msg`Something went wrong`),
+            description: _(
+              msg`Please check the CSV file and make sure it is according to our format`,
+            ),
+            variant: 'destructive',
+          });
+        }
+      },
+    });
+  };
+
+  const downloadTemplate = () => {
+    const data = [
+      { email: 'admin@documenso.com', role: 'Admin' },
+      { email: 'manager@documenso.com', role: 'Manager' },
+      { email: 'member@documenso.com', role: 'Member' },
+    ];
+
+    const csvContent =
+      'Email address,Role\n' + data.map((row) => `${row.email},${row.role}`).join('\n');
+
+    const blob = new Blob([csvContent], {
+      type: 'text/csv',
+    });
+
+    downloadFile({
+      filename: 'documenso-team-member-invites-template.csv',
+      data: blob,
+    });
+  };
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? (
+          <Button variant="secondary">
+            <Trans>Invite member</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Invite team members</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>An email containing an invitation will be sent to each member.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Tabs
+          defaultValue="INDIVIDUAL"
+          value={invitationType}
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          onValueChange={(value) => setInvitationType(value as TabTypes)}
+        >
+          <TabsList className="w-full">
+            <TabsTrigger value="INDIVIDUAL" className="hover:text-foreground w-full">
+              <MailIcon size={20} className="mr-2" />
+              <Trans>Invite Members</Trans>
+            </TabsTrigger>
+
+            <TabsTrigger value="BULK" className="hover:text-foreground w-full">
+              <UsersIcon size={20} className="mr-2" /> <Trans>Bulk Import</Trans>
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="INDIVIDUAL">
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onFormSubmit)}>
+                <fieldset
+                  className="flex h-full flex-col space-y-4"
+                  disabled={form.formState.isSubmitting}
+                >
+                  <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
+                    {teamMemberInvites.map((teamMemberInvite, index) => (
+                      <div className="flex w-full flex-row space-x-4" key={teamMemberInvite.id}>
+                        <FormField
+                          control={form.control}
+                          name={`invitations.${index}.email`}
+                          render={({ field }) => (
+                            <FormItem className="w-full">
+                              {index === 0 && (
+                                <FormLabel required>
+                                  <Trans>Email address</Trans>
+                                </FormLabel>
+                              )}
+                              <FormControl>
+                                <Input className="bg-background" {...field} />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={form.control}
+                          name={`invitations.${index}.role`}
+                          render={({ field }) => (
+                            <FormItem className="w-full">
+                              {index === 0 && (
+                                <FormLabel required>
+                                  <Trans>Role</Trans>
+                                </FormLabel>
+                              )}
+                              <FormControl>
+                                <Select {...field} onValueChange={field.onChange}>
+                                  <SelectTrigger className="text-muted-foreground max-w-[200px]">
+                                    <SelectValue />
+                                  </SelectTrigger>
+
+                                  <SelectContent position="popper">
+                                    {TEAM_MEMBER_ROLE_HIERARCHY[team.currentTeamMember.role].map(
+                                      (role) => (
+                                        <SelectItem key={role} value={role}>
+                                          {_(TEAM_MEMBER_ROLE_MAP[role]) ?? role}
+                                        </SelectItem>
+                                      ),
+                                    )}
+                                  </SelectContent>
+                                </Select>
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <button
+                          type="button"
+                          className={cn(
+                            'justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
+                            index === 0 ? 'mt-8' : 'mt-0',
+                          )}
+                          disabled={teamMemberInvites.length === 1}
+                          onClick={() => removeTeamMemberInvite(index)}
+                        >
+                          <Trash className="h-5 w-5" />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+
+                  <Button
+                    type="button"
+                    size="sm"
+                    variant="outline"
+                    className="w-fit"
+                    onClick={() => onAddTeamMemberInvite()}
+                  >
+                    <PlusCircle className="mr-2 h-4 w-4" />
+                    <Trans>Add more</Trans>
+                  </Button>
+
+                  <DialogFooter>
+                    <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                      <Trans>Cancel</Trans>
+                    </Button>
+
+                    <Button type="submit" loading={form.formState.isSubmitting}>
+                      {!form.formState.isSubmitting && <Mail className="mr-2 h-4 w-4" />}
+                      <Trans>Invite</Trans>
+                    </Button>
+                  </DialogFooter>
+                </fieldset>
+              </form>
+            </Form>
+          </TabsContent>
+
+          <TabsContent value="BULK">
+            <div className="mt-4 space-y-4">
+              <Card gradient className="h-32">
+                <CardContent
+                  className="text-muted-foreground/80 hover:text-muted-foreground/90 flex h-full cursor-pointer flex-col items-center justify-center rounded-lg p-0 transition-colors"
+                  onClick={() => fileInputRef.current?.click()}
+                >
+                  <Upload className="h-5 w-5" />
+
+                  <p className="mt-1 text-sm">
+                    <Trans>Click here to upload</Trans>
+                  </p>
+
+                  <input
+                    onChange={onFileInputChange}
+                    type="file"
+                    ref={fileInputRef}
+                    accept=".csv"
+                    hidden
+                  />
+                </CardContent>
+              </Card>
+
+              <DialogFooter>
+                <Button type="button" variant="secondary" onClick={downloadTemplate}>
+                  <Download className="mr-2 h-4 w-4" />
+                  <Trans>Template</Trans>
+                </Button>
+              </DialogFooter>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/team-member-update-dialog.tsx

@@ -0,0 +1,199 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { TeamMemberRole } from '@prisma/client';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { TEAM_MEMBER_ROLE_HIERARCHY, TEAM_MEMBER_ROLE_MAP } from '@documenso/lib/constants/teams';
+import { isTeamRoleWithinUserHierarchy } from '@documenso/lib/utils/teams';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TeamMemberUpdateDialogProps = {
+  currentUserTeamRole: TeamMemberRole;
+  trigger?: React.ReactNode;
+  teamId: number;
+  teamMemberId: number;
+  teamMemberName: string;
+  teamMemberRole: TeamMemberRole;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+const ZUpdateTeamMemberFormSchema = z.object({
+  role: z.nativeEnum(TeamMemberRole),
+});
+
+type ZUpdateTeamMemberSchema = z.infer<typeof ZUpdateTeamMemberFormSchema>;
+
+export const TeamMemberUpdateDialog = ({
+  currentUserTeamRole,
+  trigger,
+  teamId,
+  teamMemberId,
+  teamMemberName,
+  teamMemberRole,
+  ...props
+}: TeamMemberUpdateDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const form = useForm<ZUpdateTeamMemberSchema>({
+    resolver: zodResolver(ZUpdateTeamMemberFormSchema),
+    defaultValues: {
+      role: teamMemberRole,
+    },
+  });
+
+  const { mutateAsync: updateTeamMember } = trpc.team.updateTeamMember.useMutation();
+
+  const onFormSubmit = async ({ role }: ZUpdateTeamMemberSchema) => {
+    try {
+      await updateTeamMember({
+        teamId,
+        teamMemberId,
+        data: {
+          role,
+        },
+      });
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`You have updated ${teamMemberName}.`),
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to update this team member. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    form.reset();
+
+    if (!isTeamRoleWithinUserHierarchy(currentUserTeamRole, teamMemberRole)) {
+      setOpen(false);
+
+      toast({
+        title: _(msg`You cannot modify a team member who has a higher role than you.`),
+        variant: 'destructive',
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, currentUserTeamRole, teamMemberRole, form, toast]);
+
+  return (
+    <Dialog
+      {...props}
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? (
+          <Button variant="secondary">
+            <Trans>Update team member</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Update team member</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="mt-4">
+            <Trans>
+              You are currently updating <span className="font-bold">{teamMemberName}.</span>
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+              <FormField
+                control={form.control}
+                name="role"
+                render={({ field }) => (
+                  <FormItem className="w-full">
+                    <FormLabel required>
+                      <Trans>Role</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Select {...field} onValueChange={field.onChange}>
+                        <SelectTrigger className="text-muted-foreground">
+                          <SelectValue />
+                        </SelectTrigger>
+
+                        <SelectContent className="w-full" position="popper">
+                          {TEAM_MEMBER_ROLE_HIERARCHY[currentUserTeamRole].map((role) => (
+                            <SelectItem key={role} value={role}>
+                              {_(TEAM_MEMBER_ROLE_MAP[role]) ?? role}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter className="mt-4">
+                <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  <Trans>Update</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/team-transfer-dialog.tsx

@@ -0,0 +1,272 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
+import { z } from 'zod';
+
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type TeamTransferDialogProps = {
+  teamId: number;
+  teamName: string;
+  ownerUserId: number;
+  trigger?: React.ReactNode;
+};
+
+export const TeamTransferDialog = ({
+  trigger,
+  teamId,
+  teamName,
+  ownerUserId,
+}: TeamTransferDialogProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const { mutateAsync: requestTeamOwnershipTransfer } =
+    trpc.team.requestTeamOwnershipTransfer.useMutation();
+
+  const {
+    data,
+    refetch: refetchTeamMembers,
+    isLoading: loadingTeamMembers,
+    isLoadingError: loadingTeamMembersError,
+  } = trpc.team.getTeamMembers.useQuery({
+    teamId,
+  });
+
+  const confirmTransferMessage = _(msg`transfer ${teamName}`);
+
+  const ZTransferTeamFormSchema = z.object({
+    teamName: z.literal(confirmTransferMessage, {
+      errorMap: () => ({ message: `You must enter '${confirmTransferMessage}' to proceed` }),
+    }),
+    newOwnerUserId: z.string(),
+    clearPaymentMethods: z.boolean(),
+  });
+
+  const form = useForm<z.infer<typeof ZTransferTeamFormSchema>>({
+    resolver: zodResolver(ZTransferTeamFormSchema),
+    defaultValues: {
+      teamName: '',
+      clearPaymentMethods: false,
+    },
+  });
+
+  const onFormSubmit = async ({
+    newOwnerUserId,
+    clearPaymentMethods,
+  }: z.infer<typeof ZTransferTeamFormSchema>) => {
+    try {
+      await requestTeamOwnershipTransfer({
+        teamId,
+        newOwnerUserId: Number.parseInt(newOwnerUserId),
+        clearPaymentMethods,
+      });
+
+      await revalidate();
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`An email requesting the transfer of this team has been sent.`),
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch (err) {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to request a transfer of this team. Please try again later.`,
+        ),
+        variant: 'destructive',
+        duration: 10000,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  useEffect(() => {
+    if (open && loadingTeamMembersError) {
+      void refetchTeamMembers();
+    }
+  }, [open, loadingTeamMembersError, refetchTeamMembers]);
+
+  const teamMembers = data
+    ? data.filter((teamMember) => teamMember.userId !== ownerUserId)
+    : undefined;
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="outline" className="bg-background">
+            <Trans>Transfer team</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      {teamMembers && teamMembers.length > 0 ? (
+        <DialogContent position="center">
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Transfer team</Trans>
+            </DialogTitle>
+
+            <DialogDescription className="mt-4">
+              <Trans>Transfer ownership of this team to a selected team member.</Trans>
+            </DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onFormSubmit)}>
+              <fieldset
+                className="flex h-full flex-col space-y-4"
+                disabled={form.formState.isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="newOwnerUserId"
+                  render={({ field }) => (
+                    <FormItem className="w-full">
+                      <FormLabel required>
+                        <Trans>New team owner</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Select {...field} onValueChange={field.onChange}>
+                          <SelectTrigger className="text-muted-foreground">
+                            <SelectValue />
+                          </SelectTrigger>
+
+                          <SelectContent position="popper">
+                            {teamMembers.map((teamMember) => (
+                              <SelectItem
+                                key={teamMember.userId}
+                                value={teamMember.userId.toString()}
+                              >
+                                {teamMember.user.name} ({teamMember.user.email})
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="teamName"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        <Trans>
+                          Confirm by typing{' '}
+                          <span className="text-destructive">{confirmTransferMessage}</span>
+                        </Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Input className="bg-background" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <Alert variant="neutral">
+                  <AlertDescription>
+                    <ul className="list-outside list-disc space-y-2 pl-4">
+                      {IS_BILLING_ENABLED() && (
+                        <li>
+                          <Trans>
+                            Any payment methods attached to this team will remain attached to this
+                            team. Please contact us if you need to update this information.
+                          </Trans>
+                        </li>
+                      )}
+                      <li>
+                        <Trans>
+                          The selected team member will receive an email which they must accept
+                          before the team is transferred
+                        </Trans>
+                      </li>
+                    </ul>
+                  </AlertDescription>
+                </Alert>
+
+                <DialogFooter>
+                  <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button type="submit" variant="destructive" loading={form.formState.isSubmitting}>
+                    <Trans>Request transfer</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        </DialogContent>
+      ) : (
+        <DialogContent
+          position="center"
+          className="text-muted-foreground flex items-center justify-center py-16 text-sm"
+        >
+          {loadingTeamMembers ? (
+            <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+          ) : (
+            <p className="text-center text-sm">
+              {loadingTeamMembersError ? (
+                <Trans>An error occurred while loading team members. Please try again later.</Trans>
+              ) : (
+                <Trans>You must have at least one other team member to transfer ownership.</Trans>
+              )}
+            </p>
+          )}
+        </DialogContent>
+      )}
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/template-create-dialog.tsx

@@ -0,0 +1,125 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { FilePlus, Loader } from 'lucide-react';
+import { useNavigate } from 'react-router';
+
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { DocumentDropzone } from '@documenso/ui/primitives/document-dropzone';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type TemplateCreateDialogProps = {
+  teamId?: number;
+  templateRootPath: string;
+};
+
+export const TemplateCreateDialog = ({ templateRootPath }: TemplateCreateDialogProps) => {
+  const navigate = useNavigate();
+
+  const { user } = useSession();
+  const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const { mutateAsync: createTemplate } = trpc.template.createTemplate.useMutation();
+
+  const [showTemplateCreateDialog, setShowTemplateCreateDialog] = useState(false);
+  const [isUploadingFile, setIsUploadingFile] = useState(false);
+
+  const onFileDrop = async (file: File) => {
+    if (isUploadingFile) {
+      return;
+    }
+
+    setIsUploadingFile(true);
+
+    try {
+      const response = await putPdfFile(file);
+
+      const { id } = await createTemplate({
+        title: file.name,
+        templateDocumentDataId: response.id,
+      });
+
+      toast({
+        title: _(msg`Template document uploaded`),
+        description: _(
+          msg`Your document has been uploaded successfully. You will be redirected to the template page.`,
+        ),
+        duration: 5000,
+      });
+
+      setShowTemplateCreateDialog(false);
+
+      await navigate(`${templateRootPath}/${id}/edit`);
+    } catch {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`Please try again later.`),
+        variant: 'destructive',
+      });
+
+      setIsUploadingFile(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={showTemplateCreateDialog}
+      onOpenChange={(value) => !isUploadingFile && setShowTemplateCreateDialog(value)}
+    >
+      <DialogTrigger asChild>
+        <Button className="cursor-pointer" disabled={!user.emailVerified}>
+          <FilePlus className="-ml-1 mr-2 h-4 w-4" />
+          <Trans>New Template</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="w-full max-w-xl">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>New Template</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>
+              Templates allow you to quickly generate documents with pre-filled recipients and
+              fields.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="relative">
+          <DocumentDropzone className="h-[40vh]" onDrop={onFileDrop} type="template" />
+
+          {isUploadingFile && (
+            <div className="bg-background/50 absolute inset-0 flex items-center justify-center rounded-lg">
+              <Loader className="text-muted-foreground h-12 w-12 animate-spin" />
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isUploadingFile}>
+              <Trans>Close</Trans>
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/template-delete-dialog.tsx

@@ -0,0 +1,93 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type TemplateDeleteDialogProps = {
+  id: number;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+  onDelete?: () => Promise<void> | void;
+};
+
+export const TemplateDeleteDialog = ({
+  id,
+  open,
+  onOpenChange,
+  onDelete,
+}: TemplateDeleteDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { mutateAsync: deleteTemplate, isPending } = trpcReact.template.deleteTemplate.useMutation({
+    onSuccess: async () => {
+      await onDelete?.();
+
+      toast({
+        title: _(msg`Template deleted`),
+        description: _(msg`Your template has been successfully deleted.`),
+        duration: 5000,
+      });
+
+      onOpenChange(false);
+    },
+    onError: () => {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`This template could not be deleted at this time. Please try again.`),
+        variant: 'destructive',
+        duration: 7500,
+      });
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isPending && onOpenChange(value)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Do you want to delete this template?</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              Please note that this action is irreversible. Once confirmed, your template will be
+              permanently deleted.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="secondary"
+            disabled={isPending}
+            onClick={() => onOpenChange(false)}
+          >
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <Button
+            type="button"
+            variant="destructive"
+            loading={isPending}
+            onClick={async () => deleteTemplate({ templateId: id })}
+          >
+            <Trans>Delete</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/template-direct-link-dialog-wrapper.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import type { Recipient, Template, TemplateDirectLink } from '@prisma/client';
+import { LinkIcon } from 'lucide-react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+import { TemplateDirectLinkDialog } from '~/components/dialogs/template-direct-link-dialog';
+
+export type TemplateDirectLinkDialogWrapperProps = {
+  template: Template & { directLink?: TemplateDirectLink | null; recipients: Recipient[] };
+};
+
+export const TemplateDirectLinkDialogWrapper = ({
+  template,
+}: TemplateDirectLinkDialogWrapperProps) => {
+  const [isTemplateDirectLinkOpen, setTemplateDirectLinkOpen] = useState(false);
+
+  return (
+    <div>
+      <Button
+        variant="outline"
+        className="px-3"
+        onClick={(e) => {
+          e.preventDefault();
+          setTemplateDirectLinkOpen(true);
+        }}
+      >
+        <LinkIcon className="mr-1.5 h-3.5 w-3.5" />
+
+        {template.directLink ? (
+          <Trans>Manage Direct Link</Trans>
+        ) : (
+          <Trans>Create Direct Link</Trans>
+        )}
+      </Button>
+
+      <TemplateDirectLinkDialog
+        template={template}
+        open={isTemplateDirectLinkOpen}
+        onOpenChange={setTemplateDirectLinkOpen}
+      />
+    </div>
+  );
+};

apps/remix/app/components/dialogs/template-direct-link-dialog.tsx

@@ -0,0 +1,487 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import {
+  type Recipient,
+  RecipientRole,
+  type Template,
+  type TemplateDirectLink,
+} from '@prisma/client';
+import { CircleDotIcon, CircleIcon, ClipboardCopyIcon, InfoIcon, LoaderIcon } from 'lucide-react';
+import { Link, useRevalidator } from 'react-router';
+import { P, match } from 'ts-pattern';
+
+import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct-templates';
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import { DIRECT_TEMPLATE_DOCUMENTATION } from '@documenso/lib/constants/template';
+import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { Switch } from '@documenso/ui/primitives/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@documenso/ui/primitives/table';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type TemplateDirectLinkDialogProps = {
+  template: Template & {
+    directLink?: Pick<TemplateDirectLink, 'token' | 'enabled'> | null;
+    recipients: Recipient[];
+  };
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+};
+
+type TemplateDirectLinkStep = 'ONBOARD' | 'SELECT_RECIPIENT' | 'MANAGE' | 'CONFIRM_DELETE';
+
+export const TemplateDirectLinkDialog = ({
+  template,
+  open,
+  onOpenChange,
+}: TemplateDirectLinkDialogProps) => {
+  const { toast } = useToast();
+  const { quota, remaining } = useLimits();
+  const { _ } = useLingui();
+  const { revalidate } = useRevalidator();
+
+  const [, copy] = useCopyToClipboard();
+
+  const [isEnabled, setIsEnabled] = useState(template.directLink?.enabled ?? false);
+  const [token, setToken] = useState(template.directLink?.token ?? null);
+  const [selectedRecipientId, setSelectedRecipientId] = useState<number | null>(null);
+  const [currentStep, setCurrentStep] = useState<TemplateDirectLinkStep>(
+    token ? 'MANAGE' : 'ONBOARD',
+  );
+
+  const validDirectTemplateRecipients = useMemo(
+    () => template.recipients.filter((recipient) => recipient.role !== RecipientRole.CC),
+    [template.recipients],
+  );
+
+  const {
+    mutateAsync: createTemplateDirectLink,
+    isPending: isCreatingTemplateDirectLink,
+    reset: resetCreateTemplateDirectLink,
+  } = trpcReact.template.createTemplateDirectLink.useMutation({
+    onSuccess: async (data) => {
+      await revalidate();
+
+      setToken(data.token);
+      setIsEnabled(data.enabled);
+      setCurrentStep('MANAGE');
+    },
+    onError: () => {
+      setSelectedRecipientId(null);
+
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`Unable to create direct template access. Please try again later.`),
+        variant: 'destructive',
+      });
+    },
+  });
+
+  const { mutateAsync: toggleTemplateDirectLink, isPending: isTogglingTemplateAccess } =
+    trpcReact.template.toggleTemplateDirectLink.useMutation({
+      onSuccess: async (data) => {
+        await revalidate();
+
+        const enabledDescription = msg`Direct link signing has been enabled`;
+        const disabledDescription = msg`Direct link signing has been disabled`;
+
+        toast({
+          title: _(msg`Success`),
+          description: _(data.enabled ? enabledDescription : disabledDescription),
+        });
+      },
+      onError: (_ctx, data) => {
+        const enabledDescription = msg`An error occurred while enabling direct link signing.`;
+        const disabledDescription = msg`An error occurred while disabling direct link signing.`;
+
+        toast({
+          title: _(msg`Something went wrong`),
+          description: _(data.enabled ? enabledDescription : disabledDescription),
+          variant: 'destructive',
+        });
+      },
+    });
+
+  const { mutateAsync: deleteTemplateDirectLink, isPending: isDeletingTemplateDirectLink } =
+    trpcReact.template.deleteTemplateDirectLink.useMutation({
+      onSuccess: async () => {
+        await revalidate();
+
+        onOpenChange(false);
+        setToken(null);
+
+        toast({
+          title: _(msg`Success`),
+          description: _(msg`Direct template link deleted`),
+          duration: 5000,
+        });
+
+        setToken(null);
+      },
+      onError: () => {
+        toast({
+          title: _(msg`Something went wrong`),
+          description: _(
+            msg`We encountered an error while removing the direct template link. Please try again later.`,
+          ),
+          variant: 'destructive',
+        });
+      },
+    });
+
+  const onCopyClick = async (token: string) =>
+    copy(formatDirectTemplatePath(token)).then(() => {
+      toast({
+        title: _(msg`Copied to clipboard`),
+        description: _(msg`The direct link has been copied to your clipboard`),
+      });
+    });
+
+  const onRecipientTableRowClick = async (recipientId: number) => {
+    if (isLoading) {
+      return;
+    }
+
+    setSelectedRecipientId(recipientId);
+
+    await createTemplateDirectLink({
+      templateId: template.id,
+      directRecipientId: recipientId,
+    });
+  };
+
+  const isLoading =
+    isCreatingTemplateDirectLink || isTogglingTemplateAccess || isDeletingTemplateDirectLink;
+
+  useEffect(() => {
+    resetCreateTemplateDirectLink();
+    setCurrentStep(token ? 'MANAGE' : 'ONBOARD');
+    setSelectedRecipientId(null);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+      <fieldset disabled={isLoading} className="relative">
+        <AnimateGenericFadeInOut motionKey={currentStep}>
+          {match({ token, currentStep })
+            .with({ token: P.nullish, currentStep: 'ONBOARD' }, () => (
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>
+                    <Trans>Create Direct Signing Link</Trans>
+                  </DialogTitle>
+
+                  <DialogDescription>
+                    <Trans>Here's how it works:</Trans>
+                  </DialogDescription>
+                </DialogHeader>
+
+                <ul className="mt-4 space-y-4 pl-12">
+                  {DIRECT_TEMPLATE_DOCUMENTATION.map((step, index) => (
+                    <li className="relative" key={index}>
+                      <div className="absolute -left-12">
+                        <div className="flex h-8 w-8 items-center justify-center rounded-full border-[3px] border-neutral-200 text-sm font-bold">
+                          {index + 1}
+                        </div>
+                      </div>
+
+                      <h3 className="font-semibold">{_(step.title)}</h3>
+                      <p className="text-muted-foreground mt-1 text-sm">{_(step.description)}</p>
+                    </li>
+                  ))}
+                </ul>
+
+                {remaining.directTemplates === 0 && (
+                  <Alert variant="warning">
+                    <AlertTitle>
+                      <Trans>
+                        Direct template link usage exceeded ({quota.directTemplates}/
+                        {quota.directTemplates})
+                      </Trans>
+                    </AlertTitle>
+                    <AlertDescription>
+                      <Trans>
+                        You have reached the maximum limit of {quota.directTemplates} direct
+                        templates.{' '}
+                        <Link
+                          className="mt-1 block underline underline-offset-4"
+                          to="/settings/billing"
+                        >
+                          Upgrade your account to continue!
+                        </Link>
+                      </Trans>
+                    </AlertDescription>
+                  </Alert>
+                )}
+
+                {remaining.directTemplates !== 0 && (
+                  <DialogFooter className="mx-auto mt-4">
+                    <Button type="button" onClick={() => setCurrentStep('SELECT_RECIPIENT')}>
+                      <Trans> Enable direct link signing</Trans>
+                    </Button>
+                  </DialogFooter>
+                )}
+              </DialogContent>
+            ))
+            .with({ token: P.nullish, currentStep: 'SELECT_RECIPIENT' }, () => (
+              <DialogContent className="relative">
+                {isCreatingTemplateDirectLink && validDirectTemplateRecipients.length !== 0 && (
+                  <div className="absolute inset-0 z-50 flex items-center justify-center rounded bg-white/50 dark:bg-black/50">
+                    <LoaderIcon className="h-6 w-6 animate-spin text-gray-500" />
+                  </div>
+                )}
+
+                <DialogHeader>
+                  <DialogTitle>
+                    <Trans>Choose Direct Link Recipient</Trans>
+                  </DialogTitle>
+
+                  <DialogDescription>
+                    <Trans>Choose an existing recipient from below to continue</Trans>
+                  </DialogDescription>
+                </DialogHeader>
+
+                <div className="custom-scrollbar max-h-[60vh] overflow-y-auto rounded-md border">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>
+                          <Trans>Recipient</Trans>
+                        </TableHead>
+                        <TableHead>
+                          <Trans>Role</Trans>
+                        </TableHead>
+                        <TableHead></TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {validDirectTemplateRecipients.length === 0 && (
+                        <TableRow>
+                          <TableCell colSpan={3} className="h-16 text-center">
+                            <p className="text-muted-foreground">
+                              <Trans>No valid recipients found</Trans>
+                            </p>
+                          </TableCell>
+                        </TableRow>
+                      )}
+
+                      {validDirectTemplateRecipients.map((row) => (
+                        <TableRow
+                          className="cursor-pointer"
+                          key={row.id}
+                          onClick={async () => onRecipientTableRowClick(row.id)}
+                        >
+                          <TableCell>
+                            <div className="text-muted-foreground text-sm">
+                              <p>{row.name}</p>
+                              <p className="text-muted-foreground/70 text-xs">{row.email}</p>
+                            </div>
+                          </TableCell>
+
+                          <TableCell className="text-muted-foreground text-sm">
+                            {_(RECIPIENT_ROLES_DESCRIPTION[row.role].roleName)}
+                          </TableCell>
+
+                          <TableCell>
+                            {selectedRecipientId === row.id ? (
+                              <CircleDotIcon className="h-5 w-5 text-neutral-300" />
+                            ) : (
+                              <CircleIcon className="h-5 w-5 text-neutral-300" />
+                            )}
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+
+                {/* Prevent creating placeholder direct template recipient if the email already exists. */}
+                {!template.recipients.some(
+                  (recipient) => recipient.email === DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+                ) && (
+                  <DialogFooter className="mx-auto">
+                    <div className="flex flex-col items-center justify-center">
+                      {validDirectTemplateRecipients.length !== 0 && (
+                        <p className="text-muted-foreground text-sm">
+                          <Trans>Or</Trans>
+                        </p>
+                      )}
+
+                      <Button
+                        type="button"
+                        className="mt-2"
+                        loading={isCreatingTemplateDirectLink && !selectedRecipientId}
+                        onClick={async () =>
+                          createTemplateDirectLink({
+                            templateId: template.id,
+                          })
+                        }
+                      >
+                        <Trans>Create one automatically</Trans>
+                      </Button>
+                    </div>
+                  </DialogFooter>
+                )}
+              </DialogContent>
+            ))
+            .with({ token: P.string, currentStep: 'MANAGE' }, ({ token }) => (
+              <DialogContent className="relative">
+                <DialogHeader>
+                  <DialogTitle>
+                    <Trans>Direct Link Signing</Trans>
+                  </DialogTitle>
+
+                  <DialogDescription>
+                    <Trans>Manage the direct link signing for this template</Trans>
+                  </DialogDescription>
+                </DialogHeader>
+
+                <div>
+                  <div className="flex flex-row items-center justify-between">
+                    <Label className="flex flex-row">
+                      <Trans>Enable Direct Link Signing</Trans>
+                      <Tooltip>
+                        <TooltipTrigger tabIndex={-1} className="ml-2">
+                          <InfoIcon className="h-4 w-4" />
+                        </TooltipTrigger>
+                        <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                          <Trans>
+                            Disabling direct link signing will prevent anyone from accessing the
+                            link.
+                          </Trans>
+                        </TooltipContent>
+                      </Tooltip>
+                    </Label>
+
+                    <Switch
+                      className="mt-2"
+                      checked={isEnabled}
+                      onCheckedChange={(value) => setIsEnabled(value)}
+                    />
+                  </div>
+
+                  <div className="mt-2">
+                    <Label htmlFor="copy-direct-link">
+                      <Trans>Copy Shareable Link</Trans>
+                    </Label>
+
+                    <div className="relative mt-1">
+                      <Input
+                        id="copy-direct-link"
+                        disabled
+                        value={formatDirectTemplatePath(token).replace(/https?:\/\//, '')}
+                        readOnly
+                        className="pr-12"
+                      />
+
+                      <div className="absolute bottom-0 right-1 top-0 flex items-center justify-center">
+                        <Button
+                          variant="none"
+                          type="button"
+                          className="h-8 w-8"
+                          onClick={() => void onCopyClick(token)}
+                        >
+                          <ClipboardCopyIcon className="h-4 w-4 flex-shrink-0" />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <DialogFooter className="mt-4">
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    className="mr-auto w-full sm:w-auto"
+                    loading={isDeletingTemplateDirectLink}
+                    onClick={() => setCurrentStep('CONFIRM_DELETE')}
+                  >
+                    <Trans>Remove</Trans>
+                  </Button>
+
+                  <Button
+                    type="button"
+                    loading={isTogglingTemplateAccess}
+                    onClick={async () => {
+                      await toggleTemplateDirectLink({
+                        templateId: template.id,
+                        enabled: isEnabled,
+                      }).catch(() => null);
+
+                      onOpenChange(false);
+                    }}
+                  >
+                    <Trans>Save</Trans>
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            ))
+            .with({ token: P.string, currentStep: 'CONFIRM_DELETE' }, () => (
+              <DialogContent className="relative">
+                <DialogHeader>
+                  <DialogTitle>
+                    <Trans>Are you sure?</Trans>
+                  </DialogTitle>
+
+                  <DialogDescription>
+                    <Trans>
+                      Please note that proceeding will remove direct linking recipient and turn it
+                      into a placeholder.
+                    </Trans>
+                  </DialogDescription>
+                </DialogHeader>
+
+                <DialogFooter>
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    onClick={() => setCurrentStep('MANAGE')}
+                  >
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    loading={isDeletingTemplateDirectLink}
+                    onClick={() => void deleteTemplateDirectLink({ templateId: template.id })}
+                  >
+                    <Trans>Confirm</Trans>
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            ))
+            .otherwise(() => null)}
+        </AnimateGenericFadeInOut>
+      </fieldset>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/template-duplicate-dialog.tsx

@@ -0,0 +1,89 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type TemplateDuplicateDialogProps = {
+  id: number;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+};
+
+export const TemplateDuplicateDialog = ({
+  id,
+  open,
+  onOpenChange,
+}: TemplateDuplicateDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { mutateAsync: duplicateTemplate, isPending } =
+    trpcReact.template.duplicateTemplate.useMutation({
+      onSuccess: () => {
+        toast({
+          title: _(msg`Template duplicated`),
+          description: _(msg`Your template has been duplicated successfully.`),
+          duration: 5000,
+        });
+
+        onOpenChange(false);
+      },
+      onError: () => {
+        toast({
+          title: _(msg`Error`),
+          description: _(msg`An error occurred while duplicating template.`),
+          variant: 'destructive',
+        });
+      },
+    });
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isPending && onOpenChange(value)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Do you want to duplicate this template?</Trans>
+          </DialogTitle>
+
+          <DialogDescription className="pt-2">
+            <Trans>Your template will be duplicated.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <Button
+            type="button"
+            disabled={isPending}
+            variant="secondary"
+            onClick={() => onOpenChange(false)}
+          >
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <Button
+            type="button"
+            loading={isPending}
+            onClick={async () =>
+              duplicateTemplate({
+                templateId: id,
+              })
+            }
+          >
+            <Trans>Duplicate</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/template-move-dialog.tsx

@@ -0,0 +1,158 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { match } from 'ts-pattern';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { trpc } from '@documenso/trpc/react';
+import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type TemplateMoveDialogProps = {
+  templateId: number;
+  open: boolean;
+  onOpenChange: (_open: boolean) => void;
+  onMove?: ({
+    templateId,
+    teamUrl,
+  }: {
+    templateId: number;
+    teamUrl: string;
+  }) => Promise<void> | void;
+};
+
+export const TemplateMoveDialog = ({
+  templateId,
+  open,
+  onOpenChange,
+  onMove,
+}: TemplateMoveDialogProps) => {
+  const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const [selectedTeamId, setSelectedTeamId] = useState<number | null>(null);
+
+  const { data: teams, isLoading: isLoadingTeams } = trpc.team.getTeams.useQuery();
+
+  const { mutateAsync: moveTemplate, isPending } = trpc.template.moveTemplateToTeam.useMutation({
+    onSuccess: async () => {
+      const team = teams?.find((team) => team.id === selectedTeamId);
+
+      if (team) {
+        await onMove?.({ templateId, teamUrl: team.url });
+      }
+
+      toast({
+        title: _(msg`Template moved`),
+        description: _(msg`The template has been successfully moved to the selected team.`),
+        duration: 5000,
+      });
+
+      onOpenChange(false);
+    },
+    onError: (err) => {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(
+          AppErrorCode.NOT_FOUND,
+          () => msg`Template not found or already associated with a team.`,
+        )
+        .with(AppErrorCode.UNAUTHORIZED, () => msg`You are not a member of this team.`)
+        .otherwise(() => msg`An error occurred while moving the template.`);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(errorMessage),
+        variant: 'destructive',
+        duration: 7500,
+      });
+    },
+  });
+
+  const handleOnMove = async () => {
+    if (!selectedTeamId) {
+      return;
+    }
+
+    await moveTemplate({ templateId, teamId: selectedTeamId });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Move Template to Team</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>Select a team to move this template to. This action cannot be undone.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Select onValueChange={(value) => setSelectedTeamId(Number(value))}>
+          <SelectTrigger>
+            <SelectValue placeholder={_(msg`Select a team`)} />
+          </SelectTrigger>
+          <SelectContent>
+            {isLoadingTeams ? (
+              <SelectItem value="loading" disabled>
+                <Trans>Loading teams...</Trans>
+              </SelectItem>
+            ) : (
+              teams?.map((team) => (
+                <SelectItem key={team.id} value={team.id.toString()}>
+                  <div className="flex items-center gap-4">
+                    <Avatar className="h-8 w-8">
+                      {team.avatarImageId && (
+                        <AvatarImage src={formatAvatarUrl(team.avatarImageId)} />
+                      )}
+
+                      <AvatarFallback className="text-sm text-gray-400">
+                        {team.name.slice(0, 1).toUpperCase()}
+                      </AvatarFallback>
+                    </Avatar>
+
+                    <span>{team.name}</span>
+                  </div>
+                </SelectItem>
+              ))
+            )}
+          </SelectContent>
+        </Select>
+
+        <DialogFooter>
+          <Button variant="secondary" onClick={() => onOpenChange(false)}>
+            <Trans>Cancel</Trans>
+          </Button>
+          <Button
+            onClick={handleOnMove}
+            loading={isPending}
+            disabled={!selectedTeamId || isPending}
+          >
+            {isPending ? <Trans>Moving...</Trans> : <Trans>Move</Trans>}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/template-use-dialog.tsx

@@ -0,0 +1,574 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Recipient } from '@prisma/client';
+import { DocumentDistributionMethod, DocumentSigningOrder } from '@prisma/client';
+import { InfoIcon, Plus, Upload, X } from 'lucide-react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+import * as z from 'zod';
+
+import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
+import {
+  TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX,
+  TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX,
+} from '@documenso/lib/constants/template';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import type { Toast } from '@documenso/ui/primitives/use-toast';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const ZAddRecipientsForNewDocumentSchema = z
+  .object({
+    distributeDocument: z.boolean(),
+    useCustomDocument: z.boolean().default(false),
+    customDocumentData: z
+      .any()
+      .refine((data) => data instanceof File || data === undefined)
+      .optional(),
+    recipients: z.array(
+      z.object({
+        id: z.number(),
+        email: z.string().email(),
+        name: z.string(),
+        signingOrder: z.number().optional(),
+      }),
+    ),
+  })
+  // Display exactly which rows are duplicates.
+  .superRefine((items, ctx) => {
+    const uniqueEmails = new Map<string, number>();
+
+    for (const [index, recipients] of items.recipients.entries()) {
+      const email = recipients.email.toLowerCase();
+
+      const firstFoundIndex = uniqueEmails.get(email);
+
+      if (firstFoundIndex === undefined) {
+        uniqueEmails.set(email, index);
+        continue;
+      }
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Emails must be unique',
+        path: ['recipients', index, 'email'],
+      });
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Emails must be unique',
+        path: ['recipients', firstFoundIndex, 'email'],
+      });
+    }
+  });
+
+type TAddRecipientsForNewDocumentSchema = z.infer<typeof ZAddRecipientsForNewDocumentSchema>;
+
+export type TemplateUseDialogProps = {
+  templateId: number;
+  templateSigningOrder?: DocumentSigningOrder | null;
+  recipients: Recipient[];
+  documentDistributionMethod?: DocumentDistributionMethod;
+  documentRootPath: string;
+  trigger?: React.ReactNode;
+};
+
+export function TemplateUseDialog({
+  recipients,
+  documentDistributionMethod = DocumentDistributionMethod.EMAIL,
+  documentRootPath,
+  templateId,
+  templateSigningOrder,
+  trigger,
+}: TemplateUseDialogProps) {
+  const { toast } = useToast();
+  const { _ } = useLingui();
+
+  const navigate = useNavigate();
+
+  const [open, setOpen] = useState(false);
+
+  const form = useForm<TAddRecipientsForNewDocumentSchema>({
+    resolver: zodResolver(ZAddRecipientsForNewDocumentSchema),
+    defaultValues: {
+      distributeDocument: false,
+      useCustomDocument: false,
+      customDocumentData: undefined,
+      recipients: recipients
+        .sort((a, b) => (a.signingOrder || 0) - (b.signingOrder || 0))
+        .map((recipient) => {
+          const isRecipientEmailPlaceholder = recipient.email.match(
+            TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX,
+          );
+
+          const isRecipientNamePlaceholder = recipient.name.match(
+            TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX,
+          );
+
+          return {
+            id: recipient.id,
+            name: !isRecipientNamePlaceholder ? recipient.name : '',
+            email: !isRecipientEmailPlaceholder ? recipient.email : '',
+            signingOrder: recipient.signingOrder ?? undefined,
+          };
+        }),
+    },
+  });
+
+  const { mutateAsync: createDocumentFromTemplate } =
+    trpc.template.createDocumentFromTemplate.useMutation();
+
+  const onSubmit = async (data: TAddRecipientsForNewDocumentSchema) => {
+    try {
+      let customDocumentDataId: string | undefined = undefined;
+
+      if (data.useCustomDocument && data.customDocumentData) {
+        const customDocumentData = await putPdfFile(data.customDocumentData);
+        customDocumentDataId = customDocumentData.id;
+      }
+
+      const { id } = await createDocumentFromTemplate({
+        templateId,
+        recipients: data.recipients,
+        distributeDocument: data.distributeDocument,
+        customDocumentDataId,
+      });
+
+      toast({
+        title: _(msg`Document created`),
+        description: _(msg`Your document has been created from the template successfully.`),
+        duration: 5000,
+      });
+
+      let documentPath = `${documentRootPath}/${id}`;
+
+      if (
+        data.distributeDocument &&
+        documentDistributionMethod === DocumentDistributionMethod.NONE
+      ) {
+        documentPath += '?action=view-signing-links';
+      }
+
+      await navigate(documentPath);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const toastPayload: Toast = {
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while creating document from template.`),
+        variant: 'destructive',
+      };
+
+      if (error.code === 'DOCUMENT_SEND_FAILED') {
+        toastPayload.description = _(
+          msg`The document was created but could not be sent to recipients.`,
+        );
+      }
+
+      toast(toastPayload);
+    }
+  };
+
+  const { fields: formRecipients } = useFieldArray({
+    control: form.control,
+    name: 'recipients',
+  });
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button variant="outline" className="bg-background">
+            <Plus className="-ml-1 mr-2 h-4 w-4" />
+            <Trans>Use Template</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Create document from template</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            {recipients.length === 0 ? (
+              <Trans>A draft document will be created</Trans>
+            ) : (
+              <Trans>Add the recipients to create the document with</Trans>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+              <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
+                {formRecipients.map((recipient, index) => (
+                  <div className="flex w-full flex-row space-x-4" key={recipient.id}>
+                    {templateSigningOrder === DocumentSigningOrder.SEQUENTIAL && (
+                      <FormField
+                        control={form.control}
+                        name={`recipients.${index}.signingOrder`}
+                        render={({ field }) => (
+                          <FormItem
+                            className={cn('w-20', {
+                              'mt-8': index === 0,
+                            })}
+                          >
+                            <FormControl>
+                              <Input
+                                {...field}
+                                disabled
+                                className="items-center justify-center"
+                                value={
+                                  field.value?.toString() ||
+                                  recipients[index]?.signingOrder?.toString()
+                                }
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    )}
+
+                    <FormField
+                      control={form.control}
+                      name={`recipients.${index}.email`}
+                      render={({ field }) => (
+                        <FormItem className="w-full">
+                          {index === 0 && (
+                            <FormLabel required>
+                              <Trans>Email</Trans>
+                            </FormLabel>
+                          )}
+
+                          <FormControl>
+                            <Input
+                              {...field}
+                              placeholder={recipients[index].email || _(msg`Email`)}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name={`recipients.${index}.name`}
+                      render={({ field }) => (
+                        <FormItem className="w-full">
+                          {index === 0 && (
+                            <FormLabel>
+                              <Trans>Name</Trans>
+                            </FormLabel>
+                          )}
+
+                          <FormControl>
+                            <Input
+                              {...field}
+                              placeholder={recipients[index].name || _(msg`Name`)}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                ))}
+
+                {recipients.length > 0 && (
+                  <div className="mt-4 flex flex-row items-center">
+                    <FormField
+                      control={form.control}
+                      name="distributeDocument"
+                      render={({ field }) => (
+                        <FormItem>
+                          <div className="flex flex-row items-center">
+                            <Checkbox
+                              id="distributeDocument"
+                              className="h-5 w-5"
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                            />
+
+                            {documentDistributionMethod === DocumentDistributionMethod.EMAIL && (
+                              <label
+                                className="text-muted-foreground ml-2 flex items-center text-sm"
+                                htmlFor="distributeDocument"
+                              >
+                                <Trans>Send document</Trans>
+                                <Tooltip>
+                                  <TooltipTrigger type="button">
+                                    <InfoIcon className="mx-1 h-4 w-4" />
+                                  </TooltipTrigger>
+
+                                  <TooltipContent className="text-muted-foreground z-[99999] max-w-md space-y-2 p-4">
+                                    <p>
+                                      <Trans>
+                                        The document will be immediately sent to recipients if this
+                                        is checked.
+                                      </Trans>
+                                    </p>
+
+                                    <p>
+                                      <Trans>
+                                        Otherwise, the document will be created as a draft.
+                                      </Trans>
+                                    </p>
+                                  </TooltipContent>
+                                </Tooltip>
+                              </label>
+                            )}
+
+                            {documentDistributionMethod === DocumentDistributionMethod.NONE && (
+                              <label
+                                className="text-muted-foreground ml-2 flex items-center text-sm"
+                                htmlFor="distributeDocument"
+                              >
+                                <Trans>Create as pending</Trans>
+                                <Tooltip>
+                                  <TooltipTrigger type="button">
+                                    <InfoIcon className="mx-1 h-4 w-4" />
+                                  </TooltipTrigger>
+                                  <TooltipContent className="text-muted-foreground z-[99999] max-w-md space-y-2 p-4">
+                                    <p>
+                                      <Trans>
+                                        Create the document as pending and ready to sign.
+                                      </Trans>
+                                    </p>
+
+                                    <p>
+                                      <Trans>We won't send anything to notify recipients.</Trans>
+                                    </p>
+
+                                    <p className="mt-2">
+                                      <Trans>
+                                        We will generate signing links for you, which you can send
+                                        to the recipients through your method of choice.
+                                      </Trans>
+                                    </p>
+                                  </TooltipContent>
+                                </Tooltip>
+                              </label>
+                            )}
+                          </div>
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                )}
+
+                <FormField
+                  control={form.control}
+                  name="useCustomDocument"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div className="flex flex-row items-center">
+                        <Checkbox
+                          id="useCustomDocument"
+                          className="h-5 w-5"
+                          checked={field.value}
+                          onCheckedChange={(checked) => {
+                            field.onChange(checked);
+                            if (!checked) {
+                              form.setValue('customDocumentData', undefined);
+                            }
+                          }}
+                        />
+                        <label
+                          className="text-muted-foreground ml-2 flex items-center text-sm"
+                          htmlFor="useCustomDocument"
+                        >
+                          <Trans>Upload custom document</Trans>
+                          <Tooltip>
+                            <TooltipTrigger type="button">
+                              <InfoIcon className="mx-1 h-4 w-4" />
+                            </TooltipTrigger>
+                            <TooltipContent className="text-muted-foreground z-[99999] max-w-md space-y-2 p-4">
+                              <p>
+                                <Trans>
+                                  Upload a custom document to use instead of the template's default
+                                  document
+                                </Trans>
+                              </p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </label>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
+                {form.watch('useCustomDocument') && (
+                  <div className="my-4">
+                    <FormField
+                      control={form.control}
+                      name="customDocumentData"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <div className="w-full space-y-4">
+                              <label
+                                className={cn(
+                                  'text-muted-foreground hover:border-muted-foreground/50 group relative flex min-h-[150px] cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-gray-300 px-6 py-10 transition-colors',
+                                  {
+                                    'border-destructive hover:border-destructive':
+                                      form.formState.errors.customDocumentData,
+                                  },
+                                )}
+                              >
+                                <div className="text-center">
+                                  {!field.value && (
+                                    <>
+                                      <Upload className="text-muted-foreground/50 mx-auto h-10 w-10" />
+                                      <div className="mt-4 flex text-sm leading-6">
+                                        <span className="text-muted-foreground relative">
+                                          <Trans>
+                                            <span className="text-primary font-semibold">
+                                              Click to upload
+                                            </span>{' '}
+                                            or drag and drop
+                                          </Trans>
+                                        </span>
+                                      </div>
+                                      <p className="text-muted-foreground/80 text-xs">
+                                        PDF files only
+                                      </p>
+                                    </>
+                                  )}
+
+                                  {field.value && (
+                                    <div className="text-muted-foreground space-y-1">
+                                      <p className="text-sm font-medium">{field.value.name}</p>
+                                      <p className="text-muted-foreground/60 text-xs">
+                                        {(field.value.size / (1024 * 1024)).toFixed(2)} MB
+                                      </p>
+                                    </div>
+                                  )}
+                                </div>
+
+                                <input
+                                  type="file"
+                                  className="absolute h-full w-full opacity-0"
+                                  accept=".pdf,application/pdf"
+                                  onChange={(e) => {
+                                    const file = e.target.files?.[0];
+
+                                    if (!file) {
+                                      field.onChange(undefined);
+
+                                      return;
+                                    }
+
+                                    if (file.type !== 'application/pdf') {
+                                      form.setError('customDocumentData', {
+                                        type: 'manual',
+                                        message: _(msg`Please select a PDF file`),
+                                      });
+
+                                      return;
+                                    }
+
+                                    if (file.size > APP_DOCUMENT_UPLOAD_SIZE_LIMIT * 1024 * 1024) {
+                                      form.setError('customDocumentData', {
+                                        type: 'manual',
+                                        message: _(
+                                          msg`File size exceeds the limit of ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT} MB`,
+                                        ),
+                                      });
+
+                                      return;
+                                    }
+
+                                    field.onChange(file);
+                                  }}
+                                />
+
+                                {field.value && (
+                                  <div className="absolute right-2 top-2">
+                                    <Button
+                                      type="button"
+                                      variant="destructive"
+                                      className="h-6 w-6 p-0"
+                                      onClick={(e) => {
+                                        e.preventDefault();
+                                        field.onChange(undefined);
+                                      }}
+                                    >
+                                      <X className="h-4 w-4" />
+                                      <div className="sr-only">
+                                        <Trans>Clear file</Trans>
+                                      </div>
+                                    </Button>
+                                  </div>
+                                )}
+                              </label>
+                            </div>
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                )}
+              </div>
+
+              <DialogFooter className="mt-4">
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                    <Trans>Close</Trans>
+                  </Button>
+                </DialogClose>
+
+                <Button type="submit" loading={form.formState.isSubmitting}>
+                  {!form.getValues('distributeDocument') ? (
+                    <Trans>Create as draft</Trans>
+                  ) : documentDistributionMethod === DocumentDistributionMethod.EMAIL ? (
+                    <Trans>Create and send</Trans>
+                  ) : (
+                    <Trans>Create signing links</Trans>
+                  )}
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/remix/app/components/dialogs/token-delete-dialog.tsx

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

apps/remix/app/components/dialogs/webhook-create-dialog.tsx

@@ -0,0 +1,248 @@
+import { useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateWebhookMutationSchema } from '@documenso/trpc/server/webhook-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+import { WebhookMultiSelectCombobox } from '../general/webhook-multiselect-combobox';
+
+const ZCreateWebhookFormSchema = ZCreateWebhookMutationSchema.omit({ teamId: true });
+
+type TCreateWebhookFormSchema = z.infer<typeof ZCreateWebhookFormSchema>;
+
+export type WebhookCreateDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const WebhookCreateDialog = ({ trigger, ...props }: WebhookCreateDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const team = useOptionalCurrentTeam();
+
+  const [open, setOpen] = useState(false);
+
+  const form = useForm<TCreateWebhookFormSchema>({
+    resolver: zodResolver(ZCreateWebhookFormSchema),
+    values: {
+      webhookUrl: '',
+      eventTriggers: [],
+      secret: '',
+      enabled: true,
+    },
+  });
+
+  const { mutateAsync: createWebhook } = trpc.webhook.createWebhook.useMutation();
+
+  const onSubmit = async ({
+    enabled,
+    eventTriggers,
+    secret,
+    webhookUrl,
+  }: TCreateWebhookFormSchema) => {
+    try {
+      await createWebhook({
+        enabled,
+        eventTriggers,
+        secret,
+        webhookUrl,
+        teamId: team?.id,
+      });
+
+      setOpen(false);
+
+      toast({
+        title: _(msg`Webhook created`),
+        description: _(msg`The webhook was successfully created.`),
+      });
+
+      form.reset();
+    } catch (err) {
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while creating the webhook. Please try again.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}
+      {...props}
+    >
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? (
+          <Button className="flex-shrink-0">
+            <Trans>Create Webhook</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent className="max-w-lg" position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Create webhook</Trans>
+          </DialogTitle>
+          <DialogDescription>
+            <Trans>On this page, you can create a new webhook.</Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <div className="flex flex-col-reverse gap-4 md:flex-row">
+                <FormField
+                  control={form.control}
+                  name="webhookUrl"
+                  render={({ field }) => (
+                    <FormItem className="flex-1">
+                      <FormLabel required>
+                        <Trans>Webhook URL</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Input className="bg-background" {...field} />
+                      </FormControl>
+
+                      <FormDescription>
+                        <Trans>The URL for Documenso to send webhook events to.</Trans>
+                      </FormDescription>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="enabled"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        <Trans>Enabled</Trans>
+                      </FormLabel>
+
+                      <div>
+                        <FormControl>
+                          <Switch
+                            className="bg-background"
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                      </div>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <FormField
+                control={form.control}
+                name="eventTriggers"
+                render={({ field: { onChange, value } }) => (
+                  <FormItem className="flex flex-col gap-2">
+                    <FormLabel required>
+                      <Trans>Triggers</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <WebhookMultiSelectCombobox
+                        listValues={value}
+                        onChange={(values: string[]) => {
+                          onChange(values);
+                        }}
+                      />
+                    </FormControl>
+
+                    <FormDescription>
+                      <Trans>The events that will trigger a webhook to be sent to your URL.</Trans>
+                    </FormDescription>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="secret"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>Secret</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <PasswordInput
+                        className="bg-background"
+                        {...field}
+                        value={field.value ?? ''}
+                      />
+                    </FormControl>
+
+                    <FormDescription>
+                      <Trans>
+                        A secret that will be sent to your URL so you can verify that the request
+                        has been sent by Documenso
+                      </Trans>
+                      .
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <div className="flex w-full flex-nowrap gap-4">
+                  <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                    <Trans>Cancel</Trans>
+                  </Button>
+                  <Button type="submit" loading={form.formState.isSubmitting}>
+                    <Trans>Create</Trans>
+                  </Button>
+                </div>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/webhook-delete-dialog.tsx

@@ -0,0 +1,176 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Webhook } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+export type WebhookDeleteDialogProps = {
+  webhook: Pick<Webhook, 'id' | 'webhookUrl'>;
+  onDelete?: () => void;
+  children: React.ReactNode;
+};
+
+export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const team = useOptionalCurrentTeam();
+
+  const [open, setOpen] = useState(false);
+
+  const deleteMessage = _(msg`delete ${webhook.webhookUrl}`);
+
+  const ZDeleteWebhookFormSchema = z.object({
+    webhookUrl: z.literal(deleteMessage, {
+      errorMap: () => ({ message: _(msg`You must enter '${deleteMessage}' to proceed`) }),
+    }),
+  });
+
+  type TDeleteWebhookFormSchema = z.infer<typeof ZDeleteWebhookFormSchema>;
+
+  const { mutateAsync: deleteWebhook } = trpc.webhook.deleteWebhook.useMutation();
+
+  const form = useForm<TDeleteWebhookFormSchema>({
+    resolver: zodResolver(ZDeleteWebhookFormSchema),
+    values: {
+      webhookUrl: '',
+    },
+  });
+
+  const onSubmit = async () => {
+    try {
+      await deleteWebhook({ id: webhook.id, teamId: team?.id });
+
+      toast({
+        title: _(msg`Webhook deleted`),
+        description: _(msg`The webhook has been successfully deleted.`),
+        duration: 5000,
+      });
+
+      setOpen(false);
+    } catch (error) {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to delete it. Please try again later.`,
+        ),
+        variant: 'destructive',
+        duration: 5000,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.reset();
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
+      <DialogTrigger asChild>
+        {children ?? (
+          <Button className="mr-4" variant="destructive">
+            <Trans>Delete</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Delete Webhook</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              Please note that this action is irreversible. Once confirmed, your webhook will be
+              permanently deleted.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset
+              className="flex h-full flex-col space-y-4"
+              disabled={form.formState.isSubmitting}
+            >
+              <FormField
+                control={form.control}
+                name="webhookUrl"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      <Trans>
+                        Confirm by typing:{' '}
+                        <span className="font-sm text-destructive font-semibold">
+                          {deleteMessage}
+                        </span>
+                      </Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <Input className="bg-background" type="text" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <div className="flex w-full flex-nowrap gap-4">
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    className="flex-1"
+                    onClick={() => setOpen(false)}
+                  >
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <Button
+                    type="submit"
+                    variant="destructive"
+                    className="flex-1"
+                    disabled={!form.formState.isValid}
+                    loading={form.formState.isSubmitting}
+                  >
+                    <Trans>I'm sure! Delete it</Trans>
+                  </Button>
+                </div>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/embed/embed-authentication-required.tsx

@@ -0,0 +1,35 @@
+import { Trans } from '@lingui/react/macro';
+
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+
+import { SignInForm } from '~/components/forms/signin';
+import { BrandingLogo } from '~/components/general/branding-logo';
+
+export type EmbedAuthenticationRequiredProps = {
+  email?: string;
+  returnTo: string;
+};
+
+export const EmbedAuthenticationRequired = ({
+  email,
+  returnTo,
+}: EmbedAuthenticationRequiredProps) => {
+  return (
+    <div className="flex min-h-[100dvh] w-full items-center justify-center">
+      <div className="flex w-full max-w-md flex-col">
+        <BrandingLogo className="h-8" />
+
+        <Alert className="mt-8" variant="warning">
+          <AlertDescription>
+            <Trans>
+              To view this document you need to be signed into your account, please sign in to
+              continue.
+            </Trans>
+          </AlertDescription>
+        </Alert>
+
+        <SignInForm className="mt-4" initialEmail={email} returnTo={returnTo} />
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/embed/embed-client-loading.tsx

@@ -0,0 +1,7 @@
+export const EmbedClientLoading = () => {
+  return (
+    <div className="bg-background fixed left-0 top-0 z-[9999] flex h-full w-full items-center justify-center">
+      Loading...
+    </div>
+  );
+};

apps/remix/app/components/embed/embed-direct-template-client-page.tsx

@@ -0,0 +1,502 @@
+import { useEffect, useLayoutEffect, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { type DocumentData, type Field, FieldType } from '@prisma/client';
+import type { DocumentMeta, Recipient, Signature, TemplateMeta } from '@prisma/client';
+import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
+import { DateTime } from 'luxon';
+import { useSearchParams } from 'react-router';
+
+import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import { validateFieldsInserted } from '@documenso/lib/utils/fields';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { BrandingLogo } from '~/components/general/branding-logo';
+import { ZDirectTemplateEmbedDataSchema } from '~/types/embed-direct-template-schema';
+import { injectCss } from '~/utils/css-vars';
+
+import type { DirectTemplateLocalField } from '../general/direct-template/direct-template-signing-form';
+import { useRequiredDocumentSigningContext } from '../general/document-signing/document-signing-provider';
+import { EmbedClientLoading } from './embed-client-loading';
+import { EmbedDocumentCompleted } from './embed-document-completed';
+import { EmbedDocumentFields } from './embed-document-fields';
+
+export type EmbedDirectTemplateClientPageProps = {
+  token: string;
+  updatedAt: Date;
+  documentData: DocumentData;
+  recipient: Recipient;
+  fields: Field[];
+  metadata?: DocumentMeta | TemplateMeta | null;
+  hidePoweredBy?: boolean;
+  isPlatformOrEnterprise?: boolean;
+};
+
+export const EmbedDirectTemplateClientPage = ({
+  token,
+  updatedAt,
+  documentData,
+  recipient,
+  fields,
+  metadata,
+  hidePoweredBy = false,
+  isPlatformOrEnterprise = false,
+}: EmbedDirectTemplateClientPageProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [searchParams] = useSearchParams();
+
+  const {
+    fullName,
+    email,
+    signature,
+    signatureValid,
+    setFullName,
+    setEmail,
+    setSignature,
+    setSignatureValid,
+  } = useRequiredDocumentSigningContext();
+
+  const [hasFinishedInit, setHasFinishedInit] = useState(false);
+  const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
+  const [hasCompletedDocument, setHasCompletedDocument] = useState(false);
+
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const [isEmailLocked, setIsEmailLocked] = useState(false);
+  const [isNameLocked, setIsNameLocked] = useState(false);
+
+  const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
+
+  const [throttledOnCompleteClick, isThrottled] = useThrottleFn(() => void onCompleteClick(), 500);
+
+  const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(() => fields);
+
+  const [pendingFields, _completedFields] = [
+    localFields.filter((field) => !field.inserted),
+    localFields.filter((field) => field.inserted),
+  ];
+
+  const hasSignatureField = localFields.some((field) => field.type === FieldType.SIGNATURE);
+
+  const { mutateAsync: createDocumentFromDirectTemplate, isPending: isSubmitting } =
+    trpc.template.createDocumentFromDirectTemplate.useMutation();
+
+  const onSignField = (payload: TSignFieldWithTokenMutationSchema) => {
+    setLocalFields((fields) =>
+      fields.map((field) => {
+        if (field.id !== payload.fieldId) {
+          return field;
+        }
+
+        const newField: DirectTemplateLocalField = structuredClone({
+          ...field,
+          customText: payload.value,
+          inserted: true,
+          signedValue: payload,
+        });
+
+        if (field.type === FieldType.SIGNATURE) {
+          newField.signature = {
+            id: 1,
+            created: new Date(),
+            recipientId: 1,
+            fieldId: 1,
+            signatureImageAsBase64: payload.value.startsWith('data:') ? payload.value : null,
+            typedSignature: payload.value.startsWith('data:') ? null : payload.value,
+          } satisfies Signature;
+        }
+
+        if (field.type === FieldType.DATE) {
+          newField.customText = DateTime.now()
+            .setZone(metadata?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE)
+            .toFormat(metadata?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT);
+        }
+
+        return newField;
+      }),
+    );
+
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'field-signed',
+          data: null,
+        },
+        '*',
+      );
+    }
+
+    setShowPendingFieldTooltip(false);
+  };
+
+  const onUnsignField = (payload: TRemovedSignedFieldWithTokenMutationSchema) => {
+    setLocalFields((fields) =>
+      fields.map((field) => {
+        if (field.id !== payload.fieldId) {
+          return field;
+        }
+
+        return structuredClone({
+          ...field,
+          customText: '',
+          inserted: false,
+          signedValue: undefined,
+          signature: undefined,
+        });
+      }),
+    );
+
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'field-unsigned',
+          data: null,
+        },
+        '*',
+      );
+    }
+
+    setShowPendingFieldTooltip(false);
+  };
+
+  const onNextFieldClick = () => {
+    validateFieldsInserted(localFields);
+
+    setShowPendingFieldTooltip(true);
+    setIsExpanded(false);
+  };
+
+  const onCompleteClick = async () => {
+    try {
+      if (hasSignatureField && !signatureValid) {
+        return;
+      }
+
+      const valid = validateFieldsInserted(localFields);
+
+      if (!valid) {
+        setShowPendingFieldTooltip(true);
+        return;
+      }
+
+      let directTemplateExternalId = searchParams?.get('externalId') || undefined;
+
+      if (directTemplateExternalId) {
+        directTemplateExternalId = decodeURIComponent(directTemplateExternalId);
+      }
+
+      localFields.forEach((field) => {
+        if (!field.signedValue) {
+          throw new Error('Invalid configuration');
+        }
+      });
+
+      const {
+        documentId,
+        token: documentToken,
+        recipientId,
+      } = await createDocumentFromDirectTemplate({
+        directTemplateToken: token,
+        directTemplateExternalId,
+        directRecipientName: fullName,
+        directRecipientEmail: email,
+        templateUpdatedAt: updatedAt,
+        signedFieldValues: localFields.map((field) => {
+          if (!field.signedValue) {
+            throw new Error('Invalid configuration');
+          }
+
+          return field.signedValue;
+        }),
+      });
+
+      if (window.parent) {
+        window.parent.postMessage(
+          {
+            action: 'document-completed',
+            data: {
+              token: documentToken,
+              documentId,
+              recipientId,
+            },
+          },
+          '*',
+        );
+      }
+
+      setHasCompletedDocument(true);
+    } catch (err) {
+      if (window.parent) {
+        window.parent.postMessage(
+          {
+            action: 'document-error',
+            data: String(err),
+          },
+          '*',
+        );
+      }
+
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(
+          msg`We were unable to submit this document at this time. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useLayoutEffect(() => {
+    const hash = window.location.hash.slice(1);
+
+    try {
+      const data = ZDirectTemplateEmbedDataSchema.parse(JSON.parse(decodeURIComponent(atob(hash))));
+
+      if (data.email) {
+        setEmail(data.email);
+        setIsEmailLocked(!!data.lockEmail);
+      }
+
+      if (data.name) {
+        setFullName(data.name);
+        setIsNameLocked(!!data.lockName);
+      }
+
+      if (data.darkModeDisabled) {
+        document.documentElement.classList.add('dark-mode-disabled');
+      }
+
+      if (isPlatformOrEnterprise) {
+        injectCss({
+          css: data.css,
+          cssVars: data.cssVars,
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+
+    setHasFinishedInit(true);
+
+    // !: While the two setters are stable we still want to ensure we're avoiding
+    // !: re-renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (hasFinishedInit && hasDocumentLoaded && window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'document-ready',
+          data: null,
+        },
+        '*',
+      );
+    }
+  }, [hasFinishedInit, hasDocumentLoaded]);
+
+  if (hasCompletedDocument) {
+    return (
+      <EmbedDocumentCompleted
+        name={fullName}
+        signature={{
+          id: 1,
+          fieldId: 1,
+          recipientId: 1,
+          created: new Date(),
+          signatureImageAsBase64: signature?.startsWith('data:') ? signature : null,
+          typedSignature: signature?.startsWith('data:') ? null : signature,
+        }}
+      />
+    );
+  }
+
+  return (
+    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+      {(!hasFinishedInit || !hasDocumentLoaded) && <EmbedClientLoading />}
+
+      <div className="relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
+        {/* Viewer */}
+        <div className="flex-1">
+          <LazyPDFViewer
+            documentData={documentData}
+            onDocumentLoad={() => setHasDocumentLoaded(true)}
+          />
+        </div>
+
+        {/* Widget */}
+        <div
+          key={isExpanded ? 'expanded' : 'collapsed'}
+          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
+          data-expanded={isExpanded || undefined}
+        >
+          <div className="border-border bg-widget flex h-fit w-full flex-col rounded-xl border px-4 py-4 md:min-h-[min(calc(100dvh-2rem),48rem)] md:py-6">
+            {/* Header */}
+            <div>
+              <div className="flex items-center justify-between gap-x-2">
+                <h3 className="text-foreground text-xl font-semibold md:text-2xl">
+                  <Trans>Sign document</Trans>
+                </h3>
+
+                <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
+                  {isExpanded ? (
+                    <LucideChevronDown
+                      className="text-muted-foreground h-5 w-5"
+                      onClick={() => setIsExpanded(false)}
+                    />
+                  ) : (
+                    <LucideChevronUp
+                      className="text-muted-foreground h-5 w-5"
+                      onClick={() => setIsExpanded(true)}
+                    />
+                  )}
+                </Button>
+              </div>
+            </div>
+
+            <div className="hidden group-data-[expanded]/document-widget:block md:block">
+              <p className="text-muted-foreground mt-2 text-sm">
+                <Trans>Sign the document to complete the process.</Trans>
+              </p>
+
+              <hr className="border-border mb-8 mt-4" />
+            </div>
+
+            {/* Form */}
+            <div className="-mx-2 hidden px-2 group-data-[expanded]/document-widget:block md:block">
+              <div className="flex flex-1 flex-col gap-y-4">
+                <div>
+                  <Label htmlFor="full-name">
+                    <Trans>Full Name</Trans>
+                  </Label>
+
+                  <Input
+                    type="text"
+                    id="full-name"
+                    className="bg-background mt-2"
+                    disabled={isNameLocked}
+                    value={fullName}
+                    onChange={(e) => !isNameLocked && setFullName(e.target.value)}
+                  />
+                </div>
+
+                <div>
+                  <Label htmlFor="email">
+                    <Trans>Email</Trans>
+                  </Label>
+
+                  <Input
+                    type="email"
+                    id="email"
+                    className="bg-background mt-2"
+                    disabled={isEmailLocked}
+                    value={email}
+                    onChange={(e) => !isEmailLocked && setEmail(e.target.value.trim())}
+                  />
+                </div>
+
+                <div>
+                  <Label htmlFor="Signature">
+                    <Trans>Signature</Trans>
+                  </Label>
+
+                  <Card className="mt-2" gradient degrees={-120}>
+                    <CardContent className="p-0">
+                      <SignaturePad
+                        className="h-44 w-full"
+                        disabled={isThrottled || isSubmitting}
+                        defaultValue={signature ?? undefined}
+                        onChange={(value) => {
+                          setSignature(value);
+                        }}
+                        onValidityChange={(isValid) => {
+                          setSignatureValid(isValid);
+                        }}
+                        allowTypedSignature={Boolean(
+                          metadata &&
+                            'typedSignatureEnabled' in metadata &&
+                            metadata.typedSignatureEnabled,
+                        )}
+                      />
+                    </CardContent>
+                  </Card>
+
+                  {hasSignatureField && !signatureValid && (
+                    <div className="text-destructive mt-2 text-sm">
+                      <Trans>
+                        Signature is too small. Please provide a more complete signature.
+                      </Trans>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="hidden flex-1 group-data-[expanded]/document-widget:block md:block" />
+
+            <div className="mt-4 hidden w-full grid-cols-2 items-center group-data-[expanded]/document-widget:grid md:grid">
+              {pendingFields.length > 0 ? (
+                <Button className="col-start-2" onClick={() => onNextFieldClick()}>
+                  <Trans>Next</Trans>
+                </Button>
+              ) : (
+                <Button
+                  className="col-start-2"
+                  disabled={isThrottled}
+                  loading={isSubmitting}
+                  onClick={() => throttledOnCompleteClick()}
+                >
+                  <Trans>Complete</Trans>
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+          {showPendingFieldTooltip && pendingFields.length > 0 && (
+            <FieldToolTip key={pendingFields[0].id} field={pendingFields[0]} color="warning">
+              <Trans>Click to insert field</Trans>
+            </FieldToolTip>
+          )}
+        </ElementVisible>
+
+        {/* Fields */}
+        <EmbedDocumentFields
+          recipient={recipient}
+          fields={localFields}
+          metadata={metadata}
+          onSignField={onSignField}
+          onUnsignField={onUnsignField}
+        />
+      </div>
+
+      {!hidePoweredBy && (
+        <div className="bg-primary text-primary-foreground fixed bottom-0 left-0 z-40 rounded-tr px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100">
+          <span>Powered by</span>
+          <BrandingLogo className="ml-2 inline-block h-[14px]" />
+        </div>
+      )}
+    </div>
+  );
+};

apps/remix/app/components/embed/embed-document-completed.tsx

@@ -0,0 +1,37 @@
+import { Trans } from '@lingui/react/macro';
+import type { Signature } from '@prisma/client';
+
+import signingCelebration from '@documenso/assets/images/signing-celebration.png';
+import { SigningCard3D } from '@documenso/ui/components/signing-card';
+
+export type EmbedDocumentCompletedPageProps = {
+  name?: string;
+  signature?: Signature;
+};
+
+export const EmbedDocumentCompleted = ({ name, signature }: EmbedDocumentCompletedPageProps) => {
+  console.log({ signature });
+  return (
+    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+      <h3 className="text-foreground text-2xl font-semibold">
+        <Trans>Document Completed!</Trans>
+      </h3>
+
+      <div className="mt-8 w-full max-w-md">
+        <SigningCard3D
+          className="mx-auto w-full"
+          name={name || 'Documenso'}
+          signature={signature}
+          signingCelebrationImage={signingCelebration}
+        />
+      </div>
+
+      <p className="text-muted-foreground mt-8 max-w-[50ch] text-center text-sm">
+        <Trans>
+          The document is now completed, please follow any instructions provided within the parent
+          application.
+        </Trans>
+      </p>
+    </div>
+  );
+};

apps/remix/app/components/embed/embed-document-fields.tsx

@@ -0,0 +1,184 @@
+import type { DocumentMeta, Recipient, TemplateMeta } from '@prisma/client';
+import { type Field, FieldType } from '@prisma/client';
+import { match } from 'ts-pattern';
+
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import {
+  ZCheckboxFieldMeta,
+  ZDropdownFieldMeta,
+  ZNumberFieldMeta,
+  ZRadioFieldMeta,
+  ZTextFieldMeta,
+} from '@documenso/lib/types/field-meta';
+import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+
+import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
+import { DocumentSigningDateField } from '~/components/general/document-signing/document-signing-date-field';
+import { DocumentSigningDropdownField } from '~/components/general/document-signing/document-signing-dropdown-field';
+import { DocumentSigningEmailField } from '~/components/general/document-signing/document-signing-email-field';
+import { DocumentSigningInitialsField } from '~/components/general/document-signing/document-signing-initials-field';
+import { DocumentSigningNameField } from '~/components/general/document-signing/document-signing-name-field';
+import { DocumentSigningNumberField } from '~/components/general/document-signing/document-signing-number-field';
+import { DocumentSigningRadioField } from '~/components/general/document-signing/document-signing-radio-field';
+import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field';
+import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field';
+
+export type EmbedDocumentFieldsProps = {
+  recipient: Recipient;
+  fields: Field[];
+  metadata?: DocumentMeta | TemplateMeta | null;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const EmbedDocumentFields = ({
+  recipient,
+  fields,
+  metadata,
+  onSignField,
+  onUnsignField,
+}: EmbedDocumentFieldsProps) => {
+  return (
+    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+      {fields.map((field) =>
+        match(field.type)
+          .with(FieldType.SIGNATURE, () => (
+            <DocumentSigningSignatureField
+              key={field.id}
+              field={field}
+              recipient={recipient}
+              onSignField={onSignField}
+              onUnsignField={onUnsignField}
+              typedSignatureEnabled={metadata?.typedSignatureEnabled}
+            />
+          ))
+          .with(FieldType.INITIALS, () => (
+            <DocumentSigningInitialsField
+              key={field.id}
+              field={field}
+              recipient={recipient}
+              onSignField={onSignField}
+              onUnsignField={onUnsignField}
+            />
+          ))
+          .with(FieldType.NAME, () => (
+            <DocumentSigningNameField
+              key={field.id}
+              field={field}
+              recipient={recipient}
+              onSignField={onSignField}
+              onUnsignField={onUnsignField}
+            />
+          ))
+          .with(FieldType.DATE, () => (
+            <DocumentSigningDateField
+              key={field.id}
+              field={field}
+              recipient={recipient}
+              onSignField={onSignField}
+              onUnsignField={onUnsignField}
+              dateFormat={metadata?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT}
+              timezone={metadata?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE}
+            />
+          ))
+          .with(FieldType.EMAIL, () => (
+            <DocumentSigningEmailField
+              key={field.id}
+              field={field}
+              recipient={recipient}
+              onSignField={onSignField}
+              onUnsignField={onUnsignField}
+            />
+          ))
+          .with(FieldType.TEXT, () => {
+            const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+              ...field,
+              fieldMeta: field.fieldMeta ? ZTextFieldMeta.parse(field.fieldMeta) : null,
+            };
+
+            return (
+              <DocumentSigningTextField
+                key={field.id}
+                field={fieldWithMeta}
+                recipient={recipient}
+                onSignField={onSignField}
+                onUnsignField={onUnsignField}
+              />
+            );
+          })
+          .with(FieldType.NUMBER, () => {
+            const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+              ...field,
+              fieldMeta: field.fieldMeta ? ZNumberFieldMeta.parse(field.fieldMeta) : null,
+            };
+
+            return (
+              <DocumentSigningNumberField
+                key={field.id}
+                field={fieldWithMeta}
+                recipient={recipient}
+                onSignField={onSignField}
+                onUnsignField={onUnsignField}
+              />
+            );
+          })
+          .with(FieldType.RADIO, () => {
+            const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+              ...field,
+              fieldMeta: field.fieldMeta ? ZRadioFieldMeta.parse(field.fieldMeta) : null,
+            };
+
+            return (
+              <DocumentSigningRadioField
+                key={field.id}
+                field={fieldWithMeta}
+                recipient={recipient}
+                onSignField={onSignField}
+                onUnsignField={onUnsignField}
+              />
+            );
+          })
+          .with(FieldType.CHECKBOX, () => {
+            const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+              ...field,
+              fieldMeta: field.fieldMeta ? ZCheckboxFieldMeta.parse(field.fieldMeta) : null,
+            };
+
+            return (
+              <DocumentSigningCheckboxField
+                key={field.id}
+                field={fieldWithMeta}
+                recipient={recipient}
+                onSignField={onSignField}
+                onUnsignField={onUnsignField}
+              />
+            );
+          })
+          .with(FieldType.DROPDOWN, () => {
+            const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+              ...field,
+              fieldMeta: field.fieldMeta ? ZDropdownFieldMeta.parse(field.fieldMeta) : null,
+            };
+
+            return (
+              <DocumentSigningDropdownField
+                key={field.id}
+                field={fieldWithMeta}
+                recipient={recipient}
+                onSignField={onSignField}
+                onUnsignField={onUnsignField}
+              />
+            );
+          })
+          .otherwise(() => null),
+      )}
+    </ElementVisible>
+  );
+};

apps/remix/app/components/embed/embed-document-signing-page.tsx

@@ -0,0 +1,376 @@
+import { useEffect, useLayoutEffect, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { DocumentMeta, Recipient, TemplateMeta } from '@prisma/client';
+import { type DocumentData, type Field, FieldType } from '@prisma/client';
+import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
+
+import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { validateFieldsInserted } from '@documenso/lib/utils/fields';
+import { trpc } from '@documenso/trpc/react';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { BrandingLogo } from '~/components/general/branding-logo';
+import { injectCss } from '~/utils/css-vars';
+
+import { ZSignDocumentEmbedDataSchema } from '../../types/embed-document-sign-schema';
+import { useRequiredDocumentSigningContext } from '../general/document-signing/document-signing-provider';
+import { EmbedClientLoading } from './embed-client-loading';
+import { EmbedDocumentCompleted } from './embed-document-completed';
+import { EmbedDocumentFields } from './embed-document-fields';
+
+export type EmbedSignDocumentClientPageProps = {
+  token: string;
+  documentId: number;
+  documentData: DocumentData;
+  recipient: Recipient;
+  fields: Field[];
+  metadata?: DocumentMeta | TemplateMeta | null;
+  isCompleted?: boolean;
+  hidePoweredBy?: boolean;
+  isPlatformOrEnterprise?: boolean;
+};
+
+export const EmbedSignDocumentClientPage = ({
+  token,
+  documentId,
+  documentData,
+  recipient,
+  fields,
+  metadata,
+  isCompleted,
+  hidePoweredBy = false,
+  isPlatformOrEnterprise = false,
+}: EmbedSignDocumentClientPageProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const {
+    fullName,
+    email,
+    signature,
+    signatureValid,
+    setFullName,
+    setSignature,
+    setSignatureValid,
+  } = useRequiredDocumentSigningContext();
+
+  const [hasFinishedInit, setHasFinishedInit] = useState(false);
+  const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
+  const [hasCompletedDocument, setHasCompletedDocument] = useState(isCompleted);
+
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const [isNameLocked, setIsNameLocked] = useState(false);
+
+  const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
+
+  const [throttledOnCompleteClick, isThrottled] = useThrottleFn(() => void onCompleteClick(), 500);
+
+  const [pendingFields, _completedFields] = [
+    fields.filter((field) => !field.inserted),
+    fields.filter((field) => field.inserted),
+  ];
+
+  const { mutateAsync: completeDocumentWithToken, isPending: isSubmitting } =
+    trpc.recipient.completeDocumentWithToken.useMutation();
+
+  const hasSignatureField = fields.some((field) => field.type === FieldType.SIGNATURE);
+
+  const onNextFieldClick = () => {
+    validateFieldsInserted(fields);
+
+    setShowPendingFieldTooltip(true);
+    setIsExpanded(false);
+  };
+
+  const onCompleteClick = async () => {
+    try {
+      if (hasSignatureField && !signatureValid) {
+        return;
+      }
+
+      const valid = validateFieldsInserted(fields);
+
+      if (!valid) {
+        setShowPendingFieldTooltip(true);
+        return;
+      }
+
+      await completeDocumentWithToken({
+        documentId,
+        token,
+      });
+
+      if (window.parent) {
+        window.parent.postMessage(
+          {
+            action: 'document-completed',
+            data: {
+              token,
+              documentId,
+              recipientId: recipient.id,
+            },
+          },
+          '*',
+        );
+      }
+
+      setHasCompletedDocument(true);
+    } catch (err) {
+      if (window.parent) {
+        window.parent.postMessage(
+          {
+            action: 'document-error',
+            data: null,
+          },
+          '*',
+        );
+      }
+
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(
+          msg`We were unable to submit this document at this time. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useLayoutEffect(() => {
+    const hash = window.location.hash.slice(1);
+
+    try {
+      const data = ZSignDocumentEmbedDataSchema.parse(JSON.parse(decodeURIComponent(atob(hash))));
+
+      if (!isCompleted && data.name) {
+        setFullName(data.name);
+      }
+
+      // Since a recipient can be provided a name we can lock it without requiring
+      // a to be provided by the parent application, unlike direct templates.
+      setIsNameLocked(!!data.lockName);
+
+      if (data.darkModeDisabled) {
+        document.documentElement.classList.add('dark-mode-disabled');
+      }
+
+      if (isPlatformOrEnterprise) {
+        injectCss({
+          css: data.css,
+          cssVars: data.cssVars,
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+
+    setHasFinishedInit(true);
+
+    // !: While the two setters are stable we still want to ensure we're avoiding
+    // !: re-renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (hasFinishedInit && hasDocumentLoaded && window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'document-ready',
+          data: null,
+        },
+        '*',
+      );
+    }
+  }, [hasFinishedInit, hasDocumentLoaded]);
+
+  if (hasCompletedDocument) {
+    return (
+      <EmbedDocumentCompleted
+        name={fullName}
+        signature={{
+          id: 1,
+          fieldId: 1,
+          recipientId: 1,
+          created: new Date(),
+          signatureImageAsBase64: signature?.startsWith('data:') ? signature : null,
+          typedSignature: signature?.startsWith('data:') ? null : signature,
+        }}
+      />
+    );
+  }
+
+  return (
+    <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg flex-col items-center justify-center p-6">
+      {(!hasFinishedInit || !hasDocumentLoaded) && <EmbedClientLoading />}
+
+      <div className="relative flex w-full flex-col gap-x-6 gap-y-12 md:flex-row">
+        {/* Viewer */}
+        <div className="flex-1">
+          <LazyPDFViewer
+            documentData={documentData}
+            onDocumentLoad={() => setHasDocumentLoaded(true)}
+          />
+        </div>
+
+        {/* Widget */}
+        <div
+          key={isExpanded ? 'expanded' : 'collapsed'}
+          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
+          data-expanded={isExpanded || undefined}
+        >
+          <div className="border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
+            {/* Header */}
+            <div>
+              <div className="flex items-center justify-between gap-x-2">
+                <h3 className="text-foreground text-xl font-semibold md:text-2xl">
+                  <Trans>Sign document</Trans>
+                </h3>
+
+                <Button variant="outline" className="h-8 w-8 p-0 md:hidden">
+                  {isExpanded ? (
+                    <LucideChevronDown
+                      className="text-muted-foreground h-5 w-5"
+                      onClick={() => setIsExpanded(false)}
+                    />
+                  ) : (
+                    <LucideChevronUp
+                      className="text-muted-foreground h-5 w-5"
+                      onClick={() => setIsExpanded(true)}
+                    />
+                  )}
+                </Button>
+              </div>
+            </div>
+
+            <div className="hidden group-data-[expanded]/document-widget:block md:block">
+              <p className="text-muted-foreground mt-2 text-sm">
+                <Trans>Sign the document to complete the process.</Trans>
+              </p>
+
+              <hr className="border-border mb-8 mt-4" />
+            </div>
+
+            {/* Form */}
+            <div className="-mx-2 hidden px-2 group-data-[expanded]/document-widget:block md:block">
+              <div className="flex flex-1 flex-col gap-y-4">
+                <div>
+                  <Label htmlFor="full-name">
+                    <Trans>Full Name</Trans>
+                  </Label>
+
+                  <Input
+                    type="text"
+                    id="full-name"
+                    className="bg-background mt-2"
+                    disabled={isNameLocked}
+                    value={fullName}
+                    onChange={(e) => !isNameLocked && setFullName(e.target.value)}
+                  />
+                </div>
+
+                <div>
+                  <Label htmlFor="email">
+                    <Trans>Email</Trans>
+                  </Label>
+
+                  <Input
+                    type="email"
+                    id="email"
+                    className="bg-background mt-2"
+                    value={email}
+                    disabled
+                  />
+                </div>
+
+                <div>
+                  <Label htmlFor="Signature">
+                    <Trans>Signature</Trans>
+                  </Label>
+
+                  <Card className="mt-2" gradient degrees={-120}>
+                    <CardContent className="p-0">
+                      <SignaturePad
+                        className="h-44 w-full"
+                        disabled={isThrottled || isSubmitting}
+                        defaultValue={signature ?? undefined}
+                        onChange={(value) => {
+                          setSignature(value);
+                        }}
+                        onValidityChange={(isValid) => {
+                          setSignatureValid(isValid);
+                        }}
+                        allowTypedSignature={Boolean(
+                          metadata &&
+                            'typedSignatureEnabled' in metadata &&
+                            metadata.typedSignatureEnabled,
+                        )}
+                      />
+                    </CardContent>
+                  </Card>
+
+                  {hasSignatureField && !signatureValid && (
+                    <div className="text-destructive mt-2 text-sm">
+                      <Trans>
+                        Signature is too small. Please provide a more complete signature.
+                      </Trans>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="hidden flex-1 group-data-[expanded]/document-widget:block md:block" />
+
+            <div className="mt-4 hidden w-full grid-cols-2 items-center group-data-[expanded]/document-widget:grid md:grid">
+              {pendingFields.length > 0 ? (
+                <Button className="col-start-2" onClick={() => onNextFieldClick()}>
+                  <Trans>Next</Trans>
+                </Button>
+              ) : (
+                <Button
+                  className="col-start-2"
+                  disabled={isThrottled || (hasSignatureField && !signatureValid)}
+                  loading={isSubmitting}
+                  onClick={() => throttledOnCompleteClick()}
+                >
+                  <Trans>Complete</Trans>
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+          {showPendingFieldTooltip && pendingFields.length > 0 && (
+            <FieldToolTip key={pendingFields[0].id} field={pendingFields[0]} color="warning">
+              <Trans>Click to insert field</Trans>
+            </FieldToolTip>
+          )}
+        </ElementVisible>
+
+        {/* Fields */}
+        <EmbedDocumentFields recipient={recipient} fields={fields} metadata={metadata} />
+      </div>
+
+      {!hidePoweredBy && (
+        <div className="bg-primary text-primary-foreground fixed bottom-0 left-0 z-40 rounded-tr px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100">
+          <span>Powered by</span>
+          <BrandingLogo className="ml-2 inline-block h-[14px]" />
+        </div>
+      )}
+    </div>
+  );
+};

apps/remix/app/components/embed/embed-paywall.tsx

@@ -0,0 +1,7 @@
+export const EmbedPaywall = () => {
+  return (
+    <div>
+      <h1>Paywall</h1>
+    </div>
+  );
+};

apps/remix/app/components/forms/2fa/disable-authenticator-app-dialog.tsx

@@ -0,0 +1,198 @@
+import { useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { flushSync } from 'react-dom';
+import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
+import { z } from 'zod';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZDisable2FAForm = z.object({
+  totpCode: z.string().trim().optional(),
+  backupCode: z.string().trim().optional(),
+});
+
+export type TDisable2FAForm = z.infer<typeof ZDisable2FAForm>;
+
+export const DisableAuthenticatorAppDialog = () => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [twoFactorDisableMethod, setTwoFactorDisableMethod] = useState<'totp' | 'backup'>('totp');
+
+  const { mutateAsync: disable2FA } = trpc.twoFactorAuthentication.disable.useMutation();
+
+  const disable2FAForm = useForm<TDisable2FAForm>({
+    defaultValues: {
+      totpCode: '',
+      backupCode: '',
+    },
+    resolver: zodResolver(ZDisable2FAForm),
+  });
+
+  const onCloseTwoFactorDisableDialog = () => {
+    disable2FAForm.reset();
+
+    setIsOpen(!isOpen);
+  };
+
+  const onToggleTwoFactorDisableMethodClick = () => {
+    const method = twoFactorDisableMethod === 'totp' ? 'backup' : 'totp';
+
+    if (method === 'totp') {
+      disable2FAForm.setValue('backupCode', '');
+    }
+
+    if (method === 'backup') {
+      disable2FAForm.setValue('totpCode', '');
+    }
+
+    setTwoFactorDisableMethod(method);
+  };
+
+  const { isSubmitting: isDisable2FASubmitting } = disable2FAForm.formState;
+
+  const onDisable2FAFormSubmit = async ({ totpCode, backupCode }: TDisable2FAForm) => {
+    try {
+      await disable2FA({ totpCode, backupCode });
+
+      toast({
+        title: _(msg`Two-factor authentication disabled`),
+        description: _(
+          msg`Two-factor authentication has been disabled for your account. You will no longer be required to enter a code from your authenticator app when signing in.`,
+        ),
+      });
+
+      flushSync(() => {
+        onCloseTwoFactorDisableDialog();
+      });
+
+      await revalidate();
+    } catch (_err) {
+      toast({
+        title: _(msg`Unable to disable two-factor authentication`),
+        description: _(
+          msg`We were unable to disable two-factor authentication for your account. Please ensure that you have entered your password and backup code correctly and try again.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onCloseTwoFactorDisableDialog}>
+      <DialogTrigger asChild={true}>
+        <Button className="flex-shrink-0" variant="destructive">
+          <Trans>Disable 2FA</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Disable 2FA</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              Please provide a token from the authenticator, or a backup code. If you do not have a
+              backup code available, please contact support.
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...disable2FAForm}>
+          <form onSubmit={disable2FAForm.handleSubmit(onDisable2FAFormSubmit)}>
+            <fieldset className="flex flex-col gap-y-4" disabled={isDisable2FASubmitting}>
+              {twoFactorDisableMethod === 'totp' && (
+                <FormField
+                  name="totpCode"
+                  control={disable2FAForm.control}
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                          {Array(6)
+                            .fill(null)
+                            .map((_, i) => (
+                              <PinInputGroup key={i}>
+                                <PinInputSlot index={i} />
+                              </PinInputGroup>
+                            ))}
+                        </PinInput>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              {twoFactorDisableMethod === 'backup' && (
+                <FormField
+                  control={disable2FAForm.control}
+                  name="backupCode"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        <Trans>Backup Code</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Input type="text" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              <DialogFooter>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  onClick={onToggleTwoFactorDisableMethodClick}
+                >
+                  {twoFactorDisableMethod === 'totp' ? (
+                    <Trans>Use Backup Code</Trans>
+                  ) : (
+                    <Trans>Use Authenticator</Trans>
+                  )}
+                </Button>
+
+                <Button type="submit" variant="destructive" loading={isDisable2FASubmitting}>
+                  <Trans>Disable 2FA</Trans>
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

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

@@ -0,0 +1,271 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
+import { renderSVG } from 'uqr';
+import { z } from 'zod';
+
+import { downloadFile } from '@documenso/lib/client-only/download-file';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { RecoveryCodeList } from './recovery-code-list';
+
+export const ZEnable2FAForm = z.object({
+  token: z.string(),
+});
+
+export type TEnable2FAForm = z.infer<typeof ZEnable2FAForm>;
+
+export type EnableAuthenticatorAppDialogProps = {
+  onSuccess?: () => void;
+};
+
+export const EnableAuthenticatorAppDialog = ({ onSuccess }: EnableAuthenticatorAppDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [recoveryCodes, setRecoveryCodes] = useState<string[] | null>(null);
+
+  const { mutateAsync: enable2FA } = trpc.twoFactorAuthentication.enable.useMutation();
+
+  const {
+    mutateAsync: setup2FA,
+    data: setup2FAData,
+    isPending: isSettingUp2FA,
+  } = trpc.twoFactorAuthentication.setup.useMutation({
+    onError: () => {
+      toast({
+        title: _(msg`Unable to setup two-factor authentication`),
+        description: _(
+          msg`We were unable to setup two-factor authentication for your account. Please ensure that you have entered your code correctly and try again.`,
+        ),
+        variant: 'destructive',
+      });
+    },
+  });
+
+  const enable2FAForm = useForm<TEnable2FAForm>({
+    defaultValues: {
+      token: '',
+    },
+    resolver: zodResolver(ZEnable2FAForm),
+  });
+
+  const { isSubmitting: isEnabling2FA } = enable2FAForm.formState;
+
+  const onEnable2FAFormSubmit = async ({ token }: TEnable2FAForm) => {
+    try {
+      const data = await enable2FA({ code: token });
+
+      setRecoveryCodes(data.recoveryCodes);
+      onSuccess?.();
+
+      toast({
+        title: _(msg`Two-factor authentication enabled`),
+        description: _(
+          msg`You will now be required to enter a code from your authenticator app when signing in.`,
+        ),
+      });
+    } catch (_err) {
+      toast({
+        title: _(msg`Unable to setup two-factor authentication`),
+        description: _(
+          msg`We were unable to setup two-factor authentication for your account. Please ensure that you have entered your code correctly and try again.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const downloadRecoveryCodes = () => {
+    if (recoveryCodes) {
+      const blob = new Blob([recoveryCodes.join('\n')], {
+        type: 'text/plain',
+      });
+
+      downloadFile({
+        filename: 'documenso-2FA-recovery-codes.txt',
+        data: blob,
+      });
+    }
+  };
+
+  const handleEnable2FA = async () => {
+    if (!setup2FAData) {
+      await setup2FA();
+    }
+
+    setIsOpen(true);
+  };
+
+  useEffect(() => {
+    enable2FAForm.reset();
+
+    if (!isOpen && recoveryCodes && recoveryCodes.length > 0) {
+      setRecoveryCodes(null);
+      void revalidate();
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild={true}>
+        <Button
+          className="flex-shrink-0"
+          loading={isSettingUp2FA}
+          onClick={(e) => {
+            e.preventDefault();
+            void handleEnable2FA();
+          }}
+        >
+          <Trans>Enable 2FA</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent position="center">
+        {setup2FAData && (
+          <>
+            {recoveryCodes ? (
+              <div>
+                <DialogHeader>
+                  <DialogTitle>
+                    <Trans>Backup codes</Trans>
+                  </DialogTitle>
+                  <DialogDescription>
+                    <Trans>
+                      Your recovery codes are listed below. Please store them in a safe place.
+                    </Trans>
+                  </DialogDescription>
+                </DialogHeader>
+
+                <div className="mt-4">
+                  <RecoveryCodeList recoveryCodes={recoveryCodes} />
+                </div>
+
+                <DialogFooter className="mt-4">
+                  <DialogClose asChild>
+                    <Button variant="secondary">
+                      <Trans>Close</Trans>
+                    </Button>
+                  </DialogClose>
+
+                  <Button onClick={downloadRecoveryCodes}>
+                    <Trans>Download</Trans>
+                  </Button>
+                </DialogFooter>
+              </div>
+            ) : (
+              <Form {...enable2FAForm}>
+                <form onSubmit={enable2FAForm.handleSubmit(onEnable2FAFormSubmit)}>
+                  <DialogHeader>
+                    <DialogTitle>
+                      <Trans>Enable Authenticator App</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                      <Trans>
+                        To enable two-factor authentication, scan the following QR code using your
+                        authenticator app.
+                      </Trans>
+                    </DialogDescription>
+                  </DialogHeader>
+
+                  <fieldset disabled={isEnabling2FA} className="mt-4 flex flex-col gap-y-4">
+                    <div
+                      className="flex h-36 justify-center"
+                      dangerouslySetInnerHTML={{
+                        __html: renderSVG(setup2FAData?.uri ?? ''),
+                      }}
+                    />
+
+                    <p className="text-muted-foreground text-sm">
+                      <Trans>
+                        If your authenticator app does not support QR codes, you can use the
+                        following code instead:
+                      </Trans>
+                    </p>
+
+                    <p className="bg-muted/60 text-muted-foreground rounded-lg p-2 text-center font-mono tracking-widest">
+                      {setup2FAData?.secret}
+                    </p>
+
+                    <p className="text-muted-foreground text-sm">
+                      <Trans>
+                        Once you have scanned the QR code or entered the code manually, enter the
+                        code provided by your authenticator app below.
+                      </Trans>
+                    </p>
+
+                    <FormField
+                      name="token"
+                      control={enable2FAForm.control}
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="text-muted-foreground">
+                            <Trans>Token</Trans>
+                          </FormLabel>
+                          <FormControl>
+                            <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                              {Array(6)
+                                .fill(null)
+                                .map((_, i) => (
+                                  <PinInputGroup key={i}>
+                                    <PinInputSlot index={i} />
+                                  </PinInputGroup>
+                                ))}
+                            </PinInput>
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <DialogFooter>
+                      <DialogClose asChild>
+                        <Button variant="secondary">
+                          <Trans>Cancel</Trans>
+                        </Button>
+                      </DialogClose>
+
+                      <Button type="submit" loading={isEnabling2FA}>
+                        <Trans>Enable 2FA</Trans>
+                      </Button>
+                    </DialogFooter>
+                  </fieldset>
+                </form>
+              </Form>
+            )}
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/forms/2fa/recovery-code-list.tsx

@@ -0,0 +1,61 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Copy } from 'lucide-react';
+
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type RecoveryCodeListProps = {
+  recoveryCodes: string[];
+};
+
+export const RecoveryCodeList = ({ recoveryCodes }: RecoveryCodeListProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const [, copyToClipboard] = useCopyToClipboard();
+
+  const onCopyRecoveryCodeClick = async (code: string) => {
+    try {
+      const result = await copyToClipboard(code);
+
+      if (!result) {
+        throw new Error('Unable to copy recovery code');
+      }
+
+      toast({
+        title: _(msg`Recovery code copied`),
+        description: _(msg`Your recovery code has been copied to your clipboard.`),
+      });
+    } catch (_err) {
+      toast({
+        title: _(msg`Unable to copy recovery code`),
+        description: _(
+          msg`We were unable to copy your recovery code to your clipboard. Please try again.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      {recoveryCodes.map((code) => (
+        <div
+          key={code}
+          className="bg-muted text-muted-foreground relative rounded-lg p-4 font-mono md:text-center"
+        >
+          <span>{code}</span>
+
+          <div className="absolute inset-y-0 right-4 flex items-center justify-center">
+            <button
+              className="opacity-60 hover:opacity-80"
+              onClick={() => void onCopyRecoveryCodeClick(code)}
+            >
+              <Copy className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

apps/remix/app/components/forms/2fa/view-recovery-codes-dialog.tsx

@@ -0,0 +1,175 @@
+import { useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
+
+import { downloadFile } from '@documenso/lib/client-only/download-file';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
+
+import { RecoveryCodeList } from './recovery-code-list';
+
+export const ZViewRecoveryCodesForm = z.object({
+  token: z.string().min(1, { message: 'Token is required' }),
+});
+
+export type TViewRecoveryCodesForm = z.infer<typeof ZViewRecoveryCodesForm>;
+
+export const ViewRecoveryCodesDialog = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const {
+    data: recoveryCodes,
+    mutate,
+    isPending,
+    error,
+  } = trpc.twoFactorAuthentication.viewRecoveryCodes.useMutation();
+
+  const viewRecoveryCodesForm = useForm<TViewRecoveryCodesForm>({
+    defaultValues: {
+      token: '',
+    },
+    resolver: zodResolver(ZViewRecoveryCodesForm),
+  });
+
+  const downloadRecoveryCodes = () => {
+    if (recoveryCodes) {
+      const blob = new Blob([recoveryCodes.join('\n')], {
+        type: 'text/plain',
+      });
+
+      downloadFile({
+        filename: 'documenso-2FA-recovery-codes.txt',
+        data: blob,
+      });
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button className="flex-shrink-0">
+          <Trans>View Codes</Trans>
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="w-full max-w-xl md:max-w-xl lg:max-w-xl">
+        {recoveryCodes ? (
+          <div>
+            <DialogHeader className="mb-4">
+              <DialogTitle>
+                <Trans>View Recovery Codes</Trans>
+              </DialogTitle>
+
+              <DialogDescription>
+                <Trans>
+                  Your recovery codes are listed below. Please store them in a safe place.
+                </Trans>
+              </DialogDescription>
+            </DialogHeader>
+
+            <RecoveryCodeList recoveryCodes={recoveryCodes} />
+
+            <DialogFooter className="mt-4">
+              <DialogClose asChild>
+                <Button variant="secondary">
+                  <Trans>Close</Trans>
+                </Button>
+              </DialogClose>
+
+              <Button onClick={downloadRecoveryCodes}>
+                <Trans>Download</Trans>
+              </Button>
+            </DialogFooter>
+          </div>
+        ) : (
+          <Form {...viewRecoveryCodesForm}>
+            <form onSubmit={viewRecoveryCodesForm.handleSubmit((value) => mutate(value))}>
+              <DialogHeader className="mb-4">
+                <DialogTitle>
+                  <Trans>View Recovery Codes</Trans>
+                </DialogTitle>
+
+                <DialogDescription>
+                  <Trans>Please provide a token from your authenticator, or a backup code.</Trans>
+                </DialogDescription>
+              </DialogHeader>
+
+              <fieldset className="flex flex-col space-y-4" disabled={isPending}>
+                <FormField
+                  name="token"
+                  control={viewRecoveryCodesForm.control}
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                          {Array(6)
+                            .fill(null)
+                            .map((_, i) => (
+                              <PinInputGroup key={i}>
+                                <PinInputSlot index={i} />
+                              </PinInputGroup>
+                            ))}
+                        </PinInput>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {error && (
+                  <Alert variant="destructive">
+                    <AlertDescription>
+                      {match(AppError.parseError(error).message)
+                        .with('INCORRECT_TWO_FACTOR_CODE', () => (
+                          <Trans>Invalid code. Please try again.</Trans>
+                        ))
+                        .otherwise(() => (
+                          <Trans>Something went wrong. Please try again or contact support.</Trans>
+                        ))}
+                    </AlertDescription>
+                  </Alert>
+                )}
+
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button type="button" variant="secondary">
+                      <Trans>Cancel</Trans>
+                    </Button>
+                  </DialogClose>
+
+                  <Button type="submit" loading={isPending}>
+                    <Trans>View</Trans>
+                  </Button>
+                </DialogFooter>
+              </fieldset>
+            </form>
+          </Form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/forms/avatar-image.tsx

@@ -0,0 +1,189 @@
+import { useMemo } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { ErrorCode, useDropzone } from 'react-dropzone';
+import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
+
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { base64 } from '@documenso/lib/universal/base64';
+import { formatAvatarUrl } from '@documenso/lib/utils/avatars';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+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 {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useOptionalCurrentTeam } from '~/providers/team';
+
+export const ZAvatarImageFormSchema = z.object({
+  bytes: z.string().nullish(),
+});
+
+export type TAvatarImageFormSchema = z.infer<typeof ZAvatarImageFormSchema>;
+
+export type AvatarImageFormProps = {
+  className?: string;
+};
+
+export const AvatarImageForm = ({ className }: AvatarImageFormProps) => {
+  const { user } = useSession();
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const team = useOptionalCurrentTeam();
+
+  const { mutateAsync: setProfileImage } = trpc.profile.setProfileImage.useMutation();
+
+  const initials = extractInitials(team?.name || user.name || '');
+
+  const hasAvatarImage = useMemo(() => {
+    if (team) {
+      return team.avatarImageId !== null;
+    }
+
+    return user.avatarImageId !== null;
+  }, [team, user.avatarImageId]);
+
+  const avatarImageId = team ? team.avatarImageId : user.avatarImageId;
+
+  const form = useForm<TAvatarImageFormSchema>({
+    values: {
+      bytes: null,
+    },
+    resolver: zodResolver(ZAvatarImageFormSchema),
+  });
+
+  const { getRootProps, getInputProps } = useDropzone({
+    maxSize: 1024 * 1024,
+    accept: {
+      'image/*': ['.png', '.jpg', '.jpeg'],
+    },
+    multiple: false,
+    onDropAccepted: ([file]) => {
+      void file.arrayBuffer().then((buffer) => {
+        const contents = base64.encode(new Uint8Array(buffer));
+
+        form.setValue('bytes', contents);
+        void form.handleSubmit(onFormSubmit)();
+      });
+    },
+    onDropRejected: ([file]) => {
+      form.setError('bytes', {
+        type: 'onChange',
+        message: match(file.errors[0].code)
+          .with(ErrorCode.FileTooLarge, () => _(msg`Uploaded file is too large`))
+          .with(ErrorCode.FileTooSmall, () => _(msg`Uploaded file is too small`))
+          .with(ErrorCode.FileInvalidType, () => _(msg`Uploaded file not an allowed file type`))
+          .otherwise(() => _(msg`An unknown error occurred`)),
+      });
+    },
+  });
+
+  const onFormSubmit = async (data: TAvatarImageFormSchema) => {
+    try {
+      await setProfileImage({
+        bytes: data.bytes,
+        teamId: team?.id,
+      });
+
+      toast({
+        title: _(msg`Avatar Updated`),
+        description: _(msg`Your avatar has been updated successfully.`),
+        duration: 5000,
+      });
+
+      void revalidate();
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code).otherwise(
+        () =>
+          msg`We encountered an unknown error while attempting to update your password. Please try again later.`,
+      );
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  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={form.formState.isSubmitting}>
+          <FormField
+            control={form.control}
+            name="bytes"
+            render={() => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Avatar</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <div className="flex items-center gap-8">
+                    <div className="relative">
+                      <Avatar className="h-16 w-16 border-2 border-solid">
+                        {avatarImageId && <AvatarImage src={formatAvatarUrl(avatarImageId)} />}
+                        <AvatarFallback className="text-sm text-gray-400">
+                          {initials}
+                        </AvatarFallback>
+                      </Avatar>
+
+                      {hasAvatarImage && (
+                        <button
+                          type="button"
+                          className="bg-background/70 text-destructive absolute inset-0 flex cursor-pointer items-center justify-center text-xs opacity-0 transition-opacity hover:opacity-100"
+                          disabled={form.formState.isSubmitting}
+                          onClick={() => void onFormSubmit({ bytes: null })}
+                        >
+                          <Trans>Remove</Trans>
+                        </button>
+                      )}
+                    </div>
+
+                    <Button
+                      type="button"
+                      variant="secondary"
+                      size="sm"
+                      {...getRootProps()}
+                      loading={form.formState.isSubmitting}
+                      disabled={form.formState.isSubmitting}
+                    >
+                      <Trans>Upload Avatar</Trans>
+                      <input {...getInputProps()} />
+                    </Button>
+                  </div>
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/forgot-password.tsx

@@ -0,0 +1,94 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+import { z } from 'zod';
+
+import { authClient } from '@documenso/auth/client';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZForgotPasswordFormSchema = z.object({
+  email: z.string().email().min(1),
+});
+
+export type TForgotPasswordFormSchema = z.infer<typeof ZForgotPasswordFormSchema>;
+
+export type ForgotPasswordFormProps = {
+  className?: string;
+};
+
+export const ForgotPasswordForm = ({ className }: ForgotPasswordFormProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const navigate = useNavigate();
+
+  const form = useForm<TForgotPasswordFormSchema>({
+    values: {
+      email: '',
+    },
+    resolver: zodResolver(ZForgotPasswordFormSchema),
+  });
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const onFormSubmit = async ({ email }: TForgotPasswordFormSchema) => {
+    await authClient.emailPassword.forgotPassword({ email }).catch(() => null);
+
+    await navigate('/check-email');
+
+    toast({
+      title: _(msg`Reset email sent`),
+      description: _(
+        msg`A password reset email has been sent, if you have an account you should see it in your inbox shortly.`,
+      ),
+      duration: 5000,
+    });
+
+    form.reset();
+  };
+
+  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>
+                  <Trans>Email</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input type="email" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </fieldset>
+
+        <Button size="lg" loading={isSubmitting}>
+          {isSubmitting ? <Trans>Sending Reset Email...</Trans> : <Trans>Reset Password</Trans>}
+        </Button>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/password.tsx

@@ -0,0 +1,160 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
+
+import { authClient } from '@documenso/auth/client';
+import type { SessionUser } from '@documenso/auth/server/lib/session/session';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { ZCurrentPasswordSchema, ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZPasswordFormSchema = z
+  .object({
+    currentPassword: ZCurrentPasswordSchema,
+    password: ZPasswordSchema,
+    repeatedPassword: ZPasswordSchema,
+  })
+  .refine((data) => data.password === data.repeatedPassword, {
+    message: 'Passwords do not match',
+    path: ['repeatedPassword'],
+  });
+
+export type TPasswordFormSchema = z.infer<typeof ZPasswordFormSchema>;
+
+export type PasswordFormProps = {
+  className?: string;
+  user: SessionUser;
+};
+
+export const PasswordForm = ({ className }: PasswordFormProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const form = useForm<TPasswordFormSchema>({
+    values: {
+      currentPassword: '',
+      password: '',
+      repeatedPassword: '',
+    },
+    resolver: zodResolver(ZPasswordFormSchema),
+  });
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const onFormSubmit = async ({ currentPassword, password }: TPasswordFormSchema) => {
+    try {
+      await authClient.emailPassword.updatePassword({
+        currentPassword,
+        password,
+      });
+
+      form.reset();
+
+      toast({
+        title: _(msg`Password updated`),
+        description: _(msg`Your password has been updated successfully.`),
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with('NO_PASSWORD', () => msg`User has no password.`)
+        .with('INCORRECT_PASSWORD', () => msg`Current password is incorrect.`)
+        .with(
+          'SAME_PASSWORD',
+          () => msg`Your new password cannot be the same as your old password.`,
+        )
+        .otherwise(
+          () =>
+            msg`We encountered an unknown error while attempting to update your password. Please try again later.`,
+        );
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  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="currentPassword"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Current Password</Trans>
+                </FormLabel>
+                <FormControl>
+                  <PasswordInput autoComplete="current-password" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Password</Trans>
+                </FormLabel>
+                <FormControl>
+                  <PasswordInput autoComplete="new-password" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="repeatedPassword"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Repeat Password</Trans>
+                </FormLabel>
+                <FormControl>
+                  <PasswordInput autoComplete="new-password" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </fieldset>
+
+        <div className="ml-auto mt-4">
+          <Button type="submit" loading={isSubmitting}>
+            {isSubmitting ? <Trans>Updating password...</Trans> : <Trans>Update password</Trans>}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/profile.tsx

@@ -0,0 +1,144 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
+import { z } from 'zod';
+
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZProfileFormSchema = z.object({
+  name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+  signature: z.string().min(1, 'Signature Pad cannot be empty'),
+});
+
+export const ZTwoFactorAuthTokenSchema = z.object({
+  token: z.string(),
+});
+
+export type TTwoFactorAuthTokenSchema = z.infer<typeof ZTwoFactorAuthTokenSchema>;
+export type TProfileFormSchema = z.infer<typeof ZProfileFormSchema>;
+
+export type ProfileFormProps = {
+  className?: string;
+};
+
+export const ProfileForm = ({ className }: ProfileFormProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { user } = useSession();
+  const { revalidate } = useRevalidator();
+
+  const form = useForm<TProfileFormSchema>({
+    values: {
+      name: user.name ?? '',
+      signature: user.signature || '',
+    },
+    resolver: zodResolver(ZProfileFormSchema),
+  });
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const { mutateAsync: updateProfile } = trpc.profile.updateProfile.useMutation();
+
+  const onFormSubmit = async ({ name, signature }: TProfileFormSchema) => {
+    try {
+      await updateProfile({
+        name,
+        signature,
+      });
+
+      toast({
+        title: _(msg`Profile updated`),
+        description: _(msg`Your profile has been updated successfully.`),
+        duration: 5000,
+      });
+
+      await revalidate();
+    } catch (err) {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting update your profile. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  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>
+                  <Trans>Full Name</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input type="text" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div>
+            <Label htmlFor="email" className="text-muted-foreground">
+              <Trans>Email</Trans>
+            </Label>
+            <Input id="email" type="email" className="bg-muted mt-2" value={user.email} disabled />
+          </div>
+          <FormField
+            control={form.control}
+            name="signature"
+            render={({ field: { onChange } }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Signature</Trans>
+                </FormLabel>
+                <FormControl>
+                  <SignaturePad
+                    className="h-44 w-full"
+                    disabled={isSubmitting}
+                    containerClassName={cn('rounded-lg border bg-background')}
+                    defaultValue={user.signature ?? undefined}
+                    onChange={(v) => onChange(v ?? '')}
+                    allowTypedSignature={true}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </fieldset>
+
+        <Button type="submit" loading={isSubmitting} className="self-end">
+          {isSubmitting ? <Trans>Updating profile...</Trans> : <Trans>Update profile</Trans>}
+        </Button>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/public-profile-claim-dialog.tsx

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

apps/remix/app/components/forms/public-profile-form.tsx

@@ -0,0 +1,285 @@
+import { useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Plural, Trans } from '@lingui/react/macro';
+import type { TeamProfile, UserProfile } from '@prisma/client';
+import { motion } from 'framer-motion';
+import { AnimatePresence } from 'framer-motion';
+import { CheckSquareIcon, CopyIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import type { z } from 'zod';
+
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { formatUserProfilePath } from '@documenso/lib/utils/public-profiles';
+import {
+  MAX_PROFILE_BIO_LENGTH,
+  ZUpdatePublicProfileMutationSchema,
+} from '@documenso/trpc/server/profile-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZPublicProfileFormSchema = ZUpdatePublicProfileMutationSchema.pick({
+  bio: true,
+  enabled: true,
+  url: true,
+});
+
+export type TPublicProfileFormSchema = z.infer<typeof ZPublicProfileFormSchema>;
+
+export type PublicProfileFormProps = {
+  className?: string;
+  profileUrl?: string | null;
+  teamUrl?: string;
+  onProfileUpdate: (data: TPublicProfileFormSchema) => Promise<unknown>;
+  profile: UserProfile | TeamProfile;
+};
+export const PublicProfileForm = ({
+  className,
+  profileUrl,
+  profile,
+  teamUrl,
+  onProfileUpdate,
+}: PublicProfileFormProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [, copy] = useCopyToClipboard();
+
+  const [copiedTimeout, setCopiedTimeout] = useState<NodeJS.Timeout | null>(null);
+
+  const form = useForm<TPublicProfileFormSchema>({
+    values: {
+      url: profileUrl ?? '',
+      bio: profile?.bio ?? '',
+    },
+    resolver: zodResolver(ZPublicProfileFormSchema),
+  });
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const onFormSubmit = async (data: TPublicProfileFormSchema) => {
+    try {
+      await onProfileUpdate(data);
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Your public profile has been updated.`),
+        duration: 5000,
+      });
+
+      form.reset({
+        url: data.url,
+        bio: data.bio,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      switch (error.code) {
+        case 'PREMIUM_PROFILE_URL':
+        case 'PROFILE_URL_TAKEN':
+          form.setError('url', {
+            type: 'manual',
+            message: error.message,
+          });
+
+          break;
+
+        default:
+          toast({
+            title: _(msg`An unknown error occurred`),
+            description: _(
+              msg`We encountered an unknown error while attempting to update your public profile. Please try again later.`,
+            ),
+            variant: 'destructive',
+          });
+      }
+    }
+  };
+
+  const onCopy = async () => {
+    await copy(formatUserProfilePath(form.getValues('url') ?? '')).then(() => {
+      toast({
+        title: _(msg`Copied to clipboard`),
+        description: _(msg`The profile link has been copied to your clipboard`),
+      });
+    });
+
+    if (copiedTimeout) {
+      clearTimeout(copiedTimeout);
+    }
+
+    setCopiedTimeout(
+      setTimeout(() => {
+        setCopiedTimeout(null);
+      }, 2000),
+    );
+  };
+
+  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="url"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Public profile URL</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input {...field} disabled={field.disabled || teamUrl !== undefined} />
+                </FormControl>
+
+                {teamUrl && (
+                  <p className="text-muted-foreground text-xs">
+                    <Trans>
+                      You can update the profile URL by updating the team URL in the general
+                      settings page.
+                    </Trans>
+                  </p>
+                )}
+
+                <div className="h-8">
+                  {!form.formState.errors.url && (
+                    <div className="text-muted-foreground h-8 text-sm">
+                      {field.value ? (
+                        <div>
+                          <Button
+                            type="button"
+                            variant="none"
+                            className="h-7 rounded bg-neutral-50 pl-2 pr-0.5 font-normal dark:border dark:border-neutral-500 dark:bg-neutral-600"
+                            onClick={async () => onCopy()}
+                          >
+                            <p>
+                              {formatUserProfilePath('').replace(/https?:\/\//, '')}
+                              <span className="font-semibold">{field.value}</span>
+                            </p>
+
+                            <div className="ml-1 flex h-6 w-6 items-center justify-center rounded transition-all hover:bg-neutral-200 hover:active:bg-neutral-300 dark:hover:bg-neutral-500 dark:hover:active:bg-neutral-400">
+                              <AnimatePresence mode="wait" initial={false}>
+                                <motion.div
+                                  key={copiedTimeout ? 'copied' : 'copy'}
+                                  initial={{ opacity: 0 }}
+                                  animate={{ opacity: 1 }}
+                                  exit={{ opacity: 0, transition: { duration: 0.1 } }}
+                                  className="absolute"
+                                >
+                                  {copiedTimeout ? (
+                                    <CheckSquareIcon className="h-3.5 w-3.5" />
+                                  ) : (
+                                    <CopyIcon className="h-3.5 w-3.5" />
+                                  )}
+                                </motion.div>
+                              </AnimatePresence>
+                            </div>
+                          </Button>
+                        </div>
+                      ) : (
+                        <p>
+                          <Trans>A unique URL to access your profile</Trans>
+                        </p>
+                      )}
+                    </div>
+                  )}
+
+                  <FormMessage />
+                </div>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="bio"
+            render={({ field }) => {
+              const remaningLength = MAX_PROFILE_BIO_LENGTH - (field.value || '').length;
+
+              return (
+                <FormItem>
+                  <FormLabel>Bio</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      {...field}
+                      placeholder={
+                        teamUrl ? _(msg`Write about the team`) : _(msg`Write about yourself`)
+                      }
+                    />
+                  </FormControl>
+
+                  {!form.formState.errors.bio && (
+                    <p className="text-muted-foreground text-sm">
+                      {remaningLength >= 0 ? (
+                        <Plural
+                          value={remaningLength}
+                          one={<Trans># character remaining</Trans>}
+                          other={<Trans># characters remaining</Trans>}
+                        />
+                      ) : (
+                        <Plural
+                          value={Math.abs(remaningLength)}
+                          one={<Trans># character over the limit</Trans>}
+                          other={<Trans># characters over the limit</Trans>}
+                        />
+                      )}
+                    </p>
+                  )}
+
+                  <FormMessage />
+                </FormItem>
+              );
+            }}
+          />
+
+          <div className="flex flex-row justify-end space-x-4">
+            <AnimatePresence>
+              {form.formState.isDirty && (
+                <motion.div
+                  initial={{
+                    opacity: 0,
+                  }}
+                  animate={{
+                    opacity: 1,
+                  }}
+                  exit={{
+                    opacity: 0,
+                  }}
+                >
+                  <Button type="button" variant="secondary" onClick={() => form.reset()}>
+                    <Trans>Reset</Trans>
+                  </Button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            <Button
+              type="submit"
+              className="transition-opacity"
+              disabled={!form.formState.isDirty}
+              loading={form.formState.isSubmitting}
+            >
+              <Trans>Update</Trans>
+            </Button>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/reset-password.tsx

@@ -0,0 +1,144 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
+
+import { authClient } from '@documenso/auth/client';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const ZResetPasswordFormSchema = z
+  .object({
+    password: ZPasswordSchema,
+    repeatedPassword: ZPasswordSchema,
+  })
+  .refine((data) => data.password === data.repeatedPassword, {
+    path: ['repeatedPassword'],
+    message: "Passwords don't match",
+  });
+
+export type TResetPasswordFormSchema = z.infer<typeof ZResetPasswordFormSchema>;
+
+export type ResetPasswordFormProps = {
+  className?: string;
+  token: string;
+};
+
+export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps) => {
+  const navigate = useNavigate();
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const form = useForm<TResetPasswordFormSchema>({
+    values: {
+      password: '',
+      repeatedPassword: '',
+    },
+    resolver: zodResolver(ZResetPasswordFormSchema),
+  });
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const onFormSubmit = async ({ password }: Omit<TResetPasswordFormSchema, 'repeatedPassword'>) => {
+    try {
+      await authClient.emailPassword.resetPassword({
+        password,
+        token,
+      });
+
+      await navigate('/signin');
+
+      form.reset();
+
+      toast({
+        title: _(msg`Password updated`),
+        description: _(msg`Your password has been updated successfully.`),
+        duration: 5000,
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(AppErrorCode.EXPIRED_CODE, () => msg`Token has expired. Please try again.`)
+        .with('INVALID_TOKEN', () => msg`Invalid token provided. Please try again.`)
+        .with(
+          'SAME_PASSWORD',
+          () => msg`Your new password cannot be the same as your old password.`,
+        )
+        .otherwise(
+          () =>
+            msg`We encountered an unknown error while attempting to reset your password. Please try again later.`,
+        );
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  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="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Password</Trans>
+                </FormLabel>
+                <FormControl>
+                  <PasswordInput {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="repeatedPassword"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Repeat Password</Trans>
+                </FormLabel>
+                <FormControl>
+                  <PasswordInput {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </fieldset>
+
+        <Button type="submit" size="lg" loading={isSubmitting}>
+          {isSubmitting ? <Trans>Resetting Password...</Trans> : <Trans>Reset Password</Trans>}
+        </Button>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/search-param-selector.tsx

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+
+import { useLocation, useNavigate } from 'react-router';
+import { useSearchParams } from 'react-router';
+
+import { Select, SelectContent, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
+
+export type SearchParamSelector = {
+  paramKey: string;
+  isValueValid: (value: unknown) => boolean;
+  children: React.ReactNode;
+};
+
+export const SearchParamSelector = ({ children, paramKey, isValueValid }: SearchParamSelector) => {
+  const { pathname } = useLocation();
+  const [searchParams] = useSearchParams();
+
+  const navigate = useNavigate();
+
+  const value = useMemo(() => {
+    const p = searchParams?.get(paramKey) ?? 'all';
+
+    return isValueValid(p) ? p : 'all';
+  }, [searchParams]);
+
+  const onValueChange = (newValue: string) => {
+    if (!pathname) {
+      return;
+    }
+
+    const params = new URLSearchParams(searchParams?.toString());
+
+    params.set(paramKey, newValue);
+
+    if (newValue === '' || newValue === 'all') {
+      params.delete(paramKey);
+    }
+
+    void navigate(`${pathname}?${params.toString()}`, { preventScrollReset: true });
+  };
+
+  return (
+    <Select defaultValue={value} onValueChange={onValueChange}>
+      <SelectTrigger className="text-muted-foreground max-w-[200px]">
+        <SelectValue />
+      </SelectTrigger>
+
+      <SelectContent position="popper">{children}</SelectContent>
+    </Select>
+  );
+};

apps/remix/app/components/forms/send-confirmation-email.tsx

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

apps/remix/app/components/forms/signin.tsx

@@ -0,0 +1,497 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/browser';
+import { KeyRoundIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { FaIdCardClip } from 'react-icons/fa6';
+import { FcGoogle } from 'react-icons/fc';
+import { Link, useNavigate } from 'react-router';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
+
+import { authClient } from '@documenso/auth/client';
+import { AuthenticationErrorCode } from '@documenso/auth/server/lib/errors/error-codes';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCurrentPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  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 { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const CommonErrorMessages: Record<string, MessageDescriptor> = {
+  [AuthenticationErrorCode.AccountDisabled]: msg`This account has been disabled. Please contact support.`,
+};
+
+const handleFallbackErrorMessages = (code: string) => {
+  const message = CommonErrorMessages[code];
+
+  if (!message) {
+    return msg`An unknown error occurred`;
+  }
+
+  return message;
+};
+
+const LOGIN_REDIRECT_PATH = '/documents';
+
+export const ZSignInFormSchema = z.object({
+  email: z.string().email().min(1),
+  password: ZCurrentPasswordSchema,
+  totpCode: z.string().trim().optional(),
+  backupCode: z.string().trim().optional(),
+});
+
+export type TSignInFormSchema = z.infer<typeof ZSignInFormSchema>;
+
+export type SignInFormProps = {
+  className?: string;
+  initialEmail?: string;
+  isGoogleSSOEnabled?: boolean;
+  isOIDCSSOEnabled?: boolean;
+  oidcProviderLabel?: string;
+  returnTo?: string;
+};
+
+export const SignInForm = ({
+  className,
+  initialEmail,
+  isGoogleSSOEnabled,
+  isOIDCSSOEnabled,
+  oidcProviderLabel,
+  returnTo,
+}: SignInFormProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const navigate = useNavigate();
+
+  const [isTwoFactorAuthenticationDialogOpen, setIsTwoFactorAuthenticationDialogOpen] =
+    useState(false);
+
+  const [twoFactorAuthenticationMethod, setTwoFactorAuthenticationMethod] = useState<
+    'totp' | 'backup'
+  >('totp');
+
+  const [isPasskeyLoading, setIsPasskeyLoading] = useState(false);
+
+  const redirectPath = useMemo(() => {
+    // Handle SSR
+    if (typeof window === 'undefined') {
+      return LOGIN_REDIRECT_PATH;
+    }
+
+    let url = new URL(returnTo || LOGIN_REDIRECT_PATH, window.location.origin);
+
+    // Don't allow different origins
+    if (url.origin !== window.location.origin) {
+      url = new URL(LOGIN_REDIRECT_PATH, window.location.origin);
+    }
+
+    return url.toString();
+  }, [returnTo]);
+
+  const { mutateAsync: createPasskeySigninOptions } =
+    trpc.auth.createPasskeySigninOptions.useMutation();
+
+  const form = useForm<TSignInFormSchema>({
+    values: {
+      email: initialEmail ?? '',
+      password: '',
+      totpCode: '',
+      backupCode: '',
+    },
+    resolver: zodResolver(ZSignInFormSchema),
+  });
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const onCloseTwoFactorAuthenticationDialog = () => {
+    form.setValue('totpCode', '');
+    form.setValue('backupCode', '');
+
+    setIsTwoFactorAuthenticationDialogOpen(false);
+  };
+
+  const onToggleTwoFactorAuthenticationMethodClick = () => {
+    const method = twoFactorAuthenticationMethod === 'totp' ? 'backup' : 'totp';
+
+    if (method === 'totp') {
+      form.setValue('backupCode', '');
+    }
+
+    if (method === 'backup') {
+      form.setValue('totpCode', '');
+    }
+
+    setTwoFactorAuthenticationMethod(method);
+  };
+
+  const onSignInWithPasskey = async () => {
+    if (!browserSupportsWebAuthn()) {
+      toast({
+        title: _(msg`Not supported`),
+        description: _(msg`Passkeys are not supported on this browser`),
+        duration: 10000,
+        variant: 'destructive',
+      });
+
+      return;
+    }
+
+    try {
+      setIsPasskeyLoading(true);
+
+      const { options, sessionId } = await createPasskeySigninOptions();
+
+      const credential = await startAuthentication(options);
+
+      await authClient.passkey.signIn({
+        credential: JSON.stringify(credential),
+        csrfToken: sessionId,
+        redirectPath,
+      });
+    } catch (err) {
+      setIsPasskeyLoading(false);
+
+      // Error from library.
+      if (err instanceof Error && err.name === 'NotAllowedError') {
+        return;
+      }
+
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(
+          AuthenticationErrorCode.NotSetup,
+          () =>
+            msg`This passkey is not configured for this application. Please login and add one in the user settings.`,
+        )
+        .with(
+          AuthenticationErrorCode.SessionExpired,
+          () => msg`This session has expired. Please try again.`,
+        )
+        .otherwise(() => handleFallbackErrorMessages(error.code));
+
+      toast({
+        title: 'Something went wrong',
+        description: _(errorMessage),
+        duration: 10000,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onFormSubmit = async ({ email, password, totpCode, backupCode }: TSignInFormSchema) => {
+    try {
+      await authClient.emailPassword.signIn({
+        email,
+        password,
+        totpCode,
+        backupCode,
+        redirectPath,
+      });
+    } catch (err) {
+      console.log(err);
+
+      const error = AppError.parseError(err);
+
+      if (error.code === 'TWO_FACTOR_MISSING_CREDENTIALS') {
+        setIsTwoFactorAuthenticationDialogOpen(true);
+        return;
+      }
+
+      if (error.code === AuthenticationErrorCode.UnverifiedEmail) {
+        await navigate('/unverified-account');
+
+        toast({
+          title: _(msg`Unable to sign in`),
+          description: _(
+            msg`This account has not been verified. Please verify your account before signing in.`,
+          ),
+        });
+
+        return;
+      }
+
+      const errorMessage = match(error.code)
+        .with(
+          AuthenticationErrorCode.InvalidCredentials,
+          () => msg`The email or password provided is incorrect`,
+        )
+        .with(
+          AuthenticationErrorCode.InvalidTwoFactorCode,
+          () => msg`The two-factor authentication code provided is incorrect`,
+        )
+        .otherwise(() => handleFallbackErrorMessages(error.code));
+
+      toast({
+        title: _(msg`Unable to sign in`),
+        description: _(errorMessage),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onSignInWithGoogleClick = async () => {
+    try {
+      await authClient.google.signIn();
+    } catch (err) {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to sign you In. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onSignInWithOIDCClick = async () => {
+    try {
+      // eslint-disable-next-line no-promise-executor-return
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      // await signIn('oidc', {
+      //   callbackUrl,
+      // });
+    } catch (err) {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to sign you In. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    const hash = window.location.hash.slice(1);
+
+    const params = new URLSearchParams(hash);
+
+    const email = params.get('email');
+
+    if (email) {
+      form.setValue('email', email);
+    }
+  }, [form]);
+
+  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 || isPasskeyLoading}
+        >
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Email</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <Input type="email" {...field} />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  <Trans>Password</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <PasswordInput {...field} />
+                </FormControl>
+
+                <FormMessage />
+
+                <p className="mt-2 text-right">
+                  <Link
+                    to="/forgot-password"
+                    className="text-muted-foreground text-sm duration-200 hover:opacity-70"
+                  >
+                    <Trans>Forgot your password?</Trans>
+                  </Link>
+                </p>
+              </FormItem>
+            )}
+          />
+
+          <Button
+            type="submit"
+            size="lg"
+            loading={isSubmitting}
+            className="dark:bg-documenso dark:hover:opacity-90"
+          >
+            {isSubmitting ? <Trans>Signing in...</Trans> : <Trans>Sign In</Trans>}
+          </Button>
+
+          {(isGoogleSSOEnabled || isOIDCSSOEnabled) && (
+            <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">
+                <Trans>Or continue with</Trans>
+              </span>
+              <div className="bg-border h-px flex-1" />
+            </div>
+          )}
+
+          {isGoogleSSOEnabled && (
+            <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>
+          )}
+
+          {isOIDCSSOEnabled && (
+            <Button
+              type="button"
+              size="lg"
+              variant="outline"
+              className="bg-background text-muted-foreground border"
+              disabled={isSubmitting}
+              onClick={onSignInWithOIDCClick}
+            >
+              <FaIdCardClip className="mr-2 h-5 w-5" />
+              {oidcProviderLabel || 'OIDC'}
+            </Button>
+          )}
+
+          <Button
+            type="button"
+            size="lg"
+            variant="outline"
+            disabled={isSubmitting}
+            loading={isPasskeyLoading}
+            className="bg-background text-muted-foreground border"
+            onClick={onSignInWithPasskey}
+          >
+            {!isPasskeyLoading && <KeyRoundIcon className="-ml-1 mr-1 h-5 w-5" />}
+            <Trans>Passkey</Trans>
+          </Button>
+        </fieldset>
+      </form>
+
+      <Dialog
+        open={isTwoFactorAuthenticationDialogOpen}
+        onOpenChange={onCloseTwoFactorAuthenticationDialog}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              <Trans>Two-Factor Authentication</Trans>
+            </DialogTitle>
+          </DialogHeader>
+
+          <form onSubmit={form.handleSubmit(onFormSubmit)}>
+            <fieldset disabled={isSubmitting}>
+              {twoFactorAuthenticationMethod === 'totp' && (
+                <FormField
+                  control={form.control}
+                  name="totpCode"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Token</FormLabel>
+                      <FormControl>
+                        <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                          {Array(6)
+                            .fill(null)
+                            .map((_, i) => (
+                              <PinInputGroup key={i}>
+                                <PinInputSlot index={i} />
+                              </PinInputGroup>
+                            ))}
+                        </PinInput>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              {twoFactorAuthenticationMethod === 'backup' && (
+                <FormField
+                  control={form.control}
+                  name="backupCode"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        <Trans>Backup Code</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Input type="text" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+              <DialogFooter className="mt-4">
+                <Button
+                  type="button"
+                  variant="secondary"
+                  onClick={onToggleTwoFactorAuthenticationMethodClick}
+                >
+                  {twoFactorAuthenticationMethod === 'totp' ? (
+                    <Trans>Use Backup Code</Trans>
+                  ) : (
+                    <Trans>Use Authenticator</Trans>
+                  )}
+                </Button>
+
+                <Button type="submit" loading={isSubmitting}>
+                  {isSubmitting ? <Trans>Signing in...</Trans> : <Trans>Sign In</Trans>}
+                </Button>
+              </DialogFooter>
+            </fieldset>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </Form>
+  );
+};

apps/remix/app/components/forms/signup.tsx

@@ -0,0 +1,541 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useForm } from 'react-hook-form';
+import { FaIdCardClip } from 'react-icons/fa6';
+import { FcGoogle } from 'react-icons/fc';
+import { Link, useNavigate, useSearchParams } from 'react-router';
+import { z } from 'zod';
+
+import communityCardsImage from '@documenso/assets/images/community-cards.png';
+import { authClient } from '@documenso/auth/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { UserProfileSkeleton } from '~/components/general/user-profile-skeleton';
+import { UserProfileTimur } from '~/components/general/user-profile-timur';
+
+const SIGN_UP_REDIRECT_PATH = '/documents';
+
+type SignUpStep = 'BASIC_DETAILS' | 'CLAIM_USERNAME';
+
+export const ZSignUpFormSchema = z
+  .object({
+    name: z
+      .string()
+      .trim()
+      .min(1, { message: msg`Please enter a valid name.`.id }),
+    email: z.string().email().min(1),
+    password: ZPasswordSchema,
+    signature: z.string().min(1, { message: msg`We need your signature to sign documents`.id }),
+    url: z
+      .string()
+      .trim()
+      .toLowerCase()
+      .min(1, { message: msg`We need a username to create your profile`.id })
+      .regex(/^[a-z0-9-]+$/, {
+        message: msg`Username can only container alphanumeric characters and dashes.`.id,
+      }),
+  })
+  .refine(
+    (data) => {
+      const { name, email, password } = data;
+      return !password.includes(name) && !password.includes(email.split('@')[0]);
+    },
+    {
+      message: msg`Password should not be common or based on personal information`.id,
+      path: ['password'],
+    },
+  );
+
+export const signupErrorMessages: Record<string, MessageDescriptor> = {
+  SIGNUP_DISABLED: msg`Signups are disabled.`,
+  [AppErrorCode.ALREADY_EXISTS]: msg`User with this email already exists. Please use a different email address.`,
+  [AppErrorCode.INVALID_REQUEST]: msg`We were unable to create your account. Please review the information you provided and try again.`,
+  PROFILE_URL_TAKEN: msg`This username has already been taken`,
+  PREMIUM_PROFILE_URL: msg`Only subscribers can have a username shorter than 6 characters`,
+};
+
+export type TSignUpFormSchema = z.infer<typeof ZSignUpFormSchema>;
+
+export type SignUpFormProps = {
+  className?: string;
+  initialEmail?: string;
+  isGoogleSSOEnabled?: boolean;
+  isOIDCSSOEnabled?: boolean;
+};
+
+export const SignUpForm = ({
+  className,
+  initialEmail,
+  isGoogleSSOEnabled,
+  isOIDCSSOEnabled,
+}: SignUpFormProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const analytics = useAnalytics();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  const [step, setStep] = useState<SignUpStep>('BASIC_DETAILS');
+
+  const utmSrc = searchParams.get('utm_source') ?? null;
+
+  const baseUrl = new URL(NEXT_PUBLIC_WEBAPP_URL() ?? 'http://localhost:3000');
+
+  const form = useForm<TSignUpFormSchema>({
+    values: {
+      name: '',
+      email: initialEmail ?? '',
+      password: '',
+      signature: '',
+      url: '',
+    },
+    mode: 'onBlur',
+    resolver: zodResolver(ZSignUpFormSchema),
+  });
+
+  const isSubmitting = form.formState.isSubmitting;
+
+  const name = form.watch('name');
+  const url = form.watch('url');
+
+  const onFormSubmit = async ({ name, email, password, signature, url }: TSignUpFormSchema) => {
+    try {
+      await authClient.emailPassword.signUp({
+        name,
+        email,
+        password,
+        signature,
+        url,
+      });
+
+      await navigate(`/unverified-account`);
+
+      toast({
+        title: _(msg`Registration Successful`),
+        description: _(
+          msg`You have successfully registered. Please verify your account by clicking on the link you received in the email.`,
+        ),
+        duration: 5000,
+      });
+
+      analytics.capture('App: User Sign Up', {
+        email,
+        timestamp: new Date().toISOString(),
+        custom_campaign_params: { src: utmSrc },
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = signupErrorMessages[error.code] ?? signupErrorMessages.INVALID_REQUEST;
+
+      if (error.code === 'PROFILE_URL_TAKEN' || error.code === 'PREMIUM_PROFILE_URL') {
+        form.setError('url', {
+          type: 'manual',
+          message: _(errorMessage),
+        });
+      } else {
+        toast({
+          title: _(msg`An error occurred`),
+          description: _(errorMessage),
+          variant: 'destructive',
+        });
+      }
+    }
+  };
+
+  const onNextClick = async () => {
+    const valid = await form.trigger(['name', 'email', 'password', 'signature']);
+
+    if (valid) {
+      setStep('CLAIM_USERNAME');
+    }
+  };
+
+  const onSignUpWithGoogleClick = async () => {
+    try {
+      await authClient.google.signIn();
+    } catch (err) {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to sign you Up. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onSignUpWithOIDCClick = async () => {
+    try {
+      // eslint-disable-next-line no-promise-executor-return
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      // await signIn('oidc', { callbackUrl: SIGN_UP_REDIRECT_PATH });
+    } catch (err) {
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to sign you Up. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    const hash = window.location.hash.slice(1);
+
+    const params = new URLSearchParams(hash);
+
+    const email = params.get('email');
+
+    if (email) {
+      form.setValue('email', email);
+    }
+  }, [form]);
+
+  return (
+    <div className={cn('flex justify-center gap-x-12', className)}>
+      <div className="border-border relative hidden flex-1 overflow-hidden rounded-xl border xl:flex">
+        <div className="absolute -inset-8 -z-[2] backdrop-blur">
+          <img
+            src={communityCardsImage}
+            alt="community-cards"
+            className="h-full w-full object-cover dark:brightness-95 dark:contrast-[70%] dark:invert"
+          />
+        </div>
+
+        <div className="bg-background/50 absolute -inset-8 -z-[1] backdrop-blur-[2px]" />
+
+        <div className="relative flex h-full w-full flex-col items-center justify-evenly">
+          <div className="bg-background rounded-2xl border px-4 py-1 text-sm font-medium">
+            <Trans>User profiles are here!</Trans>
+          </div>
+
+          <AnimatePresence>
+            {step === 'BASIC_DETAILS' ? (
+              <motion.div className="w-full max-w-md" layoutId="user-profile">
+                <UserProfileTimur
+                  rows={2}
+                  className="bg-background border-border rounded-2xl border shadow-md"
+                />
+              </motion.div>
+            ) : (
+              <motion.div className="w-full max-w-md" layoutId="user-profile">
+                <UserProfileSkeleton
+                  user={{ name, url }}
+                  rows={2}
+                  className="bg-background border-border rounded-2xl border shadow-md"
+                />
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          <div />
+        </div>
+      </div>
+
+      <div className="border-border dark:bg-background relative z-10 flex min-h-[min(850px,80vh)] w-full max-w-lg flex-col rounded-xl border bg-neutral-100 p-6">
+        {step === 'BASIC_DETAILS' && (
+          <div className="h-20">
+            <h1 className="text-xl font-semibold md:text-2xl">
+              <Trans>Create a new account</Trans>
+            </h1>
+
+            <p className="text-muted-foreground mt-2 text-xs md:text-sm">
+              <Trans>
+                Create your account and start using state-of-the-art document signing. Open and
+                beautiful signing is within your grasp.
+              </Trans>
+            </p>
+          </div>
+        )}
+
+        {step === 'CLAIM_USERNAME' && (
+          <div className="h-20">
+            <h1 className="text-xl font-semibold md:text-2xl">
+              <Trans>Claim your username now</Trans>
+            </h1>
+
+            <p className="text-muted-foreground mt-2 text-xs md:text-sm">
+              <Trans>
+                You will get notified & be able to set up your documenso public profile when we
+                launch the feature.
+              </Trans>
+            </p>
+          </div>
+        )}
+
+        <hr className="-mx-6 my-4" />
+
+        <Form {...form}>
+          <form
+            className="flex w-full flex-1 flex-col gap-y-4"
+            onSubmit={form.handleSubmit(onFormSubmit)}
+          >
+            {step === 'BASIC_DETAILS' && (
+              <fieldset
+                className={cn(
+                  'flex h-[550px] w-full flex-col gap-y-4',
+                  (isGoogleSSOEnabled || isOIDCSSOEnabled) && 'h-[650px]',
+                )}
+                disabled={isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        <Trans>Full Name</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Input type="text" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        <Trans>Email Address</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <Input type="email" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="password"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        <Trans>Password</Trans>
+                      </FormLabel>
+
+                      <FormControl>
+                        <PasswordInput {...field} />
+                      </FormControl>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="signature"
+                  render={({ field: { onChange } }) => (
+                    <FormItem>
+                      <FormLabel>
+                        <Trans>Sign Here</Trans>
+                      </FormLabel>
+                      <FormControl>
+                        <SignaturePad
+                          className="h-36 w-full"
+                          disabled={isSubmitting}
+                          containerClassName="mt-2 rounded-lg border bg-background"
+                          onChange={(v) => onChange(v ?? '')}
+                        />
+                      </FormControl>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {(isGoogleSSOEnabled || isOIDCSSOEnabled) && (
+                  <>
+                    <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">
+                        <Trans>Or</Trans>
+                      </span>
+                      <div className="bg-border h-px flex-1" />
+                    </div>
+                  </>
+                )}
+
+                {isGoogleSSOEnabled && (
+                  <>
+                    <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" />
+                      <Trans>Sign Up with Google</Trans>
+                    </Button>
+                  </>
+                )}
+
+                {isOIDCSSOEnabled && (
+                  <>
+                    <Button
+                      type="button"
+                      size="lg"
+                      variant={'outline'}
+                      className="bg-background text-muted-foreground border"
+                      disabled={isSubmitting}
+                      onClick={onSignUpWithOIDCClick}
+                    >
+                      <FaIdCardClip className="mr-2 h-5 w-5" />
+                      <Trans>Sign Up with OIDC</Trans>
+                    </Button>
+                  </>
+                )}
+
+                <p className="text-muted-foreground mt-4 text-sm">
+                  <Trans>
+                    Already have an account?{' '}
+                    <Link to="/signin" className="text-documenso-700 duration-200 hover:opacity-70">
+                      Sign in instead
+                    </Link>
+                  </Trans>
+                </p>
+              </fieldset>
+            )}
+
+            {step === 'CLAIM_USERNAME' && (
+              <fieldset
+                className={cn(
+                  'flex h-[550px] w-full flex-col gap-y-4',
+                  isGoogleSSOEnabled && 'h-[650px]',
+                )}
+                disabled={isSubmitting}
+              >
+                <FormField
+                  control={form.control}
+                  name="url"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        <Trans>Public profile username</Trans>
+                      </FormLabel>
+
+                      <FormControl>
+                        <Input type="text" className="mb-2 mt-2 lowercase" {...field} />
+                      </FormControl>
+
+                      <FormMessage />
+
+                      <div className="bg-muted/50 border-border text-muted-foreground mt-2 inline-block max-w-[16rem] truncate rounded-md border px-2 py-1 text-sm lowercase">
+                        {baseUrl.host}/u/{field.value || '<username>'}
+                      </div>
+                    </FormItem>
+                  )}
+                />
+              </fieldset>
+            )}
+
+            <div className="mt-6">
+              {step === 'BASIC_DETAILS' && (
+                <p className="text-muted-foreground text-sm">
+                  <span className="font-medium">
+                    <Trans>Basic details</Trans>
+                  </span>{' '}
+                  1/2
+                </p>
+              )}
+
+              {step === 'CLAIM_USERNAME' && (
+                <p className="text-muted-foreground text-sm">
+                  <span className="font-medium">
+                    <Trans>Claim username</Trans>
+                  </span>{' '}
+                  2/2
+                </p>
+              )}
+
+              <div className="bg-foreground/40 relative mt-4 h-1.5 rounded-full">
+                <motion.div
+                  layout="size"
+                  layoutId="document-flow-container-step"
+                  className="bg-documenso absolute inset-y-0 left-0 rounded-full"
+                  style={{
+                    width: step === 'BASIC_DETAILS' ? '50%' : '100%',
+                  }}
+                />
+              </div>
+            </div>
+
+            <div className="flex items-center gap-x-4">
+              {/* Go back button, disabled if step is basic details */}
+              <Button
+                type="button"
+                size="lg"
+                variant="secondary"
+                className="flex-1"
+                disabled={step === 'BASIC_DETAILS' || form.formState.isSubmitting}
+                onClick={() => setStep('BASIC_DETAILS')}
+              >
+                <Trans>Back</Trans>
+              </Button>
+
+              {/* Continue button */}
+              {step === 'BASIC_DETAILS' && (
+                <Button
+                  type="button"
+                  size="lg"
+                  className="flex-1 disabled:cursor-not-allowed"
+                  loading={form.formState.isSubmitting}
+                  onClick={onNextClick}
+                >
+                  <Trans>Next</Trans>
+                </Button>
+              )}
+
+              {/* Sign up button */}
+              {step === 'CLAIM_USERNAME' && (
+                <Button
+                  loading={form.formState.isSubmitting}
+                  disabled={!form.formState.isValid}
+                  type="submit"
+                  size="lg"
+                  className="flex-1"
+                >
+                  <Trans>Complete</Trans>
+                </Button>
+              )}
+            </div>
+          </form>
+        </Form>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/forms/team-branding-preferences-form.tsx

@@ -0,0 +1,318 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Team, TeamGlobalSettings } from '@prisma/client';
+import { Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { putFile } from '@documenso/lib/universal/upload/put-file';
+import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+const ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
+
+const ZTeamBrandingPreferencesFormSchema = z.object({
+  brandingEnabled: z.boolean(),
+  brandingLogo: z
+    .instanceof(File)
+    .refine((file) => file.size <= MAX_FILE_SIZE, 'File size must be less than 5MB')
+    .refine(
+      (file) => ACCEPTED_FILE_TYPES.includes(file.type),
+      'Only .jpg, .png, and .webp files are accepted',
+    )
+    .nullish(),
+  brandingUrl: z.string().url().optional().or(z.literal('')),
+  brandingCompanyDetails: z.string().max(500).optional(),
+});
+
+type TTeamBrandingPreferencesFormSchema = z.infer<typeof ZTeamBrandingPreferencesFormSchema>;
+
+export type TeamBrandingPreferencesFormProps = {
+  team: Team;
+  settings?: TeamGlobalSettings | null;
+};
+
+export function TeamBrandingPreferencesForm({ team, settings }: TeamBrandingPreferencesFormProps) {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [previewUrl, setPreviewUrl] = useState<string>('');
+  const [hasLoadedPreview, setHasLoadedPreview] = useState(false);
+
+  const { mutateAsync: updateTeamBrandingSettings } =
+    trpc.team.updateTeamBrandingSettings.useMutation();
+
+  const form = useForm<TTeamBrandingPreferencesFormSchema>({
+    defaultValues: {
+      brandingEnabled: settings?.brandingEnabled ?? false,
+      brandingUrl: settings?.brandingUrl ?? '',
+      brandingLogo: undefined,
+      brandingCompanyDetails: settings?.brandingCompanyDetails ?? '',
+    },
+    resolver: zodResolver(ZTeamBrandingPreferencesFormSchema),
+  });
+
+  const isBrandingEnabled = form.watch('brandingEnabled');
+
+  const onSubmit = async (data: TTeamBrandingPreferencesFormSchema) => {
+    try {
+      const { brandingEnabled, brandingLogo, brandingUrl, brandingCompanyDetails } = data;
+
+      let uploadedBrandingLogo = settings?.brandingLogo;
+
+      if (brandingLogo) {
+        uploadedBrandingLogo = JSON.stringify(await putFile(brandingLogo));
+      }
+
+      if (brandingLogo === null) {
+        uploadedBrandingLogo = '';
+      }
+
+      await updateTeamBrandingSettings({
+        teamId: team.id,
+        settings: {
+          brandingEnabled,
+          brandingLogo: uploadedBrandingLogo,
+          brandingUrl,
+          brandingCompanyDetails,
+        },
+      });
+
+      toast({
+        title: _(msg`Branding preferences updated`),
+        description: _(msg`Your branding preferences have been updated`),
+      });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(
+          msg`We were unable to update your branding preferences at this time, please try again later`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (settings?.brandingLogo) {
+      const file = JSON.parse(settings.brandingLogo);
+
+      if ('type' in file && 'data' in file) {
+        void getFile(file).then((binaryData) => {
+          const objectUrl = URL.createObjectURL(new Blob([binaryData]));
+
+          setPreviewUrl(objectUrl);
+          setHasLoadedPreview(true);
+        });
+
+        return;
+      }
+    }
+
+    setHasLoadedPreview(true);
+  }, [settings?.brandingLogo]);
+
+  // Cleanup ObjectURL on unmount or when previewUrl changes
+  useEffect(() => {
+    return () => {
+      if (previewUrl.startsWith('blob:')) {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [previewUrl]);
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <fieldset
+          className="flex h-full max-w-xl flex-col gap-y-4"
+          disabled={form.formState.isSubmitting}
+        >
+          <FormField
+            control={form.control}
+            name="brandingEnabled"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>Enable Custom Branding</FormLabel>
+
+                <div>
+                  <FormControl>
+                    <Switch
+                      ref={field.ref}
+                      name={field.name}
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </div>
+
+                <FormDescription>
+                  <Trans>Enable custom branding for all documents in this team.</Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <div className="relative flex w-full flex-col gap-y-4">
+            {!isBrandingEnabled && <div className="bg-background/60 absolute inset-0 z-[9999]" />}
+
+            <FormField
+              control={form.control}
+              name="brandingLogo"
+              render={({ field: { value: _value, onChange, ...field } }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>Branding Logo</FormLabel>
+
+                  <div className="flex flex-col gap-4">
+                    <div className="border-border bg-background relative h-48 w-full overflow-hidden rounded-lg border">
+                      {previewUrl ? (
+                        <img
+                          src={previewUrl}
+                          alt="Logo preview"
+                          className="h-full w-full object-contain p-4"
+                        />
+                      ) : (
+                        <div className="bg-muted/20 dark:bg-muted text-muted-foreground relative flex h-full w-full items-center justify-center text-sm">
+                          Please upload a logo
+                          {!hasLoadedPreview && (
+                            <div className="bg-muted dark:bg-muted absolute inset-0 z-[999] flex items-center justify-center">
+                              <Loader className="text-muted-foreground h-8 w-8 animate-spin" />
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="relative">
+                      <FormControl className="relative">
+                        <Input
+                          type="file"
+                          accept={ACCEPTED_FILE_TYPES.join(',')}
+                          disabled={!isBrandingEnabled}
+                          onChange={(e) => {
+                            const file = e.target.files?.[0];
+
+                            if (file) {
+                              if (previewUrl.startsWith('blob:')) {
+                                URL.revokeObjectURL(previewUrl);
+                              }
+
+                              const objectUrl = URL.createObjectURL(file);
+
+                              setPreviewUrl(objectUrl);
+
+                              onChange(file);
+                            }
+                          }}
+                          className={cn(
+                            'h-auto p-2',
+                            'file:text-primary hover:file:bg-primary/90',
+                            'file:mr-4 file:cursor-pointer file:rounded-md file:border-0',
+                            'file:p-2 file:py-2 file:font-medium',
+                            'file:bg-primary file:text-primary-foreground',
+                            !isBrandingEnabled && 'cursor-not-allowed',
+                          )}
+                          {...field}
+                        />
+                      </FormControl>
+
+                      <div className="absolute right-2 top-0 inline-flex h-full items-center justify-center">
+                        <Button
+                          type="button"
+                          variant="link"
+                          size="sm"
+                          className="text-destructive text-xs"
+                          onClick={() => {
+                            setPreviewUrl('');
+                            onChange(null);
+                          }}
+                        >
+                          <Trans>Remove</Trans>
+                        </Button>
+                      </div>
+                    </div>
+
+                    <FormDescription>
+                      <Trans>Upload your brand logo (max 5MB, JPG, PNG, or WebP)</Trans>
+                    </FormDescription>
+                  </div>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="brandingUrl"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>Brand Website</FormLabel>
+
+                  <FormControl>
+                    <Input
+                      type="url"
+                      placeholder="https://example.com"
+                      disabled={!isBrandingEnabled}
+                      {...field}
+                    />
+                  </FormControl>
+
+                  <FormDescription>
+                    <Trans>Your brand website URL</Trans>
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="brandingCompanyDetails"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel>Brand Details</FormLabel>
+
+                  <FormControl>
+                    <Textarea
+                      placeholder={_(msg`Enter your brand details`)}
+                      className="min-h-[100px] resize-y"
+                      disabled={!isBrandingEnabled}
+                      {...field}
+                    />
+                  </FormControl>
+
+                  <FormDescription>
+                    <Trans>Additional brand information to display at the bottom of emails</Trans>
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <div className="flex flex-row justify-end space-x-4">
+            <Button type="submit" loading={form.formState.isSubmitting}>
+              <Trans>Save</Trans>
+            </Button>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+}

apps/remix/app/components/forms/team-document-preferences-form.tsx

@@ -0,0 +1,311 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Team, TeamGlobalSettings } from '@prisma/client';
+import { DocumentVisibility } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { useSession } from '@documenso/lib/client-only/providers/session';
+import {
+  SUPPORTED_LANGUAGES,
+  SUPPORTED_LANGUAGE_CODES,
+  isValidLanguageCode,
+} from '@documenso/lib/constants/i18n';
+import { trpc } from '@documenso/trpc/react';
+import { Alert } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from '@documenso/ui/primitives/form/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const ZTeamDocumentPreferencesFormSchema = z.object({
+  documentVisibility: z.nativeEnum(DocumentVisibility),
+  documentLanguage: z.enum(SUPPORTED_LANGUAGE_CODES),
+  includeSenderDetails: z.boolean(),
+  typedSignatureEnabled: z.boolean(),
+  includeSigningCertificate: z.boolean(),
+});
+
+type TTeamDocumentPreferencesFormSchema = z.infer<typeof ZTeamDocumentPreferencesFormSchema>;
+
+export type TeamDocumentPreferencesFormProps = {
+  team: Team;
+  settings?: TeamGlobalSettings | null;
+};
+
+export const TeamDocumentPreferencesForm = ({
+  team,
+  settings,
+}: TeamDocumentPreferencesFormProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { user } = useSession();
+
+  const placeholderEmail = user.email ?? 'user@example.com';
+
+  const { mutateAsync: updateTeamDocumentPreferences } =
+    trpc.team.updateTeamDocumentSettings.useMutation();
+
+  const form = useForm<TTeamDocumentPreferencesFormSchema>({
+    defaultValues: {
+      documentVisibility: settings?.documentVisibility ?? 'EVERYONE',
+      documentLanguage: isValidLanguageCode(settings?.documentLanguage)
+        ? settings?.documentLanguage
+        : 'en',
+      includeSenderDetails: settings?.includeSenderDetails ?? false,
+      typedSignatureEnabled: settings?.typedSignatureEnabled ?? true,
+      includeSigningCertificate: settings?.includeSigningCertificate ?? true,
+    },
+    resolver: zodResolver(ZTeamDocumentPreferencesFormSchema),
+  });
+
+  const includeSenderDetails = form.watch('includeSenderDetails');
+
+  const onSubmit = async (data: TTeamDocumentPreferencesFormSchema) => {
+    try {
+      const {
+        documentVisibility,
+        documentLanguage,
+        includeSenderDetails,
+        includeSigningCertificate,
+        typedSignatureEnabled,
+      } = data;
+
+      await updateTeamDocumentPreferences({
+        teamId: team.id,
+        settings: {
+          documentVisibility,
+          documentLanguage,
+          includeSenderDetails,
+          typedSignatureEnabled,
+          includeSigningCertificate,
+        },
+      });
+
+      toast({
+        title: _(msg`Document preferences updated`),
+        description: _(msg`Your document preferences have been updated`),
+      });
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong!`),
+        description: _(
+          msg`We were unable to update your document preferences at this time, please try again later`,
+        ),
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <fieldset
+          className="flex h-full max-w-xl flex-col gap-y-6"
+          disabled={form.formState.isSubmitting}
+        >
+          <FormField
+            control={form.control}
+            name="documentVisibility"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Default Document Visibility</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <Select {...field} onValueChange={field.onChange}>
+                    <SelectTrigger className="bg-background text-muted-foreground">
+                      <SelectValue />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      <SelectItem value={DocumentVisibility.EVERYONE}>
+                        <Trans>Everyone can access and view the document</Trans>
+                      </SelectItem>
+                      <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
+                        <Trans>Only managers and above can access and view the document</Trans>
+                      </SelectItem>
+                      <SelectItem value={DocumentVisibility.ADMIN}>
+                        <Trans>Only admins can access and view the document</Trans>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <FormDescription>
+                  <Trans>Controls the default visibility of an uploaded document.</Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="documentLanguage"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Default Document Language</Trans>
+                </FormLabel>
+
+                <FormControl>
+                  <Select {...field} onValueChange={field.onChange}>
+                    <SelectTrigger className="bg-background text-muted-foreground">
+                      <SelectValue />
+                    </SelectTrigger>
+
+                    <SelectContent>
+                      {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
+                        <SelectItem key={code} value={code}>
+                          {language.full}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <FormDescription>
+                  <Trans>
+                    Controls the default language of an uploaded document. This will be used as the
+                    language in email communications with the recipients.
+                  </Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="includeSenderDetails"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Send on Behalf of Team</Trans>
+                </FormLabel>
+
+                <div>
+                  <FormControl className="block">
+                    <Switch
+                      ref={field.ref}
+                      name={field.name}
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </div>
+
+                <div className="pt-2">
+                  <div className="text-muted-foreground text-xs font-medium">
+                    <Trans>Preview</Trans>
+                  </div>
+
+                  <Alert variant="neutral" className="mt-1 px-2.5 py-1.5 text-sm">
+                    {includeSenderDetails ? (
+                      <Trans>
+                        "{placeholderEmail}" on behalf of "{team.name}" has invited you to sign
+                        "example document".
+                      </Trans>
+                    ) : (
+                      <Trans>"{team.name}" has invited you to sign "example document".</Trans>
+                    )}
+                  </Alert>
+                </div>
+
+                <FormDescription>
+                  <Trans>
+                    Controls the formatting of the message that will be sent when inviting a
+                    recipient to sign a document. If a custom message has been provided while
+                    configuring the document, it will be used instead.
+                  </Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="typedSignatureEnabled"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Enable Typed Signature</Trans>
+                </FormLabel>
+
+                <div>
+                  <FormControl className="block">
+                    <Switch
+                      ref={field.ref}
+                      name={field.name}
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </div>
+
+                <FormDescription>
+                  <Trans>
+                    Controls whether the recipients can sign the documents using a typed signature.
+                    Enable or disable the typed signature globally.
+                  </Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="includeSigningCertificate"
+            render={({ field }) => (
+              <FormItem className="flex-1">
+                <FormLabel>
+                  <Trans>Include the Signing Certificate in the Document</Trans>
+                </FormLabel>
+
+                <div>
+                  <FormControl className="block">
+                    <Switch
+                      ref={field.ref}
+                      name={field.name}
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </div>
+
+                <FormDescription>
+                  <Trans>
+                    Controls whether the signing certificate will be included in the document when
+                    it is downloaded. The signing certificate can still be downloaded from the logs
+                    page separately.
+                  </Trans>
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <div className="flex flex-row justify-end space-x-4">
+            <Button type="submit" loading={form.formState.isSubmitting}>
+              <Trans>Save</Trans>
+            </Button>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/team-update-form.tsx

@@ -0,0 +1,180 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+import type { z } from 'zod';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZUpdateTeamMutationSchema } from '@documenso/trpc/server/team-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type UpdateTeamDialogProps = {
+  teamId: number;
+  teamName: string;
+  teamUrl: string;
+};
+
+const ZTeamUpdateFormSchema = ZUpdateTeamMutationSchema.shape.data.pick({
+  name: true,
+  url: true,
+});
+
+type TTeamUpdateFormSchema = z.infer<typeof ZTeamUpdateFormSchema>;
+
+export const TeamUpdateForm = ({ teamId, teamName, teamUrl }: UpdateTeamDialogProps) => {
+  const navigate = useNavigate();
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const form = useForm({
+    resolver: zodResolver(ZTeamUpdateFormSchema),
+    defaultValues: {
+      name: teamName,
+      url: teamUrl,
+    },
+  });
+
+  const { mutateAsync: updateTeam } = trpc.team.updateTeam.useMutation();
+
+  const onFormSubmit = async ({ name, url }: TTeamUpdateFormSchema) => {
+    try {
+      await updateTeam({
+        data: {
+          name,
+          url,
+        },
+        teamId,
+      });
+
+      toast({
+        title: _(msg`Success`),
+        description: _(msg`Your team has been successfully updated.`),
+        duration: 5000,
+      });
+
+      form.reset({
+        name,
+        url,
+      });
+
+      if (url !== teamUrl) {
+        await navigate(`/t/${url}/settings`);
+      }
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.ALREADY_EXISTS) {
+        form.setError('url', {
+          type: 'manual',
+          message: _(msg`This URL is already in use.`),
+        });
+
+        return;
+      }
+
+      toast({
+        title: _(msg`An unknown error occurred`),
+        description: _(
+          msg`We encountered an unknown error while attempting to update your team. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel required>
+                  <Trans>Team Name</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input className="bg-background" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="url"
+            render={({ field }) => (
+              <FormItem className="mt-4">
+                <FormLabel required>
+                  <Trans>Team URL</Trans>
+                </FormLabel>
+                <FormControl>
+                  <Input className="bg-background" {...field} />
+                </FormControl>
+                {!form.formState.errors.url && (
+                  <span className="text-foreground/50 text-xs font-normal">
+                    {field.value ? (
+                      `${NEXT_PUBLIC_WEBAPP_URL()}/t/${field.value}`
+                    ) : (
+                      <Trans>A unique URL to identify your team</Trans>
+                    )}
+                  </span>
+                )}
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex flex-row justify-end space-x-4">
+            <AnimatePresence>
+              {form.formState.isDirty && (
+                <motion.div
+                  initial={{
+                    opacity: 0,
+                  }}
+                  animate={{
+                    opacity: 1,
+                  }}
+                  exit={{
+                    opacity: 0,
+                  }}
+                >
+                  <Button type="button" variant="secondary" onClick={() => form.reset()}>
+                    <Trans>Reset</Trans>
+                  </Button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+
+            <Button
+              type="submit"
+              className="transition-opacity"
+              disabled={!form.formState.isDirty}
+              loading={form.formState.isSubmitting}
+            >
+              <Trans>Update team</Trans>
+            </Button>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/forms/token.tsx

@@ -0,0 +1,292 @@
+import { useState, useTransition } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { ApiToken } from '@prisma/client';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import { z } from 'zod';
+
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import type { TCreateTokenMutationSchema } from '@documenso/trpc/server/api-token-router/schema';
+import { ZCreateTokenMutationSchema } from '@documenso/trpc/server/api-token-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Switch } from '@documenso/ui/primitives/switch';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const EXPIRATION_DATES = {
+  ONE_WEEK: msg`7 days`,
+  ONE_MONTH: msg`1 month`,
+  THREE_MONTHS: msg`3 months`,
+  SIX_MONTHS: msg`6 months`,
+  ONE_YEAR: msg`12 months`,
+} as const;
+
+const ZCreateTokenFormSchema = ZCreateTokenMutationSchema.extend({
+  enabled: z.boolean(),
+});
+
+type TCreateTokenFormSchema = z.infer<typeof ZCreateTokenFormSchema>;
+
+type NewlyCreatedToken = {
+  id: number;
+  token: string;
+};
+
+export type ApiTokenFormProps = {
+  className?: string;
+  teamId?: number;
+  tokens?: Pick<ApiToken, 'id'>[];
+};
+
+export const ApiTokenForm = ({ className, teamId, tokens }: ApiTokenFormProps) => {
+  const [isTransitionPending, startTransition] = useTransition();
+
+  const [, copy] = useCopyToClipboard();
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [newlyCreatedToken, setNewlyCreatedToken] = useState<NewlyCreatedToken | null>();
+  const [noExpirationDate, setNoExpirationDate] = useState(false);
+
+  const { mutateAsync: createTokenMutation } = trpc.apiToken.createToken.useMutation({
+    onSuccess(data) {
+      setNewlyCreatedToken(data);
+    },
+  });
+
+  const form = useForm<TCreateTokenFormSchema>({
+    resolver: zodResolver(ZCreateTokenFormSchema),
+    defaultValues: {
+      tokenName: '',
+      expirationDate: '',
+      enabled: false,
+    },
+  });
+
+  const copyToken = async (token: string) => {
+    try {
+      const copied = await copy(token);
+
+      if (!copied) {
+        throw new Error('Unable to copy the token');
+      }
+
+      toast({
+        title: _(msg`Token copied to clipboard`),
+        description: _(msg`The token was copied to your clipboard.`),
+      });
+    } catch (error) {
+      toast({
+        title: _(msg`Unable to copy token`),
+        description: _(msg`We were unable to copy the token to your clipboard. Please try again.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onSubmit = async ({ tokenName, expirationDate }: TCreateTokenMutationSchema) => {
+    try {
+      await createTokenMutation({
+        teamId,
+        tokenName,
+        expirationDate: noExpirationDate ? null : expirationDate,
+      });
+
+      toast({
+        title: _(msg`Token created`),
+        description: _(msg`A new token was created successfully.`),
+        duration: 5000,
+      });
+
+      form.reset();
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(
+          AppErrorCode.UNAUTHORIZED,
+          () => msg`You do not have permission to create a token for this team`,
+        )
+        .otherwise(() => msg`Something went wrong. Please try again later.`);
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+        duration: 5000,
+      });
+    }
+  };
+
+  return (
+    <div className={cn(className)}>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <fieldset className="mt-6 flex w-full flex-col gap-4">
+            <FormField
+              control={form.control}
+              name="tokenName"
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormLabel className="text-muted-foreground">
+                    <Trans>Token name</Trans>
+                  </FormLabel>
+
+                  <div className="flex items-center gap-x-4">
+                    <FormControl className="flex-1">
+                      <Input type="text" {...field} />
+                    </FormControl>
+                  </div>
+
+                  <FormDescription className="text-xs italic">
+                    <Trans>
+                      Please enter a meaningful name for your token. This will help you identify it
+                      later.
+                    </Trans>
+                  </FormDescription>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex flex-col gap-4 md:flex-row">
+              <FormField
+                control={form.control}
+                name="expirationDate"
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormLabel className="text-muted-foreground">
+                      <Trans>Token expiration date</Trans>
+                    </FormLabel>
+
+                    <div className="flex items-center gap-x-4">
+                      <FormControl className="flex-1">
+                        <Select onValueChange={field.onChange} disabled={noExpirationDate}>
+                          <SelectTrigger className="w-full">
+                            <SelectValue placeholder={_(msg`Choose...`)} />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {Object.entries(EXPIRATION_DATES).map(([key, date]) => (
+                              <SelectItem key={key} value={key}>
+                                {_(date)}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+                    </div>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="enabled"
+                render={({ field }) => (
+                  <FormItem className="">
+                    <FormLabel className="text-muted-foreground mt-2">
+                      <Trans>Never expire</Trans>
+                    </FormLabel>
+                    <FormControl>
+                      <div className="block md:py-1.5">
+                        <Switch
+                          className="bg-background"
+                          checked={field.value}
+                          onCheckedChange={(val) => {
+                            setNoExpirationDate((prev) => !prev);
+                            field.onChange(val);
+                          }}
+                        />
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <Button
+              type="submit"
+              className="hidden md:inline-flex"
+              disabled={!form.formState.isDirty}
+              loading={form.formState.isSubmitting || isTransitionPending}
+            >
+              <Trans>Create token</Trans>
+            </Button>
+
+            <div className="md:hidden">
+              <Button
+                type="submit"
+                disabled={!form.formState.isDirty}
+                loading={form.formState.isSubmitting || isTransitionPending}
+              >
+                <Trans>Create token</Trans>
+              </Button>
+            </div>
+          </fieldset>
+        </form>
+      </Form>
+
+      <AnimatePresence>
+        {newlyCreatedToken &&
+          tokens &&
+          tokens.find((token) => token.id === newlyCreatedToken.id) && (
+            <motion.div
+              className="mt-8"
+              initial={{ opacity: 0, y: -40 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 40 }}
+            >
+              <Card gradient>
+                <CardContent className="p-4">
+                  <p className="text-muted-foreground mt-2 text-sm">
+                    <Trans>
+                      Your token was created successfully! Make sure to copy it because you won't be
+                      able to see it again!
+                    </Trans>
+                  </p>
+
+                  <p className="bg-muted-foreground/10 my-4 rounded-md px-2.5 py-1 font-mono text-sm">
+                    {newlyCreatedToken.token}
+                  </p>
+
+                  <Button variant="outline" onClick={() => void copyToken(newlyCreatedToken.token)}>
+                    <Trans>Copy token</Trans>
+                  </Button>
+                </CardContent>
+              </Card>
+            </motion.div>
+          )}
+      </AnimatePresence>
+    </div>
+  );
+};

apps/remix/app/components/general/admin-stats-signer-conversion-chart.tsx

@@ -0,0 +1,62 @@
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+
+import type { GetSignerConversionMonthlyResult } from '@documenso/lib/server-only/user/get-signer-conversion';
+
+export type AdminStatsSignerConversionChartProps = {
+  className?: string;
+  title: string;
+  cummulative?: boolean;
+  data: GetSignerConversionMonthlyResult;
+};
+
+export const AdminStatsSignerConversionChart = ({
+  className,
+  data,
+  title,
+  cummulative = false,
+}: AdminStatsSignerConversionChartProps) => {
+  const formattedData = [...data].reverse().map(({ month, count, cume_count }) => {
+    return {
+      month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('MMM yyyy'),
+      count: Number(count),
+      signed_count: Number(cume_count),
+    };
+  });
+
+  return (
+    <div className={className}>
+      <div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2">
+        <div className="mb-6 flex px-4">
+          <h3 className="text-lg font-semibold">{title}</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              formatter={(value, name) => [
+                Number(value).toLocaleString('en-US'),
+                name === 'Recipients',
+              ]}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey={cummulative ? 'signed_count' : 'count'}
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label="Recipients"
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/admin-stats-users-with-documents.tsx

@@ -0,0 +1,93 @@
+import { DateTime } from 'luxon';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import type { TooltipProps } from 'recharts';
+import type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
+
+import type { GetUserWithDocumentMonthlyGrowth } from '@documenso/lib/server-only/admin/get-users-stats';
+
+export type AdminStatsUsersWithDocumentsChartProps = {
+  className?: string;
+  title: string;
+  data: GetUserWithDocumentMonthlyGrowth;
+  completed?: boolean;
+  tooltip?: string;
+};
+
+const CustomTooltip = ({
+  active,
+  payload,
+  label,
+  tooltip,
+}: TooltipProps<ValueType, NameType> & { tooltip?: string }) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="z-100 w-60 space-y-1 rounded-md border border-solid bg-white p-2 px-3">
+        <p className="">{label}</p>
+        <p className="text-documenso">
+          {`${tooltip} : `}
+          <span className="text-black">{payload[0].value}</span>
+        </p>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export const AdminStatsUsersWithDocumentsChart = ({
+  className,
+  data,
+  title,
+  completed = false,
+  tooltip,
+}: AdminStatsUsersWithDocumentsChartProps) => {
+  const formattedData = (data: GetUserWithDocumentMonthlyGrowth, completed: boolean) => {
+    return [...data].reverse().map(({ month, count, signed_count }) => {
+      const formattedMonth = DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL');
+      if (completed) {
+        return {
+          month: formattedMonth,
+          count: Number(signed_count),
+        };
+      } else {
+        return {
+          month: formattedMonth,
+          count: Number(count),
+        };
+      }
+    });
+  };
+
+  return (
+    <div className={className}>
+      <div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2">
+        <div className="mb-6 flex h-12 px-4">
+          <h3 className="text-lg font-semibold">{title}</h3>
+        </div>
+
+        <ResponsiveContainer width="100%" height={400}>
+          <BarChart data={formattedData(data, completed)}>
+            <XAxis dataKey="month" />
+            <YAxis />
+
+            <Tooltip
+              content={<CustomTooltip tooltip={tooltip} />}
+              labelStyle={{
+                color: 'hsl(var(--primary-foreground))',
+              }}
+              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
+            />
+
+            <Bar
+              dataKey="count"
+              fill="hsl(var(--primary))"
+              radius={[4, 4, 0, 0]}
+              maxBarSize={60}
+              label={tooltip}
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/app-banner.tsx

@@ -0,0 +1,28 @@
+import { type TSiteSettingsBannerSchema } from '@documenso/lib/server-only/site-settings/schemas/banner';
+
+export type AppBannerProps = {
+  banner: TSiteSettingsBannerSchema;
+};
+
+export const AppBanner = ({ banner }: AppBannerProps) => {
+  if (!banner.enabled) {
+    return null;
+  }
+
+  return (
+    <div className="mb-2" style={{ background: banner.data.bgColor }}>
+      <div
+        className="mx-auto flex h-auto max-w-screen-xl items-center justify-center px-4 py-3 text-sm font-medium"
+        style={{ color: banner.data.textColor }}
+      >
+        <div className="flex items-center">
+          <span dangerouslySetInnerHTML={{ __html: banner.data.content }} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Banner
+// Custom Text
+// Custom Text with Custom Icon

apps/remix/app/components/general/app-command-menu.tsx

@@ -0,0 +1,332 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { CheckIcon, Loader, Monitor, Moon, Sun } from 'lucide-react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useNavigate } from 'react-router';
+import { Theme, useTheme } from 'remix-themes';
+
+import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
+import {
+  DOCUMENTS_PAGE_SHORTCUT,
+  SETTINGS_PAGE_SHORTCUT,
+  TEMPLATES_PAGE_SHORTCUT,
+} from '@documenso/lib/constants/keyboard-shortcuts';
+import {
+  DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+  SKIP_QUERY_BATCH_META,
+} from '@documenso/lib/constants/trpc';
+import { dynamicActivate } from '@documenso/lib/utils/i18n';
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from '@documenso/ui/primitives/command';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+const DOCUMENTS_PAGES = [
+  {
+    label: msg`All documents`,
+    path: '/documents?status=ALL',
+    shortcut: DOCUMENTS_PAGE_SHORTCUT.replace('+', ''),
+  },
+  { label: msg`Draft documents`, path: '/documents?status=DRAFT' },
+  {
+    label: msg`Completed documents`,
+    path: '/documents?status=COMPLETED',
+  },
+  { label: msg`Pending documents`, path: '/documents?status=PENDING' },
+  { label: msg`Inbox documents`, path: '/documents?status=INBOX' },
+];
+
+const TEMPLATES_PAGES = [
+  {
+    label: msg`All templates`,
+    path: '/templates',
+    shortcut: TEMPLATES_PAGE_SHORTCUT.replace('+', ''),
+  },
+];
+
+const SETTINGS_PAGES = [
+  {
+    label: msg`Settings`,
+    path: '/settings',
+    shortcut: SETTINGS_PAGE_SHORTCUT.replace('+', ''),
+  },
+  { label: msg`Profile`, path: '/settings/profile' },
+  { label: msg`Password`, path: '/settings/password' },
+];
+
+export type AppCommandMenuProps = {
+  open?: boolean;
+  onOpenChange?: (_open: boolean) => void;
+};
+
+export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
+  const { _ } = useLingui();
+
+  const navigate = useNavigate();
+
+  const [isOpen, setIsOpen] = useState(() => open ?? false);
+  const [search, setSearch] = useState('');
+  const [pages, setPages] = useState<string[]>([]);
+
+  const { data: searchDocumentsData, isLoading: isSearchingDocuments } =
+    trpcReact.document.searchDocuments.useQuery(
+      {
+        query: search,
+      },
+      {
+        placeholderData: (previousData) => previousData,
+        // Do not batch this due to relatively long request time compared to
+        // other queries which are generally batched with this.
+        ...SKIP_QUERY_BATCH_META,
+        ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+      },
+    );
+
+  const searchResults = useMemo(() => {
+    if (!searchDocumentsData) {
+      return [];
+    }
+
+    return searchDocumentsData.map((document) => ({
+      label: document.title,
+      path: document.path,
+      value: document.value,
+    }));
+  }, [searchDocumentsData]);
+
+  const currentPage = pages[pages.length - 1];
+
+  const toggleOpen = () => {
+    setIsOpen((isOpen) => !isOpen);
+    onOpenChange?.(!isOpen);
+
+    if (isOpen) {
+      setPages([]);
+      setSearch('');
+    }
+  };
+
+  const setOpen = useCallback(
+    (open: boolean) => {
+      setIsOpen(open);
+      onOpenChange?.(open);
+
+      if (!open) {
+        setPages([]);
+        setSearch('');
+      }
+    },
+    [onOpenChange],
+  );
+
+  const push = useCallback(
+    (path: string) => {
+      void navigate(path);
+      setOpen(false);
+    },
+    [setOpen],
+  );
+
+  const addPage = (page: string) => {
+    setPages((pages) => [...pages, page]);
+    setSearch('');
+  };
+
+  const goToSettings = useCallback(() => push(SETTINGS_PAGES[0].path), [push]);
+  const goToDocuments = useCallback(() => push(DOCUMENTS_PAGES[0].path), [push]);
+  const goToTemplates = useCallback(() => push(TEMPLATES_PAGES[0].path), [push]);
+
+  useHotkeys(['ctrl+k', 'meta+k'], toggleOpen, { preventDefault: true });
+  useHotkeys(SETTINGS_PAGE_SHORTCUT, goToSettings);
+  useHotkeys(DOCUMENTS_PAGE_SHORTCUT, goToDocuments);
+  useHotkeys(TEMPLATES_PAGE_SHORTCUT, goToTemplates);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    // Escape goes to previous page
+    // Backspace goes to previous page when search is empty
+    if (e.key === 'Escape' || (e.key === 'Backspace' && !search)) {
+      e.preventDefault();
+
+      if (currentPage === undefined) {
+        setOpen(false);
+      }
+
+      setPages((pages) => pages.slice(0, -1));
+    }
+  };
+
+  return (
+    <CommandDialog
+      commandProps={{
+        onKeyDown: handleKeyDown,
+      }}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <CommandInput
+        value={search}
+        onValueChange={setSearch}
+        placeholder={_(msg`Type a command or search...`)}
+      />
+
+      <CommandList>
+        {isSearchingDocuments ? (
+          <CommandEmpty>
+            <div className="flex items-center justify-center">
+              <span className="animate-spin">
+                <Loader />
+              </span>
+            </div>
+          </CommandEmpty>
+        ) : (
+          <CommandEmpty>
+            <Trans>No results found.</Trans>
+          </CommandEmpty>
+        )}
+        {!currentPage && (
+          <>
+            <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Documents`)}>
+              <Commands push={push} pages={DOCUMENTS_PAGES} />
+            </CommandGroup>
+            <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Templates`)}>
+              <Commands push={push} pages={TEMPLATES_PAGES} />
+            </CommandGroup>
+            <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Settings`)}>
+              <Commands push={push} pages={SETTINGS_PAGES} />
+            </CommandGroup>
+            <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Preferences`)}>
+              <CommandItem className="-mx-2 -my-1 rounded-lg" onSelect={() => addPage('language')}>
+                Change language
+              </CommandItem>
+              <CommandItem className="-mx-2 -my-1 rounded-lg" onSelect={() => addPage('theme')}>
+                Change theme
+              </CommandItem>
+            </CommandGroup>
+            {searchResults.length > 0 && (
+              <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Your documents`)}>
+                <Commands push={push} pages={searchResults} />
+              </CommandGroup>
+            )}
+          </>
+        )}
+
+        {currentPage === 'theme' && <ThemeCommands />}
+        {currentPage === 'language' && <LanguageCommands />}
+      </CommandList>
+    </CommandDialog>
+  );
+}
+
+const Commands = ({
+  push,
+  pages,
+}: {
+  push: (_path: string) => void;
+  pages: { label: MessageDescriptor | string; path: string; shortcut?: string; value?: string }[];
+}) => {
+  const { _ } = useLingui();
+
+  return pages.map((page, idx) => (
+    <CommandItem
+      className="-mx-2 -my-1 rounded-lg"
+      key={page.path + idx}
+      value={page.value ?? (typeof page.label === 'string' ? page.label : _(page.label))}
+      onSelect={() => push(page.path)}
+    >
+      {typeof page.label === 'string' ? page.label : _(page.label)}
+      {page.shortcut && <CommandShortcut>{page.shortcut}</CommandShortcut>}
+    </CommandItem>
+  ));
+};
+
+const ThemeCommands = () => {
+  const { _ } = useLingui();
+
+  const [, setTheme] = useTheme();
+
+  const themes = [
+    { label: msg`Light Mode`, theme: Theme.LIGHT, icon: Sun },
+    { label: msg`Dark Mode`, theme: Theme.DARK, icon: Moon },
+    { label: msg`System Theme`, theme: null, icon: Monitor },
+  ] as const;
+
+  return themes.map((theme) => (
+    <CommandItem
+      key={theme.theme}
+      onSelect={() => setTheme(theme.theme)}
+      className="-my-1 mx-2 rounded-lg first:mt-2 last:mb-2"
+    >
+      <theme.icon className="mr-2" />
+      {_(theme.label)}
+    </CommandItem>
+  ));
+};
+
+const LanguageCommands = () => {
+  const { i18n, _ } = useLingui();
+  const { toast } = useToast();
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const setLanguage = async (lang: string) => {
+    if (isLoading || lang === i18n.locale) {
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      await dynamicActivate(lang);
+
+      const formData = new FormData();
+
+      formData.append('lang', lang);
+
+      const response = await fetch('/api/locale', {
+        method: 'post',
+        body: formData,
+      });
+
+      if (!response.ok) {
+        throw new Error(response.statusText);
+      }
+    } catch (e) {
+      console.error(`Failed to set language: ${e}`);
+
+      toast({
+        title: _(msg`An unknown error occurred`),
+        variant: 'destructive',
+        description: _(msg`Unable to change the language at this time. Please try again later.`),
+      });
+    }
+
+    setIsLoading(false);
+  };
+
+  return Object.values(SUPPORTED_LANGUAGES).map((language) => (
+    <CommandItem
+      disabled={isLoading}
+      key={language.full}
+      onSelect={async () => setLanguage(language.short)}
+      className="-my-1 mx-2 rounded-lg first:mt-2 last:mb-2"
+    >
+      <CheckIcon
+        className={cn('mr-2 h-4 w-4', i18n.locale === language.short ? 'opacity-100' : 'opacity-0')}
+      />
+
+      {language.full}
+    </CommandItem>
+  ));
+};

apps/remix/app/components/general/app-header.tsx

@@ -0,0 +1,96 @@
+import { type HTMLAttributes, useEffect, useState } from 'react';
+
+import { MenuIcon, SearchIcon } from 'lucide-react';
+import { Link, useLocation, useParams } from 'react-router';
+
+import type { SessionUser } from '@documenso/auth/server/lib/session/session';
+import type { TGetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { getRootHref } from '@documenso/lib/utils/params';
+import { cn } from '@documenso/ui/lib/utils';
+
+import { BrandingLogo } from '~/components/general/branding-logo';
+
+import { AppCommandMenu } from './app-command-menu';
+import { AppNavDesktop } from './app-nav-desktop';
+import { AppNavMobile } from './app-nav-mobile';
+import { MenuSwitcher } from './menu-switcher';
+
+export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
+  user: SessionUser;
+  teams: TGetTeamsResponse;
+};
+
+export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
+  const params = useParams();
+  const { pathname } = useLocation();
+
+  const [isCommandMenuOpen, setIsCommandMenuOpen] = useState(false);
+  const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const onScroll = () => {
+      setScrollY(window.scrollY);
+    };
+
+    window.addEventListener('scroll', onScroll);
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  const isPathTeamUrl = (teamUrl: string) => {
+    if (!pathname || !pathname.startsWith(`/t/`)) {
+      return false;
+    }
+
+    return pathname.split('/')[2] === teamUrl;
+  };
+
+  const selectedTeam = teams?.find((team) => isPathTeamUrl(team.url));
+
+  return (
+    <header
+      className={cn(
+        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-[60] flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
+        scrollY > 5 && 'border-b-border',
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:justify-normal md:px-8">
+        <Link
+          to={`${getRootHref(params, { returnEmptyRootString: true })}/documents`}
+          className="focus-visible:ring-ring ring-offset-background hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 md:inline"
+        >
+          <BrandingLogo className="h-6 w-auto" />
+        </Link>
+
+        <AppNavDesktop setIsCommandMenuOpen={setIsCommandMenuOpen} />
+
+        <div
+          className="flex gap-x-4 md:ml-8"
+          title={selectedTeam ? selectedTeam.name : (user.name ?? '')}
+        >
+          <MenuSwitcher user={user} teams={teams} />
+        </div>
+
+        <div className="flex flex-row items-center space-x-4 md:hidden">
+          <button onClick={() => setIsCommandMenuOpen(true)}>
+            <SearchIcon className="text-muted-foreground h-6 w-6" />
+          </button>
+
+          <button onClick={() => setIsHamburgerMenuOpen(true)}>
+            <MenuIcon className="text-muted-foreground h-6 w-6" />
+          </button>
+
+          <AppCommandMenu open={isCommandMenuOpen} onOpenChange={setIsCommandMenuOpen} />
+
+          <AppNavMobile
+            isMenuOpen={isHamburgerMenuOpen}
+            onMenuOpenChange={setIsHamburgerMenuOpen}
+          />
+        </div>
+      </div>
+    </header>
+  );
+};

apps/remix/app/components/general/app-nav-desktop.tsx

@@ -0,0 +1,95 @@
+import type { HTMLAttributes } from 'react';
+import { useEffect, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Search } from 'lucide-react';
+import { Link, useLocation, useParams } from 'react-router';
+
+import { getRootHref } from '@documenso/lib/utils/params';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+const navigationLinks = [
+  {
+    href: '/documents',
+    label: msg`Documents`,
+  },
+  {
+    href: '/templates',
+    label: msg`Templates`,
+  },
+];
+
+export type AppNavDesktopProps = HTMLAttributes<HTMLDivElement> & {
+  setIsCommandMenuOpen: (value: boolean) => void;
+};
+
+export const AppNavDesktop = ({
+  className,
+  setIsCommandMenuOpen,
+  ...props
+}: AppNavDesktopProps) => {
+  const { _ } = useLingui();
+
+  const { pathname } = useLocation();
+  const params = useParams();
+
+  const [modifierKey, setModifierKey] = useState(() => 'Ctrl');
+
+  const rootHref = getRootHref(params, { returnEmptyRootString: true });
+
+  useEffect(() => {
+    const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : 'unknown';
+    const isMacOS = /Macintosh|Mac\s+OS\s+X/i.test(userAgent);
+
+    setModifierKey(isMacOS ? '⌘' : 'Ctrl');
+  }, []);
+
+  return (
+    <div
+      className={cn(
+        'ml-8 hidden flex-1 items-center gap-x-12 md:flex md:justify-between',
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex items-baseline gap-x-6">
+        {navigationLinks.map(({ href, label }) => (
+          <Link
+            key={href}
+            to={`${rootHref}${href}`}
+            className={cn(
+              'text-muted-foreground dark:text-muted-foreground/60 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>
+
+      <Button
+        variant="outline"
+        className="text-muted-foreground flex w-96 items-center justify-between rounded-lg"
+        onClick={() => setIsCommandMenuOpen(true)}
+      >
+        <div className="flex items-center">
+          <Search className="mr-2 h-5 w-5" />
+          <Trans>Search</Trans>
+        </div>
+
+        <div>
+          <div className="text-muted-foreground bg-muted flex items-center rounded-md px-1.5 py-0.5 text-xs tracking-wider">
+            {modifierKey}+K
+          </div>
+        </div>
+      </Button>
+    </div>
+  );
+};

apps/remix/app/components/general/app-nav-mobile.tsx

@@ -0,0 +1,92 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { Link, useParams } from 'react-router';
+
+import LogoImage from '@documenso/assets/logo.png';
+import { authClient } from '@documenso/auth/client';
+import { getRootHref } from '@documenso/lib/utils/params';
+import { Sheet, SheetContent } from '@documenso/ui/primitives/sheet';
+import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher';
+
+export type AppNavMobileProps = {
+  isMenuOpen: boolean;
+  onMenuOpenChange?: (_value: boolean) => void;
+};
+
+export const AppNavMobile = ({ isMenuOpen, onMenuOpenChange }: AppNavMobileProps) => {
+  const { _ } = useLingui();
+
+  const params = useParams();
+
+  const handleMenuItemClick = () => {
+    onMenuOpenChange?.(false);
+  };
+
+  const rootHref = getRootHref(params, { returnEmptyRootString: true });
+
+  const menuNavigationLinks = [
+    {
+      href: `${rootHref}/documents`,
+      text: msg`Documents`,
+    },
+    {
+      href: `${rootHref}/templates`,
+      text: msg`Templates`,
+    },
+    {
+      href: '/settings/teams',
+      text: msg`Teams`,
+    },
+    {
+      href: '/settings/profile',
+      text: msg`Settings`,
+    },
+  ];
+
+  return (
+    <Sheet open={isMenuOpen} onOpenChange={onMenuOpenChange}>
+      <SheetContent className="flex w-full max-w-[350px] flex-col">
+        <Link to="/" onClick={handleMenuItemClick}>
+          <img
+            src={LogoImage}
+            alt="Documenso Logo"
+            className="dark:invert"
+            width={170}
+            height={25}
+          />
+        </Link>
+
+        <div className="mt-8 flex w-full flex-col items-start gap-y-4">
+          {menuNavigationLinks.map(({ href, text }) => (
+            <Link
+              key={href}
+              className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+              to={href}
+              onClick={() => handleMenuItemClick()}
+            >
+              {_(text)}
+            </Link>
+          ))}
+
+          <button
+            className="text-foreground hover:text-foreground/80 text-2xl font-semibold"
+            onClick={async () => authClient.signOut()}
+          >
+            <Trans>Sign Out</Trans>
+          </button>
+        </div>
+
+        <div className="mt-auto flex w-full flex-col space-y-4 self-end">
+          <div className="w-fit">
+            <ThemeSwitcher />
+          </div>
+
+          <p className="text-muted-foreground text-sm">
+            © {new Date().getFullYear()} Documenso, Inc. <br /> All rights reserved.
+          </p>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};

apps/remix/app/components/general/avatar-with-recipient.tsx

@@ -0,0 +1,71 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import type { Recipient } from '@prisma/client';
+import { DocumentStatus } from '@prisma/client';
+
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
+import { cn } from '@documenso/ui/lib/utils';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { StackAvatar } from './stack-avatar';
+
+export type AvatarWithRecipientProps = {
+  recipient: Recipient;
+  documentStatus: DocumentStatus;
+};
+
+export function AvatarWithRecipient({ recipient, documentStatus }: AvatarWithRecipientProps) {
+  const [, copy] = useCopyToClipboard();
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const signingToken = documentStatus === DocumentStatus.PENDING ? recipient.token : null;
+
+  const onRecipientClick = () => {
+    if (!signingToken) {
+      return;
+    }
+
+    void copy(`${NEXT_PUBLIC_WEBAPP_URL()}/sign/${signingToken}`).then(() => {
+      toast({
+        title: _(msg`Copied to clipboard`),
+        description: _(msg`The signing link has been copied to your clipboard.`),
+      });
+    });
+  };
+
+  return (
+    <div
+      className={cn('my-1 flex items-center gap-2', {
+        'cursor-pointer hover:underline': signingToken,
+      })}
+      role={signingToken ? 'button' : undefined}
+      title={signingToken ? _(msg`Click to copy signing link for sending to recipient`) : undefined}
+      onClick={onRecipientClick}
+    >
+      <StackAvatar
+        first={true}
+        key={recipient.id}
+        type={getRecipientType(recipient)}
+        fallbackText={recipientAbbreviation(recipient)}
+      />
+
+      <div
+        className="text-muted-foreground text-sm"
+        title={
+          signingToken ? _(msg`Click to copy signing link for sending to recipient`) : undefined
+        }
+      >
+        <p>{recipient.email}</p>
+        <p className="text-muted-foreground/70 text-xs">
+          {_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
+        </p>
+      </div>
+    </div>
+  );
+}

apps/remix/app/components/general/claim-account.tsx

@@ -0,0 +1,162 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+import { z } from 'zod';
+
+import { authClient } from '@documenso/auth/client';
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { PasswordInput } from '@documenso/ui/primitives/password-input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { signupErrorMessages } from '~/components/forms/signup';
+
+export type ClaimAccountProps = {
+  defaultName: string;
+  defaultEmail: string;
+  trigger?: React.ReactNode;
+};
+
+export const ZClaimAccountFormSchema = z
+  .object({
+    name: z
+      .string()
+      .trim()
+      .min(1, { message: msg`Please enter a valid name.`.id }),
+    email: z.string().email().min(1),
+    password: ZPasswordSchema,
+  })
+  .refine(
+    (data) => {
+      const { name, email, password } = data;
+      return !password.includes(name) && !password.includes(email.split('@')[0]);
+    },
+    {
+      message: msg`Password should not be common or based on personal information`.id,
+      path: ['password'],
+    },
+  );
+
+export type TClaimAccountFormSchema = z.infer<typeof ZClaimAccountFormSchema>;
+
+export const ClaimAccount = ({ defaultName, defaultEmail }: ClaimAccountProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const analytics = useAnalytics();
+  const navigate = useNavigate();
+
+  const form = useForm<TClaimAccountFormSchema>({
+    values: {
+      name: defaultName ?? '',
+      email: defaultEmail,
+      password: '',
+    },
+    resolver: zodResolver(ZClaimAccountFormSchema),
+  });
+
+  const onFormSubmit = async ({ name, email, password }: TClaimAccountFormSchema) => {
+    try {
+      await authClient.emailPassword.signUp({ name, email, password });
+
+      await navigate(`/unverified-account`);
+
+      toast({
+        title: _(msg`Registration Successful`),
+        description: _(
+          msg`You have successfully registered. Please verify your account by clicking on the link you received in the email.`,
+        ),
+        duration: 5000,
+      });
+
+      analytics.capture('App: User Claim Account', {
+        email,
+        timestamp: new Date().toISOString(),
+      });
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = signupErrorMessages[error.code] ?? signupErrorMessages.INVALID_REQUEST;
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <div className="mt-2 w-full">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onFormSubmit)}>
+          <fieldset disabled={form.formState.isSubmitting} className="mt-4">
+            <FormField
+              name="name"
+              control={form.control}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    <Trans>Name</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder={_(msg`Enter your name`)} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              name="email"
+              control={form.control}
+              render={({ field }) => (
+                <FormItem className="mt-4">
+                  <FormLabel>
+                    <Trans>Email address</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} placeholder={_(msg`Enter your email`)} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              name="password"
+              control={form.control}
+              render={({ field }) => (
+                <FormItem className="mt-4">
+                  <FormLabel>
+                    <Trans>Set a password</Trans>
+                  </FormLabel>
+                  <FormControl>
+                    <PasswordInput {...field} placeholder={_(msg`Pick a password`)} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <Button type="submit" className="mt-6 w-full" loading={form.formState.isSubmitting}>
+              <Trans>Claim account</Trans>
+            </Button>
+          </fieldset>
+        </form>
+      </Form>
+    </div>
+  );
+};

apps/remix/app/components/general/direct-template/direct-template-configure-form.tsx

@@ -0,0 +1,161 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Recipient } from '@prisma/client';
+import type { Field } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import type { TTemplate } from '@documenso/lib/types/template';
+import {
+  DocumentFlowFormContainerActions,
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerHeader,
+  DocumentFlowFormContainerStep,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { ShowFieldItem } from '@documenso/ui/primitives/document-flow/show-field-item';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { useStep } from '@documenso/ui/primitives/stepper';
+
+import { useRequiredDocumentSigningAuthContext } from '~/components/general/document-signing/document-signing-auth-provider';
+
+const ZDirectTemplateConfigureFormSchema = z.object({
+  email: z.string().email('Email is invalid'),
+});
+
+export type TDirectTemplateConfigureFormSchema = z.infer<typeof ZDirectTemplateConfigureFormSchema>;
+
+export type DirectTemplateConfigureFormProps = {
+  flowStep: DocumentFlowStep;
+  isDocumentPdfLoaded: boolean;
+  template: Omit<TTemplate, 'user'>;
+  directTemplateRecipient: Recipient & { fields: Field[] };
+  initialEmail?: string;
+  onSubmit: (_data: TDirectTemplateConfigureFormSchema) => void;
+};
+
+export const DirectTemplateConfigureForm = ({
+  flowStep,
+  isDocumentPdfLoaded,
+  template,
+  directTemplateRecipient,
+  initialEmail,
+  onSubmit,
+}: DirectTemplateConfigureFormProps) => {
+  const { _ } = useLingui();
+
+  const { user } = useOptionalSession();
+
+  const { recipients } = template;
+  const { derivedRecipientAccessAuth } = useRequiredDocumentSigningAuthContext();
+
+  const recipientsWithBlankDirectRecipientEmail = recipients.map((recipient) => {
+    if (recipient.id === directTemplateRecipient.id) {
+      return {
+        ...recipient,
+        email: '',
+      };
+    }
+
+    return recipient;
+  });
+
+  const form = useForm<TDirectTemplateConfigureFormSchema>({
+    resolver: zodResolver(
+      ZDirectTemplateConfigureFormSchema.superRefine((items, ctx) => {
+        if (template.recipients.map((recipient) => recipient.email).includes(items.email)) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: _(msg`Email cannot already exist in the template`),
+            path: ['email'],
+          });
+        }
+      }),
+    ),
+    defaultValues: {
+      email: initialEmail || '',
+    },
+  });
+
+  const { stepIndex, currentStep, totalSteps, previousStep } = useStep();
+
+  return (
+    <>
+      <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
+
+      <DocumentFlowFormContainerContent>
+        {isDocumentPdfLoaded &&
+          directTemplateRecipient.fields.map((field, index) => (
+            <ShowFieldItem
+              key={index}
+              field={field}
+              recipients={recipientsWithBlankDirectRecipientEmail}
+            />
+          ))}
+
+        <Form {...form}>
+          <fieldset
+            className="flex h-full flex-col space-y-6"
+            disabled={form.formState.isSubmitting}
+          >
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field, fieldState }) => (
+                <FormItem>
+                  <FormLabel required>
+                    <Trans>Email</Trans>
+                  </FormLabel>
+
+                  <FormControl>
+                    <Input
+                      {...field}
+                      disabled={
+                        field.disabled ||
+                        derivedRecipientAccessAuth !== null ||
+                        user?.email !== undefined
+                      }
+                      placeholder="recipient@documenso.com"
+                    />
+                  </FormControl>
+
+                  {!fieldState.error && (
+                    <p className="text-muted-foreground text-xs">
+                      <Trans>Enter your email address to receive the completed document.</Trans>
+                    </p>
+                  )}
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </fieldset>
+        </Form>
+      </DocumentFlowFormContainerContent>
+
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep step={currentStep} maxStep={totalSteps} />
+
+        <DocumentFlowFormContainerActions
+          loading={form.formState.isSubmitting}
+          disabled={form.formState.isSubmitting}
+          canGoBack={stepIndex !== 0}
+          onGoBackClick={previousStep}
+          onGoNextClick={form.handleSubmit(onSubmit)}
+        />
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

apps/remix/app/components/general/direct-template/direct-template-page.tsx

@@ -0,0 +1,177 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import type { Field } from '@prisma/client';
+import { type Recipient } from '@prisma/client';
+import { useNavigate, useSearchParams } from 'react-router';
+
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { TTemplate } from '@documenso/lib/types/template';
+import { trpc } from '@documenso/trpc/react';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { Stepper } from '@documenso/ui/primitives/stepper';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentSigningAuthContext } from '~/components/general/document-signing/document-signing-auth-provider';
+import { useRequiredDocumentSigningContext } from '~/components/general/document-signing/document-signing-provider';
+
+import {
+  DirectTemplateConfigureForm,
+  type TDirectTemplateConfigureFormSchema,
+} from './direct-template-configure-form';
+import {
+  type DirectTemplateLocalField,
+  DirectTemplateSigningForm,
+} from './direct-template-signing-form';
+
+export type DirectTemplatePageViewProps = {
+  template: Omit<TTemplate, 'user'>;
+  directTemplateToken: string;
+  directTemplateRecipient: Recipient & { fields: Field[] };
+};
+
+type DirectTemplateStep = 'configure' | 'sign';
+const DirectTemplateSteps: DirectTemplateStep[] = ['configure', 'sign'];
+
+export const DirectTemplatePageView = ({
+  template,
+  directTemplateRecipient,
+  directTemplateToken,
+}: DirectTemplatePageViewProps) => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const { email, fullName, setEmail } = useRequiredDocumentSigningContext();
+  const { recipient, setRecipient } = useRequiredDocumentSigningAuthContext();
+
+  const [step, setStep] = useState<DirectTemplateStep>('configure');
+  const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
+
+  const recipientActionVerb = _(
+    RECIPIENT_ROLES_DESCRIPTION[directTemplateRecipient.role].actionVerb,
+  );
+
+  const directTemplateFlow: Record<DirectTemplateStep, DocumentFlowStep> = {
+    configure: {
+      title: msg`General`,
+      description: msg`Preview and configure template.`,
+      stepIndex: 1,
+    },
+    sign: {
+      title: msg`${recipientActionVerb} document`,
+      description: msg`${recipientActionVerb} the document to complete the process.`,
+      stepIndex: 2,
+    },
+  };
+
+  const { mutateAsync: createDocumentFromDirectTemplate } =
+    trpc.template.createDocumentFromDirectTemplate.useMutation();
+
+  /**
+   * Set the email into a temporary recipient so it can be used for reauth and signing email fields.
+   */
+  const onConfigureDirectTemplateSubmit = ({ email }: TDirectTemplateConfigureFormSchema) => {
+    setEmail(email);
+
+    setRecipient({
+      ...recipient,
+      email,
+    });
+
+    setStep('sign');
+  };
+
+  const onSignDirectTemplateSubmit = async (fields: DirectTemplateLocalField[]) => {
+    try {
+      let directTemplateExternalId = searchParams?.get('externalId') || undefined;
+
+      if (directTemplateExternalId) {
+        directTemplateExternalId = decodeURIComponent(directTemplateExternalId);
+      }
+
+      const { token } = await createDocumentFromDirectTemplate({
+        directTemplateToken,
+        directTemplateExternalId,
+        directRecipientName: fullName,
+        directRecipientEmail: recipient.email,
+        templateUpdatedAt: template.updatedAt,
+        signedFieldValues: fields.map((field) => {
+          if (!field.signedValue) {
+            throw new Error('Invalid configuration');
+          }
+
+          return field.signedValue;
+        }),
+      });
+
+      const redirectUrl = template.templateMeta?.redirectUrl;
+
+      await (redirectUrl ? navigate(redirectUrl) : navigate(`/sign/${token}/complete`));
+    } catch (err) {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(
+          msg`We were unable to submit this document at this time. Please try again later.`,
+        ),
+        variant: 'destructive',
+      });
+
+      throw err;
+    }
+  };
+
+  const currentDocumentFlow = directTemplateFlow[step];
+
+  return (
+    <div className="grid w-full grid-cols-12 gap-8">
+      <Card
+        className="relative col-span-12 rounded-xl before:rounded-xl lg:col-span-6 xl:col-span-7"
+        gradient
+      >
+        <CardContent className="p-2">
+          <LazyPDFViewer
+            key={template.id}
+            documentData={template.templateDocumentData}
+            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
+          />
+        </CardContent>
+      </Card>
+
+      <div className="col-span-12 lg:col-span-6 xl:col-span-5">
+        <DocumentFlowFormContainer
+          className="lg:h-[calc(100vh-6rem)]"
+          onSubmit={(e) => e.preventDefault()}
+        >
+          <Stepper
+            currentStep={currentDocumentFlow.stepIndex}
+            setCurrentStep={(step) => setStep(DirectTemplateSteps[step - 1])}
+          >
+            <DirectTemplateConfigureForm
+              flowStep={directTemplateFlow.configure}
+              template={template}
+              directTemplateRecipient={directTemplateRecipient}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
+              onSubmit={onConfigureDirectTemplateSubmit}
+              initialEmail={email}
+            />
+
+            <DirectTemplateSigningForm
+              flowStep={directTemplateFlow.sign}
+              directRecipient={recipient}
+              directRecipientFields={directTemplateRecipient.fields}
+              template={template}
+              onSubmit={onSignDirectTemplateSubmit}
+            />
+          </Stepper>
+        </DocumentFlowFormContainer>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/direct-template/direct-template-signing-auth-page.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+
+import { authClient } from '@documenso/auth/client';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const DirectTemplateAuthPageView = () => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [isSigningOut, setIsSigningOut] = useState(false);
+
+  const handleChangeAccount = async () => {
+    try {
+      setIsSigningOut(true);
+
+      await authClient.signOut();
+    } catch {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`We were unable to log you out at this time.`),
+        duration: 10000,
+        variant: 'destructive',
+      });
+    }
+
+    setIsSigningOut(false);
+  };
+
+  return (
+    <div className="mx-auto flex h-[70vh] w-full max-w-md flex-col items-center justify-center">
+      <div>
+        <h1 className="text-3xl font-semibold">
+          <Trans>Authentication required</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>You need to be logged in to view this page.</Trans>
+        </p>
+
+        <Button
+          className="mt-4 w-full"
+          type="submit"
+          onClick={async () => handleChangeAccount()}
+          loading={isSigningOut}
+        >
+          <Trans>Login</Trans>
+        </Button>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx

@@ -0,0 +1,388 @@
+import { useMemo, useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import type { Field, Recipient, Signature } from '@prisma/client';
+import { FieldType } from '@prisma/client';
+import { DateTime } from 'luxon';
+import { match } from 'ts-pattern';
+
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import {
+  ZCheckboxFieldMeta,
+  ZDropdownFieldMeta,
+  ZNumberFieldMeta,
+  ZRadioFieldMeta,
+  ZTextFieldMeta,
+} from '@documenso/lib/types/field-meta';
+import type { TTemplate } from '@documenso/lib/types/template';
+import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import {
+  DocumentFlowFormContainerContent,
+  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerHeader,
+  DocumentFlowFormContainerStep,
+} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+import { useStep } from '@documenso/ui/primitives/stepper';
+
+import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
+import { DocumentSigningCompleteDialog } from '~/components/general/document-signing/document-signing-complete-dialog';
+import { DocumentSigningDateField } from '~/components/general/document-signing/document-signing-date-field';
+import { DocumentSigningDropdownField } from '~/components/general/document-signing/document-signing-dropdown-field';
+import { DocumentSigningEmailField } from '~/components/general/document-signing/document-signing-email-field';
+import { DocumentSigningInitialsField } from '~/components/general/document-signing/document-signing-initials-field';
+import { DocumentSigningNameField } from '~/components/general/document-signing/document-signing-name-field';
+import { DocumentSigningNumberField } from '~/components/general/document-signing/document-signing-number-field';
+import { useRequiredDocumentSigningContext } from '~/components/general/document-signing/document-signing-provider';
+import { DocumentSigningRadioField } from '~/components/general/document-signing/document-signing-radio-field';
+import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field';
+import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field';
+
+export type DirectTemplateSigningFormProps = {
+  flowStep: DocumentFlowStep;
+  directRecipient: Recipient;
+  directRecipientFields: Field[];
+  template: Omit<TTemplate, 'user'>;
+  onSubmit: (_data: DirectTemplateLocalField[]) => Promise<void>;
+};
+
+export type DirectTemplateLocalField = Field & {
+  signedValue?: TSignFieldWithTokenMutationSchema;
+  signature?: Signature;
+};
+
+export const DirectTemplateSigningForm = ({
+  flowStep,
+  directRecipient,
+  directRecipientFields,
+  template,
+  onSubmit,
+}: DirectTemplateSigningFormProps) => {
+  const { fullName, signature, signatureValid, setFullName, setSignature } =
+    useRequiredDocumentSigningContext();
+
+  const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(directRecipientFields);
+  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const { currentStep, totalSteps, previousStep } = useStep();
+
+  const onSignField = (value: TSignFieldWithTokenMutationSchema) => {
+    setLocalFields(
+      localFields.map((field) => {
+        if (field.id !== value.fieldId) {
+          return field;
+        }
+
+        const tempField: DirectTemplateLocalField = {
+          ...field,
+          customText: value.value,
+          inserted: true,
+          signedValue: value,
+        };
+
+        if (field.type === FieldType.SIGNATURE) {
+          tempField.signature = {
+            id: 1,
+            created: new Date(),
+            recipientId: 1,
+            fieldId: 1,
+            signatureImageAsBase64: value.value.startsWith('data:') ? value.value : null,
+            typedSignature: value.value.startsWith('data:') ? null : value.value,
+          } satisfies Signature;
+        }
+
+        if (field.type === FieldType.DATE) {
+          tempField.customText = DateTime.now()
+            .setZone(template.templateMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE)
+            .toFormat(template.templateMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT);
+        }
+        return tempField;
+      }),
+    );
+  };
+
+  const onUnsignField = (value: TRemovedSignedFieldWithTokenMutationSchema) => {
+    setLocalFields(
+      localFields.map((field) => {
+        if (field.id !== value.fieldId) {
+          return field;
+        }
+
+        return {
+          ...field,
+          customText: '',
+          inserted: false,
+          signedValue: undefined,
+          signature: undefined,
+        };
+      }),
+    );
+  };
+
+  const hasSignatureField = localFields.some((field) => field.type === FieldType.SIGNATURE);
+
+  const uninsertedFields = useMemo(() => {
+    return sortFieldsByPosition(localFields.filter((field) => !field.inserted));
+  }, [localFields]);
+
+  const fieldsValidated = () => {
+    setValidateUninsertedFields(true);
+    validateFieldsInserted(localFields);
+  };
+
+  const handleSubmit = async () => {
+    setValidateUninsertedFields(true);
+
+    if (hasSignatureField && !signatureValid) {
+      return;
+    }
+
+    const isFieldsValid = validateFieldsInserted(localFields);
+
+    if (!isFieldsValid) {
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      await onSubmit(localFields);
+    } catch {
+      setIsSubmitting(false);
+    }
+
+    // Do not reset to false since we do a redirect.
+  };
+
+  return (
+    <>
+      <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
+
+      <DocumentFlowFormContainerContent>
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+          {validateUninsertedFields && uninsertedFields[0] && (
+            <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
+              <Trans>Click to insert field</Trans>
+            </FieldToolTip>
+          )}
+
+          {localFields.map((field) =>
+            match(field.type)
+              .with(FieldType.SIGNATURE, () => (
+                <DocumentSigningSignatureField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.INITIALS, () => (
+                <DocumentSigningInitialsField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.NAME, () => (
+                <DocumentSigningNameField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.DATE, () => (
+                <DocumentSigningDateField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  dateFormat={template.templateMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT}
+                  timezone={template.templateMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.EMAIL, () => (
+                <DocumentSigningEmailField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.TEXT, () => {
+                const parsedFieldMeta = field.fieldMeta
+                  ? ZTextFieldMeta.parse(field.fieldMeta)
+                  : null;
+
+                return (
+                  <DocumentSigningTextField
+                    key={field.id}
+                    field={{
+                      ...field,
+                      fieldMeta: parsedFieldMeta,
+                    }}
+                    recipient={directRecipient}
+                    onSignField={onSignField}
+                    onUnsignField={onUnsignField}
+                  />
+                );
+              })
+              .with(FieldType.NUMBER, () => {
+                const parsedFieldMeta = field.fieldMeta
+                  ? ZNumberFieldMeta.parse(field.fieldMeta)
+                  : null;
+
+                return (
+                  <DocumentSigningNumberField
+                    key={field.id}
+                    field={{
+                      ...field,
+                      fieldMeta: parsedFieldMeta,
+                    }}
+                    recipient={directRecipient}
+                    onSignField={onSignField}
+                    onUnsignField={onUnsignField}
+                  />
+                );
+              })
+              .with(FieldType.DROPDOWN, () => {
+                const parsedFieldMeta = field.fieldMeta
+                  ? ZDropdownFieldMeta.parse(field.fieldMeta)
+                  : null;
+
+                return (
+                  <DocumentSigningDropdownField
+                    key={field.id}
+                    field={{
+                      ...field,
+                      fieldMeta: parsedFieldMeta,
+                    }}
+                    recipient={directRecipient}
+                    onSignField={onSignField}
+                    onUnsignField={onUnsignField}
+                  />
+                );
+              })
+              .with(FieldType.RADIO, () => {
+                const parsedFieldMeta = field.fieldMeta
+                  ? ZRadioFieldMeta.parse(field.fieldMeta)
+                  : null;
+
+                return (
+                  <DocumentSigningRadioField
+                    key={field.id}
+                    field={{
+                      ...field,
+                      fieldMeta: parsedFieldMeta,
+                    }}
+                    recipient={directRecipient}
+                    onSignField={onSignField}
+                    onUnsignField={onUnsignField}
+                  />
+                );
+              })
+              .with(FieldType.CHECKBOX, () => {
+                const parsedFieldMeta = field.fieldMeta
+                  ? ZCheckboxFieldMeta.parse(field.fieldMeta)
+                  : null;
+
+                return (
+                  <DocumentSigningCheckboxField
+                    key={field.id}
+                    field={{
+                      ...field,
+                      fieldMeta: parsedFieldMeta,
+                    }}
+                    recipient={directRecipient}
+                    onSignField={onSignField}
+                    onUnsignField={onUnsignField}
+                  />
+                );
+              })
+              .otherwise(() => null),
+          )}
+        </ElementVisible>
+
+        <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
+          <div className="flex flex-1 flex-col gap-y-4">
+            <div>
+              <Label htmlFor="full-name">
+                <Trans>Full Name</Trans>
+              </Label>
+
+              <Input
+                id="full-name"
+                value={fullName}
+                onChange={(e) => setFullName(e.target.value.trimStart())}
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="Signature">
+                <Trans>Signature</Trans>
+              </Label>
+
+              <Card className="mt-2" gradient degrees={-120}>
+                <CardContent className="p-0">
+                  <SignaturePad
+                    className="h-44 w-full"
+                    disabled={isSubmitting}
+                    defaultValue={signature ?? undefined}
+                    onChange={(value) => {
+                      setSignature(value);
+                    }}
+                  />
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </DocumentFlowFormContainerContent>
+
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep step={currentStep} maxStep={totalSteps} />
+
+        <div className="mt-4 flex gap-x-4">
+          <Button
+            className="dark:bg-muted dark:hover:bg-muted/80 w-full bg-black/5 hover:bg-black/10"
+            size="lg"
+            variant="secondary"
+            disabled={isSubmitting}
+            onClick={previousStep}
+          >
+            <Trans>Back</Trans>
+          </Button>
+
+          <DocumentSigningCompleteDialog
+            isSubmitting={isSubmitting}
+            onSignatureComplete={handleSubmit}
+            documentTitle={template.title}
+            fields={localFields}
+            fieldsValidated={fieldsValidated}
+            role={directRecipient.role}
+          />
+        </div>
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-auth-2fa.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans } from '@lingui/react/macro';
+import { RecipientRole } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError } from '@documenso/lib/errors/app-error';
+import { DocumentAuth, type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { DialogFooter } from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { PinInput, PinInputGroup, PinInputSlot } from '@documenso/ui/primitives/pin-input';
+
+import { EnableAuthenticatorAppDialog } from '~/components/forms/2fa/enable-authenticator-app-dialog';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+
+export type DocumentSigningAuth2FAProps = {
+  actionTarget?: 'FIELD' | 'DOCUMENT';
+  actionVerb?: string;
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+  onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
+};
+
+const Z2FAAuthFormSchema = z.object({
+  token: z
+    .string()
+    .min(4, { message: 'Token must at least 4 characters long' })
+    .max(10, { message: 'Token must be at most 10 characters long' }),
+});
+
+type T2FAAuthFormSchema = z.infer<typeof Z2FAAuthFormSchema>;
+
+export const DocumentSigningAuth2FA = ({
+  actionTarget = 'FIELD',
+  actionVerb = 'sign',
+  onReauthFormSubmit,
+  open,
+  onOpenChange,
+}: DocumentSigningAuth2FAProps) => {
+  const { recipient, user, isCurrentlyAuthenticating, setIsCurrentlyAuthenticating } =
+    useRequiredDocumentSigningAuthContext();
+
+  const form = useForm<T2FAAuthFormSchema>({
+    resolver: zodResolver(Z2FAAuthFormSchema),
+    defaultValues: {
+      token: '',
+    },
+  });
+
+  const [is2FASetupSuccessful, setIs2FASetupSuccessful] = useState(false);
+  const [formErrorCode, setFormErrorCode] = useState<string | null>(null);
+
+  const onFormSubmit = async ({ token }: T2FAAuthFormSchema) => {
+    try {
+      setIsCurrentlyAuthenticating(true);
+
+      await onReauthFormSubmit({
+        type: DocumentAuth.TWO_FACTOR_AUTH,
+        token,
+      });
+
+      setIsCurrentlyAuthenticating(false);
+
+      onOpenChange(false);
+    } catch (err) {
+      setIsCurrentlyAuthenticating(false);
+
+      const error = AppError.parseError(err);
+      setFormErrorCode(error.code);
+
+      // Todo: Alert.
+    }
+  };
+
+  useEffect(() => {
+    form.reset({
+      token: '',
+    });
+
+    setIs2FASetupSuccessful(false);
+    setFormErrorCode(null);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  if (!user?.twoFactorEnabled && !is2FASetupSuccessful) {
+    return (
+      <div className="space-y-4">
+        <Alert variant="warning">
+          <AlertDescription>
+            <p>
+              {recipient.role === RecipientRole.VIEWER && actionTarget === 'DOCUMENT' ? (
+                <Trans>You need to setup 2FA to mark this document as viewed.</Trans>
+              ) : (
+                // Todo: Translate
+                `You need to setup 2FA to ${actionVerb.toLowerCase()} this ${actionTarget.toLowerCase()}.`
+              )}
+            </p>
+
+            <p className="mt-2">
+              <Trans>
+                By enabling 2FA, you will be required to enter a code from your authenticator app
+                every time you sign in using email password.
+              </Trans>
+            </p>
+          </AlertDescription>
+        </Alert>
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+            <Trans>Close</Trans>
+          </Button>
+
+          <EnableAuthenticatorAppDialog onSuccess={() => setIs2FASetupSuccessful(true)} />
+        </DialogFooter>
+      </div>
+    );
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset disabled={isCurrentlyAuthenticating}>
+          <div className="space-y-4">
+            <FormField
+              control={form.control}
+              name="token"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>2FA token</FormLabel>
+
+                  <FormControl>
+                    <PinInput {...field} value={field.value ?? ''} maxLength={6}>
+                      {Array(6)
+                        .fill(null)
+                        .map((_, i) => (
+                          <PinInputGroup key={i}>
+                            <PinInputSlot index={i} />
+                          </PinInputGroup>
+                        ))}
+                    </PinInput>
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {formErrorCode && (
+              <Alert variant="destructive">
+                <AlertTitle>
+                  <Trans>Unauthorized</Trans>
+                </AlertTitle>
+                <AlertDescription>
+                  <Trans>
+                    We were unable to verify your details. Please try again or contact support
+                  </Trans>
+                </AlertDescription>
+              </Alert>
+            )}
+
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button type="submit" loading={isCurrentlyAuthenticating}>
+                <Trans>Sign</Trans>
+              </Button>
+            </DialogFooter>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-auth-account.tsx

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+import { RecipientRole } from '@prisma/client';
+
+import { authClient } from '@documenso/auth/client';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { DialogFooter } from '@documenso/ui/primitives/dialog';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+
+export type DocumentSigningAuthAccountProps = {
+  actionTarget?: 'FIELD' | 'DOCUMENT';
+  actionVerb?: string;
+  onOpenChange: (value: boolean) => void;
+};
+
+export const DocumentSigningAuthAccount = ({
+  actionTarget = 'FIELD',
+  actionVerb = 'sign',
+  onOpenChange,
+}: DocumentSigningAuthAccountProps) => {
+  const { recipient } = useRequiredDocumentSigningAuthContext();
+
+  const { t } = useLingui();
+
+  const { toast } = useToast();
+
+  const [isSigningOut, setIsSigningOut] = useState(false);
+
+  const handleChangeAccount = async (email: string) => {
+    try {
+      setIsSigningOut(true);
+
+      await authClient.signOut({
+        redirectPath: `/signin#email=${email}`,
+      });
+    } catch {
+      setIsSigningOut(false);
+
+      toast({
+        title: t`Something went wrong`,
+        description: t`We were unable to log you out at this time.`,
+        duration: 10000,
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <fieldset disabled={isSigningOut} className="space-y-4">
+      <Alert variant="warning">
+        <AlertDescription>
+          {actionTarget === 'DOCUMENT' && recipient.role === RecipientRole.VIEWER ? (
+            <span>
+              <Trans>
+                To mark this document as viewed, you need to be logged in as{' '}
+                <strong>{recipient.email}</strong>
+              </Trans>
+            </span>
+          ) : (
+            <span>
+              {/* Todo: Translate */}
+              To {actionVerb.toLowerCase()} this {actionTarget.toLowerCase()}, you need to be logged
+              in as <strong>{recipient.email}</strong>
+            </span>
+          )}
+        </AlertDescription>
+      </Alert>
+
+      <DialogFooter>
+        <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+          <Trans>Cancel</Trans>
+        </Button>
+
+        <Button onClick={async () => handleChangeAccount(recipient.email)} loading={isSigningOut}>
+          <Trans>Login</Trans>
+        </Button>
+      </DialogFooter>
+    </fieldset>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-auth-dialog.tsx

@@ -0,0 +1,91 @@
+import { Trans } from '@lingui/react/macro';
+import type { FieldType } from '@prisma/client';
+import { P, match } from 'ts-pattern';
+
+import {
+  DocumentAuth,
+  type TRecipientActionAuth,
+  type TRecipientActionAuthTypes,
+} from '@documenso/lib/types/document-auth';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+
+import { DocumentSigningAuth2FA } from './document-signing-auth-2fa';
+import { DocumentSigningAuthAccount } from './document-signing-auth-account';
+import { DocumentSigningAuthPasskey } from './document-signing-auth-passkey';
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+
+export type DocumentSigningAuthDialogProps = {
+  title?: string;
+  documentAuthType: TRecipientActionAuthTypes;
+  description?: string;
+  actionTarget: FieldType | 'DOCUMENT';
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+
+  /**
+   * The callback to run when the reauth form is filled out.
+   */
+  onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
+};
+
+export const DocumentSigningAuthDialog = ({
+  title,
+  description,
+  documentAuthType,
+  open,
+  onOpenChange,
+  onReauthFormSubmit,
+}: DocumentSigningAuthDialogProps) => {
+  const { recipient, user, isCurrentlyAuthenticating } = useRequiredDocumentSigningAuthContext();
+
+  const handleOnOpenChange = (value: boolean) => {
+    if (isCurrentlyAuthenticating) {
+      return;
+    }
+
+    onOpenChange(value);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOnOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title || <Trans>Sign field</Trans>}</DialogTitle>
+
+          <DialogDescription>
+            {description || <Trans>Reauthentication is required to sign this field</Trans>}
+          </DialogDescription>
+        </DialogHeader>
+
+        {match({ documentAuthType, user })
+          .with(
+            { documentAuthType: DocumentAuth.ACCOUNT },
+            { user: P.when((user) => !user || user.email !== recipient.email) }, // Assume all current auth methods requires them to be logged in.
+            () => <DocumentSigningAuthAccount onOpenChange={onOpenChange} />,
+          )
+          .with({ documentAuthType: DocumentAuth.PASSKEY }, () => (
+            <DocumentSigningAuthPasskey
+              open={open}
+              onOpenChange={onOpenChange}
+              onReauthFormSubmit={onReauthFormSubmit}
+            />
+          ))
+          .with({ documentAuthType: DocumentAuth.TWO_FACTOR_AUTH }, () => (
+            <DocumentSigningAuth2FA
+              open={open}
+              onOpenChange={onOpenChange}
+              onReauthFormSubmit={onReauthFormSubmit}
+            />
+          ))
+          .with({ documentAuthType: DocumentAuth.EXPLICIT_NONE }, () => null)
+          .exhaustive()}
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-auth-page.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+
+import { authClient } from '@documenso/auth/client';
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type DocumentSigningAuthPageViewProps = {
+  email: string;
+  emailHasAccount?: boolean;
+};
+
+export const DocumentSigningAuthPageView = ({
+  email,
+  emailHasAccount,
+}: DocumentSigningAuthPageViewProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const [isSigningOut, setIsSigningOut] = useState(false);
+
+  const handleChangeAccount = async (email: string) => {
+    try {
+      setIsSigningOut(true);
+
+      await authClient.signOut({
+        redirectPath: emailHasAccount ? `/signin#email=${email}` : `/signup#email=${email}`,
+      });
+    } catch {
+      toast({
+        title: _(msg`Something went wrong`),
+        description: _(msg`We were unable to log you out at this time.`),
+        duration: 10000,
+        variant: 'destructive',
+      });
+    }
+
+    setIsSigningOut(false);
+  };
+
+  return (
+    <div className="mx-auto flex h-[70vh] w-full max-w-md flex-col items-center justify-center">
+      <div>
+        <h1 className="text-3xl font-semibold">
+          <Trans>Authentication required</Trans>
+        </h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          <Trans>
+            You need to be logged in as <strong>{email}</strong> to view this page.
+          </Trans>
+        </p>
+
+        <Button
+          className="mt-4 w-full"
+          type="submit"
+          onClick={async () => handleChangeAccount(email)}
+          loading={isSigningOut}
+        >
+          {emailHasAccount ? <Trans>Login</Trans> : <Trans>Sign up</Trans>}
+        </Button>
+      </div>
+    </div>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-auth-passkey.tsx

@@ -0,0 +1,265 @@
+import { useEffect, useState } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { RecipientRole } from '@prisma/client';
+import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/browser';
+import { Loader } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { AppError } from '@documenso/lib/errors/app-error';
+import { DocumentAuth, type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import { DialogFooter } from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+
+import { PasskeyCreateDialog } from '~/components/dialogs/passkey-create-dialog';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+
+export type DocumentSigningAuthPasskeyProps = {
+  actionTarget?: 'FIELD' | 'DOCUMENT';
+  actionVerb?: string;
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+  onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
+};
+
+const ZPasskeyAuthFormSchema = z.object({
+  passkeyId: z.string(),
+});
+
+type TPasskeyAuthFormSchema = z.infer<typeof ZPasskeyAuthFormSchema>;
+
+export const DocumentSigningAuthPasskey = ({
+  actionTarget = 'FIELD',
+  actionVerb = 'sign',
+  onReauthFormSubmit,
+  open,
+  onOpenChange,
+}: DocumentSigningAuthPasskeyProps) => {
+  const { _ } = useLingui();
+
+  const {
+    recipient,
+    passkeyData,
+    preferredPasskeyId,
+    setPreferredPasskeyId,
+    isCurrentlyAuthenticating,
+    setIsCurrentlyAuthenticating,
+    refetchPasskeys,
+  } = useRequiredDocumentSigningAuthContext();
+
+  const form = useForm<TPasskeyAuthFormSchema>({
+    resolver: zodResolver(ZPasskeyAuthFormSchema),
+    defaultValues: {
+      passkeyId: preferredPasskeyId || '',
+    },
+  });
+
+  const { mutateAsync: createPasskeyAuthenticationOptions } =
+    trpc.auth.createPasskeyAuthenticationOptions.useMutation();
+
+  const [formErrorCode, setFormErrorCode] = useState<string | null>(null);
+
+  const onFormSubmit = async ({ passkeyId }: TPasskeyAuthFormSchema) => {
+    try {
+      setPreferredPasskeyId(passkeyId);
+      setIsCurrentlyAuthenticating(true);
+
+      const { options, tokenReference } = await createPasskeyAuthenticationOptions({
+        preferredPasskeyId: passkeyId,
+      });
+
+      const authenticationResponse = await startAuthentication(options);
+
+      await onReauthFormSubmit({
+        type: DocumentAuth.PASSKEY,
+        authenticationResponse,
+        tokenReference,
+      });
+
+      setIsCurrentlyAuthenticating(false);
+
+      onOpenChange(false);
+    } catch (err) {
+      setIsCurrentlyAuthenticating(false);
+
+      if (err.name === 'NotAllowedError') {
+        return;
+      }
+
+      const error = AppError.parseError(err);
+      setFormErrorCode(error.code);
+
+      // Todo: Alert.
+    }
+  };
+
+  useEffect(() => {
+    form.reset({
+      passkeyId: preferredPasskeyId || '',
+    });
+
+    setFormErrorCode(null);
+  }, [open, form, preferredPasskeyId]);
+
+  if (!browserSupportsWebAuthn()) {
+    return (
+      <div className="space-y-4">
+        <Alert variant="warning">
+          <AlertDescription>
+            {/* Todo: Translate */}
+            Your browser does not support passkeys, which is required to {actionVerb.toLowerCase()}{' '}
+            this {actionTarget.toLowerCase()}.
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+            <Trans>Close</Trans>
+          </Button>
+        </DialogFooter>
+      </div>
+    );
+  }
+
+  if (passkeyData.isInitialLoading || (passkeyData.isError && passkeyData.passkeys.length === 0)) {
+    return (
+      <div className="flex h-28 items-center justify-center">
+        <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+      </div>
+    );
+  }
+
+  if (passkeyData.isError) {
+    return (
+      <div className="h-28 space-y-4">
+        <Alert variant="destructive">
+          <AlertDescription>
+            <Trans>Something went wrong while loading your passkeys.</Trans>
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <Button type="button" onClick={() => void refetchPasskeys()}>
+            <Trans>Retry</Trans>
+          </Button>
+        </DialogFooter>
+      </div>
+    );
+  }
+
+  if (passkeyData.passkeys.length === 0) {
+    return (
+      <div className="space-y-4">
+        <Alert variant="warning">
+          <AlertDescription>
+            {/* Todo: Translate */}
+            {recipient.role === RecipientRole.VIEWER && actionTarget === 'DOCUMENT'
+              ? 'You need to setup a passkey to mark this document as viewed.'
+              : `You need to setup a passkey to ${actionVerb.toLowerCase()} this ${actionTarget.toLowerCase()}.`}
+          </AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <PasskeyCreateDialog
+            onSuccess={async () => refetchPasskeys()}
+            trigger={
+              <Button>
+                <Trans>Setup</Trans>
+              </Button>
+            }
+          />
+        </DialogFooter>
+      </div>
+    );
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset disabled={isCurrentlyAuthenticating}>
+          <div className="space-y-4">
+            <FormField
+              control={form.control}
+              name="passkeyId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel required>Passkey</FormLabel>
+
+                  <FormControl>
+                    <Select {...field} onValueChange={field.onChange}>
+                      <SelectTrigger className="bg-background text-muted-foreground">
+                        <SelectValue
+                          data-testid="documentAccessSelectValue"
+                          placeholder={_(msg`Select passkey`)}
+                        />
+                      </SelectTrigger>
+
+                      <SelectContent position="popper">
+                        {passkeyData.passkeys.map((passkey) => (
+                          <SelectItem key={passkey.id} value={passkey.id}>
+                            {passkey.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {formErrorCode && (
+              <Alert variant="destructive">
+                <AlertTitle>Unauthorized</AlertTitle>
+                <AlertDescription>
+                  We were unable to verify your details. Please try again or contact support
+                </AlertDescription>
+              </Alert>
+            )}
+
+            <DialogFooter>
+              <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+
+              <Button type="submit" loading={isCurrentlyAuthenticating}>
+                Sign
+              </Button>
+            </DialogFooter>
+          </div>
+        </fieldset>
+      </form>
+    </Form>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-auth-provider.tsx

@@ -0,0 +1,223 @@
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+
+import { type Document, FieldType, type Passkey, type Recipient } from '@prisma/client';
+import { match } from 'ts-pattern';
+
+import type { SessionUser } from '@documenso/auth/server/lib/session/session';
+import { MAXIMUM_PASSKEYS } from '@documenso/lib/constants/auth';
+import type {
+  TDocumentAuthOptions,
+  TRecipientAccessAuthTypes,
+  TRecipientActionAuthTypes,
+  TRecipientAuthOptions,
+} from '@documenso/lib/types/document-auth';
+import { DocumentAuth } from '@documenso/lib/types/document-auth';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { trpc } from '@documenso/trpc/react';
+
+import type { DocumentSigningAuthDialogProps } from './document-signing-auth-dialog';
+import { DocumentSigningAuthDialog } from './document-signing-auth-dialog';
+
+type PasskeyData = {
+  passkeys: Omit<Passkey, 'credentialId' | 'credentialPublicKey'>[];
+  isInitialLoading: boolean;
+  isRefetching: boolean;
+  isError: boolean;
+};
+
+export type DocumentSigningAuthContextValue = {
+  executeActionAuthProcedure: (_value: ExecuteActionAuthProcedureOptions) => Promise<void>;
+  documentAuthOptions: Document['authOptions'];
+  documentAuthOption: TDocumentAuthOptions;
+  setDocumentAuthOptions: (_value: Document['authOptions']) => void;
+  recipient: Recipient;
+  recipientAuthOption: TRecipientAuthOptions;
+  setRecipient: (_value: Recipient) => void;
+  derivedRecipientAccessAuth: TRecipientAccessAuthTypes | null;
+  derivedRecipientActionAuth: TRecipientActionAuthTypes | null;
+  isAuthRedirectRequired: boolean;
+  isCurrentlyAuthenticating: boolean;
+  setIsCurrentlyAuthenticating: (_value: boolean) => void;
+  passkeyData: PasskeyData;
+  preferredPasskeyId: string | null;
+  setPreferredPasskeyId: (_value: string | null) => void;
+  user?: SessionUser | null;
+  refetchPasskeys: () => Promise<void>;
+};
+
+const DocumentSigningAuthContext = createContext<DocumentSigningAuthContextValue | null>(null);
+
+export const useDocumentSigningAuthContext = () => {
+  return useContext(DocumentSigningAuthContext);
+};
+
+export const useRequiredDocumentSigningAuthContext = () => {
+  const context = useDocumentSigningAuthContext();
+
+  if (!context) {
+    throw new Error('Document signing auth context is required');
+  }
+
+  return context;
+};
+
+export interface DocumentSigningAuthProviderProps {
+  documentAuthOptions: Document['authOptions'];
+  recipient: Recipient;
+  user?: SessionUser | null;
+  children: React.ReactNode;
+}
+
+export const DocumentSigningAuthProvider = ({
+  documentAuthOptions: initialDocumentAuthOptions,
+  recipient: initialRecipient,
+  user,
+  children,
+}: DocumentSigningAuthProviderProps) => {
+  const [documentAuthOptions, setDocumentAuthOptions] = useState(initialDocumentAuthOptions);
+  const [recipient, setRecipient] = useState(initialRecipient);
+
+  const [isCurrentlyAuthenticating, setIsCurrentlyAuthenticating] = useState(false);
+  const [preferredPasskeyId, setPreferredPasskeyId] = useState<string | null>(null);
+
+  const {
+    documentAuthOption,
+    recipientAuthOption,
+    derivedRecipientAccessAuth,
+    derivedRecipientActionAuth,
+  } = useMemo(
+    () =>
+      extractDocumentAuthMethods({
+        documentAuth: documentAuthOptions,
+        recipientAuth: recipient.authOptions,
+      }),
+    [documentAuthOptions, recipient],
+  );
+
+  const passkeyQuery = trpc.auth.findPasskeys.useQuery(
+    {
+      perPage: MAXIMUM_PASSKEYS,
+    },
+    {
+      placeholderData: (previousData) => previousData,
+      enabled: derivedRecipientActionAuth === DocumentAuth.PASSKEY,
+    },
+  );
+
+  const passkeyData: PasskeyData = {
+    passkeys: passkeyQuery.data?.data || [],
+    isInitialLoading: passkeyQuery.isInitialLoading,
+    isRefetching: passkeyQuery.isRefetching,
+    isError: passkeyQuery.isError,
+  };
+
+  const [documentAuthDialogPayload, setDocumentAuthDialogPayload] =
+    useState<ExecuteActionAuthProcedureOptions | null>(null);
+
+  /**
+   * The pre calculated auth payload if the current user is authenticated correctly
+   * for the `derivedRecipientActionAuth`.
+   *
+   * Will be `null` if the user still requires authentication, or if they don't need
+   * authentication.
+   */
+  const preCalculatedActionAuthOptions = match(derivedRecipientActionAuth)
+    .with(DocumentAuth.ACCOUNT, () => {
+      if (recipient.email !== user?.email) {
+        return null;
+      }
+
+      return {
+        type: DocumentAuth.ACCOUNT,
+      };
+    })
+    .with(DocumentAuth.EXPLICIT_NONE, () => ({
+      type: DocumentAuth.EXPLICIT_NONE,
+    }))
+    .with(DocumentAuth.PASSKEY, DocumentAuth.TWO_FACTOR_AUTH, null, () => null)
+    .exhaustive();
+
+  const executeActionAuthProcedure = async (options: ExecuteActionAuthProcedureOptions) => {
+    // Directly run callback if no auth required.
+    if (!derivedRecipientActionAuth || options.actionTarget !== FieldType.SIGNATURE) {
+      await options.onReauthFormSubmit();
+      return;
+    }
+
+    // Run callback with precalculated auth options if available.
+    if (preCalculatedActionAuthOptions) {
+      setDocumentAuthDialogPayload(null);
+      await options.onReauthFormSubmit(preCalculatedActionAuthOptions);
+      return;
+    }
+
+    // Request the required auth from the user.
+    setDocumentAuthDialogPayload({
+      ...options,
+    });
+  };
+
+  useEffect(() => {
+    const { passkeys } = passkeyData;
+
+    if (!preferredPasskeyId && passkeys.length > 0) {
+      setPreferredPasskeyId(passkeys[0].id);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [passkeyData.passkeys]);
+
+  // Assume that a user must be logged in for any auth requirements.
+  const isAuthRedirectRequired = Boolean(
+    derivedRecipientActionAuth &&
+      derivedRecipientActionAuth !== DocumentAuth.EXPLICIT_NONE &&
+      user?.email !== recipient.email,
+  );
+
+  const refetchPasskeys = async () => {
+    await passkeyQuery.refetch();
+  };
+
+  return (
+    <DocumentSigningAuthContext.Provider
+      value={{
+        user,
+        documentAuthOptions,
+        setDocumentAuthOptions,
+        executeActionAuthProcedure,
+        recipient,
+        setRecipient,
+        documentAuthOption,
+        recipientAuthOption,
+        derivedRecipientAccessAuth,
+        derivedRecipientActionAuth,
+        isAuthRedirectRequired,
+        isCurrentlyAuthenticating,
+        setIsCurrentlyAuthenticating,
+        passkeyData,
+        preferredPasskeyId,
+        setPreferredPasskeyId,
+        refetchPasskeys,
+      }}
+    >
+      {children}
+
+      {documentAuthDialogPayload && derivedRecipientActionAuth && (
+        <DocumentSigningAuthDialog
+          open={true}
+          onOpenChange={() => setDocumentAuthDialogPayload(null)}
+          onReauthFormSubmit={documentAuthDialogPayload.onReauthFormSubmit}
+          actionTarget={documentAuthDialogPayload.actionTarget}
+          documentAuthType={derivedRecipientActionAuth}
+        />
+      )}
+    </DocumentSigningAuthContext.Provider>
+  );
+};
+
+type ExecuteActionAuthProcedureOptions = Omit<
+  DocumentSigningAuthDialogProps,
+  'open' | 'onOpenChange' | 'documentAuthType' | 'recipientRole'
+>;
+
+DocumentSigningAuthProvider.displayName = 'DocumentSigningAuthProvider';

apps/remix/app/components/general/document-signing/document-signing-auto-sign.tsx

@@ -0,0 +1,229 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Plural, Trans } from '@lingui/react/macro';
+import type { Field, Recipient } from '@prisma/client';
+import { FieldType } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { useRevalidator } from 'react-router';
+import { P, match } from 'ts-pattern';
+
+import { unsafe_useEffectOnce } from '@documenso/lib/client-only/hooks/use-effect-once';
+import { DocumentAuth } from '@documenso/lib/types/document-auth';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
+import { Form } from '@documenso/ui/primitives/form/form';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { DocumentSigningDisclosure } from '~/components/general/document-signing/document-signing-disclosure';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+import { useRequiredDocumentSigningContext } from './document-signing-provider';
+
+const AUTO_SIGNABLE_FIELD_TYPES: string[] = [
+  FieldType.NAME,
+  FieldType.INITIALS,
+  FieldType.EMAIL,
+  FieldType.DATE,
+];
+
+// The action auth types that are not allowed to be auto signed
+//
+// Reasoning: If the action auth is a passkey or 2FA, it's likely that the owner of the document
+// intends on having the user manually sign due to the additional security measures employed for
+// other field types.
+const NON_AUTO_SIGNABLE_ACTION_AUTH_TYPES: string[] = [
+  DocumentAuth.PASSKEY,
+  DocumentAuth.TWO_FACTOR_AUTH,
+];
+
+// The threshold for the number of fields that could be autosigned before displaying the dialog
+//
+// Reasoning: If there aren't that many fields, it's likely going to be easier to manually sign each one
+// while for larger documents with many fields it will be beneficial to sign away the boilerplate fields.
+const AUTO_SIGN_THRESHOLD = 5;
+
+export type DocumentSigningAutoSignProps = {
+  recipient: Pick<Recipient, 'id' | 'token'>;
+  fields: Field[];
+};
+
+export const DocumentSigningAutoSign = ({ recipient, fields }: DocumentSigningAutoSignProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const { email, fullName } = useRequiredDocumentSigningContext();
+  const { derivedRecipientActionAuth } = useRequiredDocumentSigningAuthContext();
+
+  const [open, setOpen] = useState(false);
+
+  const form = useForm();
+
+  const { mutateAsync: signFieldWithToken } = trpc.field.signFieldWithToken.useMutation();
+
+  const autoSignableFields = fields.filter((field) => {
+    if (field.inserted) {
+      return false;
+    }
+
+    if (!AUTO_SIGNABLE_FIELD_TYPES.includes(field.type)) {
+      return false;
+    }
+
+    if (field.type === FieldType.NAME && !fullName) {
+      return false;
+    }
+
+    if (field.type === FieldType.INITIALS && !fullName) {
+      return false;
+    }
+
+    if (field.type === FieldType.EMAIL && !email) {
+      return false;
+    }
+
+    return true;
+  });
+
+  const actionAuthAllowsAutoSign = !NON_AUTO_SIGNABLE_ACTION_AUTH_TYPES.includes(
+    derivedRecipientActionAuth ?? '',
+  );
+
+  const onSubmit = async () => {
+    const results = await Promise.allSettled(
+      autoSignableFields.map(async (field) => {
+        const value = match(field.type)
+          .with(FieldType.NAME, () => fullName)
+          .with(FieldType.INITIALS, () => extractInitials(fullName))
+          .with(FieldType.EMAIL, () => email)
+          .with(FieldType.DATE, () => new Date().toISOString())
+          .otherwise(() => '');
+
+        const authOptions = match(derivedRecipientActionAuth)
+          .with(DocumentAuth.ACCOUNT, () => ({
+            type: DocumentAuth.ACCOUNT,
+          }))
+          .with(DocumentAuth.EXPLICIT_NONE, () => ({
+            type: DocumentAuth.EXPLICIT_NONE,
+          }))
+          .with(null, () => undefined)
+          .with(
+            P.union(DocumentAuth.PASSKEY, DocumentAuth.TWO_FACTOR_AUTH),
+            // This is a bit dirty, but the sentinel value used here is incredibly short-lived.
+            () => 'NOT_SUPPORTED' as const,
+          )
+          .exhaustive();
+
+        if (authOptions === 'NOT_SUPPORTED') {
+          throw new Error('Action auth is not supported for auto signing');
+        }
+
+        if (!value) {
+          throw new Error('No value to sign');
+        }
+
+        return await signFieldWithToken({
+          token: recipient.token,
+          fieldId: field.id,
+          value,
+          isBase64: false,
+          authOptions,
+        });
+      }),
+    );
+
+    if (results.some((result) => result.status === 'rejected')) {
+      toast({
+        title: _(msg`Error`),
+        description: _(
+          msg`An error occurred while auto-signing the document, some fields may not be signed. Please review and manually sign any remaining fields.`,
+        ),
+        duration: 5000,
+        variant: 'destructive',
+      });
+    }
+
+    await revalidate();
+  };
+
+  unsafe_useEffectOnce(() => {
+    if (actionAuthAllowsAutoSign && autoSignableFields.length > AUTO_SIGN_THRESHOLD) {
+      setOpen(true);
+    }
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Automatically sign fields</DialogTitle>
+        </DialogHeader>
+
+        <div className="text-muted-foreground max-w-[50ch]">
+          <p>
+            <Trans>
+              When you sign a document, we can automatically fill in and sign the following fields
+              using information that has already been provided. You can also manually sign or remove
+              any automatically signed fields afterwards if you desire.
+            </Trans>
+          </p>
+
+          <ul className="mt-4 flex list-inside list-disc flex-col gap-y-0.5">
+            {AUTO_SIGNABLE_FIELD_TYPES.map((fieldType) => (
+              <li key={fieldType}>
+                <Trans>{_(FRIENDLY_FIELD_TYPE[fieldType as FieldType])}</Trans>
+                <span className="pl-2 text-sm">
+                  (
+                  <Plural
+                    value={autoSignableFields.filter((f) => f.type === fieldType).length}
+                    one="1 matching field"
+                    other="# matching fields"
+                  />
+                  )
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <DocumentSigningDisclosure className="mt-4" />
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <DialogFooter className="flex w-full flex-1 flex-nowrap gap-2">
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => {
+                  setOpen(false);
+                }}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="submit"
+                className="min-w-[6rem]"
+                loading={form.formState.isSubmitting}
+                disabled={!autoSignableFields.length}
+              >
+                <Trans>Sign</Trans>
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx

@@ -0,0 +1,300 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import type { Recipient } from '@prisma/client';
+import { Loader } from 'lucide-react';
+import { useRevalidator } from 'react-router';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZCheckboxFieldMeta } from '@documenso/lib/types/field-meta';
+import { fromCheckboxValue, toCheckboxValue } from '@documenso/lib/universal/field-checkbox';
+import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
+import { checkboxValidationSigns } from '@documenso/ui/primitives/document-flow/field-items-advanced-settings/constants';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+
+export type DocumentSigningCheckboxFieldProps = {
+  field: FieldWithSignatureAndFieldMeta;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DocumentSigningCheckboxField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: DocumentSigningCheckboxFieldProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
+
+  const parsedFieldMeta = ZCheckboxFieldMeta.parse(field.fieldMeta);
+
+  const values = parsedFieldMeta.values?.map((item) => ({
+    ...item,
+    value: item.value.length > 0 ? item.value : `empty-value-${item.id}`,
+  }));
+
+  const [checkedValues, setCheckedValues] = useState(
+    values
+      ?.map((item) =>
+        item.checked ? (item.value.length > 0 ? item.value : `empty-value-${item.id}`) : '',
+      )
+      .filter(Boolean) || [],
+  );
+
+  const isReadOnly = parsedFieldMeta.readOnly;
+
+  const checkboxValidationRule = parsedFieldMeta.validationRule;
+  const checkboxValidationLength = parsedFieldMeta.validationLength;
+  const validationSign = checkboxValidationSigns.find(
+    (sign) => sign.label === checkboxValidationRule,
+  );
+
+  const isLengthConditionMet = useMemo(() => {
+    if (!validationSign) return true;
+    return (
+      (validationSign.value === '>=' && checkedValues.length >= (checkboxValidationLength || 0)) ||
+      (validationSign.value === '=' && checkedValues.length === (checkboxValidationLength || 0)) ||
+      (validationSign.value === '<=' && checkedValues.length <= (checkboxValidationLength || 0))
+    );
+  }, [checkedValues, validationSign, checkboxValidationLength]);
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
+  const shouldAutoSignField =
+    (!field.inserted && checkedValues.length > 0 && isLengthConditionMet) ||
+    (!field.inserted && isReadOnly && isLengthConditionMet);
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value: toCheckboxValue(checkedValues),
+        isBase64: true,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+      } else {
+        await signFieldWithToken(payload);
+      }
+
+      await revalidate();
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async (fieldType?: string) => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+      } else {
+        await removeSignedFieldWithToken(payload);
+      }
+
+      if (fieldType === 'Checkbox') {
+        setCheckedValues([]);
+      }
+
+      await revalidate();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the signature.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleCheckboxChange = (value: string, itemId: number) => {
+    const updatedValue = value || `empty-value-${itemId}`;
+    const updatedValues = checkedValues.includes(updatedValue)
+      ? checkedValues.filter((v) => v !== updatedValue)
+      : [...checkedValues, updatedValue];
+
+    setCheckedValues(updatedValues);
+  };
+
+  const handleCheckboxOptionClick = async (item: {
+    id: number;
+    checked: boolean;
+    value: string;
+  }) => {
+    let updatedValues: string[] = [];
+
+    try {
+      const isChecked = checkedValues.includes(
+        item.value.length > 0 ? item.value : `empty-value-${item.id}`,
+      );
+
+      if (!isChecked) {
+        updatedValues = [
+          ...checkedValues,
+          item.value.length > 0 ? item.value : `empty-value-${item.id}`,
+        ];
+
+        await removeSignedFieldWithToken({
+          token: recipient.token,
+          fieldId: field.id,
+        });
+
+        if (isLengthConditionMet) {
+          await signFieldWithToken({
+            token: recipient.token,
+            fieldId: field.id,
+            value: toCheckboxValue(checkedValues),
+            isBase64: true,
+          });
+        }
+      } else {
+        updatedValues = checkedValues.filter(
+          (v) => v !== item.value && v !== `empty-value-${item.id}`,
+        );
+
+        await removeSignedFieldWithToken({
+          token: recipient.token,
+          fieldId: field.id,
+        });
+      }
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while updating the signature.`),
+        variant: 'destructive',
+      });
+    } finally {
+      setCheckedValues(updatedValues);
+      await revalidate();
+    }
+  };
+
+  useEffect(() => {
+    if (shouldAutoSignField) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, [checkedValues, isLengthConditionMet, field.inserted]);
+
+  const parsedCheckedValues = useMemo(
+    () => fromCheckboxValue(field.customText),
+    [field.customText],
+  );
+
+  return (
+    <DocumentSigningFieldContainer
+      field={field}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Checkbox"
+    >
+      {isLoading && (
+        <div className="bg-background absolute inset-0 z-20 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <>
+          {!isLengthConditionMet && (
+            <FieldToolTip key={field.id} field={field} color="warning" className="">
+              {validationSign?.label} {checkboxValidationLength}
+            </FieldToolTip>
+          )}
+          <div className="z-50 flex flex-col gap-y-2">
+            {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
+              const itemValue = item.value || `empty-value-${item.id}`;
+
+              return (
+                <div key={index} className="flex items-center gap-x-1.5">
+                  <Checkbox
+                    className="h-4 w-4"
+                    id={`checkbox-${index}`}
+                    checked={checkedValues.includes(itemValue)}
+                    onCheckedChange={() => handleCheckboxChange(item.value, item.id)}
+                  />
+                  <Label htmlFor={`checkbox-${index}`}>
+                    {item.value.includes('empty-value-') ? '' : item.value}
+                  </Label>
+                </div>
+              );
+            })}
+          </div>
+        </>
+      )}
+
+      {field.inserted && (
+        <div className="flex flex-col gap-y-1">
+          {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
+            const itemValue = item.value || `empty-value-${item.id}`;
+
+            return (
+              <div key={index} className="flex items-center gap-x-1.5">
+                <Checkbox
+                  className="h-3 w-3"
+                  id={`checkbox-${index}`}
+                  checked={parsedCheckedValues.includes(itemValue)}
+                  disabled={isLoading}
+                  onCheckedChange={() => void handleCheckboxOptionClick(item)}
+                />
+                <Label htmlFor={`checkbox-${index}`} className="text-xs">
+                  {item.value.includes('empty-value-') ? '' : item.value}
+                </Label>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </DocumentSigningFieldContainer>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx

@@ -0,0 +1,150 @@
+import { useMemo, useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import type { Field } from '@prisma/client';
+import { RecipientRole } from '@prisma/client';
+
+import { fieldsContainUnsignedRequiredField } from '@documenso/lib/utils/advanced-fields-helpers';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+
+import { DocumentSigningDisclosure } from '~/components/general/document-signing/document-signing-disclosure';
+
+export type DocumentSigningCompleteDialogProps = {
+  isSubmitting: boolean;
+  documentTitle: string;
+  fields: Field[];
+  fieldsValidated: () => void | Promise<void>;
+  onSignatureComplete: () => void | Promise<void>;
+  role: RecipientRole;
+  disabled?: boolean;
+};
+
+export const DocumentSigningCompleteDialog = ({
+  isSubmitting,
+  documentTitle,
+  fields,
+  fieldsValidated,
+  onSignatureComplete,
+  role,
+  disabled = false,
+}: DocumentSigningCompleteDialogProps) => {
+  const [showDialog, setShowDialog] = useState(false);
+
+  const isComplete = useMemo(() => !fieldsContainUnsignedRequiredField(fields), [fields]);
+
+  const handleOpenChange = (open: boolean) => {
+    if (isSubmitting || !isComplete) {
+      return;
+    }
+
+    setShowDialog(open);
+  };
+
+  return (
+    <Dialog open={showDialog} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button
+          className="w-full"
+          type="button"
+          size="lg"
+          onClick={fieldsValidated}
+          loading={isSubmitting}
+          disabled={disabled}
+        >
+          {isComplete ? <Trans>Complete</Trans> : <Trans>Next field</Trans>}
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogTitle>
+          <div className="text-foreground text-xl font-semibold">
+            {role === RecipientRole.VIEWER && <Trans>Complete Viewing</Trans>}
+            {role === RecipientRole.SIGNER && <Trans>Complete Signing</Trans>}
+            {role === RecipientRole.APPROVER && <Trans>Complete Approval</Trans>}
+          </div>
+        </DialogTitle>
+
+        <div className="text-muted-foreground max-w-[50ch]">
+          {role === RecipientRole.VIEWER && (
+            <span>
+              <Trans>
+                <span className="inline-flex flex-wrap">
+                  You are about to complete viewing "
+                  <span className="inline-block max-w-[11rem] truncate align-baseline">
+                    {documentTitle}
+                  </span>
+                  ".
+                </span>
+                <br /> Are you sure?
+              </Trans>
+            </span>
+          )}
+          {role === RecipientRole.SIGNER && (
+            <span>
+              <Trans>
+                <span className="inline-flex flex-wrap">
+                  You are about to complete signing "
+                  <span className="inline-block max-w-[11rem] truncate align-baseline">
+                    {documentTitle}
+                  </span>
+                  ".
+                </span>
+                <br /> Are you sure?
+              </Trans>
+            </span>
+          )}
+          {role === RecipientRole.APPROVER && (
+            <span>
+              <Trans>
+                <span className="inline-flex flex-wrap">
+                  You are about to complete approving{' '}
+                  <span className="inline-block max-w-[11rem] truncate align-baseline">
+                    "{documentTitle}"
+                  </span>
+                  .
+                </span>
+                <br /> Are you sure?
+              </Trans>
+            </span>
+          )}
+        </div>
+
+        <DocumentSigningDisclosure className="mt-4" />
+
+        <DialogFooter>
+          <div className="flex w-full flex-1 flex-nowrap gap-4">
+            <Button
+              type="button"
+              className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+              variant="secondary"
+              onClick={() => {
+                setShowDialog(false);
+              }}
+            >
+              <Trans>Cancel</Trans>
+            </Button>
+
+            <Button
+              type="button"
+              className="flex-1"
+              disabled={!isComplete}
+              loading={isSubmitting}
+              onClick={onSignatureComplete}
+            >
+              {role === RecipientRole.VIEWER && <Trans>Mark as Viewed</Trans>}
+              {role === RecipientRole.SIGNER && <Trans>Sign</Trans>}
+              {role === RecipientRole.APPROVER && <Trans>Approve</Trans>}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-date-field.tsx

@@ -0,0 +1,152 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Recipient } from '@prisma/client';
+import { Loader } from 'lucide-react';
+import { useRevalidator } from 'react-router';
+
+import {
+  DEFAULT_DOCUMENT_DATE_FORMAT,
+  convertToLocalSystemFormat,
+} from '@documenso/lib/constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+
+export type DocumentSigningDateFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+  dateFormat?: string | null;
+  timezone?: string | null;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DocumentSigningDateField = ({
+  field,
+  recipient,
+  dateFormat = DEFAULT_DOCUMENT_DATE_FORMAT,
+  timezone = DEFAULT_DOCUMENT_TIME_ZONE,
+  onSignField,
+  onUnsignField,
+}: DocumentSigningDateFieldProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
+
+  const localDateString = convertToLocalSystemFormat(field.customText, dateFormat, timezone);
+
+  const isDifferentTime = field.inserted && localDateString !== field.customText;
+
+  const tooltipText = _(
+    msg`"${field.customText}" will appear on the document as it has a timezone of "${timezone || ''}".`,
+  );
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value: dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
+
+      await revalidate();
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
+
+      await revalidate();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the signature.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <DocumentSigningFieldContainer
+      field={field}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Date"
+      tooltipText={isDifferentTime ? tooltipText : undefined}
+    >
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
+          <Trans>Date</Trans>
+        </p>
+      )}
+
+      {field.inserted && (
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          {localDateString}
+        </p>
+      )}
+    </DocumentSigningFieldContainer>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-disclosure.tsx

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { Link } from 'react-router';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export type DocumentSigningDisclosureProps = HTMLAttributes<HTMLParagraphElement>;
+
+export const DocumentSigningDisclosure = ({
+  className,
+  ...props
+}: DocumentSigningDisclosureProps) => {
+  return (
+    <p className={cn('text-muted-foreground text-xs', className)} {...props}>
+      <Trans>
+        By proceeding with your electronic signature, you acknowledge and consent that it will be
+        used to sign the given document and holds the same legal validity as a handwritten
+        signature. By completing the electronic signing process, you affirm your understanding and
+        acceptance of these conditions.
+      </Trans>
+      <span className="mt-2 block">
+        <Trans>
+          Read the full{' '}
+          <Link
+            className="text-documenso-700 underline"
+            to="/articles/signature-disclosure"
+            target="_blank"
+          >
+            signature disclosure
+          </Link>
+          .
+        </Trans>
+      </span>
+    </p>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx

@@ -0,0 +1,213 @@
+import { useEffect, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import type { Recipient } from '@prisma/client';
+import { Loader } from 'lucide-react';
+import { useRevalidator } from 'react-router';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZDropdownFieldMeta } from '@documenso/lib/types/field-meta';
+import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+
+export type DocumentSigningDropdownFieldProps = {
+  field: FieldWithSignatureAndFieldMeta;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DocumentSigningDropdownField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: DocumentSigningDropdownFieldProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
+
+  const parsedFieldMeta = ZDropdownFieldMeta.parse(field.fieldMeta);
+  const isReadOnly = parsedFieldMeta?.readOnly;
+  const defaultValue = parsedFieldMeta?.defaultValue;
+  const [localChoice, setLocalChoice] = useState(parsedFieldMeta.defaultValue ?? '');
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
+  const shouldAutoSignField =
+    (!field.inserted && localChoice) || (!field.inserted && isReadOnly && defaultValue);
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      if (!localChoice) {
+        return;
+      }
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value: localChoice,
+        isBase64: true,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+      } else {
+        await signFieldWithToken(payload);
+      }
+
+      setLocalChoice('');
+
+      await revalidate();
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onPreSign = () => {
+    return true;
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      } else {
+        await removeSignedFieldWithToken(payload);
+      }
+
+      setLocalChoice('');
+
+      await revalidate();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the signature.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleSelectItem = (val: string) => {
+    setLocalChoice(val);
+  };
+
+  useEffect(() => {
+    if (!field.inserted && localChoice) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, [localChoice]);
+
+  useEffect(() => {
+    if (shouldAutoSignField) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, []);
+
+  return (
+    <div className="pointer-events-none">
+      <DocumentSigningFieldContainer
+        field={field}
+        onPreSign={onPreSign}
+        onSign={onSign}
+        onRemove={onRemove}
+        type="Dropdown"
+      >
+        {isLoading && (
+          <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+            <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+          </div>
+        )}
+
+        {!field.inserted && (
+          <p className="group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200">
+            <Select value={localChoice} onValueChange={handleSelectItem}>
+              <SelectTrigger
+                className={cn(
+                  'text-muted-foreground z-10 h-full w-full border-none ring-0 focus:ring-0',
+                  {
+                    'hover:text-red-300': parsedFieldMeta.required,
+                    'hover:text-yellow-300': !parsedFieldMeta.required,
+                  },
+                )}
+              >
+                <SelectValue
+                  className="text-[clamp(0.425rem,25cqw,0.825rem)]"
+                  placeholder={`${_(msg`Select`)}`}
+                />
+              </SelectTrigger>
+              <SelectContent className="w-full ring-0 focus:ring-0" position="popper">
+                {parsedFieldMeta?.values?.map((item, index) => (
+                  <SelectItem key={index} value={item.value} className="ring-0 focus:ring-0">
+                    {item.value}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </p>
+        )}
+
+        {field.inserted && (
+          <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+            {field.customText}
+          </p>
+        )}
+      </DocumentSigningFieldContainer>
+    </div>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-email-field.tsx

@@ -0,0 +1,135 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Recipient } from '@prisma/client';
+import { Loader } from 'lucide-react';
+import { useRevalidator } from 'react-router';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import { useRequiredDocumentSigningContext } from './document-signing-provider';
+
+export type DocumentSigningEmailFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DocumentSigningEmailField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: DocumentSigningEmailFieldProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const { email: providedEmail } = useRequiredDocumentSigningContext();
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      const value = providedEmail ?? '';
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value,
+        isBase64: false,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
+
+      await revalidate();
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
+
+      await revalidate();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the signature.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <DocumentSigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Email">
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
+          <Trans>Email</Trans>
+        </p>
+      )}
+
+      {field.inserted && (
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          {field.customText}
+        </p>
+      )}
+    </DocumentSigningFieldContainer>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-field-container.tsx

@@ -0,0 +1,187 @@
+import React from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { FieldType } from '@prisma/client';
+import { X } from 'lucide-react';
+
+import { type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { cn } from '@documenso/ui/lib/utils';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+
+export type DocumentSigningFieldContainerProps = {
+  field: FieldWithSignature;
+  loading?: boolean;
+  children: React.ReactNode;
+
+  /**
+   * A function that is called before the field requires to be signed, or reauthed.
+   *
+   * Example, you may want to show a dialog prior to signing where they can enter a value.
+   *
+   * Once that action is complete, you will need to call `executeActionAuthProcedure` to proceed
+   * regardless if it requires reauth or not.
+   *
+   * If the function returns true, we will proceed with the signing process. Otherwise if
+   * false is returned we will not proceed.
+   */
+  onPreSign?: () => Promise<boolean> | boolean;
+
+  /**
+   * The function required to be executed to insert the field.
+   *
+   * The auth values will be passed in if available.
+   */
+  onSign?: (documentAuthValue?: TRecipientActionAuth) => Promise<void> | void;
+  onRemove?: (fieldType?: string) => Promise<void> | void;
+  type?:
+    | 'Date'
+    | 'Initials'
+    | 'Email'
+    | 'Name'
+    | 'Signature'
+    | 'Radio'
+    | 'Dropdown'
+    | 'Number'
+    | 'Checkbox';
+  tooltipText?: string | null;
+};
+
+export const DocumentSigningFieldContainer = ({
+  field,
+  loading,
+  onPreSign,
+  onSign,
+  onRemove,
+  children,
+  type,
+  tooltipText,
+}: DocumentSigningFieldContainerProps) => {
+  const { executeActionAuthProcedure, isAuthRedirectRequired } =
+    useRequiredDocumentSigningAuthContext();
+
+  const parsedFieldMeta = field.fieldMeta ? ZFieldMetaSchema.parse(field.fieldMeta) : undefined;
+  const readOnlyField = parsedFieldMeta?.readOnly || false;
+
+  const handleInsertField = async () => {
+    if (field.inserted || !onSign) {
+      return;
+    }
+
+    // Bypass reauth for non signature fields.
+    if (field.type !== FieldType.SIGNATURE) {
+      const presignResult = await onPreSign?.();
+
+      if (presignResult === false) {
+        return;
+      }
+
+      await onSign();
+      return;
+    }
+
+    if (isAuthRedirectRequired) {
+      await executeActionAuthProcedure({
+        onReauthFormSubmit: () => {
+          // Do nothing since the user should be redirected.
+        },
+        actionTarget: field.type,
+      });
+
+      return;
+    }
+
+    // Handle any presign requirements, and halt if required.
+    if (onPreSign) {
+      const preSignResult = await onPreSign();
+
+      if (preSignResult === false) {
+        return;
+      }
+    }
+
+    await executeActionAuthProcedure({
+      onReauthFormSubmit: onSign,
+      actionTarget: field.type,
+    });
+  };
+
+  const onRemoveSignedFieldClick = async () => {
+    if (!field.inserted) {
+      return;
+    }
+
+    await onRemove?.();
+  };
+
+  const onClearCheckBoxValues = async (fieldType?: string) => {
+    if (!field.inserted) {
+      return;
+    }
+
+    await onRemove?.(fieldType);
+  };
+
+  return (
+    <div className={cn('[container-type:size]', { group: type === 'Checkbox' })}>
+      <FieldRootContainer field={field}>
+        {!field.inserted && !loading && !readOnlyField && (
+          <button
+            type="submit"
+            className="absolute inset-0 z-10 h-full w-full rounded-md border"
+            onClick={async () => handleInsertField()}
+          />
+        )}
+
+        {readOnlyField && (
+          <button className="bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100">
+            <span className="bg-foreground/50 dark:bg-background/50 text-background dark:text-foreground rounded-xl p-2">
+              <Trans>Read only field</Trans>
+            </span>
+          </button>
+        )}
+
+        {type === 'Date' && field.inserted && !loading && !readOnlyField && (
+          <Tooltip delayDuration={0}>
+            <TooltipTrigger asChild>
+              <button
+                className="text-destructive bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
+                onClick={onRemoveSignedFieldClick}
+              >
+                <Trans>Remove</Trans>
+              </button>
+            </TooltipTrigger>
+
+            {tooltipText && <TooltipContent className="max-w-xs">{tooltipText}</TooltipContent>}
+          </Tooltip>
+        )}
+
+        {type === 'Checkbox' && field.inserted && !loading && !readOnlyField && (
+          <button
+            className="dark:bg-background absolute -bottom-10 flex items-center justify-evenly rounded-md border bg-gray-900 opacity-0 group-hover:opacity-100"
+            onClick={() => void onClearCheckBoxValues(type)}
+          >
+            <span className="dark:text-muted-foreground/50 dark:hover:text-muted-foreground dark:hover:bg-foreground/10 rounded-md p-1 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100">
+              <X className="h-4 w-4" />
+            </span>
+          </button>
+        )}
+
+        {type !== 'Date' && type !== 'Checkbox' && field.inserted && !loading && !readOnlyField && (
+          <button
+            className="text-destructive bg-background/50 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
+            onClick={onRemoveSignedFieldClick}
+          >
+            <Trans>Remove</Trans>
+          </button>
+        )}
+
+        {children}
+      </FieldRootContainer>
+    </div>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-form.tsx

@@ -0,0 +1,268 @@
+import { useMemo, useState } from 'react';
+
+import { Trans } from '@lingui/react/macro';
+import { type Field, FieldType, type Recipient, RecipientRole } from '@prisma/client';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+
+import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
+import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
+import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
+import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
+import { trpc } from '@documenso/trpc/react';
+import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
+
+import { DocumentSigningCompleteDialog } from './document-signing-complete-dialog';
+import { useRequiredDocumentSigningContext } from './document-signing-provider';
+
+export type DocumentSigningFormProps = {
+  document: DocumentAndSender;
+  recipient: Recipient;
+  fields: Field[];
+  redirectUrl?: string | null;
+  isRecipientsTurn: boolean;
+};
+
+export const DocumentSigningForm = ({
+  document,
+  recipient,
+  fields,
+  redirectUrl,
+  isRecipientsTurn,
+}: DocumentSigningFormProps) => {
+  const navigate = useNavigate();
+  const analytics = useAnalytics();
+
+  const { user } = useOptionalSession();
+
+  const { fullName, signature, setFullName, setSignature, signatureValid, setSignatureValid } =
+    useRequiredDocumentSigningContext();
+
+  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
+
+  const { mutateAsync: completeDocumentWithToken } =
+    trpc.recipient.completeDocumentWithToken.useMutation();
+
+  const { handleSubmit, formState } = useForm();
+
+  // Keep the loading state going if successful since the redirect may take some time.
+  const isSubmitting = formState.isSubmitting || formState.isSubmitSuccessful;
+
+  const fieldsRequiringValidation = useMemo(
+    () => fields.filter(isFieldUnsignedAndRequired),
+    [fields],
+  );
+
+  const hasSignatureField = fields.some((field) => field.type === FieldType.SIGNATURE);
+
+  const uninsertedFields = useMemo(() => {
+    return sortFieldsByPosition(fieldsRequiringValidation.filter((field) => !field.inserted));
+  }, [fields]);
+
+  const fieldsValidated = () => {
+    setValidateUninsertedFields(true);
+    validateFieldsInserted(fieldsRequiringValidation);
+  };
+
+  const onFormSubmit = async () => {
+    setValidateUninsertedFields(true);
+
+    const isFieldsValid = validateFieldsInserted(fieldsRequiringValidation);
+
+    if (hasSignatureField && !signatureValid) {
+      return;
+    }
+
+    if (!isFieldsValid) {
+      return;
+    }
+
+    await completeDocument();
+
+    // Reauth is currently not required for completing the document.
+    // await executeActionAuthProcedure({
+    //   onReauthFormSubmit: completeDocument,
+    //   actionTarget: 'DOCUMENT',
+    // });
+  };
+
+  const completeDocument = async (authOptions?: TRecipientActionAuth) => {
+    await completeDocumentWithToken({
+      token: recipient.token,
+      documentId: document.id,
+      authOptions,
+    });
+
+    analytics.capture('App: Recipient has completed signing', {
+      signerId: recipient.id,
+      documentId: document.id,
+      timestamp: new Date().toISOString(),
+    });
+
+    if (redirectUrl) {
+      window.location.href = redirectUrl;
+    } else {
+      await navigate(`/sign/${recipient.token}/complete`);
+    }
+  };
+
+  return (
+    <form
+      className={cn(
+        'dark:bg-background border-border bg-widget sticky flex h-full flex-col rounded-xl border px-4 py-6',
+        {
+          'top-20 max-h-[min(68rem,calc(100vh-6rem))]': user,
+          'top-4 max-h-[min(68rem,calc(100vh-2rem))]': !user,
+        },
+      )}
+      onSubmit={handleSubmit(onFormSubmit)}
+    >
+      {validateUninsertedFields && uninsertedFields[0] && (
+        <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
+          <Trans>Click to insert field</Trans>
+        </FieldToolTip>
+      )}
+
+      <fieldset
+        disabled={isSubmitting}
+        className={cn(
+          'custom-scrollbar -mx-2 flex flex-1 flex-col overflow-y-auto overflow-x-hidden px-2',
+        )}
+      >
+        <div className={cn('flex flex-1 flex-col')}>
+          <h3 className="text-foreground text-2xl font-semibold">
+            {recipient.role === RecipientRole.VIEWER && <Trans>View Document</Trans>}
+            {recipient.role === RecipientRole.SIGNER && <Trans>Sign Document</Trans>}
+            {recipient.role === RecipientRole.APPROVER && <Trans>Approve Document</Trans>}
+          </h3>
+
+          {recipient.role === RecipientRole.VIEWER ? (
+            <>
+              <p className="text-muted-foreground mt-2 text-sm">
+                <Trans>Please mark as viewed to complete</Trans>
+              </p>
+
+              <hr className="border-border mb-8 mt-4" />
+
+              <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
+                <div className="flex flex-1 flex-col gap-y-4" />
+                <div className="flex flex-col gap-4 md:flex-row">
+                  <Button
+                    type="button"
+                    className="dark:bg-muted dark:hover:bg-muted/80 w-full bg-black/5 hover:bg-black/10"
+                    variant="secondary"
+                    size="lg"
+                    disabled={typeof window !== 'undefined' && window.history.length <= 1}
+                    onClick={async () => navigate(-1)}
+                  >
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <DocumentSigningCompleteDialog
+                    isSubmitting={isSubmitting}
+                    onSignatureComplete={handleSubmit(onFormSubmit)}
+                    documentTitle={document.title}
+                    fields={fields}
+                    fieldsValidated={fieldsValidated}
+                    role={recipient.role}
+                    disabled={!isRecipientsTurn}
+                  />
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <p className="text-muted-foreground mt-2 text-sm">
+                <Trans>Please review the document before signing.</Trans>
+              </p>
+
+              <hr className="border-border mb-8 mt-4" />
+
+              <div className="-mx-2 flex flex-1 flex-col gap-4 overflow-y-auto px-2">
+                <div className="flex flex-1 flex-col gap-y-4">
+                  <div>
+                    <Label htmlFor="full-name">
+                      <Trans>Full Name</Trans>
+                    </Label>
+
+                    <Input
+                      type="text"
+                      id="full-name"
+                      className="bg-background mt-2"
+                      value={fullName}
+                      onChange={(e) => setFullName(e.target.value.trimStart())}
+                    />
+                  </div>
+
+                  <div>
+                    <Label htmlFor="Signature">
+                      <Trans>Signature</Trans>
+                    </Label>
+
+                    <Card className="mt-2" gradient degrees={-120}>
+                      <CardContent className="p-0">
+                        <SignaturePad
+                          className="h-44 w-full"
+                          disabled={isSubmitting}
+                          defaultValue={signature ?? undefined}
+                          onValidityChange={(isValid) => {
+                            setSignatureValid(isValid);
+                          }}
+                          onChange={(value) => {
+                            if (signatureValid) {
+                              setSignature(value);
+                            }
+                          }}
+                          allowTypedSignature={document.documentMeta?.typedSignatureEnabled}
+                        />
+                      </CardContent>
+                    </Card>
+
+                    {hasSignatureField && !signatureValid && (
+                      <div className="text-destructive mt-2 text-sm">
+                        <Trans>
+                          Signature is too small. Please provide a more complete signature.
+                        </Trans>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex flex-col gap-4 md:flex-row">
+                  <Button
+                    type="button"
+                    className="dark:bg-muted dark:hover:bg-muted/80 w-full bg-black/5 hover:bg-black/10"
+                    variant="secondary"
+                    size="lg"
+                    disabled={typeof window !== 'undefined' && window.history.length <= 1}
+                    onClick={async () => navigate(-1)}
+                  >
+                    <Trans>Cancel</Trans>
+                  </Button>
+
+                  <DocumentSigningCompleteDialog
+                    isSubmitting={isSubmitting}
+                    onSignatureComplete={handleSubmit(onFormSubmit)}
+                    documentTitle={document.title}
+                    fields={fields}
+                    fieldsValidated={fieldsValidated}
+                    role={recipient.role}
+                    disabled={!isRecipientsTurn}
+                  />
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </fieldset>
+    </form>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx

@@ -0,0 +1,142 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Recipient } from '@prisma/client';
+import { Loader } from 'lucide-react';
+import { useRevalidator } from 'react-router';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import { useRequiredDocumentSigningContext } from './document-signing-provider';
+
+export type DocumentSigningInitialsFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DocumentSigningInitialsField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: DocumentSigningInitialsFieldProps) => {
+  const { toast } = useToast();
+  const { _ } = useLingui();
+  const { revalidate } = useRevalidator();
+
+  const { fullName } = useRequiredDocumentSigningContext();
+  const initials = extractInitials(fullName);
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      const value = initials ?? '';
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value,
+        isBase64: false,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
+
+      await revalidate();
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
+
+      await revalidate();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the field.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <DocumentSigningFieldContainer
+      field={field}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Initials"
+    >
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
+          <Trans>Initials</Trans>
+        </p>
+      )}
+
+      {field.inserted && (
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          {field.customText}
+        </p>
+      )}
+    </DocumentSigningFieldContainer>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-name-field.tsx

@@ -0,0 +1,232 @@
+import { useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { type Recipient } from '@prisma/client';
+import { Loader } from 'lucide-react';
+import { useRevalidator } from 'react-router';
+
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { Button } from '@documenso/ui/primitives/button';
+import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { Label } from '@documenso/ui/primitives/label';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import { useRequiredDocumentSigningContext } from './document-signing-provider';
+
+export type DocumentSigningNameFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DocumentSigningNameField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: DocumentSigningNameFieldProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const { fullName: providedFullName, setFullName: setProvidedFullName } =
+    useRequiredDocumentSigningContext();
+
+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
+
+  const [showFullNameModal, setShowFullNameModal] = useState(false);
+  const [localFullName, setLocalFullName] = useState('');
+
+  const onPreSign = () => {
+    if (!providedFullName) {
+      setShowFullNameModal(true);
+      return false;
+    }
+
+    return true;
+  };
+
+  /**
+   * When the user clicks the sign button in the dialog where they enter their full name.
+   */
+  const onDialogSignClick = () => {
+    setShowFullNameModal(false);
+    setProvidedFullName(localFullName);
+
+    void executeActionAuthProcedure({
+      onReauthFormSubmit: async (authOptions) => await onSign(authOptions, localFullName),
+      actionTarget: field.type,
+    });
+  };
+
+  const onSign = async (authOptions?: TRecipientActionAuth, name?: string) => {
+    try {
+      const value = name || providedFullName;
+
+      if (!value) {
+        setShowFullNameModal(true);
+        return;
+      }
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value,
+        isBase64: false,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
+
+      await revalidate();
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
+
+      await revalidate();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the signature.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <DocumentSigningFieldContainer
+      field={field}
+      onPreSign={onPreSign}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Name"
+    >
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
+          <Trans>Name</Trans>
+        </p>
+      )}
+
+      {field.inserted && (
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          {field.customText}
+        </p>
+      )}
+
+      <Dialog open={showFullNameModal} onOpenChange={setShowFullNameModal}>
+        <DialogContent>
+          <DialogTitle>
+            <Trans>
+              Sign as
+              <div>
+                {recipient.name} <div className="text-muted-foreground">({recipient.email})</div>
+              </div>
+            </Trans>
+          </DialogTitle>
+
+          <div>
+            <Label htmlFor="signature">
+              <Trans>Full Name</Trans>
+            </Label>
+
+            <Input
+              type="text"
+              className="mt-2"
+              value={localFullName}
+              onChange={(e) => setLocalFullName(e.target.value.trimStart())}
+            />
+          </div>
+
+          <DialogFooter>
+            <div className="flex w-full flex-1 flex-nowrap gap-4">
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                onClick={() => {
+                  setShowFullNameModal(false);
+                  setLocalFullName('');
+                }}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="button"
+                className="flex-1"
+                disabled={!localFullName}
+                onClick={() => onDialogSignClick()}
+              >
+                <Trans>Sign</Trans>
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </DocumentSigningFieldContainer>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-number-field.tsx

@@ -0,0 +1,347 @@
+import { useEffect, useState } from 'react';
+
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Recipient } from '@prisma/client';
+import { Hash, Loader } from 'lucide-react';
+import { useRevalidator } from 'react-router';
+
+import { validateNumberField } from '@documenso/lib/advanced-fields-validation/validate-number';
+import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZNumberFieldMeta } from '@documenso/lib/types/field-meta';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+import { trpc } from '@documenso/trpc/react';
+import type {
+  TRemovedSignedFieldWithTokenMutationSchema,
+  TSignFieldWithTokenMutationSchema,
+} from '@documenso/trpc/server/field-router/schema';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
+import { Input } from '@documenso/ui/primitives/input';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
+import { DocumentSigningFieldContainer } from './document-signing-field-container';
+
+type ValidationErrors = {
+  isNumber: string[];
+  required: string[];
+  minValue: string[];
+  maxValue: string[];
+  numberFormat: string[];
+};
+
+export type DocumentSigningNumberFieldProps = {
+  field: FieldWithSignature;
+  recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
+};
+
+export const DocumentSigningNumberField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: DocumentSigningNumberFieldProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
+
+  const [showRadioModal, setShowRadioModal] = useState(false);
+
+  const parsedFieldMeta = field.fieldMeta ? ZNumberFieldMeta.parse(field.fieldMeta) : null;
+  const isReadOnly = parsedFieldMeta?.readOnly;
+  const defaultValue = parsedFieldMeta?.value;
+  const [localNumber, setLocalNumber] = useState(
+    parsedFieldMeta?.value ? String(parsedFieldMeta.value) : '0',
+  );
+
+  const initialErrors: ValidationErrors = {
+    isNumber: [],
+    required: [],
+    minValue: [],
+    maxValue: [],
+    numberFormat: [],
+  };
+
+  const [errors, setErrors] = useState(initialErrors);
+
+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
+
+  const { mutateAsync: signFieldWithToken, isPending: isSignFieldWithTokenLoading } =
+    trpc.field.signFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const {
+    mutateAsync: removeSignedFieldWithToken,
+    isPending: isRemoveSignedFieldWithTokenLoading,
+  } = trpc.field.removeSignedFieldWithToken.useMutation(DO_NOT_INVALIDATE_QUERY_ON_MUTATION);
+
+  const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
+
+  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value;
+    setLocalNumber(text);
+
+    if (parsedFieldMeta) {
+      const validationErrors = validateNumberField(text, parsedFieldMeta, true);
+      setErrors({
+        isNumber: validationErrors.filter((error) => error.includes('valid number')),
+        required: validationErrors.filter((error) => error.includes('required')),
+        minValue: validationErrors.filter((error) => error.includes('minimum value')),
+        maxValue: validationErrors.filter((error) => error.includes('maximum value')),
+        numberFormat: validationErrors.filter((error) => error.includes('number format')),
+      });
+    } else {
+      const validationErrors = validateNumberField(text);
+      setErrors((prevErrors) => ({
+        ...prevErrors,
+        isNumber: validationErrors.filter((error) => error.includes('valid number')),
+      }));
+    }
+  };
+
+  const onDialogSignClick = () => {
+    setShowRadioModal(false);
+
+    void executeActionAuthProcedure({
+      onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+      actionTarget: field.type,
+    });
+  };
+
+  const onSign = async (authOptions?: TRecipientActionAuth) => {
+    try {
+      if (!localNumber || Object.values(errors).some((error) => error.length > 0)) {
+        return;
+      }
+
+      const payload: TSignFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+        value: localNumber,
+        isBase64: true,
+        authOptions,
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
+
+      setLocalNumber('');
+
+      await revalidate();
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        throw error;
+      }
+
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while signing the document.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const onPreSign = () => {
+    setShowRadioModal(true);
+
+    if (localNumber && parsedFieldMeta) {
+      const validationErrors = validateNumberField(localNumber, parsedFieldMeta, true);
+      setErrors({
+        isNumber: validationErrors.filter((error) => error.includes('valid number')),
+        required: validationErrors.filter((error) => error.includes('required')),
+        minValue: validationErrors.filter((error) => error.includes('minimum value')),
+        maxValue: validationErrors.filter((error) => error.includes('maximum value')),
+        numberFormat: validationErrors.filter((error) => error.includes('number format')),
+      });
+    }
+
+    return false;
+  };
+
+  const onRemove = async () => {
+    try {
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
+        token: recipient.token,
+        fieldId: field.id,
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
+
+      setLocalNumber(parsedFieldMeta?.value ? String(parsedFieldMeta?.value) : '');
+
+      await revalidate();
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: _(msg`Error`),
+        description: _(msg`An error occurred while removing the signature.`),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!showRadioModal) {
+      setLocalNumber(parsedFieldMeta?.value ? String(parsedFieldMeta.value) : '0');
+      setErrors(initialErrors);
+    }
+  }, [showRadioModal]);
+
+  useEffect(() => {
+    if (
+      (!field.inserted && defaultValue && localNumber) ||
+      (!field.inserted && isReadOnly && defaultValue)
+    ) {
+      void executeActionAuthProcedure({
+        onReauthFormSubmit: async (authOptions) => await onSign(authOptions),
+        actionTarget: field.type,
+      });
+    }
+  }, []);
+
+  let fieldDisplayName = 'Number';
+
+  if (parsedFieldMeta?.label) {
+    fieldDisplayName =
+      parsedFieldMeta.label.length > 10
+        ? parsedFieldMeta.label.substring(0, 10) + '...'
+        : parsedFieldMeta.label;
+  }
+
+  const userInputHasErrors = Object.values(errors).some((error) => error.length > 0);
+
+  return (
+    <DocumentSigningFieldContainer
+      field={field}
+      onPreSign={onPreSign}
+      onSign={onSign}
+      onRemove={onRemove}
+      type="Signature"
+    >
+      {isLoading && (
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+        </div>
+      )}
+
+      {!field.inserted && (
+        <p
+          className={cn(
+            'group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200',
+            {
+              'group-hover:text-yellow-300': !field.inserted && !parsedFieldMeta?.required,
+              'group-hover:text-red-300': !field.inserted && parsedFieldMeta?.required,
+            },
+          )}
+        >
+          <span className="flex items-center justify-center gap-x-1">
+            <Hash className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />{' '}
+            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">{fieldDisplayName}</span>
+          </span>
+        </p>
+      )}
+
+      {field.inserted && (
+        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          {field.customText}
+        </p>
+      )}
+
+      <Dialog open={showRadioModal} onOpenChange={setShowRadioModal}>
+        <DialogContent>
+          <DialogTitle>
+            {parsedFieldMeta?.label ? parsedFieldMeta?.label : <Trans>Number</Trans>}
+          </DialogTitle>
+
+          <div>
+            <Input
+              type="text"
+              placeholder={parsedFieldMeta?.placeholder ?? ''}
+              className={cn('mt-2 w-full rounded-md', {
+                'border-2 border-red-300 ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
+                  userInputHasErrors,
+              })}
+              value={localNumber}
+              onChange={handleNumberChange}
+            />
+          </div>
+
+          {userInputHasErrors && (
+            <div>
+              {errors.isNumber?.map((error, index) => (
+                <p key={index} className="mt-2 text-sm text-red-500">
+                  {error}
+                </p>
+              ))}
+              {errors.required?.map((error, index) => (
+                <p key={index} className="mt-2 text-sm text-red-500">
+                  {error}
+                </p>
+              ))}
+              {errors.minValue?.map((error, index) => (
+                <p key={index} className="mt-2 text-sm text-red-500">
+                  {error}
+                </p>
+              ))}
+              {errors.maxValue?.map((error, index) => (
+                <p key={index} className="mt-2 text-sm text-red-500">
+                  {error}
+                </p>
+              ))}
+              {errors.numberFormat?.map((error, index) => (
+                <p key={index} className="mt-2 text-sm text-red-500">
+                  {error}
+                </p>
+              ))}
+            </div>
+          )}
+
+          <DialogFooter>
+            <div className="flex w-full flex-1 flex-nowrap gap-4">
+              <Button
+                type="button"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                variant="secondary"
+                onClick={() => {
+                  setShowRadioModal(false);
+                  setLocalNumber('');
+                }}
+              >
+                <Trans>Cancel</Trans>
+              </Button>
+
+              <Button
+                type="button"
+                className="flex-1"
+                disabled={!localNumber || userInputHasErrors}
+                onClick={() => onDialogSignClick()}
+              >
+                <Trans>Save</Trans>
+              </Button>
+            </div>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </DocumentSigningFieldContainer>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-page-view.tsx

@@ -0,0 +1,245 @@
+import { Trans } from '@lingui/react/macro';
+import type { Field, Recipient } from '@prisma/client';
+import { FieldType, RecipientRole } from '@prisma/client';
+import { match } from 'ts-pattern';
+
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
+import type { DocumentAndSender } from '@documenso/lib/server-only/document/get-document-by-token';
+import {
+  ZCheckboxFieldMeta,
+  ZDropdownFieldMeta,
+  ZNumberFieldMeta,
+  ZRadioFieldMeta,
+  ZTextFieldMeta,
+} from '@documenso/lib/types/field-meta';
+import type { CompletedField } from '@documenso/lib/types/fields';
+import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
+import { Card, CardContent } from '@documenso/ui/primitives/card';
+import { ElementVisible } from '@documenso/ui/primitives/element-visible';
+import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+
+import { DocumentSigningAutoSign } from '~/components/general/document-signing/document-signing-auto-sign';
+import { DocumentSigningCheckboxField } from '~/components/general/document-signing/document-signing-checkbox-field';
+import { DocumentSigningDateField } from '~/components/general/document-signing/document-signing-date-field';
+import { DocumentSigningDropdownField } from '~/components/general/document-signing/document-signing-dropdown-field';
+import { DocumentSigningEmailField } from '~/components/general/document-signing/document-signing-email-field';
+import { DocumentSigningForm } from '~/components/general/document-signing/document-signing-form';
+import { DocumentSigningInitialsField } from '~/components/general/document-signing/document-signing-initials-field';
+import { DocumentSigningNameField } from '~/components/general/document-signing/document-signing-name-field';
+import { DocumentSigningNumberField } from '~/components/general/document-signing/document-signing-number-field';
+import { DocumentSigningRadioField } from '~/components/general/document-signing/document-signing-radio-field';
+import { DocumentSigningRejectDialog } from '~/components/general/document-signing/document-signing-reject-dialog';
+import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field';
+import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field';
+import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
+
+export type SigningPageViewProps = {
+  document: DocumentAndSender;
+  recipient: Recipient;
+  fields: Field[];
+  completedFields: CompletedField[];
+  isRecipientsTurn: boolean;
+};
+
+export const DocumentSigningPageView = ({
+  document,
+  recipient,
+  fields,
+  completedFields,
+  isRecipientsTurn,
+}: SigningPageViewProps) => {
+  const { documentData, documentMeta } = document;
+
+  const shouldUseTeamDetails =
+    document.teamId && document.team?.teamGlobalSettings?.includeSenderDetails === false;
+
+  let senderName = document.user.name ?? '';
+  let senderEmail = `(${document.user.email})`;
+
+  if (shouldUseTeamDetails) {
+    senderName = document.team?.name ?? '';
+    senderEmail = document.team?.teamEmail?.email ? `(${document.team.teamEmail.email})` : '';
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-screen-xl">
+      <h1
+        className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+        title={document.title}
+      >
+        {document.title}
+      </h1>
+
+      <div className="mt-2.5 flex flex-wrap items-center justify-between gap-x-6">
+        <div className="max-w-[50ch]">
+          <span className="text-muted-foreground truncate" title={senderName}>
+            {senderName} {senderEmail}
+          </span>{' '}
+          <span className="text-muted-foreground">
+            {match(recipient.role)
+              .with(RecipientRole.VIEWER, () =>
+                document.teamId && !shouldUseTeamDetails ? (
+                  <Trans>
+                    on behalf of "{document.team?.name}" has invited you to view this document
+                  </Trans>
+                ) : (
+                  <Trans>has invited you to view this document</Trans>
+                ),
+              )
+              .with(RecipientRole.SIGNER, () =>
+                document.teamId && !shouldUseTeamDetails ? (
+                  <Trans>
+                    on behalf of "{document.team?.name}" has invited you to sign this document
+                  </Trans>
+                ) : (
+                  <Trans>has invited you to sign this document</Trans>
+                ),
+              )
+              .with(RecipientRole.APPROVER, () =>
+                document.teamId && !shouldUseTeamDetails ? (
+                  <Trans>
+                    on behalf of "{document.team?.name}" has invited you to approve this document
+                  </Trans>
+                ) : (
+                  <Trans>has invited you to approve this document</Trans>
+                ),
+              )
+              .otherwise(() => null)}
+          </span>
+        </div>
+
+        <DocumentSigningRejectDialog document={document} token={recipient.token} />
+      </div>
+
+      <div className="mt-8 grid grid-cols-12 gap-y-8 lg:gap-x-8 lg:gap-y-0">
+        <Card
+          className="col-span-12 rounded-xl before:rounded-xl lg:col-span-7 xl:col-span-8"
+          gradient
+        >
+          <CardContent className="p-2">
+            <LazyPDFViewer
+              key={documentData.id}
+              documentData={documentData}
+              document={document}
+              password={documentMeta?.password}
+            />
+          </CardContent>
+        </Card>
+
+        <div className="col-span-12 lg:col-span-5 xl:col-span-4">
+          <DocumentSigningForm
+            document={document}
+            recipient={recipient}
+            fields={fields}
+            redirectUrl={documentMeta?.redirectUrl}
+            isRecipientsTurn={isRecipientsTurn}
+          />
+        </div>
+      </div>
+
+      <DocumentReadOnlyFields fields={completedFields} />
+
+      <DocumentSigningAutoSign recipient={recipient} fields={fields} />
+
+      <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+        {fields.map((field) =>
+          match(field.type)
+            .with(FieldType.SIGNATURE, () => (
+              <DocumentSigningSignatureField
+                key={field.id}
+                field={field}
+                recipient={recipient}
+                typedSignatureEnabled={documentMeta?.typedSignatureEnabled}
+              />
+            ))
+            .with(FieldType.INITIALS, () => (
+              <DocumentSigningInitialsField key={field.id} field={field} recipient={recipient} />
+            ))
+            .with(FieldType.NAME, () => (
+              <DocumentSigningNameField key={field.id} field={field} recipient={recipient} />
+            ))
+            .with(FieldType.DATE, () => (
+              <DocumentSigningDateField
+                key={field.id}
+                field={field}
+                recipient={recipient}
+                dateFormat={documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT}
+                timezone={documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE}
+              />
+            ))
+            .with(FieldType.EMAIL, () => (
+              <DocumentSigningEmailField key={field.id} field={field} recipient={recipient} />
+            ))
+            .with(FieldType.TEXT, () => {
+              const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                ...field,
+                fieldMeta: field.fieldMeta ? ZTextFieldMeta.parse(field.fieldMeta) : null,
+              };
+              return (
+                <DocumentSigningTextField
+                  key={field.id}
+                  field={fieldWithMeta}
+                  recipient={recipient}
+                />
+              );
+            })
+            .with(FieldType.NUMBER, () => {
+              const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                ...field,
+                fieldMeta: field.fieldMeta ? ZNumberFieldMeta.parse(field.fieldMeta) : null,
+              };
+              return (
+                <DocumentSigningNumberField
+                  key={field.id}
+                  field={fieldWithMeta}
+                  recipient={recipient}
+                />
+              );
+            })
+            .with(FieldType.RADIO, () => {
+              const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                ...field,
+                fieldMeta: field.fieldMeta ? ZRadioFieldMeta.parse(field.fieldMeta) : null,
+              };
+              return (
+                <DocumentSigningRadioField
+                  key={field.id}
+                  field={fieldWithMeta}
+                  recipient={recipient}
+                />
+              );
+            })
+            .with(FieldType.CHECKBOX, () => {
+              const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                ...field,
+                fieldMeta: field.fieldMeta ? ZCheckboxFieldMeta.parse(field.fieldMeta) : null,
+              };
+              return (
+                <DocumentSigningCheckboxField
+                  key={field.id}
+                  field={fieldWithMeta}
+                  recipient={recipient}
+                />
+              );
+            })
+            .with(FieldType.DROPDOWN, () => {
+              const fieldWithMeta: FieldWithSignatureAndFieldMeta = {
+                ...field,
+                fieldMeta: field.fieldMeta ? ZDropdownFieldMeta.parse(field.fieldMeta) : null,
+              };
+              return (
+                <DocumentSigningDropdownField
+                  key={field.id}
+                  field={fieldWithMeta}
+                  recipient={recipient}
+                />
+              );
+            })
+            .otherwise(() => null),
+        )}
+      </ElementVisible>
+    </div>
+  );
+};