feat: add integrations animation on the homepage

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>

.env.example

@@ -13,6 +13,10 @@ NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="DEADBEEF"
 NEXT_PRIVATE_GOOGLE_CLIENT_ID=""
 NEXT_PRIVATE_GOOGLE_CLIENT_SECRET=""
 
+NEXT_PRIVATE_OIDC_WELL_KNOWN=""
+NEXT_PRIVATE_OIDC_CLIENT_ID=""
+NEXT_PRIVATE_OIDC_CLIENT_SECRET=""
+
 # [[URLS]]
 NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
 NEXT_PUBLIC_MARKETING_URL="http://localhost:3001"

apps/marketing/package.json

@@ -36,7 +36,7 @@
     "react-confetti": "^6.1.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.9",
-    "react-icons": "^4.11.0",
+    "react-icons": "^5.2.1",
     "recharts": "^2.7.2",
     "sharp": "^0.33.1",
     "typescript": "5.2.2",

apps/marketing/src/app/(marketing)/open/monthly-completed-documents-chart.tsx

@@ -3,11 +3,11 @@
 import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
-import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+import type { GetCompletedDocumentsMonthlyResult } from '@documenso/lib/server-only/user/get-monthly-completed-document';
 
 export type MonthlyCompletedDocumentsChartProps = {
   className?: string;
-  data: GetUserMonthlyGrowthResult;
+  data: GetCompletedDocumentsMonthlyResult;
 };
 
 export const MonthlyCompletedDocumentsChart = ({

apps/marketing/src/app/(marketing)/open/total-signed-documents-chart.tsx

@@ -3,11 +3,11 @@
 import { DateTime } from 'luxon';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
-import type { GetUserMonthlyGrowthResult } from '@documenso/lib/server-only/user/get-user-monthly-growth';
+import type { GetCompletedDocumentsMonthlyResult } from '@documenso/lib/server-only/user/get-monthly-completed-document';
 
 export type TotalSignedDocumentsChartProps = {
   className?: string;
-  data: GetUserMonthlyGrowthResult;
+  data: GetCompletedDocumentsMonthlyResult;
 };
 
 export const TotalSignedDocumentsChart = ({ className, data }: TotalSignedDocumentsChartProps) => {

apps/marketing/src/components/(marketing)/integrations-data-flow.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import React, { forwardRef, useRef } from 'react';
+
+import { FileText, Hexagon, Shapes } from 'lucide-react';
+import { LiaGoogleDrive } from 'react-icons/lia';
+import { PiMicrosoftTeamsLogo } from 'react-icons/pi';
+import { TbBrandAirtable, TbBrandZapier } from 'react-icons/tb';
+
+import { AnimatedDataFlow } from '@documenso/ui/components/animate/animated-data-flow';
+import { cn } from '@documenso/ui/lib/utils';
+
+// eslint-disable-next-line react/display-name
+const Circle = forwardRef<HTMLDivElement, { className?: string; children?: React.ReactNode }>(
+  ({ className, children }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'border-border z-10 flex h-12 w-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]',
+          className,
+        )}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+export function DocumensoIntegrationsDataFlow() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const div1Ref = useRef<HTMLDivElement>(null);
+  const div2Ref = useRef<HTMLDivElement>(null);
+  const div3Ref = useRef<HTMLDivElement>(null);
+  const div4Ref = useRef<HTMLDivElement>(null);
+  const div5Ref = useRef<HTMLDivElement>(null);
+  const div6Ref = useRef<HTMLDivElement>(null);
+  const div7Ref = useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      className="bg-background relative z-[-2] flex h-full w-full max-w-[32rem] items-center justify-center overflow-hidden p-10"
+      ref={containerRef}
+    >
+      <div className="flex h-full w-full flex-row items-stretch justify-between gap-10">
+        <div className="flex flex-col justify-center gap-2">
+          <Circle className="bg-background" ref={div1Ref}>
+            <Shapes color="#A2E771" className="h-6 w-6" />
+          </Circle>
+          <Circle className="bg-background" ref={div2Ref}>
+            <Hexagon color="#A2E771" className="h-6 w-6" />
+          </Circle>
+          <Circle className="bg-background" ref={div3Ref}>
+            <FileText color="#A2E771" className="h-6 w-6" />
+          </Circle>
+        </div>
+        <div className="flex flex-col justify-center">
+          <Circle ref={div4Ref} className="bg-background h-16 w-16">
+            <TbBrandZapier color="#FF4A00" className="h-6 w-6" />
+          </Circle>
+        </div>
+        <div className="flex flex-col justify-center gap-2">
+          <Circle className="bg-background" ref={div5Ref}>
+            <LiaGoogleDrive color="#A2E771" className="h-6 w-6" />
+          </Circle>
+          <Circle className="bg-background" ref={div6Ref}>
+            <PiMicrosoftTeamsLogo color="#A2E771" className="h-6 w-6" />
+          </Circle>
+          <Circle className="bg-background" ref={div7Ref}>
+            <TbBrandAirtable color="#A2E771" className="h-6 w-6" />
+          </Circle>
+        </div>
+      </div>
+
+      <AnimatedDataFlow containerRef={containerRef} fromRef={div1Ref} toRef={div4Ref} />
+      <AnimatedDataFlow containerRef={containerRef} fromRef={div2Ref} toRef={div4Ref} />
+      <AnimatedDataFlow containerRef={containerRef} fromRef={div3Ref} toRef={div4Ref} />
+      <AnimatedDataFlow containerRef={containerRef} fromRef={div4Ref} toRef={div5Ref} />
+      <AnimatedDataFlow containerRef={containerRef} fromRef={div4Ref} toRef={div6Ref} />
+      <AnimatedDataFlow containerRef={containerRef} fromRef={div4Ref} toRef={div7Ref} />
+    </div>
+  );
+}

apps/marketing/src/components/(marketing)/share-connect-paid-widget-bento.tsx

@@ -3,13 +3,14 @@ import type { HTMLAttributes } from 'react';
 import Image from 'next/image';
 
 import backgroundPattern from '@documenso/assets/images/background-pattern.png';
-import cardConnectionsFigure from '@documenso/assets/images/card-connections-figure.png';
 import cardPaidFigure from '@documenso/assets/images/card-paid-figure.png';
 import cardSharingFigure from '@documenso/assets/images/card-sharing-figure.png';
 import cardWidgetFigure from '@documenso/assets/images/card-widget-figure.png';
 import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 
+import { DocumensoIntegrationsDataFlow } from './integrations-data-flow';
+
 export type ShareConnectPaidWidgetBentoProps = HTMLAttributes<HTMLDivElement>;
 
 export const ShareConnectPaidWidgetBento = ({
@@ -56,12 +57,9 @@ export const ShareConnectPaidWidgetBento = ({
               favorite tools.
             </p>
 
-            <div className="flex items-center justify-center p-8">
-              <Image
-                src={cardConnectionsFigure}
-                alt="its fast"
-                className="w-full max-w-sm dark:contrast-[70%] dark:hue-rotate-180 dark:invert"
-              />
+            <div className="flex w-full items-center justify-center p-0 md:p-8">
+              {/* Add Animated Beam */}
+              <DocumensoIntegrationsDataFlow />
             </div>
           </CardContent>
         </Card>
@@ -70,7 +68,7 @@ export const ShareConnectPaidWidgetBento = ({
           <CardContent className="grid grid-cols-1 gap-8 p-6">
             <p className="text-foreground/80 leading-relaxed">
               <strong className="block">Get paid (Soon).</strong>
-              Integrated payments with stripe so you don’t have to worry about getting paid.
+              Integrated payments with Stripe so you don’t have to worry about getting paid.
             </p>
 
             <div className="flex items-center justify-center p-8">

apps/marketing/src/pages/api/stripe/webhook/index.ts

@@ -13,6 +13,7 @@ import { updateFile } from '@documenso/lib/universal/upload/update-file';
 import { prisma } from '@documenso/prisma';
 import {
   DocumentDataType,
+  DocumentSource,
   DocumentStatus,
   FieldType,
   ReadStatus,
@@ -104,6 +105,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
       const document = await prisma.document.create({
         data: {
+          source: DocumentSource.DOCUMENT,
           title: 'Documenso Supporter Pledge.pdf',
           status: DocumentStatus.COMPLETED,
           userId: user.id,

apps/web/package.json

@@ -46,7 +46,7 @@
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.43.9",
     "react-hotkeys-hook": "^4.4.1",
-    "react-icons": "^4.11.0",
+    "react-icons": "^5.2.1",
     "react-rnd": "^10.4.1",
     "remeda": "^1.27.1",
     "sharp": "^0.33.1",

apps/web/process-env.d.ts

@@ -12,5 +12,9 @@ declare namespace NodeJS {
 
     NEXT_PRIVATE_GOOGLE_CLIENT_ID: string;
     NEXT_PRIVATE_GOOGLE_CLIENT_SECRET: string;
+
+    NEXT_PRIVATE_OIDC_WELL_KNOWN: string;
+    NEXT_PRIVATE_OIDC_CLIENT_ID: string;
+    NEXT_PRIVATE_OIDC_CLIENT_SECRET: string;
   }
 }

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

@@ -256,6 +256,7 @@ export const EditTemplateForm = ({
               documentFlow={documentFlow.signers}
               recipients={recipients}
               fields={fields}
+              templateDirectLink={template.directLink}
               onSubmit={onAddTemplatePlaceholderFormSubmit}
               isEnterprise={isEnterprise}
               isDocumentPdfLoaded={isDocumentPdfLoaded}

apps/web/src/app/(dashboard)/templates/[id]/template-direct-link-dialog-wrapper.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import React, { useState } from 'react';
+
+import { LinkIcon } from 'lucide-react';
+
+import type { Recipient, Template, TemplateDirectLink } from '@documenso/prisma/client';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { TemplateDirectLinkDialog } from '../template-direct-link-dialog';
+
+export type TemplatePageViewProps = {
+  template: Template & { directLink?: TemplateDirectLink | null; Recipient: Recipient[] };
+};
+
+export const TemplateDirectLinkDialogWrapper = ({ template }: TemplatePageViewProps) => {
+  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 ? 'Manage' : 'Create'} Direct Link
+      </Button>
+
+      <TemplateDirectLinkDialog
+        template={template}
+        open={isTemplateDirectLinkOpen}
+        onOpenChange={setTemplateDirectLinkOpen}
+      />
+    </div>
+  );
+};

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

@@ -13,7 +13,9 @@ import type { Team } from '@documenso/prisma/client';
 
 import { TemplateType } from '~/components/formatter/template-type';
 
+import { TemplateDirectLinkBadge } from '../template-direct-link-badge';
 import { EditTemplateForm } from './edit-template';
+import { TemplateDirectLinkDialogWrapper } from './template-direct-link-dialog-wrapper';
 
 export type TemplatePageViewProps = {
   params: {
@@ -50,17 +52,33 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
 
   return (
     <div className="mx-auto -mt-4 max-w-screen-xl px-4 md:px-8">
-      <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
-        <ChevronLeft className="mr-2 inline-block h-5 w-5" />
-        Templates
-      </Link>
+      <div className="flex flex-col justify-between sm:flex-row">
+        <div>
+          <Link href="/templates" className="flex items-center text-[#7AC455] hover:opacity-80">
+            <ChevronLeft className="mr-2 inline-block h-5 w-5" />
+            Templates
+          </Link>
 
-      <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>
-        {template.title}
-      </h1>
+          <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>
+            {template.title}
+          </h1>
 
-      <div className="mt-2.5 flex items-center gap-x-6">
-        <TemplateType inheritColor type={template.type} className="text-muted-foreground" />
+          <div className="mt-2.5 flex items-center">
+            <TemplateType inheritColor className="text-muted-foreground" type={template.type} />
+
+            {template.directLink?.token && (
+              <TemplateDirectLinkBadge
+                className="ml-4"
+                token={template.directLink.token}
+                enabled={template.directLink.enabled}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="mt-2 sm:mt-0 sm:self-end">
+          <TemplateDirectLinkDialogWrapper template={template} />
+        </div>
       </div>
 
       <EditTemplateForm

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

@@ -4,10 +4,10 @@ import { useState } from 'react';
 
 import Link from 'next/link';
 
-import { Copy, Edit, MoreHorizontal, Trash2 } from 'lucide-react';
+import { Copy, Edit, MoreHorizontal, Share2Icon, Trash2 } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 
-import type { Template } from '@documenso/prisma/client';
+import { type FindTemplateRow } from '@documenso/lib/server-only/template/find-templates';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -18,9 +18,10 @@ import {
 
 import { DeleteTemplateDialog } from './delete-template-dialog';
 import { DuplicateTemplateDialog } from './duplicate-template-dialog';
+import { TemplateDirectLinkDialog } from './template-direct-link-dialog';
 
 export type DataTableActionDropdownProps = {
-  row: Template;
+  row: FindTemplateRow;
   templateRootPath: string;
   teamId?: number;
 };
@@ -33,6 +34,7 @@ export const DataTableActionDropdown = ({
   const { data: session } = useSession();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isTemplateDirectLinkDialogOpen, setTemplateDirectLinkDialogOpen] = useState(false);
   const [isDuplicateDialogOpen, setDuplicateDialogOpen] = useState(false);
 
   if (!session) {
@@ -66,6 +68,11 @@ export const DataTableActionDropdown = ({
           Duplicate
         </DropdownMenuItem>
 
+        <DropdownMenuItem onClick={() => setTemplateDirectLinkDialogOpen(true)}>
+          <Share2Icon className="mr-2 h-4 w-4" />
+          Direct link
+        </DropdownMenuItem>
+
         <DropdownMenuItem
           disabled={!isOwner && !isTeamTemplate}
           onClick={() => setDeleteDialogOpen(true)}
@@ -82,6 +89,12 @@ export const DataTableActionDropdown = ({
         onOpenChange={setDuplicateDialogOpen}
       />
 
+      <TemplateDirectLinkDialog
+        template={row}
+        open={isTemplateDirectLinkDialogOpen}
+        onOpenChange={setTemplateDirectLinkDialogOpen}
+      />
+
       <DeleteTemplateDialog
         id={row.id}
         open={isDeleteDialogOpen}

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

@@ -4,32 +4,26 @@ import { useTransition } from 'react';
 
 import Link from 'next/link';
 
-import { AlertTriangle, Loader } from 'lucide-react';
+import { AlertTriangle, Globe2Icon, InfoIcon, Link2Icon, Loader, LockIcon } from 'lucide-react';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
-import type { Recipient, Template } from '@documenso/prisma/client';
+import type { FindTemplateRow } from '@documenso/lib/server-only/template/find-templates';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 import { LocaleDate } from '~/components/formatter/locale-date';
 import { TemplateType } from '~/components/formatter/template-type';
 
 import { DataTableActionDropdown } from './data-table-action-dropdown';
 import { DataTableTitle } from './data-table-title';
+import { TemplateDirectLinkBadge } from './template-direct-link-badge';
 import { UseTemplateDialog } from './use-template-dialog';
 
-type TemplateWithRecipient = Template & {
-  Recipient: Recipient[];
-};
-
 type TemplatesDataTableProps = {
-  templates: Array<
-    TemplateWithRecipient & {
-      team: { id: number; url: string } | null;
-    }
-  >;
+  templates: FindTemplateRow[];
   perPage: number;
   page: number;
   totalPages: number;
@@ -48,6 +42,7 @@ export const TemplatesDataTable = ({
   teamId,
 }: TemplatesDataTableProps) => {
   const [isPending, startTransition] = useTransition();
+
   const updateSearchParams = useUpdateSearchParams();
 
   const { remaining } = useLimits();
@@ -88,9 +83,70 @@ export const TemplatesDataTable = ({
             cell: ({ row }) => <DataTableTitle row={row.original} />,
           },
           {
-            header: 'Type',
+            header: () => (
+              <div className="flex flex-row items-center">
+                Type
+                <Tooltip>
+                  <TooltipTrigger>
+                    <InfoIcon className="mx-2 h-4 w-4" />
+                  </TooltipTrigger>
+
+                  <TooltipContent className="text-foreground max-w-md space-y-2 !p-0">
+                    <ul className="text-muted-foreground space-y-0.5 divide-y [&>li]:p-4">
+                      <li>
+                        <h2 className="mb-2 flex flex-row items-center font-semibold">
+                          <Globe2Icon className="mr-2 h-5 w-5 text-green-500 dark:text-green-300" />
+                          Public
+                        </h2>
+
+                        <p>
+                          Public templates are connected to your public profile. Any modifications
+                          to public templates will also appear in your public profile.
+                        </p>
+                      </li>
+                      <li>
+                        <div className="mb-2 flex w-fit flex-row items-center rounded border border-neutral-300 bg-neutral-200 px-1.5 py-0.5 text-xs dark:border-neutral-500 dark:bg-neutral-600">
+                          <Link2Icon className="mr-1 h-3 w-3" />
+                          direct link
+                        </div>
+
+                        <p>
+                          Direct link templates contain one dynamic recipient placeholder. Anyone
+                          with access to this link can sign the document, and it will then appear on
+                          your documents page.
+                        </p>
+                      </li>
+                      <li>
+                        <h2 className="mb-2 flex flex-row items-center font-semibold">
+                          <LockIcon className="mr-2 h-5 w-5 text-blue-600 dark:text-blue-300" />
+                          {teamId ? 'Team Only' : 'Private'}
+                        </h2>
+
+                        <p>
+                          {teamId
+                            ? 'Team only templates are not linked anywhere and are visible only to your team.'
+                            : 'Private templates can only be modified and viewed by you.'}
+                        </p>
+                      </li>
+                    </ul>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+            ),
             accessorKey: 'type',
-            cell: ({ row }) => <TemplateType type={row.original.type} />,
+            cell: ({ row }) => (
+              <div className="flex flex-row items-center">
+                <TemplateType type="PRIVATE" />
+
+                {row.original.directLink?.token && (
+                  <TemplateDirectLinkBadge
+                    className="ml-2"
+                    token={row.original.directLink.token}
+                    enabled={row.original.directLink.enabled}
+                  />
+                )}
+              </div>
+            ),
           },
           {
             header: 'Actions',

apps/web/src/app/(dashboard)/templates/template-direct-link-badge.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { Link2Icon } from 'lucide-react';
+
+import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
+import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
+import { cn } from '@documenso/ui/lib/utils';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+type TemplateDirectLinkBadgeProps = {
+  token: string;
+  enabled: boolean;
+  className?: string;
+};
+
+export const TemplateDirectLinkBadge = ({
+  token,
+  enabled,
+  className,
+}: TemplateDirectLinkBadgeProps) => {
+  const [, copy] = useCopyToClipboard();
+  const { toast } = useToast();
+
+  const onCopyClick = async (token: string) =>
+    copy(formatDirectTemplatePath(token)).then(() => {
+      toast({
+        title: 'Copied to clipboard',
+        description: 'The direct link has been copied to your clipboard',
+      });
+    });
+
+  return (
+    <button
+      title="Copy direct link"
+      className={cn(
+        'flex flex-row items-center rounded border border-neutral-300 bg-neutral-200 px-1.5 py-0.5 text-xs dark:border-neutral-500 dark:bg-neutral-600',
+        className,
+      )}
+      onClick={async () => onCopyClick(token)}
+    >
+      <Link2Icon className="mr-1 h-3 w-3" />
+      direct link {!enabled && 'disabled'}
+    </button>
+  );
+};

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

@@ -0,0 +1,448 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+import { CircleDotIcon, CircleIcon, ClipboardCopyIcon, InfoIcon, LoaderIcon } from 'lucide-react';
+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 { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import {
+  DIRECT_TEMPLATE_DOCUMENTATION,
+  DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+} from '@documenso/lib/constants/template';
+import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
+import {
+  type Recipient,
+  RecipientRole,
+  type Template,
+  type TemplateDirectLink,
+} from '@documenso/prisma/client';
+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;
+    Recipient: 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 [, copy] = useCopyToClipboard();
+  const router = useRouter();
+
+  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.Recipient.filter((recipient) => recipient.role !== RecipientRole.CC),
+    [template.Recipient],
+  );
+
+  const {
+    mutateAsync: createTemplateDirectLink,
+    isLoading: isCreatingTemplateDirectLink,
+    reset: resetCreateTemplateDirectLink,
+  } = trpcReact.template.createTemplateDirectLink.useMutation({
+    onSuccess: (data) => {
+      setToken(data.token);
+      setIsEnabled(data.enabled);
+      setCurrentStep('MANAGE');
+
+      router.refresh();
+    },
+    onError: () => {
+      setSelectedRecipientId(null);
+
+      toast({
+        title: 'Something went wrong',
+        description: 'Unable to create direct template access. Please try again later.',
+        variant: 'destructive',
+      });
+    },
+  });
+
+  const { mutateAsync: toggleTemplateDirectLink, isLoading: isTogglingTemplateAccess } =
+    trpcReact.template.toggleTemplateDirectLink.useMutation({
+      onSuccess: (data) => {
+        toast({
+          title: 'Success',
+          description: `Direct link signing has been ${data.enabled ? 'enabled' : 'disabled'}`,
+        });
+      },
+      onError: (_ctx, data) => {
+        toast({
+          title: 'Something went wrong',
+          description: `An error occurred while ${
+            data.enabled ? 'enabling' : 'disabling'
+          } direct link signing.`,
+          variant: 'destructive',
+        });
+      },
+    });
+
+  const { mutateAsync: deleteTemplateDirectLink, isLoading: isDeletingTemplateDirectLink } =
+    trpcReact.template.deleteTemplateDirectLink.useMutation({
+      onSuccess: () => {
+        onOpenChange(false);
+        setToken(null);
+
+        toast({
+          title: 'Success',
+          description: 'Direct template link deleted',
+          duration: 5000,
+        });
+
+        router.refresh();
+        setToken(null);
+      },
+      onError: () => {
+        toast({
+          title: 'Something went wrong',
+          description:
+            '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: 'Copied to clipboard',
+        description: '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>Create Direct Signing Link</DialogTitle>
+
+                  <DialogDescription>Here's how it works:</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>
+                      Direct template link usage exceeded ({quota.directTemplates}/
+                      {quota.directTemplates})
+                    </AlertTitle>
+                    <AlertDescription>
+                      You have reached the maximum limit of {quota.directTemplates} direct
+                      templates.{' '}
+                      <Link
+                        className="mt-1 block underline underline-offset-4"
+                        href="/settings/billing"
+                      >
+                        Upgrade your account to continue!
+                      </Link>
+                    </AlertDescription>
+                  </Alert>
+                )}
+
+                {remaining.directTemplates !== 0 && (
+                  <DialogFooter className="mx-auto mt-4">
+                    <Button type="button" onClick={() => setCurrentStep('SELECT_RECIPIENT')}>
+                      Enable direct link signing
+                    </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>Choose Direct Link Recipient</DialogTitle>
+
+                  <DialogDescription>
+                    Choose an existing recipient from below to continue
+                  </DialogDescription>
+                </DialogHeader>
+
+                <div className="custom-scrollbar max-h-[60vh] overflow-y-auto rounded-md border">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Recipient</TableHead>
+                        <TableHead>Role</TableHead>
+                        <TableHead></TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {validDirectTemplateRecipients.length === 0 && (
+                        <TableRow>
+                          <TableCell colSpan={3} className="h-16 text-center">
+                            <p className="text-muted-foreground">No valid recipients found</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.Recipient.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">Or</p>
+                      )}
+
+                      <Button
+                        type="button"
+                        className="mt-2"
+                        loading={isCreatingTemplateDirectLink && !selectedRecipientId}
+                        onClick={async () =>
+                          createTemplateDirectLink({
+                            templateId: template.id,
+                          })
+                        }
+                      >
+                        Create one automatically
+                      </Button>
+                    </div>
+                  </DialogFooter>
+                )}
+              </DialogContent>
+            ))
+            .with({ token: P.string, currentStep: 'MANAGE' }, ({ token }) => (
+              <DialogContent className="relative">
+                <DialogHeader>
+                  <DialogTitle>Direct Link Signing</DialogTitle>
+
+                  <DialogDescription>
+                    Manage the direct link signing for this template
+                  </DialogDescription>
+                </DialogHeader>
+
+                <div>
+                  <div className="flex flex-row items-center justify-between">
+                    <Label className="flex flex-row">
+                      Enable Direct Link Signing
+                      <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">
+                          Disabling direct link signing will prevent anyone from accessing the link.
+                        </TooltipContent>
+                      </Tooltip>
+                    </Label>
+
+                    <Switch
+                      className="mt-2"
+                      checked={isEnabled}
+                      onCheckedChange={(value) => setIsEnabled(value)}
+                    />
+                  </div>
+
+                  <div className="mt-2">
+                    <Label htmlFor="copy-direct-link">Copy Shareable Link</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')}
+                  >
+                    Remove
+                  </Button>
+
+                  <Button
+                    type="button"
+                    loading={isTogglingTemplateAccess}
+                    onClick={async () =>
+                      toggleTemplateDirectLink({
+                        templateId: template.id,
+                        enabled: isEnabled,
+                      })
+                    }
+                  >
+                    Save
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            ))
+            .with({ token: P.string, currentStep: 'CONFIRM_DELETE' }, () => (
+              <DialogContent className="relative">
+                <DialogHeader>
+                  <DialogTitle>Are you sure?</DialogTitle>
+
+                  <DialogDescription>
+                    Please note that proceeding will remove direct linking recipient and turn it
+                    into a placeholder.
+                  </DialogDescription>
+                </DialogHeader>
+
+                <DialogFooter>
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    onClick={() => setCurrentStep('MANAGE')}
+                  >
+                    Cancel
+                  </Button>
+
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    loading={isDeletingTemplateDirectLink}
+                    onClick={() => void deleteTemplateDirectLink({ templateId: template.id })}
+                  >
+                    Confirm
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            ))
+            .otherwise(() => null)}
+        </AnimateGenericFadeInOut>
+      </fieldset>
+    </Dialog>
+  );
+};

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

@@ -172,7 +172,7 @@ export function UseTemplateDialog({
   return (
     <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)}>
       <DialogTrigger asChild>
-        <Button className="cursor-pointer">
+        <Button variant="outline" className="bg-background">
           <Plus className="-ml-1 mr-2 h-4 w-4" />
           Use Template
         </Button>

apps/web/src/app/(recipient)/d/[token]/configure-direct-template.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useSession } from 'next-auth/react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import type { Field, Recipient } from '@documenso/prisma/client';
+import type { TemplateWithDetails } from '@documenso/prisma/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 { useRequiredDocumentAuthContext } from '~/app/(signing)/sign/[token]/document-auth-provider';
+
+const ZConfigureDirectTemplateFormSchema = z.object({
+  email: z.string().email('Email is invalid'),
+});
+
+export type TConfigureDirectTemplateFormSchema = z.infer<typeof ZConfigureDirectTemplateFormSchema>;
+
+export type ConfigureDirectTemplateFormProps = {
+  flowStep: DocumentFlowStep;
+  isDocumentPdfLoaded: boolean;
+  template: TemplateWithDetails;
+  directTemplateRecipient: Recipient & { Field: Field[] };
+  initialEmail?: string;
+  onSubmit: (_data: TConfigureDirectTemplateFormSchema) => void;
+};
+
+export const ConfigureDirectTemplateFormPartial = ({
+  flowStep,
+  isDocumentPdfLoaded,
+  template,
+  directTemplateRecipient,
+  initialEmail,
+  onSubmit,
+}: ConfigureDirectTemplateFormProps) => {
+  const { Recipient } = template;
+  const { derivedRecipientAccessAuth } = useRequiredDocumentAuthContext();
+  const { data: session } = useSession();
+
+  const recipientsWithBlankDirectRecipientEmail = Recipient.map((recipient) => {
+    if (recipient.id === directTemplateRecipient.id) {
+      return {
+        ...recipient,
+        email: '',
+      };
+    }
+
+    return recipient;
+  });
+
+  const form = useForm<TConfigureDirectTemplateFormSchema>({
+    resolver: zodResolver(
+      ZConfigureDirectTemplateFormSchema.superRefine((items, ctx) => {
+        if (template.Recipient.map((recipient) => recipient.email).includes(items.email)) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: '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.Field.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>Email</FormLabel>
+
+                  <FormControl>
+                    <Input
+                      {...field}
+                      disabled={
+                        field.disabled ||
+                        derivedRecipientAccessAuth !== null ||
+                        session?.user.email !== undefined
+                      }
+                      placeholder="recipient@documenso.com"
+                    />
+                  </FormControl>
+
+                  {!fieldState.error && (
+                    <p className="text-muted-foreground text-xs">
+                      Enter your email address to receive the completed document.
+                    </p>
+                  )}
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </fieldset>
+        </Form>
+      </DocumentFlowFormContainerContent>
+
+      <DocumentFlowFormContainerFooter>
+        <DocumentFlowFormContainerStep
+          title={flowStep.title}
+          step={currentStep}
+          maxStep={totalSteps}
+        />
+
+        <DocumentFlowFormContainerActions
+          loading={form.formState.isSubmitting}
+          disabled={form.formState.isSubmitting}
+          canGoBack={stepIndex !== 0}
+          onGoBackClick={previousStep}
+          onGoNextClick={form.handleSubmit(onSubmit)}
+        />
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

apps/web/src/app/(recipient)/d/[token]/direct-template.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import type { Field } from '@documenso/prisma/client';
+import { type Recipient } from '@documenso/prisma/client';
+import type { TemplateWithDetails } from '@documenso/prisma/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 { useRequiredDocumentAuthContext } from '~/app/(signing)/sign/[token]/document-auth-provider';
+import { useRequiredSigningContext } from '~/app/(signing)/sign/[token]/provider';
+
+import type { TConfigureDirectTemplateFormSchema } from './configure-direct-template';
+import { ConfigureDirectTemplateFormPartial } from './configure-direct-template';
+import type { DirectTemplateLocalField } from './sign-direct-template';
+import { SignDirectTemplateForm } from './sign-direct-template';
+
+export type TemplatesDirectPageViewProps = {
+  template: TemplateWithDetails;
+  directTemplateToken: string;
+  directTemplateRecipient: Recipient & { Field: Field[] };
+};
+
+type DirectTemplateStep = 'configure' | 'sign';
+const DirectTemplateSteps: DirectTemplateStep[] = ['configure', 'sign'];
+
+export const DirectTemplatePageView = ({
+  template,
+  directTemplateRecipient,
+  directTemplateToken,
+}: TemplatesDirectPageViewProps) => {
+  const router = useRouter();
+
+  const { toast } = useToast();
+
+  const { email, setEmail } = useRequiredSigningContext();
+  const { recipient, setRecipient } = useRequiredDocumentAuthContext();
+
+  const [step, setStep] = useState<DirectTemplateStep>('configure');
+  const [isDocumentPdfLoaded, setIsDocumentPdfLoaded] = useState(false);
+
+  const recipientRoleDescription = RECIPIENT_ROLES_DESCRIPTION[directTemplateRecipient.role];
+
+  const directTemplateFlow: Record<DirectTemplateStep, DocumentFlowStep> = {
+    configure: {
+      title: 'General',
+      description: 'Preview and configure template.',
+      stepIndex: 1,
+    },
+    sign: {
+      title: `${recipientRoleDescription.actionVerb} document`,
+      description: `${recipientRoleDescription.actionVerb} 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 }: TConfigureDirectTemplateFormSchema) => {
+    setEmail(email);
+
+    setRecipient({
+      ...recipient,
+      email,
+    });
+
+    setStep('sign');
+  };
+
+  const onSignDirectTemplateSubmit = async (fields: DirectTemplateLocalField[]) => {
+    try {
+      const token = await createDocumentFromDirectTemplate({
+        directTemplateToken,
+        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;
+
+      redirectUrl ? router.push(redirectUrl) : router.push(`/sign/${token}/complete`);
+    } catch (err) {
+      toast({
+        title: 'Something went wrong',
+        description: '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])}
+          >
+            <ConfigureDirectTemplateFormPartial
+              flowStep={directTemplateFlow.configure}
+              template={template}
+              directTemplateRecipient={directTemplateRecipient}
+              isDocumentPdfLoaded={isDocumentPdfLoaded}
+              onSubmit={onConfigureDirectTemplateSubmit}
+              initialEmail={email}
+            />
+
+            <SignDirectTemplateForm
+              flowStep={directTemplateFlow.sign}
+              directRecipient={recipient}
+              directRecipientFields={directTemplateRecipient.Field}
+              template={template}
+              onSubmit={onSignDirectTemplateSubmit}
+            />
+          </Stepper>
+        </DocumentFlowFormContainer>
+      </div>
+    </div>
+  );
+};

apps/web/src/app/(recipient)/d/[token]/not-found.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import Link from 'next/link';
+
+import { ChevronLeft } from 'lucide-react';
+
+import { Button } from '@documenso/ui/primitives/button';
+
+export default function NotFound() {
+  return (
+    <div className="mx-auto flex min-h-[80vh] w-full items-center justify-center py-32">
+      <div>
+        <p className="text-muted-foreground font-semibold">404 Template not found</p>
+
+        <h1 className="mt-3 text-2xl font-bold md:text-3xl">Oops! Something went wrong.</h1>
+
+        <p className="text-muted-foreground mt-4 text-sm">
+          The template you are looking for may have been disabled, deleted or may have never
+          existed.
+        </p>
+
+        <div className="mt-6 flex gap-x-2.5 gap-y-4 md:items-center">
+          <Button asChild className="w-32">
+            <Link href="/">
+              <ChevronLeft className="mr-2 h-4 w-4" />
+              Go Back
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(recipient)/d/[token]/page.tsx

@@ -0,0 +1,92 @@
+import { notFound, redirect } from 'next/navigation';
+
+import { UsersIcon } from 'lucide-react';
+import { match } from 'ts-pattern';
+
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import { getTemplateByDirectLinkToken } from '@documenso/lib/server-only/template/get-template-by-direct-link-token';
+import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+
+import { DocumentAuthProvider } from '~/app/(signing)/sign/[token]/document-auth-provider';
+import { SigningProvider } from '~/app/(signing)/sign/[token]/provider';
+import { truncateTitle } from '~/helpers/truncate-title';
+
+import { DirectTemplatePageView } from './direct-template';
+import { DirectTemplateAuthPageView } from './signing-auth-page';
+
+export type TemplatesDirectPageProps = {
+  params: {
+    token: string;
+  };
+};
+
+export default async function TemplatesDirectPage({ params }: TemplatesDirectPageProps) {
+  const { token } = params;
+
+  if (!token) {
+    redirect('/');
+  }
+
+  const { user } = await getServerComponentSession();
+
+  const template = await getTemplateByDirectLinkToken({
+    token,
+  }).catch(() => null);
+
+  if (!template || !template.directLink?.enabled) {
+    notFound();
+  }
+
+  const directTemplateRecipient = template.Recipient.find(
+    (recipient) => recipient.id === template.directLink?.directTemplateRecipientId,
+  );
+
+  if (!directTemplateRecipient) {
+    notFound();
+  }
+
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: template.authOptions,
+  });
+
+  // Ensure typesafety when we add more options.
+  const isAccessAuthValid = match(derivedRecipientAccessAuth)
+    .with(DocumentAccessAuth.ACCOUNT, () => user !== null)
+    .with(null, () => true)
+    .exhaustive();
+
+  if (!isAccessAuthValid) {
+    return <DirectTemplateAuthPageView />;
+  }
+
+  return (
+    <SigningProvider email={user?.email} fullName={user?.name} signature={user?.signature}>
+      <DocumentAuthProvider
+        documentAuthOptions={template.authOptions}
+        recipient={directTemplateRecipient}
+        user={user}
+      >
+        <div className="mx-auto -mt-4 w-full max-w-screen-xl px-4 md:px-8">
+          <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={template.title}>
+            {truncateTitle(template.title)}
+          </h1>
+
+          <div className="text-muted-foreground mb-8 mt-2.5 flex items-center gap-x-2">
+            <UsersIcon className="h-4 w-4" />
+            <p className="text-muted-foreground/80">
+              {template.Recipient.length}{' '}
+              {template.Recipient.length > 1 ? 'recipients' : 'recipient'}
+            </p>
+          </div>
+
+          <DirectTemplatePageView
+            directTemplateRecipient={directTemplateRecipient}
+            directTemplateToken={template.directLink.token}
+            template={template}
+          />
+        </div>
+      </DocumentAuthProvider>
+    </SigningProvider>
+  );
+}

apps/web/src/app/(recipient)/d/[token]/sign-direct-template.tsx

@@ -0,0 +1,278 @@
+import { useMemo, useState } from 'react';
+
+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 { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
+import type { Field, Recipient, Signature } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
+import type { TemplateWithDetails } from '@documenso/prisma/types/template';
+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 { DateField } from '~/app/(signing)/sign/[token]/date-field';
+import { EmailField } from '~/app/(signing)/sign/[token]/email-field';
+import { NameField } from '~/app/(signing)/sign/[token]/name-field';
+import { useRequiredSigningContext } from '~/app/(signing)/sign/[token]/provider';
+import { SignDialog } from '~/app/(signing)/sign/[token]/sign-dialog';
+import { SignatureField } from '~/app/(signing)/sign/[token]/signature-field';
+import { TextField } from '~/app/(signing)/sign/[token]/text-field';
+
+export type SignDirectTemplateFormProps = {
+  flowStep: DocumentFlowStep;
+  directRecipient: Recipient;
+  directRecipientFields: Field[];
+  template: TemplateWithDetails;
+  onSubmit: (_data: DirectTemplateLocalField[]) => Promise<void>;
+};
+
+export type DirectTemplateLocalField = Field & {
+  signedValue?: TSignFieldWithTokenMutationSchema;
+  Signature?: Signature;
+};
+
+export const SignDirectTemplateForm = ({
+  flowStep,
+  directRecipient,
+  directRecipientFields,
+  template,
+  onSubmit,
+}: SignDirectTemplateFormProps) => {
+  const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
+
+  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,
+            typedSignature: null,
+          };
+        }
+
+        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 uninsertedFields = useMemo(() => {
+    return sortFieldsByPosition(localFields.filter((field) => !field.inserted));
+  }, [localFields]);
+
+  const fieldsValidated = () => {
+    setValidateUninsertedFields(true);
+    validateFieldsInserted(localFields);
+  };
+
+  const handleSubmit = async () => {
+    setValidateUninsertedFields(true);
+
+    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">
+              Click to insert field
+            </FieldToolTip>
+          )}
+
+          {localFields.map((field) =>
+            match(field.type)
+              .with(FieldType.SIGNATURE, () => (
+                <SignatureField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.NAME, () => (
+                <NameField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.DATE, () => (
+                <DateField
+                  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, () => (
+                <EmailField
+                  key={field.id}
+                  field={field}
+                  recipient={directRecipient}
+                  onSignField={onSignField}
+                  onUnsignField={onUnsignField}
+                />
+              ))
+              .with(FieldType.TEXT, () => (
+                <TextField
+                  key={field.id}
+                  field={field}
+                  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">Full Name</Label>
+
+              <Input
+                id="full-name"
+                value={fullName}
+                onChange={(e) => setFullName(e.target.value.trimStart())}
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="Signature">Signature</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
+          title={flowStep.title}
+          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}
+          >
+            Back
+          </Button>
+
+          <SignDialog
+            isSubmitting={isSubmitting}
+            onSignatureComplete={handleSubmit}
+            documentTitle={template.title}
+            fields={localFields}
+            fieldsValidated={fieldsValidated}
+            role={directRecipient.role}
+          />
+        </div>
+      </DocumentFlowFormContainerFooter>
+    </>
+  );
+};

apps/web/src/app/(recipient)/d/[token]/signing-auth-page.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+
+import { signOut } from 'next-auth/react';
+
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export const DirectTemplateAuthPageView = () => {
+  const { toast } = useToast();
+
+  const [isSigningOut, setIsSigningOut] = useState(false);
+
+  const handleChangeAccount = async () => {
+    try {
+      setIsSigningOut(true);
+
+      await signOut({
+        callbackUrl: '/signin',
+      });
+    } catch {
+      toast({
+        title: 'Something went wrong',
+        description: '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">Authentication required</h1>
+
+        <p className="text-muted-foreground mt-2 text-sm">
+          You need to be logged in to view this page.
+        </p>
+
+        <Button
+          className="mt-4 w-full"
+          type="submit"
+          onClick={async () => handleChangeAccount()}
+          loading={isSigningOut}
+        >
+          Login
+        </Button>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
+import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
+import { getTeams } from '@documenso/lib/server-only/team/get-teams';
+
+import { Header as AuthenticatedHeader } from '~/components/(dashboard)/layout/header';
+import { NextAuthProvider } from '~/providers/next-auth';
+
+type RecipientLayoutProps = {
+  children: React.ReactNode;
+};
+
+/**
+ * A layout to handle scenarios where the user is a recipient of a given resource
+ * where we do not care whether they are authenticated or not.
+ *
+ * Such as direct template access, or signing.
+ */
+export default async function RecipientLayout({ children }: RecipientLayoutProps) {
+  const { user, session } = await getServerComponentSession();
+
+  let teams: GetTeamsResponse = [];
+
+  if (user && session) {
+    teams = await getTeams({ userId: user.id });
+  }
+
+  return (
+    <NextAuthProvider session={session}>
+      <div className="min-h-screen">
+        {user && <AuthenticatedHeader user={user} teams={teams} />}
+
+        <main className="mb-8 mt-8 px-4 md:mb-12 md:mt-12 md:px-8">{children}</main>
+      </div>
+    </NextAuthProvider>
+  );
+}

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

@@ -67,7 +67,7 @@ export default async function CompletedSigningPage({
 
   const isDocumentAccessValid = await isRecipientAuthorized({
     type: 'ACCESS',
-    document,
+    documentAuthOptions: document.authOptions,
     recipient,
     userId: user?.id,
   });
@@ -131,7 +131,7 @@ export default async function CompletedSigningPage({
               </div>
             ))
             .with({ deletedAt: null }, () => (
-              <div className="flex items-center mt-4 text-center text-blue-600">
+              <div className="mt-4 flex items-center text-center text-blue-600">
                 <Clock8 className="mr-2 h-5 w-5" />
                 <span className="text-sm">Waiting for others to sign</span>
               </div>

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

@@ -17,6 +17,10 @@ import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import type { Recipient } from '@documenso/prisma/client';
 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 { SigningFieldContainer } from './signing-field-container';
@@ -26,6 +30,8 @@ export type DateFieldProps = {
   recipient: Recipient;
   dateFormat?: string | null;
   timezone?: string | null;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
 export const DateField = ({
@@ -33,6 +39,8 @@ export const DateField = ({
   recipient,
   dateFormat = DEFAULT_DOCUMENT_DATE_FORMAT,
   timezone = DEFAULT_DOCUMENT_TIME_ZONE,
+  onSignField,
+  onUnsignField,
 }: DateFieldProps) => {
   const router = useRouter();
 
@@ -58,12 +66,19 @@ export const DateField = ({
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
-      await signFieldWithToken({
+      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);
 
       startTransition(() => router.refresh());
     } catch (err) {
@@ -85,10 +100,17 @@ export const DateField = ({
 
   const onRemove = async () => {
     try {
-      await removeSignedFieldWithToken({
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-      });
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {

apps/web/src/app/(signing)/sign/[token]/document-auth-provider.tsx

@@ -34,9 +34,9 @@ type PasskeyData = {
 
 export type DocumentAuthContextValue = {
   executeActionAuthProcedure: (_value: ExecuteActionAuthProcedureOptions) => Promise<void>;
-  document: Document;
+  documentAuthOptions: Document['authOptions'];
   documentAuthOption: TDocumentAuthOptions;
-  setDocument: (_value: Document) => void;
+  setDocumentAuthOptions: (_value: Document['authOptions']) => void;
   recipient: Recipient;
   recipientAuthOption: TRecipientAuthOptions;
   setRecipient: (_value: Recipient) => void;
@@ -69,19 +69,19 @@ export const useRequiredDocumentAuthContext = () => {
 };
 
 export interface DocumentAuthProviderProps {
-  document: Document;
+  documentAuthOptions: Document['authOptions'];
   recipient: Recipient;
   user?: User | null;
   children: React.ReactNode;
 }
 
 export const DocumentAuthProvider = ({
-  document: initialDocument,
+  documentAuthOptions: initialDocumentAuthOptions,
   recipient: initialRecipient,
   user,
   children,
 }: DocumentAuthProviderProps) => {
-  const [document, setDocument] = useState(initialDocument);
+  const [documentAuthOptions, setDocumentAuthOptions] = useState(initialDocumentAuthOptions);
   const [recipient, setRecipient] = useState(initialRecipient);
 
   const [isCurrentlyAuthenticating, setIsCurrentlyAuthenticating] = useState(false);
@@ -95,10 +95,10 @@ export const DocumentAuthProvider = ({
   } = useMemo(
     () =>
       extractDocumentAuthMethods({
-        documentAuth: document.authOptions,
+        documentAuth: documentAuthOptions,
         recipientAuth: recipient.authOptions,
       }),
-    [document, recipient],
+    [documentAuthOptions, recipient],
   );
 
   const passkeyQuery = trpc.auth.findPasskeys.useQuery(
@@ -189,8 +189,8 @@ export const DocumentAuthProvider = ({
     <DocumentAuthContext.Provider
       value={{
         user,
-        document,
-        setDocument,
+        documentAuthOptions,
+        setDocumentAuthOptions,
         executeActionAuthProcedure,
         recipient,
         setRecipient,

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

@@ -12,6 +12,10 @@ import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import type { Recipient } from '@documenso/prisma/client';
 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 { useRequiredSigningContext } from './provider';
@@ -20,9 +24,11 @@ import { SigningFieldContainer } from './signing-field-container';
 export type EmailFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const EmailField = ({ field, recipient }: EmailFieldProps) => {
+export const EmailField = ({ field, recipient, onSignField, onUnsignField }: EmailFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -43,13 +49,22 @@ export const EmailField = ({ field, recipient }: EmailFieldProps) => {
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
-      await signFieldWithToken({
+      const value = providedEmail ?? '';
+
+      const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-        value: providedEmail ?? '',
+        value,
         isBase64: false,
         authOptions,
-      });
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {
@@ -71,10 +86,17 @@ export const EmailField = ({ field, recipient }: EmailFieldProps) => {
 
   const onRemove = async () => {
     try {
-      await removeSignedFieldWithToken({
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-      });
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {

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

@@ -145,7 +145,7 @@ export const SigningForm = ({ document, recipient, fields, redirectUrl }: Signin
                   <SignDialog
                     isSubmitting={isSubmitting}
                     onSignatureComplete={handleSubmit(onFormSubmit)}
-                    document={document}
+                    documentTitle={document.title}
                     fields={fields}
                     fieldsValidated={fieldsValidated}
                     role={recipient.role}
@@ -208,7 +208,7 @@ export const SigningForm = ({ document, recipient, fields, redirectUrl }: Signin
                   <SignDialog
                     isSubmitting={isSubmitting}
                     onSignatureComplete={handleSubmit(onFormSubmit)}
-                    document={document}
+                    documentTitle={document.title}
                     fields={fields}
                     fieldsValidated={fieldsValidated}
                     role={recipient.role}

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

@@ -12,6 +12,10 @@ import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { type Recipient } from '@documenso/prisma/client';
 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';
@@ -25,9 +29,11 @@ import { SigningFieldContainer } from './signing-field-container';
 export type NameFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const NameField = ({ field, recipient }: NameFieldProps) => {
+export const NameField = ({ field, recipient, onSignField, onUnsignField }: NameFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -83,13 +89,20 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
         return;
       }
 
-      await signFieldWithToken({
+      const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
         value,
         isBase64: false,
         authOptions,
-      });
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {
@@ -111,10 +124,17 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
 
   const onRemove = async () => {
     try {
-      await removeSignedFieldWithToken({
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-      });
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {

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

@@ -65,7 +65,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
 
   const isDocumentAccessValid = await isRecipientAuthorized({
     type: 'ACCESS',
-    document,
+    documentAuthOptions: document.authOptions,
     recipient,
     userId: user?.id,
   });
@@ -126,7 +126,11 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
       fullName={user?.email === recipient.email ? user.name : recipient.name}
       signature={user?.email === recipient.email ? user.signature : undefined}
     >
-      <DocumentAuthProvider document={document} recipient={recipient} user={user}>
+      <DocumentAuthProvider
+        documentAuthOptions={document.authOptions}
+        recipient={recipient}
+        user={user}
+      >
         <SigningPageView
           recipient={recipient}
           document={document}

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import type { Document, Field } from '@documenso/prisma/client';
+import type { Field } from '@documenso/prisma/client';
 import { RecipientRole } from '@documenso/prisma/client';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -16,7 +16,7 @@ import { truncateTitle } from '~/helpers/truncate-title';
 
 export type SignDialogProps = {
   isSubmitting: boolean;
-  document: Document;
+  documentTitle: string;
   fields: Field[];
   fieldsValidated: () => void | Promise<void>;
   onSignatureComplete: () => void | Promise<void>;
@@ -25,14 +25,14 @@ export type SignDialogProps = {
 
 export const SignDialog = ({
   isSubmitting,
-  document,
+  documentTitle,
   fields,
   fieldsValidated,
   onSignatureComplete,
   role,
 }: SignDialogProps) => {
   const [showDialog, setShowDialog] = useState(false);
-  const truncatedTitle = truncateTitle(document.title);
+  const truncatedTitle = truncateTitle(documentTitle);
   const isComplete = fields.every((field) => field.inserted);
 
   const handleOpenChange = (open: boolean) => {
@@ -40,18 +40,6 @@ export const SignDialog = ({
       return;
     }
 
-    // Reauth is currently not required for signing the document.
-    // if (isAuthRedirectRequired) {
-    //   await executeActionAuthProcedure({
-    //     actionTarget: 'DOCUMENT',
-    //     onReauthFormSubmit: () => {
-    //       // Do nothing since the user should be redirected.
-    //     },
-    //   });
-
-    //   return;
-    // }
-
     setShowDialog(open);
   };
 

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

@@ -12,6 +12,10 @@ import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { type Recipient } from '@documenso/prisma/client';
 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 { Label } from '@documenso/ui/primitives/label';
@@ -29,9 +33,16 @@ type SignatureFieldState = 'empty' | 'signed-image' | 'signed-text';
 export type SignatureFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
+export const SignatureField = ({
+  field,
+  recipient,
+  onSignField,
+  onUnsignField,
+}: SignatureFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -105,13 +116,20 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
         return;
       }
 
-      await signFieldWithToken({
+      const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
         value,
         isBase64: true,
         authOptions,
-      });
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {
@@ -133,10 +151,17 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
 
   const onRemove = async () => {
     try {
-      await removeSignedFieldWithToken({
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-      });
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {

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

@@ -12,6 +12,10 @@ import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import type { Recipient } from '@documenso/prisma/client';
 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';
@@ -24,9 +28,11 @@ import { SigningFieldContainer } from './signing-field-container';
 export type TextFieldProps = {
   field: FieldWithSignature;
   recipient: Recipient;
+  onSignField?: (value: TSignFieldWithTokenMutationSchema) => Promise<void> | void;
+  onUnsignField?: (value: TRemovedSignedFieldWithTokenMutationSchema) => Promise<void> | void;
 };
 
-export const TextField = ({ field, recipient }: TextFieldProps) => {
+export const TextField = ({ field, recipient, onSignField, onUnsignField }: TextFieldProps) => {
   const router = useRouter();
 
   const { toast } = useToast();
@@ -81,13 +87,20 @@ export const TextField = ({ field, recipient }: TextFieldProps) => {
         return;
       }
 
-      await signFieldWithToken({
+      const payload: TSignFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
         value: localText,
         isBase64: true,
         authOptions,
-      });
+      };
+
+      if (onSignField) {
+        await onSignField(payload);
+        return;
+      }
+
+      await signFieldWithToken(payload);
 
       setLocalCustomText('');
 
@@ -111,10 +124,17 @@ export const TextField = ({ field, recipient }: TextFieldProps) => {
 
   const onRemove = async () => {
     try {
-      await removeSignedFieldWithToken({
+      const payload: TRemovedSignedFieldWithTokenMutationSchema = {
         token: recipient.token,
         fieldId: field.id,
-      });
+      };
+
+      if (onUnsignField) {
+        await onUnsignField(payload);
+        return;
+      }
+
+      await removeSignedFieldWithToken(payload);
 
       startTransition(() => router.refresh());
     } catch (err) {

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

@@ -4,7 +4,7 @@ import { redirect } from 'next/navigation';
 
 import { env } from 'next-runtime-env';
 
-import { IS_GOOGLE_SSO_ENABLED } from '@documenso/lib/constants/auth';
+import { IS_GOOGLE_SSO_ENABLED, IS_OIDC_SSO_ENABLED } from '@documenso/lib/constants/auth';
 import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
 
 import { SignInForm } from '~/components/forms/signin';
@@ -37,10 +37,13 @@ export default function SignInPage({ searchParams }: SignInPageProps) {
         <p className="text-muted-foreground mt-2 text-sm">
           Welcome back, we are lucky to have you.
         </p>
-
         <hr className="-mx-6 my-4" />
 
-        <SignInForm initialEmail={email || undefined} isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED} />
+        <SignInForm
+          initialEmail={email || undefined}
+          isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
+          isOIDCSSOEnabled={IS_OIDC_SSO_ENABLED}
+        />
 
         {NEXT_PUBLIC_DISABLE_SIGNUP !== 'true' && (
           <p className="text-muted-foreground mt-6 text-center text-sm">

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

@@ -3,7 +3,7 @@ import { redirect } from 'next/navigation';
 
 import { env } from 'next-runtime-env';
 
-import { IS_GOOGLE_SSO_ENABLED } from '@documenso/lib/constants/auth';
+import { IS_GOOGLE_SSO_ENABLED, IS_OIDC_SSO_ENABLED } from '@documenso/lib/constants/auth';
 import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
 
 import { SignUpFormV2 } from '~/components/forms/v2/signup';
@@ -37,6 +37,7 @@ export default function SignUpPage({ searchParams }: SignUpPageProps) {
       className="w-screen max-w-screen-2xl px-4 md:px-16 lg:-my-16"
       initialEmail={email || undefined}
       isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED}
+      isOIDCSSOEnabled={IS_OIDC_SSO_ENABLED}
     />
   );
 }

apps/web/src/components/formatter/template-type.tsx

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
 
-import { Globe, Lock } from 'lucide-react';
+import { Globe2, Lock } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react/dist/lucide-react';
 
 import type { TemplateType as TemplateTypePrisma } from '@documenso/prisma/client';
@@ -22,7 +22,7 @@ const TEMPLATE_TYPES: Record<TemplateTypes, TemplateTypeIcon> = {
   },
   PUBLIC: {
     label: 'Public',
-    icon: Globe,
+    icon: Globe2,
     color: 'text-green-500 dark:text-green-300',
   },
 };

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

@@ -10,6 +10,7 @@ import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/br
 import { KeyRoundIcon } from 'lucide-react';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
+import { FaIdCardClip } from 'react-icons/fa6';
 import { FcGoogle } from 'react-icons/fc';
 import { match } from 'ts-pattern';
 import { z } from 'zod';
@@ -69,9 +70,15 @@ export type SignInFormProps = {
   className?: string;
   initialEmail?: string;
   isGoogleSSOEnabled?: boolean;
+  isOIDCSSOEnabled?: boolean;
 };
 
-export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: SignInFormProps) => {
+export const SignInForm = ({
+  className,
+  initialEmail,
+  isGoogleSSOEnabled,
+  isOIDCSSOEnabled,
+}: SignInFormProps) => {
   const { toast } = useToast();
   const { getFlag } = useFeatureFlags();
 
@@ -257,6 +264,19 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
     }
   };
 
+  const onSignInWithOIDCClick = async () => {
+    try {
+      await signIn('oidc', { callbackUrl: LOGIN_REDIRECT_PATH });
+    } catch (err) {
+      toast({
+        title: 'An unknown error occurred',
+        description:
+          'We encountered an unknown error while attempting to sign you In. Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
   return (
     <Form {...form}>
       <form
@@ -317,7 +337,7 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
             {isSubmitting ? 'Signing in...' : 'Sign In'}
           </Button>
 
-          {(isGoogleSSOEnabled || isPasskeyEnabled) && (
+          {(isGoogleSSOEnabled || isPasskeyEnabled || 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">Or continue with</span>
@@ -339,6 +359,20 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
             </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" />
+              OIDC
+            </Button>
+          )}
+
           {isPasskeyEnabled && (
             <Button
               type="button"

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

@@ -52,9 +52,15 @@ export type SignUpFormProps = {
   className?: string;
   initialEmail?: string;
   isGoogleSSOEnabled?: boolean;
+  isOIDCSSOEnabled?: boolean;
 };
 
-export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: SignUpFormProps) => {
+export const SignUpForm = ({
+  className,
+  initialEmail,
+  isGoogleSSOEnabled,
+  isOIDCSSOEnabled,
+}: SignUpFormProps) => {
   const { toast } = useToast();
   const analytics = useAnalytics();
   const router = useRouter();
@@ -121,6 +127,19 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
     }
   };
 
+  const onSignUpWithOIDCClick = async () => {
+    try {
+      await signIn('oidc', { callbackUrl: SIGN_UP_REDIRECT_PATH });
+    } catch (err) {
+      toast({
+        title: 'An unknown error occurred',
+        description:
+          'We encountered an unknown error while attempting to sign you Up. Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
   return (
     <Form {...form}>
       <form
@@ -221,6 +240,28 @@ export const SignUpForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
             </Button>
           </>
         )}
+
+        {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">Or</span>
+              <div className="bg-border h-px flex-1" />
+            </div>
+
+            <Button
+              type="button"
+              size="lg"
+              variant={'outline'}
+              className="bg-background text-muted-foreground border"
+              disabled={isSubmitting}
+              onClick={onSignUpWithOIDCClick}
+            >
+              <FcGoogle className="mr-2 h-5 w-5" />
+              Sign Up with OIDC
+            </Button>
+          </>
+        )}
       </form>
     </Form>
   );

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

@@ -10,6 +10,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { AnimatePresence, motion } from 'framer-motion';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
+import { FaIdCardClip } from 'react-icons/fa6';
 import { FcGoogle } from 'react-icons/fc';
 import { z } from 'zod';
 
@@ -73,12 +74,14 @@ export type SignUpFormV2Props = {
   className?: string;
   initialEmail?: string;
   isGoogleSSOEnabled?: boolean;
+  isOIDCSSOEnabled?: boolean;
 };
 
 export const SignUpFormV2 = ({
   className,
   initialEmail,
   isGoogleSSOEnabled,
+  isOIDCSSOEnabled,
 }: SignUpFormV2Props) => {
   const { toast } = useToast();
   const analytics = useAnalytics();
@@ -179,6 +182,19 @@ export const SignUpFormV2 = ({
     }
   };
 
+  const onSignUpWithOIDCClick = async () => {
+    try {
+      await signIn('oidc', { callbackUrl: SIGN_UP_REDIRECT_PATH });
+    } catch (err) {
+      toast({
+        title: 'An unknown error occurred',
+        description:
+          'We encountered an unknown error while attempting to sign you Up. Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
   return (
     <div className={cn('flex justify-center gap-x-12', className)}>
       <div className="border-border relative hidden flex-1 overflow-hidden rounded-xl border xl:flex">
@@ -255,7 +271,7 @@ export const SignUpFormV2 = ({
               <fieldset
                 className={cn(
                   'flex h-[550px] w-full flex-col gap-y-4',
-                  isGoogleSSOEnabled && 'h-[650px]',
+                  (isGoogleSSOEnabled || isOIDCSSOEnabled) && 'h-[650px]',
                 )}
                 disabled={isSubmitting}
               >
@@ -323,14 +339,18 @@ export const SignUpFormV2 = ({
                   )}
                 />
 
-                {isGoogleSSOEnabled && (
+                {(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">Or</span>
                       <div className="bg-border h-px flex-1" />
                     </div>
+                  </>
+                )}
 
+                {isGoogleSSOEnabled && (
+                  <>
                     <Button
                       type="button"
                       size="lg"
@@ -345,6 +365,22 @@ export const SignUpFormV2 = ({
                   </>
                 )}
 
+                {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" />
+                      Sign Up with OIDC
+                    </Button>
+                  </>
+                )}
+
                 <p className="text-muted-foreground mt-4 text-sm">
                   Already have an account?{' '}
                   <Link href="/signin" className="text-documenso-700 duration-200 hover:opacity-70">

package.json

@@ -19,6 +19,7 @@
     "prisma:generate": "npm run with:env -- npm run prisma:generate -w @documenso/prisma",
     "prisma:migrate-dev": "npm run with:env -- npm run prisma:migrate-dev -w @documenso/prisma",
     "prisma:migrate-deploy": "npm run with:env -- npm run prisma:migrate-deploy -w @documenso/prisma",
+    "prisma:migrate-reset": "npm run with:env -- npm run prisma:migrate-reset -w @documenso/prisma",
     "prisma:seed": "npm run with:env -- npm run prisma:seed -w @documenso/prisma",
     "prisma:studio": "npm run with:env -- npm run prisma:studio -w @documenso/prisma",
     "with:env": "dotenv -e .env -e .env.local --",
@@ -60,4 +61,4 @@
       "next": "14.0.3"
     }
   }
-}
+}

packages/app-tests/e2e/document-flow/stepper-component.spec.ts

@@ -1,10 +1,14 @@
 import { expect, test } from '@playwright/test';
+import { DateTime } from 'luxon';
 import path from 'node:path';
 
 import { getRecipientByEmail } from '@documenso/lib/server-only/recipient/get-recipient-by-email';
 import { prisma } from '@documenso/prisma';
-import { DocumentStatus } from '@documenso/prisma/client';
-import { seedBlankDocument } from '@documenso/prisma/seed/documents';
+import { DocumentStatus, FieldType, RecipientRole } from '@documenso/prisma/client';
+import {
+  seedBlankDocument,
+  seedPendingDocumentWithFullFields,
+} from '@documenso/prisma/seed/documents';
 import { seedUser, unseedUser } from '@documenso/prisma/seed/users';
 
 import { apiSignin } from '../fixtures/authentication';
@@ -192,6 +196,102 @@ test('[DOCUMENT_FLOW]: should be able to create a document with multiple recipie
   await unseedUser(user.id);
 });
 
+test('[DOCUMENT_FLOW]: should be able to create a document with multiple recipients with different roles', async ({
+  page,
+}) => {
+  const user = await seedUser();
+  const document = await seedBlankDocument(user);
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: `/documents/${document.id}/edit`,
+  });
+
+  // Set title
+  await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
+  await page.getByLabel('Title').fill('Test Title');
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add signers
+  await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
+
+  // Add 2 signers.
+  await page.getByPlaceholder('Email').fill('user1@example.com');
+  await page.getByPlaceholder('Name').fill('User 1');
+  await page.getByRole('button', { name: 'Add Signer' }).click();
+
+  await page.getByRole('textbox', { name: 'Email', exact: true }).fill('user2@example.com');
+  await page.getByRole('textbox', { name: 'Name', exact: true }).nth(1).fill('User 2');
+  await page.locator('button[role="combobox"]').nth(1).click();
+  await page.getByLabel('Receives copy').click();
+  await page.getByRole('button', { name: 'Add Signer' }).click();
+
+  await page.getByRole('textbox', { name: 'Email', exact: true }).nth(1).fill('user3@example.com');
+  await page.getByRole('textbox', { name: 'Name', exact: true }).nth(2).fill('User 3');
+  await page.locator('button[role="combobox"]').nth(2).click();
+  await page.getByLabel('Needs to approve').click();
+  await page.getByRole('button', { name: 'Add Signer' }).click();
+
+  await page.getByRole('textbox', { name: 'Email', exact: true }).nth(2).fill('user4@example.com');
+  await page.getByRole('textbox', { name: 'Name', exact: true }).nth(3).fill('User 4');
+  await page.locator('button[role="combobox"]').nth(3).click();
+  await page.getByLabel('Needs to view').click();
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add fields
+  await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'User 1 Signature' }).click();
+  await page.locator('canvas').click({
+    position: {
+      x: 100,
+      y: 100,
+    },
+  });
+
+  await page.getByRole('button', { name: 'Email Email' }).click();
+  await page.locator('canvas').click({
+    position: {
+      x: 100,
+      y: 200,
+    },
+  });
+
+  await page.getByText('User 1 (user1@example.com)').click();
+  await page.getByText('User 3 (user3@example.com)').click();
+
+  await page.getByRole('button', { name: 'User 3 Signature' }).click();
+  await page.locator('canvas').click({
+    position: {
+      x: 500,
+      y: 100,
+    },
+  });
+
+  await page.getByRole('button', { name: 'Email Email' }).click();
+  await page.locator('canvas').click({
+    position: {
+      x: 500,
+      y: 200,
+    },
+  });
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add subject and send
+  await expect(page.getByRole('heading', { name: 'Add Subject' })).toBeVisible();
+  await page.getByRole('button', { name: 'Send' }).click();
+
+  await page.waitForURL('/documents');
+
+  // Assert document was created
+  await expect(page.getByRole('link', { name: 'Test Title' })).toBeVisible();
+
+  await unseedUser(user.id);
+});
+
 test('[DOCUMENT_FLOW]: should be able to create, send and sign a document', async ({ page }) => {
   const user = await seedUser();
   const document = await seedBlankDocument(user);
@@ -234,6 +334,7 @@ test('[DOCUMENT_FLOW]: should be able to create, send and sign a document', asyn
   await page.getByRole('link', { name: documentTitle }).click();
   await page.waitForURL(/\/documents\/\d+/);
 
+  // Start signing process
   const url = page.url().split('/');
   const documentId = url[url.length - 1];
 
@@ -263,6 +364,63 @@ test('[DOCUMENT_FLOW]: should be able to create, send and sign a document', asyn
   await unseedUser(user.id);
 });
 
+test('[DOCUMENT_FLOW]: should be able to approve a document', async ({ page }) => {
+  const user = await seedUser();
+
+  const { recipients } = await seedPendingDocumentWithFullFields({
+    owner: user,
+    recipients: ['user@documenso.com', 'approver@documenso.com'],
+    recipientsCreateOptions: [
+      {
+        email: 'user@documenso.com',
+        role: RecipientRole.SIGNER,
+      },
+      {
+        email: 'approver@documenso.com',
+        role: RecipientRole.APPROVER,
+      },
+    ],
+    fields: [FieldType.SIGNATURE],
+  });
+
+  for (const recipient of recipients) {
+    const { token, Field, role } = recipient;
+
+    const signUrl = `/sign/${token}`;
+
+    await page.goto(signUrl);
+    await expect(
+      page.getByRole('heading', {
+        name: role === RecipientRole.SIGNER ? 'Sign Document' : 'Approve Document',
+      }),
+    ).toBeVisible();
+
+    // Add signature.
+    const canvas = page.locator('canvas');
+    const box = await canvas.boundingBox();
+    if (box) {
+      await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+      await page.mouse.down();
+      await page.mouse.move(box.x + box.width / 4, box.y + box.height / 4);
+      await page.mouse.up();
+    }
+
+    for (const field of Field) {
+      await page.locator(`#field-${field.id}`).getByRole('button').click();
+
+      await expect(page.locator(`#field-${field.id}`)).toHaveAttribute('data-inserted', 'true');
+    }
+
+    await page.getByRole('button', { name: 'Complete' }).click();
+    await page
+      .getByRole('button', { name: role === RecipientRole.SIGNER ? 'Sign' : 'Approve' })
+      .click();
+    await page.waitForURL(`${signUrl}/complete`);
+  }
+
+  await unseedUser(user.id);
+});
+
 test('[DOCUMENT_FLOW]: should be able to create, send with redirect url, sign a document and redirect to redirect url', async ({
   page,
 }) => {
@@ -333,3 +491,46 @@ test('[DOCUMENT_FLOW]: should be able to create, send with redirect url, sign a
 
   await unseedUser(user.id);
 });
+
+test('[DOCUMENT_FLOW]: should be able to sign a document with custom date', async ({ page }) => {
+  const user = await seedUser();
+  const customDate = DateTime.local().toFormat('yyyy-MM-dd hh:mm a');
+
+  const { document, recipients } = await seedPendingDocumentWithFullFields({
+    owner: user,
+    recipients: ['user1@example.com'],
+    fields: [FieldType.DATE],
+  });
+
+  const { token, Field } = recipients[0];
+  const [recipientField] = Field;
+
+  await page.goto(`/sign/${token}`);
+  await page.waitForURL(`/sign/${token}`);
+
+  await page.locator(`#field-${recipientField.id}`).getByRole('button').click();
+
+  await page.getByRole('button', { name: 'Complete' }).click();
+  await expect(page.getByRole('dialog').getByText('Complete Signing').first()).toBeVisible();
+  await page.getByRole('button', { name: 'Sign' }).click();
+
+  await page.waitForURL(`/sign/${token}/complete`);
+  await expect(page.getByText('Document Signed')).toBeVisible();
+
+  const field = await prisma.field.findFirst({
+    where: {
+      Recipient: {
+        email: 'user1@example.com',
+      },
+      documentId: Number(document.id),
+    },
+  });
+
+  expect(field?.customText).toBe(customDate);
+
+  // Check if document has been signed
+  const { status: completedStatus } = await getDocumentByToken(token);
+  expect(completedStatus).toBe(DocumentStatus.COMPLETED);
+
+  await unseedUser(user.id);
+});

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

@@ -13,5 +13,5 @@ export const checkDocumentTabCount = async (page: Page, tabName: string, count:
     return;
   }
 
-  await expect(page.getByRole('main')).toContainText(`Showing ${count}`);
+  await expect(page.getByTestId('data-table-count')).toContainText(`Showing ${count}`);
 };

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

@@ -0,0 +1,339 @@
+import { expect, test } from '@playwright/test';
+import { customAlphabet } from 'nanoid';
+
+import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app';
+import {
+  DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+  DIRECT_TEMPLATE_RECIPIENT_NAME,
+} from '@documenso/lib/constants/template';
+import { createDocumentAuthOptions } from '@documenso/lib/utils/document-auth';
+import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
+import { seedTeam, unseedTeam } from '@documenso/prisma/seed/teams';
+import { seedDirectTemplate, seedTemplate } from '@documenso/prisma/seed/templates';
+import { seedTestEmail, seedUser, unseedUser } from '@documenso/prisma/seed/users';
+
+import { apiSignin } from '../fixtures/authentication';
+import { checkDocumentTabCount } from '../fixtures/documents';
+
+const nanoid = customAlphabet('1234567890abcdef', 10);
+
+test.describe.configure({ mode: 'parallel' });
+
+test('[DIRECT_TEMPLATES]: create direct link for template', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+
+  // Should only be visible to the owner in personal templates.
+  const personalTemplate = await seedTemplate({
+    title: 'Personal template',
+    userId: owner.id,
+  });
+
+  // Should be visible to team members.
+  const teamTemplate = await seedTemplate({
+    title: 'Team template 1',
+    userId: owner.id,
+    teamId: team.id,
+  });
+
+  await apiSignin({
+    page,
+    email: owner.email,
+    redirectPath: '/templates',
+  });
+
+  const urls = [
+    `${WEBAPP_BASE_URL}/t/${team.url}/templates/${teamTemplate.id}`,
+    `${WEBAPP_BASE_URL}/templates/${personalTemplate.id}`,
+  ];
+
+  // Run test for personal and team templates.
+  for (const url of urls) {
+    // Owner should see list of templates with no direct link badge.
+    await page.goto(url);
+    await expect(page.getByRole('button', { name: 'direct link' })).toHaveCount(1);
+
+    // Create direct link.
+    await page.getByRole('button', { name: 'Create Direct Link' }).click();
+    await page.getByRole('button', { name: 'Enable direct link signing' }).click();
+    await page.getByRole('button', { name: 'Create one automatically' }).click();
+    await expect(page.getByRole('heading', { name: 'Direct Link Signing' })).toBeVisible();
+    await page.getByTestId('btn-dialog-close').click();
+
+    // Expect badge to appear.
+    await expect(page.getByRole('button', { name: 'direct link' })).toHaveCount(2);
+  }
+
+  await unseedTeam(team.url);
+});
+
+test('[DIRECT_TEMPLATES]: toggle direct template link', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+
+  // Should only be visible to the owner in personal templates.
+  const personalDirectTemplate = await seedDirectTemplate({
+    title: 'Personal direct template link',
+    userId: owner.id,
+  });
+
+  // Should be visible to team members.
+  const teamDirectTemplate = await seedDirectTemplate({
+    title: 'Team direct template link 1',
+    userId: owner.id,
+    teamId: team.id,
+  });
+
+  await apiSignin({
+    page,
+    email: owner.email,
+  });
+
+  // Run test for personal and team templates.
+  for (const template of [personalDirectTemplate, teamDirectTemplate]) {
+    // Check that the direct template link is accessible.
+    await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
+    await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+    // Navigate to template settings and disable access.
+    await page.goto(`${WEBAPP_BASE_URL}${formatTemplatesPath(template.team?.url)}`);
+    await page.getByRole('cell', { name: 'Use Template' }).getByRole('button').nth(1).click();
+    await page.getByRole('menuitem', { name: 'Direct link' }).click();
+    await page.getByRole('switch').click();
+    await page.getByRole('button', { name: 'Save' }).click();
+    await expect(page.getByText('Direct link signing has been').first()).toBeVisible();
+    await page.getByLabel('Direct Link Signing', { exact: true }).press('Escape');
+
+    // Check that the direct template link is no longer accessible.
+    await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
+    await expect(page.getByText('Template not found')).toBeVisible();
+  }
+
+  await unseedTeam(team.url);
+});
+
+test('[DIRECT_TEMPLATES]: delete direct template link', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+
+  // Should only be visible to the owner in personal templates.
+  const personalDirectTemplate = await seedDirectTemplate({
+    title: 'Personal direct template link',
+    userId: owner.id,
+  });
+
+  // Should be visible to team members.
+  const teamDirectTemplate = await seedDirectTemplate({
+    title: 'Team direct template link 1',
+    userId: owner.id,
+    teamId: team.id,
+  });
+
+  await apiSignin({
+    page,
+    email: owner.email,
+  });
+
+  // Run test for personal and team templates.
+  for (const template of [personalDirectTemplate, teamDirectTemplate]) {
+    // Check that the direct template link is accessible.
+    await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
+    await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+    // Navigate to template settings and delete the access.
+    await page.goto(`${WEBAPP_BASE_URL}${formatTemplatesPath(template.team?.url)}`);
+    await page.getByRole('cell', { name: 'Use Template' }).getByRole('button').nth(1).click();
+    await page.getByRole('menuitem', { name: 'Direct link' }).click();
+    await page.getByRole('button', { name: 'Remove' }).click();
+    await page.getByRole('button', { name: 'Confirm' }).click();
+    await expect(page.getByText('Direct template link deleted').first()).toBeVisible();
+
+    // Check that the direct template link is no longer accessible.
+    await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
+    await expect(page.getByText('Template not found')).toBeVisible();
+  }
+
+  await unseedTeam(team.url);
+});
+
+test('[DIRECT_TEMPLATES]: direct template link auth access', async ({ page }) => {
+  const user = await seedUser();
+
+  const directTemplateWithAuth = await seedDirectTemplate({
+    title: 'Personal direct template link',
+    userId: user.id,
+    createTemplateOptions: {
+      authOptions: createDocumentAuthOptions({
+        globalAccessAuth: 'ACCOUNT',
+        globalActionAuth: null,
+      }),
+    },
+  });
+
+  const directTemplatePath = formatDirectTemplatePath(
+    directTemplateWithAuth.directLink?.token || '',
+  );
+
+  await page.goto(directTemplatePath);
+
+  await expect(page.getByText('Authentication required')).toBeVisible();
+
+  await apiSignin({
+    page,
+    email: user.email,
+  });
+
+  await page.goto(directTemplatePath);
+
+  await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
+  await expect(page.getByLabel('Email')).toBeDisabled();
+
+  await unseedUser(user.id);
+});
+
+test('[DIRECT_TEMPLATES]: use direct template link with 1 recipient', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+
+  // Should only be visible to the owner in personal templates.
+  const personalDirectTemplate = await seedDirectTemplate({
+    title: 'Personal direct template link',
+    userId: owner.id,
+  });
+
+  // Should be visible to team members.
+  const teamDirectTemplate = await seedDirectTemplate({
+    title: 'Team direct template link 1',
+    userId: owner.id,
+    teamId: team.id,
+  });
+
+  // Run test for personal and team templates.
+  for (const template of [personalDirectTemplate, teamDirectTemplate]) {
+    // Check that the direct template link is accessible.
+    await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
+    await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+    await page.getByPlaceholder('recipient@documenso.com').fill(seedTestEmail());
+
+    await page.getByRole('button', { name: 'Continue' }).click();
+    await page.getByRole('button', { name: 'Complete' }).click();
+    await page.getByRole('button', { name: 'Sign' }).click();
+    await page.waitForURL(/\/sign/);
+    await expect(page.getByRole('heading', { name: 'Document Signed' })).toBeVisible();
+  }
+
+  await apiSignin({
+    page,
+    email: owner.email,
+  });
+
+  // Check that the owner has the documents.
+  for (const template of [personalDirectTemplate, teamDirectTemplate]) {
+    await page.goto(`${WEBAPP_BASE_URL}${formatDocumentsPath(template.team?.url)}`);
+
+    // Check that the document is in the 'All' tab.
+    await checkDocumentTabCount(page, 'Completed', 1);
+  }
+
+  await unseedTeam(team.url);
+});
+
+test('[DIRECT_TEMPLATES]: use direct template link with 2 recipients', async ({ page }) => {
+  const team = await seedTeam({
+    createTeamMembers: 1,
+  });
+
+  const owner = team.owner;
+
+  const secondRecipient = await seedUser();
+
+  const createTemplateOptions = {
+    Recipient: {
+      createMany: {
+        data: [
+          {
+            email: DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+            name: DIRECT_TEMPLATE_RECIPIENT_NAME,
+            token: nanoid(),
+          },
+          {
+            email: secondRecipient.email,
+            token: nanoid(),
+          },
+        ],
+      },
+    },
+  };
+
+  // Should only be visible to the owner in personal templates.
+  const personalDirectTemplate = await seedDirectTemplate({
+    title: 'Personal direct template link',
+    userId: owner.id,
+    createTemplateOptions,
+  });
+
+  // Should be visible to team members.
+  const teamDirectTemplate = await seedDirectTemplate({
+    title: 'Team direct template link 1',
+    userId: owner.id,
+    teamId: team.id,
+    createTemplateOptions,
+  });
+
+  // Run test for personal and team templates.
+  for (const template of [personalDirectTemplate, teamDirectTemplate]) {
+    // Check that the direct template link is accessible.
+    await page.goto(formatDirectTemplatePath(template.directLink?.token || ''));
+    await expect(page.getByRole('heading', { name: 'General' })).toBeVisible();
+
+    await page.getByPlaceholder('recipient@documenso.com').fill(seedTestEmail());
+
+    await page.getByRole('button', { name: 'Continue' }).click();
+    await page.getByRole('button', { name: 'Complete' }).click();
+    await page.getByRole('button', { name: 'Sign' }).click();
+    await page.waitForURL(/\/sign/);
+    await expect(page.getByText('Waiting for others to sign')).toBeVisible();
+  }
+
+  await apiSignin({
+    page,
+    email: owner.email,
+  });
+
+  // Check that the owner has the documents.
+  for (const template of [personalDirectTemplate, teamDirectTemplate]) {
+    await page.goto(`${WEBAPP_BASE_URL}${formatDocumentsPath(template.team?.url)}`);
+
+    // Check that the document is in the 'All' tab.
+    await checkDocumentTabCount(page, 'All', 1);
+    await checkDocumentTabCount(page, 'Pending', 1);
+  }
+
+  // Check that the second recipient has the 2 pending documents.
+  await apiSignin({
+    page,
+    email: secondRecipient.email,
+  });
+
+  await page.goto('/documents');
+
+  await checkDocumentTabCount(page, 'All', 2);
+  await checkDocumentTabCount(page, 'Inbox', 2);
+
+  await unseedTeam(team.url);
+  await unseedUser(secondRecipient.id);
+});

packages/ee/server-only/limits/constants.ts

@@ -3,14 +3,17 @@ import type { TLimitsSchema } from './schema';
 export const FREE_PLAN_LIMITS: TLimitsSchema = {
   documents: 5,
   recipients: 10,
+  directTemplates: 3,
 };
 
 export const TEAM_PLAN_LIMITS: TLimitsSchema = {
   documents: Infinity,
   recipients: Infinity,
+  directTemplates: Infinity,
 };
 
 export const SELFHOSTED_PLAN_LIMITS: TLimitsSchema = {
   documents: Infinity,
   recipients: Infinity,
+  directTemplates: Infinity,
 };

packages/ee/server-only/limits/schema.ts

@@ -10,6 +10,10 @@ export const ZLimitsSchema = z.object({
     .preprocess((v) => (v === null ? Infinity : Number(v)), z.number())
     .optional()
     .default(0),
+  directTemplates: z
+    .preprocess((v) => (v === null ? Infinity : Number(v)), z.number())
+    .optional()
+    .default(0),
 });
 
 export type TLimitsSchema = z.infer<typeof ZLimitsSchema>;

packages/ee/server-only/limits/server.ts

@@ -2,11 +2,12 @@ import { DateTime } from 'luxon';
 
 import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { prisma } from '@documenso/prisma';
-import { SubscriptionStatus } from '@documenso/prisma/client';
+import { DocumentSource, SubscriptionStatus } from '@documenso/prisma/client';
 
 import { getDocumentRelatedPrices } from '../stripe/get-document-related-prices.ts';
 import { FREE_PLAN_LIMITS, SELFHOSTED_PLAN_LIMITS, TEAM_PLAN_LIMITS } from './constants';
 import { ERROR_CODES } from './errors';
+import type { TLimitsResponseSchema } from './schema';
 import { ZLimitsSchema } from './schema';
 
 export type GetServerLimitsOptions = {
@@ -14,7 +15,10 @@ export type GetServerLimitsOptions = {
   teamId?: number | null;
 };
 
-export const getServerLimits = async ({ email, teamId }: GetServerLimitsOptions) => {
+export const getServerLimits = async ({
+  email,
+  teamId,
+}: GetServerLimitsOptions): Promise<TLimitsResponseSchema> => {
   if (!IS_BILLING_ENABLED()) {
     return {
       quota: SELFHOSTED_PLAN_LIMITS,
@@ -74,19 +78,37 @@ const handleUserLimits = async ({ email }: HandleUserLimitsOptions) => {
         remaining = structuredClone(quota);
       }
     }
+
+    // Assume all active subscriptions provide unlimited direct templates.
+    remaining.directTemplates = Infinity;
   }
 
-  const documents = await prisma.document.count({
-    where: {
-      userId: user.id,
-      teamId: null,
-      createdAt: {
-        gte: DateTime.utc().startOf('month').toJSDate(),
+  const [documents, directTemplates] = await Promise.all([
+    prisma.document.count({
+      where: {
+        userId: user.id,
+        teamId: null,
+        createdAt: {
+          gte: DateTime.utc().startOf('month').toJSDate(),
+        },
+        source: {
+          not: DocumentSource.TEMPLATE_DIRECT_LINK,
+        },
       },
-    },
-  });
+    }),
+    prisma.template.count({
+      where: {
+        userId: user.id,
+        teamId: null,
+        directLink: {
+          isNot: null,
+        },
+      },
+    }),
+  ]);
 
   remaining.documents = Math.max(remaining.documents - documents, 0);
+  remaining.directTemplates = Math.max(remaining.directTemplates - directTemplates, 0);
 
   return {
     quota,
@@ -127,10 +149,12 @@ const handleTeamLimits = async ({ email, teamId }: HandleTeamLimitsOptions) => {
       quota: {
         documents: 0,
         recipients: 0,
+        directTemplates: 0,
       },
       remaining: {
         documents: 0,
         recipients: 0,
+        directTemplates: 0,
       },
     };
   }

packages/ee/server-only/stripe/webhook/on-early-adopters-checkout.ts

@@ -8,6 +8,7 @@ import { alphaid, nanoid } from '@documenso/lib/universal/id';
 import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { prisma } from '@documenso/prisma';
 import {
+  DocumentSource,
   DocumentStatus,
   FieldType,
   ReadStatus,
@@ -86,6 +87,7 @@ export const onEarlyAdoptersCheckout = async ({ session }: OnEarlyAdoptersChecko
         status: DocumentStatus.COMPLETED,
         userId: newUser.id,
         documentDataId,
+        source: DocumentSource.DOCUMENT,
       },
     });
 

packages/email/templates/document-created-from-direct-template.tsx

@@ -0,0 +1,99 @@
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+import config from '@documenso/tailwind-config';
+
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Html,
+  Img,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '../components';
+import TemplateDocumentImage from '../template-components/template-document-image';
+import { TemplateFooter } from '../template-components/template-footer';
+import { RecipientRole } from '.prisma/client';
+
+export type DocumentCompletedEmailTemplateProps = {
+  recipientName?: string;
+  recipientRole?: RecipientRole;
+  documentLink?: string;
+  documentName?: string;
+  assetBaseUrl?: string;
+};
+
+export const DocumentCreatedFromDirectTemplateEmailTemplate = ({
+  recipientName = 'John Doe',
+  recipientRole = RecipientRole.SIGNER,
+  documentLink = 'http://localhost:3000',
+  documentName = 'Open Source Pledge.pdf',
+  assetBaseUrl = 'http://localhost:3002',
+}: DocumentCompletedEmailTemplateProps) => {
+  const action = RECIPIENT_ROLES_DESCRIPTION[recipientRole].actioned.toLowerCase();
+
+  const previewText = `Document created from direct template`;
+
+  const getAssetUrl = (path: string) => {
+    return new URL(path, assetBaseUrl).toString();
+  };
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: config.theme.extend.colors,
+            },
+          },
+        }}
+      >
+        <Body className="mx-auto my-auto font-sans">
+          <Section className="bg-white">
+            <Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
+              <Section className="p-2">
+                <Img
+                  src={getAssetUrl('/static/logo.png')}
+                  alt="Documenso Logo"
+                  className="mb-4 h-6"
+                />
+
+                <TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
+
+                <Section>
+                  <Text className="text-primary mb-0 text-center text-lg font-semibold">
+                    {recipientName} {action} a document by using one of your direct links
+                  </Text>
+
+                  <div className="mx-auto my-2 w-fit rounded-lg bg-gray-50 px-4 py-2 text-sm text-slate-600">
+                    {documentName}
+                  </div>
+
+                  <Section className="my-6 text-center">
+                    <Button
+                      className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
+                      href={documentLink}
+                    >
+                      View document
+                    </Button>
+                  </Section>
+                </Section>
+              </Section>
+            </Container>
+
+            <Container className="mx-auto max-w-xl">
+              <TemplateFooter />
+            </Container>
+          </Section>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default DocumentCreatedFromDirectTemplateEmailTemplate;

packages/lib/client-only/download-pdf.ts

@@ -18,7 +18,7 @@ export const downloadPDF = async ({ documentData, fileName }: DownloadPDFProps)
   const baseTitle = (fileName ?? 'document').replace(/\.pdf$/, '');
 
   downloadFile({
-    filename: `${baseTitle}.pdf`,
+    filename: `${baseTitle}_signed.pdf`,
     data: blob,
   });
 };

packages/lib/constants/auth.ts

@@ -5,12 +5,19 @@ export const SALT_ROUNDS = 12;
 export const IDENTITY_PROVIDER_NAME: { [key in IdentityProvider]: string } = {
   [IdentityProvider.DOCUMENSO]: 'Documenso',
   [IdentityProvider.GOOGLE]: 'Google',
+  [IdentityProvider.OIDC]: 'OIDC',
 };
 
 export const IS_GOOGLE_SSO_ENABLED = Boolean(
   process.env.NEXT_PRIVATE_GOOGLE_CLIENT_ID && process.env.NEXT_PRIVATE_GOOGLE_CLIENT_SECRET,
 );
 
+export const IS_OIDC_SSO_ENABLED = Boolean(
+  process.env.NEXT_PRIVATE_OIDC_WELL_KNOWN &&
+    process.env.NEXT_PRIVATE_OIDC_CLIENT_ID &&
+    process.env.NEXT_PRIVATE_OIDC_CLIENT_SECRET,
+);
+
 export const USER_SECURITY_AUDIT_LOG_MAP: { [key in UserSecurityAuditLogType]: string } = {
   [UserSecurityAuditLogType.ACCOUNT_SSO_LINK]: 'Linked account to SSO',
   [UserSecurityAuditLogType.ACCOUNT_PROFILE_UPDATE]: 'Profile updated',

packages/lib/constants/template.ts

@@ -1,2 +1,28 @@
 export const TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX = /recipient\.\d+@documenso\.com/i;
 export const TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX = /Recipient \d+/i;
+
+export const DIRECT_TEMPLATE_DOCUMENTATION = [
+  {
+    title: 'Enable Direct Link Signing',
+    description:
+      'Once enabled, you can select any active recipient to be a direct link signing recipient, or create a new one. This recipient type cannot be edited or deleted.',
+  },
+  {
+    title: 'Configure Direct Recipient',
+    description:
+      'Update the role and add fields as required for the direct recipient. The individual who uses the direct link will sign the document as the direct recipient.',
+  },
+  {
+    title: 'Share the Link',
+    description:
+      'Once your template is set up, share the link anywhere you want. The person who opens the link will be able to enter their information in the direct link recipient field and complete any other fields assigned to them.',
+  },
+  {
+    title: 'Document Creation',
+    description:
+      'After submission, a document will be automatically generated and added to your documents page. You will also receive a notification via email.',
+  },
+];
+
+export const DIRECT_TEMPLATE_RECIPIENT_EMAIL = 'direct.link@documenso.com';
+export const DIRECT_TEMPLATE_RECIPIENT_NAME = 'Direct link recipient';

packages/lib/errors/app-error.ts

@@ -12,6 +12,7 @@ export enum AppErrorCode {
   'EXPIRED_CODE' = 'ExpiredCode',
   'INVALID_BODY' = 'InvalidBody',
   'INVALID_REQUEST' = 'InvalidRequest',
+  'LIMIT_EXCEEDED' = 'LimitExceeded',
   'NOT_FOUND' = 'NotFound',
   'NOT_SETUP' = 'NotSetup',
   'UNAUTHORIZED' = 'Unauthorized',

packages/lib/next-auth/auth-options.ts

@@ -136,6 +136,30 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
         };
       },
     }),
+    {
+      id: 'oidc',
+      name: 'OIDC',
+      type: 'oauth',
+
+      wellKnown: process.env.NEXT_PRIVATE_OIDC_WELL_KNOWN,
+      clientId: process.env.NEXT_PRIVATE_OIDC_CLIENT_ID,
+      clientSecret: process.env.NEXT_PRIVATE_OIDC_CLIENT_SECRET,
+
+      authorization: { params: { scope: 'openid email profile' } },
+      checks: ['pkce', 'state'],
+
+      idToken: true,
+      allowDangerousEmailAccountLinking: true,
+
+      profile(profile) {
+        return {
+          id: profile.sub,
+          email: profile.email || profile.preferred_username,
+          name: profile.name || `${profile.given_name} ${profile.family_name}`.trim(),
+          emailVerified: profile.email_verified ? new Date().toISOString() : null,
+        };
+      },
+    },
     CredentialsProvider({
       id: 'webauthn',
       name: 'Keypass',

packages/lib/package.json

@@ -16,6 +16,7 @@
     "clean": "rimraf node_modules"
   },
   "dependencies": {
+    "@auth/kysely-adapter": "^0.6.0",
     "@aws-sdk/client-s3": "^3.410.0",
     "@aws-sdk/cloudfront-signer": "^3.410.0",
     "@aws-sdk/s3-request-presigner": "^3.410.0",
@@ -27,18 +28,20 @@
     "@next-auth/prisma-adapter": "1.0.7",
     "@noble/ciphers": "0.4.0",
     "@noble/hashes": "1.3.2",
+    "@node-rs/bcrypt": "^1.10.0",
     "@pdf-lib/fontkit": "^1.1.1",
     "@scure/base": "^1.1.3",
     "@sindresorhus/slugify": "^2.2.1",
     "@upstash/redis": "^1.20.6",
     "@vvo/tzdb": "^6.117.0",
-    "@node-rs/bcrypt": "^1.10.0",
+    "kysely": "^0.26.3",
     "luxon": "^3.4.0",
     "nanoid": "^4.0.2",
     "next": "14.0.3",
     "next-auth": "4.24.5",
     "oslo": "^0.17.0",
     "pdf-lib": "^1.17.1",
+    "pg": "^8.11.3",
     "playwright": "1.43.0",
     "react": "18.2.0",
     "remeda": "^1.27.1",
@@ -48,6 +51,7 @@
   },
   "devDependencies": {
     "@types/luxon": "^3.3.1",
+    "@types/pg": "^8.11.4",
     "@playwright/browser-chromium": "1.43.0"
   }
-}
+}

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

@@ -5,7 +5,7 @@ import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-log
 import type { RequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { prisma } from '@documenso/prisma';
-import { WebhookTriggerEvents } from '@documenso/prisma/client';
+import { DocumentSource, WebhookTriggerEvents } from '@documenso/prisma/client';
 
 import { triggerWebhook } from '../webhooks/trigger/trigger-webhook';
 
@@ -54,6 +54,7 @@ export const createDocument = async ({
         userId,
         teamId,
         formValues,
+        source: DocumentSource.DOCUMENT,
       },
     });
 
@@ -65,6 +66,9 @@ export const createDocument = async ({
         requestMetadata,
         data: {
           title,
+          source: {
+            type: DocumentSource.DOCUMENT,
+          },
         },
       }),
     });

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

@@ -1,5 +1,5 @@
 import { prisma } from '@documenso/prisma';
-import type { Prisma } from '@documenso/prisma/client';
+import { DocumentSource, type Prisma } from '@documenso/prisma/client';
 
 import { getDocumentWhereInput } from './get-document-by-id';
 
@@ -64,6 +64,7 @@ export const duplicateDocumentById = async ({
           ...document.documentMeta,
         },
       },
+      source: DocumentSource.DOCUMENT,
     },
   };
 

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

@@ -99,7 +99,7 @@ export const getDocumentAndSenderByToken = async ({
   if (requireAccessAuth) {
     documentAccessValid = await isRecipientAuthorized({
       type: 'ACCESS',
-      document: result,
+      documentAuthOptions: result.authOptions,
       recipient,
       userId,
       authOptions: accessAuth,
@@ -159,7 +159,7 @@ export const getDocumentAndRecipientByToken = async ({
   if (requireAccessAuth) {
     documentAccessValid = await isRecipientAuthorized({
       type: 'ACCESS',
-      document: result,
+      documentAuthOptions: result.authOptions,
       recipient,
       userId,
       authOptions: accessAuth,

packages/lib/server-only/document/is-recipient-authorized.ts

@@ -14,8 +14,8 @@ import { extractDocumentAuthMethods } from '../../utils/document-auth';
 
 type IsRecipientAuthorizedOptions = {
   type: 'ACCESS' | 'ACTION';
-  document: Document;
-  recipient: Recipient;
+  documentAuthOptions: Document['authOptions'];
+  recipient: Pick<Recipient, 'authOptions' | 'email'>;
 
   /**
    * The ID of the user who initiated the request.
@@ -50,13 +50,13 @@ const getUserByEmail = async (email: string) => {
  */
 export const isRecipientAuthorized = async ({
   type,
-  document,
+  documentAuthOptions,
   recipient,
   userId,
   authOptions,
 }: IsRecipientAuthorizedOptions): Promise<boolean> => {
   const { derivedRecipientAccessAuth, derivedRecipientActionAuth } = extractDocumentAuthMethods({
-    documentAuth: document.authOptions,
+    documentAuth: documentAuthOptions,
     recipientAuth: recipient.authOptions,
   });
 

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

@@ -12,7 +12,13 @@ import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { renderCustomEmailTemplate } from '@documenso/lib/utils/render-custom-email-template';
 import { prisma } from '@documenso/prisma';
-import { DocumentStatus, RecipientRole, SendStatus } from '@documenso/prisma/client';
+import {
+  DocumentSource,
+  DocumentStatus,
+  RecipientRole,
+  SendStatus,
+  SigningStatus,
+} from '@documenso/prisma/client';
 import { WebhookTriggerEvents } from '@documenso/prisma/client';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
@@ -92,6 +98,8 @@ export const sendDocument = async ({
 
   const { documentData } = document;
 
+  const isDirectTemplate = document.source === DocumentSource.TEMPLATE_DIRECT_LINK;
+
   if (!documentData.data) {
     throw new Error('Document data not found');
   }
@@ -133,10 +141,21 @@ export const sendDocument = async ({
 
         const { email, name } = recipient;
         const selfSigner = email === user.email;
+        const { actionVerb } = RECIPIENT_ROLES_DESCRIPTION[recipient.role];
+        const recipientActionVerb = actionVerb.toLowerCase();
 
-        const selfSignerCustomEmail = `You have initiated the document ${`"${document.title}"`} that requires you to ${RECIPIENT_ROLES_DESCRIPTION[
-          recipient.role
-        ].actionVerb.toLowerCase()} it.`;
+        let emailMessage = customEmail?.message || '';
+        let emailSubject = `Please ${recipientActionVerb} this document`;
+
+        if (selfSigner) {
+          emailMessage = `You have initiated the document ${`"${document.title}"`} that requires you to ${recipientActionVerb} it.`;
+          emailSubject = `Please ${recipientActionVerb} your document`;
+        }
+
+        if (isDirectTemplate) {
+          emailMessage = `A document was created by your direct template that requires you to ${recipientActionVerb} it.`;
+          emailSubject = `Please ${recipientActionVerb} this document created by your direct template`;
+        }
 
         const customEmailTemplate = {
           'signer.name': name,
@@ -153,22 +172,11 @@ export const sendDocument = async ({
           inviterEmail: user.email,
           assetBaseUrl,
           signDocumentLink,
-          customBody: renderCustomEmailTemplate(
-            selfSigner && !customEmail?.message
-              ? selfSignerCustomEmail
-              : customEmail?.message || '',
-            customEmailTemplate,
-          ),
+          customBody: renderCustomEmailTemplate(emailMessage, customEmailTemplate),
           role: recipient.role,
           selfSigner,
         });
 
-        const { actionVerb } = RECIPIENT_ROLES_DESCRIPTION[recipient.role];
-
-        const emailSubject = selfSigner
-          ? `Please ${actionVerb.toLowerCase()} your document`
-          : `Please ${actionVerb.toLowerCase()} this document`;
-
         await prisma.$transaction(
           async (tx) => {
             await mailer.sendMail({
@@ -220,7 +228,8 @@ export const sendDocument = async ({
   }
 
   const allRecipientsHaveNoActionToTake = document.Recipient.every(
-    (recipient) => recipient.role === RecipientRole.CC,
+    (recipient) =>
+      recipient.role === RecipientRole.CC || recipient.signingStatus === SigningStatus.SIGNED,
   );
 
   if (allRecipientsHaveNoActionToTake) {

packages/lib/server-only/document/validate-field-auth.ts

@@ -0,0 +1,52 @@
+import type { Document, Field, Recipient } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
+
+import { AppError, AppErrorCode } from '../../errors/app-error';
+import type { TRecipientActionAuth } from '../../types/document-auth';
+import { extractDocumentAuthMethods } from '../../utils/document-auth';
+import { isRecipientAuthorized } from './is-recipient-authorized';
+
+export type ValidateFieldAuthOptions = {
+  documentAuthOptions: Document['authOptions'];
+  recipient: Pick<Recipient, 'authOptions' | 'email'>;
+  field: Field;
+  userId?: number;
+  authOptions?: TRecipientActionAuth;
+};
+
+/**
+ * Throws an error if the reauth for a field is invalid.
+ *
+ * Returns the derived recipient action authentication if valid.
+ */
+export const validateFieldAuth = async ({
+  documentAuthOptions,
+  recipient,
+  field,
+  userId,
+  authOptions,
+}: ValidateFieldAuthOptions) => {
+  const { derivedRecipientActionAuth } = extractDocumentAuthMethods({
+    documentAuth: documentAuthOptions,
+    recipientAuth: recipient.authOptions,
+  });
+
+  // Override all non-signature fields to not require any auth.
+  if (field.type !== FieldType.SIGNATURE) {
+    return null;
+  }
+
+  const isValid = await isRecipientAuthorized({
+    type: 'ACTION',
+    documentAuthOptions,
+    recipient,
+    userId,
+    authOptions,
+  });
+
+  if (!isValid) {
+    throw new AppError(AppErrorCode.UNAUTHORIZED, 'Invalid authentication values');
+  }
+
+  return derivedRecipientActionAuth;
+};

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

@@ -8,13 +8,11 @@ import { DocumentStatus, FieldType, SigningStatus } from '@documenso/prisma/clie
 
 import { DEFAULT_DOCUMENT_DATE_FORMAT } from '../../constants/date-formats';
 import { DEFAULT_DOCUMENT_TIME_ZONE } from '../../constants/time-zones';
-import { AppError, AppErrorCode } from '../../errors/app-error';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
 import type { TRecipientActionAuth } from '../../types/document-auth';
 import type { RequestMetadata } from '../../universal/extract-request-metadata';
 import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
-import { extractDocumentAuthMethods } from '../../utils/document-auth';
-import { isRecipientAuthorized } from '../document/is-recipient-authorized';
+import { validateFieldAuth } from '../document/validate-field-auth';
 
 export type SignFieldWithTokenOptions = {
   token: string;
@@ -26,6 +24,16 @@ export type SignFieldWithTokenOptions = {
   requestMetadata?: RequestMetadata;
 };
 
+/**
+ * Please read.
+ *
+ * Content within this function has been duplicated in the
+ * createDocumentFromDirectTemplate file.
+ *
+ * Any update to this should be reflected in the other file if required.
+ *
+ * Todo: Extract common logic.
+ */
 export const signFieldWithToken = async ({
   token,
   fieldId,
@@ -79,33 +87,14 @@ export const signFieldWithToken = async ({
     throw new Error(`Field ${fieldId} has no recipientId`);
   }
 
-  let { derivedRecipientActionAuth } = extractDocumentAuthMethods({
-    documentAuth: document.authOptions,
-    recipientAuth: recipient.authOptions,
+  const derivedRecipientActionAuth = await validateFieldAuth({
+    documentAuthOptions: document.authOptions,
+    recipient,
+    field,
+    userId,
+    authOptions,
   });
 
-  // Override all non-signature fields to not require any auth.
-  if (field.type !== FieldType.SIGNATURE) {
-    derivedRecipientActionAuth = null;
-  }
-
-  let isValid = true;
-
-  // Only require auth on signature fields for now.
-  if (field.type === FieldType.SIGNATURE) {
-    isValid = await isRecipientAuthorized({
-      type: 'ACTION',
-      document: document,
-      recipient: recipient,
-      userId,
-      authOptions,
-    });
-  }
-
-  if (!isValid) {
-    throw new AppError(AppErrorCode.UNAUTHORIZED, 'Invalid authentication values');
-  }
-
   const documentMeta = await prisma.documentMeta.findFirst({
     where: {
       documentId: document.id,
@@ -142,10 +131,6 @@ export const signFieldWithToken = async ({
     });
 
     if (isSignatureField) {
-      if (!field.recipientId) {
-        throw new Error('Field has no recipientId');
-      }
-
       const signature = await tx.signature.upsert({
         where: {
           fieldId: field.id,

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

@@ -3,6 +3,10 @@ import { prisma } from '@documenso/prisma';
 import type { Recipient } from '@documenso/prisma/client';
 import { RecipientRole } from '@documenso/prisma/client';
 
+import {
+  DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+  DIRECT_TEMPLATE_RECIPIENT_NAME,
+} from '../../constants/template';
 import { AppError, AppErrorCode } from '../../errors/app-error';
 import {
   type TRecipientActionAuthTypes,
@@ -48,6 +52,9 @@ export const setRecipientsForTemplate = async ({
         },
       ],
     },
+    include: {
+      directLink: true,
+    },
   });
 
   if (!template) {
@@ -71,10 +78,21 @@ export const setRecipientsForTemplate = async ({
     }
   }
 
-  const normalizedRecipients = recipients.map((recipient) => ({
-    ...recipient,
-    email: recipient.email.toLowerCase(),
-  }));
+  const normalizedRecipients = recipients.map((recipient) => {
+    // Force replace any changes to the name or email of the direct recipient.
+    if (template.directLink && recipient.id === template.directLink.directTemplateRecipientId) {
+      return {
+        ...recipient,
+        email: DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+        name: DIRECT_TEMPLATE_RECIPIENT_NAME,
+      };
+    }
+
+    return {
+      ...recipient,
+      email: recipient.email.toLowerCase(),
+    };
+  });
 
   const existingRecipients = await prisma.recipient.findMany({
     where: {
@@ -90,6 +108,27 @@ export const setRecipientsForTemplate = async ({
       ),
   );
 
+  if (template.directLink !== null) {
+    const updatedDirectRecipient = recipients.find(
+      (recipient) => recipient.id === template.directLink?.directTemplateRecipientId,
+    );
+
+    const deletedDirectRecipient = removedRecipients.find(
+      (recipient) => recipient.id === template.directLink?.directTemplateRecipientId,
+    );
+
+    if (updatedDirectRecipient?.role === RecipientRole.CC) {
+      throw new AppError(AppErrorCode.INVALID_BODY, 'Cannot set direct recipient as CC');
+    }
+
+    if (deletedDirectRecipient) {
+      throw new AppError(
+        AppErrorCode.INVALID_BODY,
+        'Cannot delete direct recipient while direct template exists',
+      );
+    }
+  }
+
   const linkedRecipients = normalizedRecipients.map((recipient) => {
     const existing = existingRecipients.find(
       (existingRecipient) =>

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

@@ -0,0 +1,527 @@
+import { createElement } from 'react';
+
+import { DateTime } from 'luxon';
+import { match } from 'ts-pattern';
+
+import { mailer } from '@documenso/email/mailer';
+import { render } from '@documenso/email/render';
+import { DocumentCreatedFromDirectTemplateEmailTemplate } from '@documenso/email/templates/document-created-from-direct-template';
+import { nanoid } from '@documenso/lib/universal/id';
+import { prisma } from '@documenso/prisma';
+import type { Field, Signature } from '@documenso/prisma/client';
+import {
+  DocumentSource,
+  DocumentStatus,
+  FieldType,
+  RecipientRole,
+  SendStatus,
+  SigningStatus,
+} from '@documenso/prisma/client';
+import type { TSignFieldWithTokenMutationSchema } from '@documenso/trpc/server/field-router/schema';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
+import { DEFAULT_DOCUMENT_DATE_FORMAT } from '../../constants/date-formats';
+import { DEFAULT_DOCUMENT_TIME_ZONE } from '../../constants/time-zones';
+import { AppError, AppErrorCode } from '../../errors/app-error';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
+import type { TRecipientActionAuthTypes } from '../../types/document-auth';
+import { DocumentAccessAuth, ZRecipientAuthOptionsSchema } from '../../types/document-auth';
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+import type { CreateDocumentAuditLogDataResponse } from '../../utils/document-audit-logs';
+import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
+import {
+  createDocumentAuthOptions,
+  createRecipientAuthOptions,
+  extractDocumentAuthMethods,
+} from '../../utils/document-auth';
+import { formatDocumentsPath } from '../../utils/teams';
+import { sendDocument } from '../document/send-document';
+import { validateFieldAuth } from '../document/validate-field-auth';
+
+export type CreateDocumentFromDirectTemplateOptions = {
+  directRecipientEmail: string;
+  directTemplateToken: string;
+  signedFieldValues: TSignFieldWithTokenMutationSchema[];
+  templateUpdatedAt: Date;
+  requestMetadata: RequestMetadata;
+  user?: {
+    id: number;
+    name?: string;
+    email: string;
+  };
+};
+
+type CreatedDirectRecipientField = {
+  field: Field & { Signature?: Signature | null };
+  derivedRecipientActionAuth: TRecipientActionAuthTypes | null;
+};
+
+export const createDocumentFromDirectTemplate = async ({
+  directRecipientEmail,
+  directTemplateToken,
+  signedFieldValues,
+  templateUpdatedAt,
+  requestMetadata,
+  user,
+}: CreateDocumentFromDirectTemplateOptions) => {
+  const template = await prisma.template.findFirst({
+    where: {
+      directLink: {
+        token: directTemplateToken,
+      },
+    },
+    include: {
+      Recipient: {
+        include: {
+          Field: true,
+        },
+      },
+      directLink: true,
+      templateDocumentData: true,
+      templateMeta: true,
+      User: true,
+    },
+  });
+
+  if (!template?.directLink?.enabled) {
+    throw new AppError(AppErrorCode.INVALID_REQUEST, 'Invalid or missing template');
+  }
+
+  const { Recipient: recipients, directLink, User: templateOwner } = template;
+
+  const directTemplateRecipient = recipients.find(
+    (recipient) => recipient.id === directLink.directTemplateRecipientId,
+  );
+
+  if (!directTemplateRecipient || directTemplateRecipient.role === RecipientRole.CC) {
+    throw new AppError(AppErrorCode.INVALID_REQUEST, 'Invalid or missing direct recipient');
+  }
+
+  if (template.updatedAt.getTime() !== templateUpdatedAt.getTime()) {
+    throw new AppError(AppErrorCode.INVALID_REQUEST, 'Template no longer matches');
+  }
+
+  if (user && user.email !== directRecipientEmail) {
+    throw new AppError(AppErrorCode.INVALID_REQUEST, 'Email must match if you are logged in');
+  }
+
+  const { derivedRecipientAccessAuth, documentAuthOption: templateAuthOptions } =
+    extractDocumentAuthMethods({
+      documentAuth: template.authOptions,
+    });
+
+  const directRecipientName = user?.name;
+
+  // Ensure typesafety when we add more options.
+  const isAccessAuthValid = match(derivedRecipientAccessAuth)
+    .with(DocumentAccessAuth.ACCOUNT, () => user && user?.email === directRecipientEmail)
+    .with(null, () => true)
+    .exhaustive();
+
+  if (!isAccessAuthValid) {
+    throw new AppError(AppErrorCode.UNAUTHORIZED, 'You must be logged in');
+  }
+
+  const directTemplateRecipientAuthOptions = ZRecipientAuthOptionsSchema.parse(
+    directTemplateRecipient.authOptions,
+  );
+
+  const nonDirectTemplateRecipients = template.Recipient.filter(
+    (recipient) => recipient.id !== directTemplateRecipient.id,
+  );
+
+  const metaTimezone = template.templateMeta?.timezone || DEFAULT_DOCUMENT_TIME_ZONE;
+  const metaDateFormat = template.templateMeta?.dateFormat || DEFAULT_DOCUMENT_DATE_FORMAT;
+
+  // Associate, validate and map to a query every direct template recipient field with the provided fields.
+  const createDirectRecipientFieldArgs = await Promise.all(
+    directTemplateRecipient.Field.map(async (templateField) => {
+      const signedFieldValue = signedFieldValues.find(
+        (value) => value.fieldId === templateField.id,
+      );
+
+      if (!signedFieldValue) {
+        throw new AppError(AppErrorCode.INVALID_BODY, 'Invalid, missing or changed fields');
+      }
+
+      if (templateField.type === FieldType.NAME && directRecipientName === undefined) {
+        directRecipientName === signedFieldValue.value;
+      }
+
+      const derivedRecipientActionAuth = await validateFieldAuth({
+        documentAuthOptions: template.authOptions,
+        recipient: {
+          authOptions: directTemplateRecipient.authOptions,
+          email: directRecipientEmail,
+        },
+        field: templateField,
+        userId: user?.id,
+        authOptions: signedFieldValue.authOptions,
+      });
+
+      const { value, isBase64 } = signedFieldValue;
+
+      const isSignatureField =
+        templateField.type === FieldType.SIGNATURE ||
+        templateField.type === FieldType.FREE_SIGNATURE;
+
+      let customText = !isSignatureField ? value : '';
+
+      const signatureImageAsBase64 = isSignatureField && isBase64 ? value : undefined;
+      const typedSignature = isSignatureField && !isBase64 ? value : undefined;
+
+      if (templateField.type === FieldType.DATE) {
+        customText = DateTime.now().setZone(metaTimezone).toFormat(metaDateFormat);
+      }
+
+      if (isSignatureField && !signatureImageAsBase64 && !typedSignature) {
+        throw new Error('Signature field must have a signature');
+      }
+
+      return {
+        templateField,
+        customText,
+        derivedRecipientActionAuth,
+        signature: isSignatureField
+          ? {
+              signatureImageAsBase64,
+              typedSignature,
+            }
+          : null,
+      };
+    }),
+  );
+
+  const directTemplateNonSignatureFields = createDirectRecipientFieldArgs.filter(
+    ({ signature }) => signature === null,
+  );
+
+  const directTemplateSignatureFields = createDirectRecipientFieldArgs.filter(
+    ({ signature }) => signature !== null,
+  );
+
+  const initialRequestTime = new Date();
+
+  const { documentId, directRecipientToken } = await prisma.$transaction(async (tx) => {
+    const documentData = await tx.documentData.create({
+      data: {
+        type: template.templateDocumentData.type,
+        data: template.templateDocumentData.data,
+        initialData: template.templateDocumentData.initialData,
+      },
+    });
+
+    // Create the document and non direct template recipients.
+    const document = await tx.document.create({
+      data: {
+        source: DocumentSource.TEMPLATE_DIRECT_LINK,
+        templateId: template.id,
+        userId: template.userId,
+        teamId: template.teamId,
+        title: template.title,
+        createdAt: initialRequestTime,
+        status: DocumentStatus.PENDING,
+        documentDataId: documentData.id,
+        authOptions: createDocumentAuthOptions({
+          globalAccessAuth: templateAuthOptions.globalAccessAuth,
+          globalActionAuth: templateAuthOptions.globalActionAuth,
+        }),
+        Recipient: {
+          createMany: {
+            data: nonDirectTemplateRecipients.map((recipient) => {
+              const authOptions = ZRecipientAuthOptionsSchema.parse(recipient?.authOptions);
+
+              return {
+                email: recipient.email,
+                name: recipient.name,
+                role: recipient.role,
+                authOptions: createRecipientAuthOptions({
+                  accessAuth: authOptions.accessAuth,
+                  actionAuth: authOptions.actionAuth,
+                }),
+                sendStatus:
+                  recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
+                signingStatus:
+                  recipient.role === RecipientRole.CC
+                    ? SigningStatus.SIGNED
+                    : SigningStatus.NOT_SIGNED,
+                token: nanoid(),
+              };
+            }),
+          },
+        },
+      },
+      include: {
+        Recipient: true,
+        team: {
+          select: {
+            url: true,
+          },
+        },
+      },
+    });
+
+    let nonDirectRecipientFieldsToCreate: Omit<Field, 'id' | 'secondaryId' | 'templateId'>[] = [];
+
+    Object.values(nonDirectTemplateRecipients).forEach((templateRecipient) => {
+      const recipient = document.Recipient.find(
+        (recipient) => recipient.email === templateRecipient.email,
+      );
+
+      if (!recipient) {
+        throw new Error('Recipient not found.');
+      }
+
+      nonDirectRecipientFieldsToCreate = nonDirectRecipientFieldsToCreate.concat(
+        templateRecipient.Field.map((field) => ({
+          documentId: document.id,
+          recipientId: recipient.id,
+          type: field.type,
+          page: field.page,
+          positionX: field.positionX,
+          positionY: field.positionY,
+          width: field.width,
+          height: field.height,
+          customText: '',
+          inserted: false,
+        })),
+      );
+    });
+
+    await tx.field.createMany({
+      data: nonDirectRecipientFieldsToCreate,
+    });
+
+    // Create the direct recipient and their non signature fields.
+    const createdDirectRecipient = await tx.recipient.create({
+      data: {
+        documentId: document.id,
+        email: directRecipientEmail,
+        name: directRecipientName,
+        authOptions: createRecipientAuthOptions({
+          accessAuth: directTemplateRecipientAuthOptions.accessAuth,
+          actionAuth: directTemplateRecipientAuthOptions.actionAuth,
+        }),
+        role: directTemplateRecipient.role,
+        token: nanoid(),
+        signingStatus: SigningStatus.SIGNED,
+        sendStatus: SendStatus.SENT,
+        signedAt: initialRequestTime,
+        Field: {
+          createMany: {
+            data: directTemplateNonSignatureFields.map(({ templateField, customText }) => ({
+              documentId: document.id,
+              type: templateField.type,
+              page: templateField.page,
+              positionX: templateField.positionX,
+              positionY: templateField.positionY,
+              width: templateField.width,
+              height: templateField.height,
+              customText,
+              inserted: true,
+            })),
+          },
+        },
+      },
+      include: {
+        Field: true,
+      },
+    });
+
+    // Create any direct recipient signature fields.
+    // Note: It's done like this because we can't nest things in createMany.
+    const createdDirectRecipientSignatureFields: CreatedDirectRecipientField[] = await Promise.all(
+      directTemplateSignatureFields.map(
+        async ({ templateField, signature, derivedRecipientActionAuth }) => {
+          if (!signature) {
+            throw new Error('Not possible.');
+          }
+
+          const field = await tx.field.create({
+            data: {
+              documentId: document.id,
+              recipientId: createdDirectRecipient.id,
+              type: templateField.type,
+              page: templateField.page,
+              positionX: templateField.positionX,
+              positionY: templateField.positionY,
+              width: templateField.width,
+              height: templateField.height,
+              customText: '',
+              inserted: true,
+              Signature: {
+                create: {
+                  recipientId: createdDirectRecipient.id,
+                  signatureImageAsBase64: signature.signatureImageAsBase64,
+                  typedSignature: signature.typedSignature,
+                },
+              },
+            },
+            include: {
+              Signature: true,
+            },
+          });
+
+          return {
+            field,
+            derivedRecipientActionAuth,
+          };
+        },
+      ),
+    );
+
+    const createdDirectRecipientFields: CreatedDirectRecipientField[] = [
+      ...createdDirectRecipient.Field.map((field) => ({
+        field,
+        derivedRecipientActionAuth: null,
+      })),
+      ...createdDirectRecipientSignatureFields,
+    ];
+
+    /**
+     * Create the following audit logs.
+     * - DOCUMENT_CREATED
+     * - DOCUMENT_FIELD_INSERTED
+     * - DOCUMENT_RECIPIENT_COMPLETED
+     */
+    const auditLogsToCreate: CreateDocumentAuditLogDataResponse[] = [
+      createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_CREATED,
+        documentId: document.id,
+        user: {
+          id: user?.id,
+          name: user?.name,
+          email: directRecipientEmail,
+        },
+        requestMetadata,
+        data: {
+          title: document.title,
+          source: {
+            type: DocumentSource.TEMPLATE_DIRECT_LINK,
+            templateId: template.id,
+            directRecipientEmail,
+          },
+        },
+      }),
+      createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_OPENED,
+        documentId: document.id,
+        user: {
+          id: user?.id,
+          name: user?.name,
+          email: directRecipientEmail,
+        },
+        requestMetadata,
+        data: {
+          recipientEmail: createdDirectRecipient.email,
+          recipientId: createdDirectRecipient.id,
+          recipientName: createdDirectRecipient.name,
+          recipientRole: createdDirectRecipient.role,
+          accessAuth: derivedRecipientAccessAuth || undefined,
+        },
+      }),
+      ...createdDirectRecipientFields.map(({ field, derivedRecipientActionAuth }) =>
+        createDocumentAuditLogData({
+          type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_INSERTED,
+          documentId: document.id,
+          user: {
+            id: user?.id,
+            name: user?.name,
+            email: directRecipientEmail,
+          },
+          requestMetadata,
+          data: {
+            recipientEmail: createdDirectRecipient.email,
+            recipientId: createdDirectRecipient.id,
+            recipientName: createdDirectRecipient.name,
+            recipientRole: createdDirectRecipient.role,
+            fieldId: field.secondaryId,
+            field: match(field.type)
+              .with(FieldType.SIGNATURE, FieldType.FREE_SIGNATURE, (type) => ({
+                type,
+                data:
+                  field.Signature?.signatureImageAsBase64 || field.Signature?.typedSignature || '',
+              }))
+              .with(FieldType.DATE, FieldType.EMAIL, FieldType.NAME, FieldType.TEXT, (type) => ({
+                type,
+                data: field.customText,
+              }))
+              .exhaustive(),
+            fieldSecurity: derivedRecipientActionAuth
+              ? {
+                  type: derivedRecipientActionAuth,
+                }
+              : undefined,
+          },
+        }),
+      ),
+      createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED,
+        documentId: document.id,
+        user: {
+          id: user?.id,
+          name: user?.name,
+          email: directRecipientEmail,
+        },
+        requestMetadata,
+        data: {
+          recipientEmail: createdDirectRecipient.email,
+          recipientId: createdDirectRecipient.id,
+          recipientName: createdDirectRecipient.name,
+          recipientRole: createdDirectRecipient.role,
+        },
+      }),
+    ];
+
+    await tx.documentAuditLog.createMany({
+      data: auditLogsToCreate,
+    });
+
+    // Send email to template owner.
+    const emailTemplate = createElement(DocumentCreatedFromDirectTemplateEmailTemplate, {
+      recipientName: directRecipientEmail,
+      recipientRole: directTemplateRecipient.role,
+      documentLink: `${formatDocumentsPath(document.team?.url)}/${document.id}`,
+      documentName: document.title,
+      assetBaseUrl: NEXT_PUBLIC_WEBAPP_URL() || 'http://localhost:3000',
+    });
+
+    await mailer.sendMail({
+      to: [
+        {
+          name: templateOwner.name || '',
+          address: templateOwner.email,
+        },
+      ],
+      from: {
+        name: process.env.NEXT_PRIVATE_SMTP_FROM_NAME || 'Documenso',
+        address: process.env.NEXT_PRIVATE_SMTP_FROM_ADDRESS || 'noreply@documenso.com',
+      },
+      subject: 'Document created from direct template',
+      html: render(emailTemplate),
+      text: render(emailTemplate, { plainText: true }),
+    });
+
+    return {
+      documentId: document.id,
+      directRecipientToken: createdDirectRecipient.token,
+    };
+  });
+
+  try {
+    // This handles sending emails and sealing the document if required.
+    await sendDocument({
+      documentId,
+      userId: template.userId,
+      teamId: template.teamId || undefined,
+      requestMetadata,
+    });
+  } catch (err) {
+    console.error('[CREATE_DOCUMENT_FROM_DIRECT_TEMPLATE]:', err);
+
+    // Don't launch an error since the document has already been created.
+    // Log and reseal as required until we configure middleware.
+  }
+
+  return directRecipientToken;
+};

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

@@ -1,6 +1,6 @@
 import { nanoid } from '@documenso/lib/universal/id';
 import { prisma } from '@documenso/prisma';
-import type { RecipientRole } from '@documenso/prisma/client';
+import { DocumentSource, type RecipientRole } from '@documenso/prisma/client';
 
 export type CreateDocumentFromTemplateLegacyOptions = {
   templateId: number;
@@ -62,6 +62,8 @@ export const createDocumentFromTemplateLegacy = async ({
 
   const document = await prisma.document.create({
     data: {
+      source: DocumentSource.TEMPLATE,
+      templateId: template.id,
       userId,
       teamId: template.teamId,
       title: template.title,

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

@@ -1,7 +1,14 @@
 import { nanoid } from '@documenso/lib/universal/id';
 import { prisma } from '@documenso/prisma';
 import type { Field } from '@documenso/prisma/client';
-import { type Recipient, WebhookTriggerEvents } from '@documenso/prisma/client';
+import {
+  DocumentSource,
+  type Recipient,
+  RecipientRole,
+  SendStatus,
+  SigningStatus,
+  WebhookTriggerEvents,
+} from '@documenso/prisma/client';
 
 import { AppError, AppErrorCode } from '../../errors/app-error';
 import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
@@ -139,6 +146,8 @@ export const createDocumentFromTemplate = async ({
   return await prisma.$transaction(async (tx) => {
     const document = await tx.document.create({
       data: {
+        source: DocumentSource.TEMPLATE,
+        templateId: template.id,
         userId,
         teamId: template.teamId,
         title: override?.title || template.title,
@@ -170,6 +179,12 @@ export const createDocumentFromTemplate = async ({
                   accessAuth: authOptions.accessAuth,
                   actionAuth: authOptions.actionAuth,
                 }),
+                sendStatus:
+                  recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
+                signingStatus:
+                  recipient.role === RecipientRole.CC
+                    ? SigningStatus.SIGNED
+                    : SigningStatus.NOT_SIGNED,
                 token: nanoid(),
               };
             }),
@@ -223,6 +238,10 @@ export const createDocumentFromTemplate = async ({
         requestMetadata,
         data: {
           title: document.title,
+          source: {
+            type: DocumentSource.TEMPLATE,
+            templateId: template.id,
+          },
         },
       }),
     });

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

@@ -0,0 +1,107 @@
+'use server';
+
+import { nanoid } from 'nanoid';
+
+import { prisma } from '@documenso/prisma';
+import type { Recipient, TemplateDirectLink } from '@documenso/prisma/client';
+
+import {
+  DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+  DIRECT_TEMPLATE_RECIPIENT_NAME,
+} from '../../constants/template';
+import { AppError, AppErrorCode } from '../../errors/app-error';
+
+export type CreateTemplateDirectLinkOptions = {
+  templateId: number;
+  userId: number;
+  directRecipientId?: number;
+};
+
+export const createTemplateDirectLink = async ({
+  templateId,
+  userId,
+  directRecipientId,
+}: CreateTemplateDirectLinkOptions): Promise<TemplateDirectLink> => {
+  const template = await prisma.template.findFirst({
+    where: {
+      id: templateId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
+    },
+    include: {
+      Recipient: true,
+      directLink: true,
+    },
+  });
+
+  if (!template) {
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Template not found');
+  }
+
+  if (template.directLink) {
+    throw new AppError(AppErrorCode.ALREADY_EXISTS, 'Direct template already exists');
+  }
+
+  if (
+    directRecipientId &&
+    !template.Recipient.find((recipient) => recipient.id === directRecipientId)
+  ) {
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Recipient not found');
+  }
+
+  if (
+    !directRecipientId &&
+    template.Recipient.find(
+      (recipient) => recipient.email.toLowerCase() === DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+    )
+  ) {
+    throw new AppError(AppErrorCode.INVALID_BODY, 'Cannot generate placeholder direct recipient');
+  }
+
+  return await prisma.$transaction(async (tx) => {
+    let recipient: Recipient | undefined;
+
+    if (directRecipientId) {
+      recipient = await tx.recipient.update({
+        where: {
+          templateId,
+          id: directRecipientId,
+        },
+        data: {
+          name: DIRECT_TEMPLATE_RECIPIENT_NAME,
+          email: DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+        },
+      });
+    } else {
+      recipient = await tx.recipient.create({
+        data: {
+          templateId,
+          name: DIRECT_TEMPLATE_RECIPIENT_NAME,
+          email: DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+          token: nanoid(),
+        },
+      });
+    }
+
+    return await tx.templateDirectLink.create({
+      data: {
+        templateId,
+        enabled: true,
+        token: nanoid(),
+        directTemplateRecipientId: recipient.id,
+      },
+    });
+  });
+};

packages/lib/server-only/template/delete-template-direct-link.ts

@@ -0,0 +1,68 @@
+'use server';
+
+import { generateAvaliableRecipientPlaceholder } from '@documenso/lib/utils/templates';
+import { prisma } from '@documenso/prisma';
+
+import { AppError, AppErrorCode } from '../../errors/app-error';
+
+export type DeleteTemplateDirectLinkOptions = {
+  templateId: number;
+  userId: number;
+};
+
+export const deleteTemplateDirectLink = async ({
+  templateId,
+  userId,
+}: DeleteTemplateDirectLinkOptions): Promise<void> => {
+  const template = await prisma.template.findFirst({
+    where: {
+      id: templateId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
+    },
+    include: {
+      directLink: true,
+      Recipient: true,
+    },
+  });
+
+  if (!template) {
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Template not found');
+  }
+
+  const { directLink } = template;
+
+  if (!directLink) {
+    return;
+  }
+
+  await prisma.$transaction(async (tx) => {
+    await tx.recipient.update({
+      where: {
+        templateId: template.id,
+        id: directLink.directTemplateRecipientId,
+      },
+      data: {
+        ...generateAvaliableRecipientPlaceholder(template.Recipient),
+      },
+    });
+
+    await tx.templateDirectLink.delete({
+      where: {
+        templateId,
+      },
+    });
+  });
+};

packages/lib/server-only/template/find-templates.ts

@@ -8,6 +8,9 @@ export type FindTemplatesOptions = {
   perPage: number;
 };
 
+export type FindTemplatesResponse = Awaited<ReturnType<typeof findTemplates>>;
+export type FindTemplateRow = FindTemplatesResponse['templates'][number];
+
 export const findTemplates = async ({
   userId,
   teamId,
@@ -45,6 +48,12 @@ export const findTemplates = async ({
         },
         Field: true,
         Recipient: true,
+        directLink: {
+          select: {
+            token: true,
+            enabled: true,
+          },
+        },
       },
       skip: Math.max(page - 1, 0) * perPage,
       orderBy: {

packages/lib/server-only/template/get-template-by-direct-link-token.ts

@@ -0,0 +1,33 @@
+import { prisma } from '@documenso/prisma';
+
+export interface GetTemplateByDirectLinkTokenOptions {
+  token: string;
+}
+
+export const getTemplateByDirectLinkToken = async ({
+  token,
+}: GetTemplateByDirectLinkTokenOptions) => {
+  const template = await prisma.template.findFirstOrThrow({
+    where: {
+      directLink: {
+        token,
+        enabled: true,
+      },
+    },
+    include: {
+      directLink: true,
+      Recipient: {
+        include: {
+          Field: true,
+        },
+      },
+      templateDocumentData: true,
+      templateMeta: true,
+    },
+  });
+
+  return {
+    ...template,
+    Field: template.Recipient.map((recipient) => recipient.Field).flat(),
+  };
+};

packages/lib/server-only/template/get-template-with-details-by-id.ts

@@ -29,6 +29,7 @@ export const getTemplateWithDetailsById = async ({
       ],
     },
     include: {
+      directLink: true,
       templateDocumentData: true,
       templateMeta: true,
       Recipient: true,

packages/lib/server-only/template/toggle-template-direct-link.ts

@@ -0,0 +1,61 @@
+'use server';
+
+import { prisma } from '@documenso/prisma';
+
+import { AppError, AppErrorCode } from '../../errors/app-error';
+
+export type ToggleTemplateDirectLinkOptions = {
+  templateId: number;
+  userId: number;
+  enabled: boolean;
+};
+
+export const toggleTemplateDirectLink = async ({
+  templateId,
+  userId,
+  enabled,
+}: ToggleTemplateDirectLinkOptions) => {
+  const template = await prisma.template.findFirst({
+    where: {
+      id: templateId,
+      OR: [
+        {
+          userId,
+        },
+        {
+          team: {
+            members: {
+              some: {
+                userId,
+              },
+            },
+          },
+        },
+      ],
+    },
+    include: {
+      Recipient: true,
+      directLink: true,
+    },
+  });
+
+  if (!template) {
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Template not found');
+  }
+
+  const { directLink } = template;
+
+  if (!directLink) {
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Direct template link not found');
+  }
+
+  return await prisma.templateDirectLink.update({
+    where: {
+      id: directLink.id,
+    },
+    data: {
+      templateId: template.id,
+      enabled,
+    },
+  });
+};

packages/lib/server-only/user/get-monthly-completed-document.ts

@@ -1,31 +1,27 @@
 import { DateTime } from 'luxon';
 
-import { prisma } from '@documenso/prisma';
-
-export type GetCompletedDocumentsMonthlyResult = Array<{
-  month: string;
-  count: number;
-  cume_count: number;
-}>;
-
-type GetCompletedDocumentsMonthlyQueryResult = Array<{
-  month: Date;
-  count: bigint;
-  cume_count: bigint;
-}>;
+import { kyselyPrisma, sql } from '@documenso/prisma';
+import { DocumentStatus } from '@documenso/prisma/client';
 
 export const getCompletedDocumentsMonthly = async () => {
-  const result = await prisma.$queryRaw<GetCompletedDocumentsMonthlyQueryResult>`
-    SELECT
-      DATE_TRUNC('month', "updatedAt") AS "month",
-      COUNT("id") as "count",
-      SUM(COUNT("id")) OVER (ORDER BY DATE_TRUNC('month', "updatedAt")) as "cume_count"
-    FROM "Document"
-    WHERE "status" = 'COMPLETED'
-    GROUP BY "month"
-    ORDER BY "month" DESC
-    LIMIT 12
-  `;
+  const qb = kyselyPrisma.$kysely
+    .selectFrom('Document')
+    .select(({ fn }) => [
+      fn<Date>('DATE_TRUNC', [sql.lit('MONTH'), 'Document.updatedAt']).as('month'),
+      fn.count('id').as('count'),
+      fn
+        .sum(fn.count('id'))
+        // Feels like a bug in the Kysely extension but I just can not do this orderBy in a type-safe manner
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
+        .over((ob) => ob.orderBy(fn('DATE_TRUNC', [sql.lit('MONTH'), 'Document.updatedAt']) as any))
+        .as('cume_count'),
+    ])
+    .where(() => sql`"Document"."status" = ${DocumentStatus.COMPLETED}::"DocumentStatus"`)
+    .groupBy('month')
+    .orderBy('month', 'desc')
+    .limit(12);
+
+  const result = await qb.execute();
 
   return result.map((row) => ({
     month: DateTime.fromJSDate(row.month).toFormat('yyyy-MM'),
@@ -33,3 +29,7 @@ export const getCompletedDocumentsMonthly = async () => {
     cume_count: Number(row.cume_count),
   }));
 };
+
+export type GetCompletedDocumentsMonthlyResult = Awaited<
+  ReturnType<typeof getCompletedDocumentsMonthly>
+>;

packages/lib/server-only/user/get-user-monthly-growth.ts

@@ -1,30 +1,25 @@
 import { DateTime } from 'luxon';
 
-import { prisma } from '@documenso/prisma';
-
-export type GetUserMonthlyGrowthResult = Array<{
-  month: string;
-  count: number;
-  cume_count: number;
-}>;
-
-type GetUserMonthlyGrowthQueryResult = Array<{
-  month: Date;
-  count: bigint;
-  cume_count: bigint;
-}>;
+import { kyselyPrisma, sql } from '@documenso/prisma';
 
 export const getUserMonthlyGrowth = async () => {
-  const result = await prisma.$queryRaw<GetUserMonthlyGrowthQueryResult>`
-    SELECT
-      DATE_TRUNC('month', "createdAt") AS "month",
-      COUNT("id") as "count",
-      SUM(COUNT("id")) OVER (ORDER BY DATE_TRUNC('month', "createdAt")) as "cume_count"
-    FROM "User"
-    GROUP BY "month"
-    ORDER BY "month" DESC
-    LIMIT 12
-  `;
+  const qb = kyselyPrisma.$kysely
+    .selectFrom('User')
+    .select(({ fn }) => [
+      fn<Date>('DATE_TRUNC', [sql.lit('MONTH'), 'User.createdAt']).as('month'),
+      fn.count('id').as('count'),
+      fn
+        .sum(fn.count('id'))
+        // Feels like a bug in the Kysely extension but I just can not do this orderBy in a type-safe manner
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
+        .over((ob) => ob.orderBy(fn('DATE_TRUNC', [sql.lit('MONTH'), 'User.createdAt']) as any))
+        .as('cume_count'),
+    ])
+    .groupBy('month')
+    .orderBy('month', 'desc')
+    .limit(12);
+
+  const result = await qb.execute();
 
   return result.map((row) => ({
     month: DateTime.fromJSDate(row.month).toFormat('yyyy-MM'),
@@ -32,3 +27,5 @@ export const getUserMonthlyGrowth = async () => {
     cume_count: Number(row.cume_count),
   }));
 };
+
+export type GetUserMonthlyGrowthResult = Awaited<ReturnType<typeof getUserMonthlyGrowth>>;

packages/lib/types/document-audit-logs.ts

@@ -6,7 +6,7 @@
 /////////////////////////////////////////////////////////////////////////////////////////////
 import { z } from 'zod';
 
-import { FieldType } from '@documenso/prisma/client';
+import { DocumentSource, FieldType } from '@documenso/prisma/client';
 
 import { ZRecipientActionAuthTypesSchema } from './document-auth';
 
@@ -192,6 +192,22 @@ export const ZDocumentAuditLogEventDocumentCreatedSchema = z.object({
   type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_CREATED),
   data: z.object({
     title: z.string(),
+    source: z
+      .union([
+        z.object({
+          type: z.literal(DocumentSource.DOCUMENT),
+        }),
+        z.object({
+          type: z.literal(DocumentSource.TEMPLATE),
+          templateId: z.number(),
+        }),
+        z.object({
+          type: z.literal(DocumentSource.TEMPLATE_DIRECT_LINK),
+          templateId: z.number(),
+          directRecipientEmail: z.string().email(),
+        }),
+      ])
+      .optional(),
   }),
 });
 

packages/lib/utils/templates.ts

@@ -0,0 +1,44 @@
+import type { Recipient } from '@documenso/prisma/client';
+
+import { WEBAPP_BASE_URL } from '../constants/app';
+
+export const formatDirectTemplatePath = (token: string) => {
+  return `${WEBAPP_BASE_URL}/d/${token}`;
+};
+
+/**
+ * Generate a placeholder recipient using an index number.
+ *
+ * May collide with existing recipients.
+ *
+ * Note:
+ * - Update TEMPLATE_RECIPIENT_EMAIL_PLACEHOLDER_REGEX if this is ever changed.
+ * - Update TEMPLATE_RECIPIENT_NAME_PLACEHOLDER_REGEX if this is ever changed.
+ *
+ */
+export const generateRecipientPlaceholder = (index: number) => {
+  return {
+    name: `Recipient ${index}`,
+    email: `recipient.${index}@documenso.com`,
+  };
+};
+
+/**
+ * Generates a placeholder that does not collide with any existing recipients.
+ *
+ * @param currentRecipients The current recipients that exist for a template.
+ */
+export const generateAvaliableRecipientPlaceholder = (currentRecipients: Recipient[]) => {
+  const recipientEmails = currentRecipients.map((recipient) => recipient.email);
+  let recipientPlaceholder = generateRecipientPlaceholder(0);
+
+  for (let i = 1; i <= currentRecipients.length + 1; i++) {
+    recipientPlaceholder = generateRecipientPlaceholder(i);
+
+    if (!recipientEmails.includes(recipientPlaceholder.email)) {
+      return recipientPlaceholder;
+    }
+  }
+
+  return recipientPlaceholder;
+};

packages/prisma/.gitignore

@@ -0,0 +1 @@
+generated/

packages/prisma/index.ts

@@ -1,21 +1,33 @@
 import { PrismaClient } from '@prisma/client';
+import { Kysely, PostgresAdapter, PostgresIntrospector, PostgresQueryCompiler } from 'kysely';
+import kyselyExtension from 'prisma-extension-kysely';
 
+import type { DB } from './generated/types';
 import { getDatabaseUrl } from './helper';
+import { remember } from './utils/remember';
 
-declare global {
-  // We need `var` to declare a global variable in TypeScript
-  // eslint-disable-next-line no-var
-  var prisma: PrismaClient | undefined;
-}
+export const prisma = remember(
+  'prisma',
+  () =>
+    new PrismaClient({
+      datasourceUrl: getDatabaseUrl(),
+    }),
+);
 
-if (!globalThis.prisma) {
-  globalThis.prisma = new PrismaClient({ datasourceUrl: getDatabaseUrl() });
-}
+export const kyselyPrisma = remember('kyselyPrisma', () =>
+  prisma.$extends(
+    kyselyExtension({
+      kysely: (driver) =>
+        new Kysely<DB>({
+          dialect: {
+            createAdapter: () => new PostgresAdapter(),
+            createDriver: () => driver,
+            createIntrospector: (db) => new PostgresIntrospector(db),
+            createQueryCompiler: () => new PostgresQueryCompiler(),
+          },
+        }),
+    }),
+  ),
+);
 
-export const prisma =
-  globalThis.prisma ||
-  new PrismaClient({
-    datasourceUrl: getDatabaseUrl(),
-  });
-
-export const getPrismaClient = () => prisma;
+export { sql } from 'kysely';

packages/prisma/migrations/20240413202001_add_oidc_auth/migration.sql

@@ -0,0 +1 @@
+ALTER TYPE "IdentityProvider" ADD VALUE IF NOT EXISTS 'OIDC';

packages/prisma/migrations/20240530055436_add_template_direct_links/migration.sql

@@ -0,0 +1,45 @@
+/*
+  Warnings:
+
+  - Added the required column `source` to the `Document` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- CreateEnum
+CREATE TYPE "DocumentSource" AS ENUM ('DOCUMENT', 'TEMPLATE', 'TEMPLATE_DIRECT_LINK');
+
+-- AlterTable
+ALTER TABLE "Document" ADD COLUMN     "source" "DocumentSource",
+ADD COLUMN     "templateId" INTEGER;
+
+-- Custom: UpdateTable
+UPDATE "Document" SET "source" = 'DOCUMENT' WHERE "source" IS NULL;
+
+-- Custom: AlterColumn
+ALTER TABLE "Document" ALTER COLUMN     "source" SET NOT NULL;
+
+-- CreateTable
+CREATE TABLE "TemplateDirectLink" (
+    "id" TEXT NOT NULL,
+    "templateId" INTEGER NOT NULL,
+    "token" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "enabled" BOOLEAN NOT NULL,
+    "directTemplateRecipientId" INTEGER NOT NULL,
+
+    CONSTRAINT "TemplateDirectLink_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TemplateDirectLink_id_key" ON "TemplateDirectLink"("id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TemplateDirectLink_templateId_key" ON "TemplateDirectLink"("templateId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "TemplateDirectLink_token_key" ON "TemplateDirectLink"("token");
+
+-- AddForeignKey
+ALTER TABLE "Document" ADD CONSTRAINT "Document_templateId_fkey" FOREIGN KEY ("templateId") REFERENCES "Template"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TemplateDirectLink" ADD CONSTRAINT "TemplateDirectLink_templateId_fkey" FOREIGN KEY ("templateId") REFERENCES "Template"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/migrations/20240530120101_add_missing_fields_to_account_model_for_oidc/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "Account" ADD COLUMN     "created_at" INTEGER,
+ADD COLUMN     "ext_expires_in" INTEGER;

packages/prisma/package.json

@@ -12,21 +12,25 @@
     "prisma:generate": "prisma generate",
     "prisma:migrate-dev": "prisma migrate dev --skip-seed",
     "prisma:migrate-deploy": "prisma migrate deploy",
+    "prisma:migrate-reset": "prisma migrate reset",
     "prisma:seed": "prisma db seed",
     "prisma:studio": "prisma studio"
   },
   "prisma": {
-    "seed": "ts-node --transpileOnly --project ./tsconfig.seed.json ./seed-database.ts"
+    "seed": "tsx ./seed-database.ts"
   },
   "dependencies": {
     "@prisma/client": "5.4.2",
+    "kysely": "^0.27.3",
     "prisma": "5.4.2",
+    "prisma-extension-kysely": "^2.1.0",
     "ts-pattern": "^5.0.6"
   },
   "devDependencies": {
     "dotenv": "^16.3.1",
     "dotenv-cli": "^7.3.0",
-    "ts-node": "^10.9.1",
+    "prisma-kysely": "^1.8.0",
+    "tsx": "^4.11.0",
     "typescript": "5.2.2"
   }
 }

packages/prisma/schema.prisma

@@ -1,3 +1,7 @@
+generator kysely {
+  provider = "prisma-kysely"
+}
+
 generator client {
   provider = "prisma-client-js"
 }
@@ -11,6 +15,7 @@ datasource db {
 enum IdentityProvider {
   DOCUMENSO
   GOOGLE
+  OIDC
 }
 
 enum Role {
@@ -228,6 +233,10 @@ model Account {
   refresh_token     String? @db.Text
   access_token      String? @db.Text
   expires_at        Int?
+  // Some providers return created_at so we need to make it optional
+  created_at        Int?
+  // Stops next-auth from crashing when dealing with AzureAD
+  ext_expires_in    Int?
   token_type        String?
   scope             String?
   id_token          String? @db.Text
@@ -252,6 +261,12 @@ enum DocumentStatus {
   COMPLETED
 }
 
+enum DocumentSource {
+  DOCUMENT
+  TEMPLATE
+  TEMPLATE_DIRECT_LINK
+}
+
 model Document {
   id             Int                 @id @default(autoincrement())
   userId         Int
@@ -272,6 +287,9 @@ model Document {
   deletedAt      DateTime?
   teamId         Int?
   team           Team?               @relation(fields: [teamId], references: [id])
+  templateId     Int?
+  template       Template?           @relation(fields: [templateId], references: [id], onDelete: SetNull)
+  source         DocumentSource
 
   auditLogs DocumentAuditLog[]
 
@@ -563,15 +581,29 @@ model Template {
   createdAt              DateTime      @default(now())
   updatedAt              DateTime      @default(now()) @updatedAt
 
-  team                 Team?        @relation(fields: [teamId], references: [id], onDelete: Cascade)
-  templateDocumentData DocumentData @relation(fields: [templateDocumentDataId], references: [id], onDelete: Cascade)
-  User                 User         @relation(fields: [userId], references: [id], onDelete: Cascade)
+  team                 Team?               @relation(fields: [teamId], references: [id], onDelete: Cascade)
+  templateDocumentData DocumentData        @relation(fields: [templateDocumentDataId], references: [id], onDelete: Cascade)
+  User                 User                @relation(fields: [userId], references: [id], onDelete: Cascade)
   Recipient            Recipient[]
   Field                Field[]
+  directLink           TemplateDirectLink?
+  documents            Document[]
 
   @@unique([templateDocumentDataId])
 }
 
+model TemplateDirectLink {
+  id         String   @id @unique @default(cuid())
+  templateId Int      @unique
+  token      String   @unique
+  createdAt  DateTime @default(now())
+  enabled    Boolean
+
+  directTemplateRecipientId Int
+
+  template Template @relation(fields: [templateId], references: [id], onDelete: Cascade)
+}
+
 model SiteSettings {
   id                   String   @id
   enabled              Boolean  @default(false)

packages/prisma/seed/documents.ts

@@ -7,6 +7,7 @@ import { match } from 'ts-pattern';
 import { prisma } from '..';
 import {
   DocumentDataType,
+  DocumentSource,
   DocumentStatus,
   FieldType,
   Prisma,
@@ -68,6 +69,7 @@ export const seedBlankDocument = async (owner: User, options: CreateDocumentOpti
 
   return await prisma.document.create({
     data: {
+      source: DocumentSource.DOCUMENT,
       title: `[TEST] Document ${key} - Draft`,
       status: DocumentStatus.DRAFT,
       documentDataId: documentData.id,
@@ -102,6 +104,7 @@ export const seedDraftDocument = async (
 
   const document = await prisma.document.create({
     data: {
+      source: DocumentSource.DOCUMENT,
       title: `[TEST] Document ${key} - Draft`,
       status: DocumentStatus.DRAFT,
       documentDataId: documentData.id,
@@ -170,6 +173,7 @@ export const seedPendingDocument = async (
 
   const document = await prisma.document.create({
     data: {
+      source: DocumentSource.DOCUMENT,
       title: `[TEST] Document ${key} - Pending`,
       status: DocumentStatus.PENDING,
       documentDataId: documentData.id,
@@ -375,6 +379,7 @@ export const seedCompletedDocument = async (
 
   const document = await prisma.document.create({
     data: {
+      source: DocumentSource.DOCUMENT,
       title: `[TEST] Document ${key} - Completed`,
       status: DocumentStatus.COMPLETED,
       documentDataId: documentData.id,

packages/prisma/seed/initial-seed.ts

@@ -4,7 +4,7 @@ import path from 'node:path';
 import { hashSync } from '@documenso/lib/server-only/auth/hash';
 
 import { prisma } from '..';
-import { DocumentDataType, Role } from '../client';
+import { DocumentDataType, DocumentSource, Role } from '../client';
 
 export const seedDatabase = async () => {
   const examplePdf = fs
@@ -54,6 +54,7 @@ export const seedDatabase = async () => {
 
   await prisma.document.create({
     data: {
+      source: DocumentSource.DOCUMENT,
       title: 'Example Document',
       documentDataId: examplePdfData.id,
       userId: exampleUser.id,

packages/prisma/seed/templates.ts

@@ -1,6 +1,11 @@
 import fs from 'node:fs';
 import path from 'node:path';
 
+import {
+  DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+  DIRECT_TEMPLATE_RECIPIENT_NAME,
+} from '@documenso/lib/constants/template';
+
 import { prisma } from '..';
 import type { Prisma, User } from '../client';
 import { DocumentDataType, ReadStatus, RecipientRole, SendStatus, SigningStatus } from '../client';
@@ -13,6 +18,7 @@ type SeedTemplateOptions = {
   title?: string;
   userId: number;
   teamId?: number;
+  createTemplateOptions?: Partial<Prisma.TemplateCreateInput>;
 };
 
 type CreateTemplateOptions = {
@@ -88,3 +94,81 @@ export const seedTemplate = async (options: SeedTemplateOptions) => {
     },
   });
 };
+
+export const seedDirectTemplate = async (options: SeedTemplateOptions) => {
+  const { title = 'Untitled', userId, teamId } = options;
+
+  const documentData = await prisma.documentData.create({
+    data: {
+      type: DocumentDataType.BYTES_64,
+      data: examplePdf,
+      initialData: examplePdf,
+    },
+  });
+
+  const template = await prisma.template.create({
+    data: {
+      title,
+      templateDocumentData: {
+        connect: {
+          id: documentData.id,
+        },
+      },
+      User: {
+        connect: {
+          id: userId,
+        },
+      },
+      Recipient: {
+        create: {
+          email: DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+          name: DIRECT_TEMPLATE_RECIPIENT_NAME,
+          token: Math.random().toString().slice(2, 7),
+        },
+      },
+      ...(teamId
+        ? {
+            team: {
+              connect: {
+                id: teamId,
+              },
+            },
+          }
+        : {}),
+      ...options.createTemplateOptions,
+    },
+    include: {
+      Recipient: true,
+      User: true,
+    },
+  });
+
+  const directTemplateRecpient = template.Recipient.find(
+    (recipient) => recipient.email === DIRECT_TEMPLATE_RECIPIENT_EMAIL,
+  );
+
+  if (!directTemplateRecpient) {
+    throw new Error('Need to create a direct template recipient');
+  }
+
+  await prisma.templateDirectLink.create({
+    data: {
+      templateId: template.id,
+      enabled: true,
+      token: Math.random().toString(),
+      directTemplateRecipientId: directTemplateRecpient.id,
+    },
+  });
+
+  return await prisma.template.findFirstOrThrow({
+    where: {
+      id: template.id,
+    },
+    include: {
+      directLink: true,
+      Field: true,
+      Recipient: true,
+      team: true,
+    },
+  });
+};

packages/prisma/seed/users.ts

@@ -4,8 +4,6 @@ import { hashSync } from '@documenso/lib/server-only/auth/hash';
 
 import { prisma } from '..';
 
-export const seedTestEmail = () => `user-${Date.now()}@test.documenso.com`;
-
 type SeedUserOptions = {
   name?: string;
   email?: string;
@@ -15,6 +13,8 @@ type SeedUserOptions = {
 
 const nanoid = customAlphabet('1234567890abcdef', 10);
 
+export const seedTestEmail = () => `${nanoid()}@test.documenso.com`;
+
 export const seedUser = async ({
   name,
   email,

packages/prisma/types/template.ts

@@ -3,6 +3,7 @@ import type {
   Field,
   Recipient,
   Template,
+  TemplateDirectLink,
   TemplateMeta,
 } from '@documenso/prisma/client';
 
@@ -12,6 +13,7 @@ export type TemplateWithData = Template & {
 };
 
 export type TemplateWithDetails = Template & {
+  directLink: TemplateDirectLink | null;
   templateDocumentData: DocumentData;
   templateMeta: TemplateMeta | null;
   Recipient: Recipient[];

packages/prisma/utils/remember.ts

@@ -0,0 +1,18 @@
+declare global {
+  // eslint-disable-next-line no-var, @typescript-eslint/no-explicit-any
+  var __prisma_remember: Map<string, any>;
+}
+
+export function remember<T>(name: string, getValue: () => T): T {
+  const thusly = globalThis;
+
+  if (!thusly.__prisma_remember) {
+    thusly.__prisma_remember = new Map();
+  }
+
+  if (!thusly.__prisma_remember.has(name)) {
+    thusly.__prisma_remember.set(name, getValue());
+  }
+
+  return thusly.__prisma_remember.get(name);
+}

packages/tailwind-config/index.cjs

@@ -7,9 +7,6 @@ module.exports = {
   content: ['src/**/*.{ts,tsx}'],
   theme: {
     extend: {
-      screens: {
-        print: { raw: 'print' },
-      },
       fontFamily: {
         sans: ['var(--font-sans)', ...fontFamily.sans],
         signature: ['var(--font-signature)'],
@@ -138,6 +135,7 @@ module.exports = {
         '3xl': '1920px',
         '4xl': '2560px',
         '5xl': '3840px',
+        print: { raw: 'print' },
       },
     },
   },

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

@@ -13,6 +13,7 @@ import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { prisma } from '@documenso/prisma';
 import {
+  DocumentSource,
   DocumentStatus,
   FieldType,
   ReadStatus,
@@ -95,6 +96,7 @@ export const singleplayerRouter = router({
             // Create document.
             const document = await tx.document.create({
               data: {
+                source: DocumentSource.DOCUMENT,
                 title: documentName,
                 status: DocumentStatus.COMPLETED,
                 documentDataId,

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

@@ -1,24 +1,32 @@
 import { TRPCError } from '@trpc/server';
 
 import { getServerLimits } from '@documenso/ee/server-only/limits/server';
-import { AppError } from '@documenso/lib/errors/app-error';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { sendDocument } from '@documenso/lib/server-only/document/send-document';
+import { createDocumentFromDirectTemplate } from '@documenso/lib/server-only/template/create-document-from-direct-template';
 import { createDocumentFromTemplate } from '@documenso/lib/server-only/template/create-document-from-template';
 import { createTemplate } from '@documenso/lib/server-only/template/create-template';
+import { createTemplateDirectLink } from '@documenso/lib/server-only/template/create-template-direct-link';
 import { deleteTemplate } from '@documenso/lib/server-only/template/delete-template';
+import { deleteTemplateDirectLink } from '@documenso/lib/server-only/template/delete-template-direct-link';
 import { duplicateTemplate } from '@documenso/lib/server-only/template/duplicate-template';
 import { getTemplateWithDetailsById } from '@documenso/lib/server-only/template/get-template-with-details-by-id';
+import { toggleTemplateDirectLink } from '@documenso/lib/server-only/template/toggle-template-direct-link';
 import { updateTemplateSettings } from '@documenso/lib/server-only/template/update-template-settings';
 import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import type { Document } from '@documenso/prisma/client';
 
-import { authenticatedProcedure, router } from '../trpc';
+import { authenticatedProcedure, maybeAuthenticatedProcedure, router } from '../trpc';
 import {
+  ZCreateDocumentFromDirectTemplateMutationSchema,
   ZCreateDocumentFromTemplateMutationSchema,
+  ZCreateTemplateDirectLinkMutationSchema,
   ZCreateTemplateMutationSchema,
+  ZDeleteTemplateDirectLinkMutationSchema,
   ZDeleteTemplateMutationSchema,
   ZDuplicateTemplateMutationSchema,
   ZGetTemplateWithDetailsByIdQuerySchema,
+  ZToggleTemplateDirectLinkMutationSchema,
   ZUpdateTemplateSettingsMutationSchema,
 } from './schema';
 
@@ -45,6 +53,36 @@ export const templateRouter = router({
       }
     }),
 
+  createDocumentFromDirectTemplate: maybeAuthenticatedProcedure
+    .input(ZCreateDocumentFromDirectTemplateMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { directRecipientEmail, directTemplateToken, signedFieldValues, templateUpdatedAt } =
+          input;
+
+        const requestMetadata = extractNextApiRequestMetadata(ctx.req);
+
+        return await createDocumentFromDirectTemplate({
+          directRecipientEmail,
+          directTemplateToken,
+          signedFieldValues,
+          templateUpdatedAt,
+          user: ctx.user
+            ? {
+                id: ctx.user.id,
+                name: ctx.user.name || undefined,
+                email: ctx.user.email,
+              }
+            : undefined,
+          requestMetadata,
+        });
+      } catch (err) {
+        console.error(err);
+
+        throw AppError.parseErrorToTRPCError(err);
+      }
+    }),
+
   createDocumentFromTemplate: authenticatedProcedure
     .input(ZCreateDocumentFromTemplateMutationSchema)
     .mutation(async ({ input, ctx }) => {
@@ -175,4 +213,64 @@ export const templateRouter = router({
         });
       }
     }),
+
+  createTemplateDirectLink: authenticatedProcedure
+    .input(ZCreateTemplateDirectLinkMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { templateId, directRecipientId } = input;
+
+        const userId = ctx.user.id;
+
+        const limits = await getServerLimits({ email: ctx.user.email });
+
+        if (limits.remaining.directTemplates === 0) {
+          throw new AppError(
+            AppErrorCode.LIMIT_EXCEEDED,
+            'You have reached your direct templates limit.',
+          );
+        }
+
+        return await createTemplateDirectLink({ userId, templateId, directRecipientId });
+      } catch (err) {
+        console.error(err);
+
+        const error = AppError.parseError(err);
+        throw AppError.parseErrorToTRPCError(error);
+      }
+    }),
+
+  deleteTemplateDirectLink: authenticatedProcedure
+    .input(ZDeleteTemplateDirectLinkMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { templateId } = input;
+
+        const userId = ctx.user.id;
+
+        return await deleteTemplateDirectLink({ userId, templateId });
+      } catch (err) {
+        console.error(err);
+
+        const error = AppError.parseError(err);
+        throw AppError.parseErrorToTRPCError(error);
+      }
+    }),
+
+  toggleTemplateDirectLink: authenticatedProcedure
+    .input(ZToggleTemplateDirectLinkMutationSchema)
+    .mutation(async ({ input, ctx }) => {
+      try {
+        const { templateId, enabled } = input;
+
+        const userId = ctx.user.id;
+
+        return await toggleTemplateDirectLink({ userId, templateId, enabled });
+      } catch (err) {
+        console.error(err);
+
+        const error = AppError.parseError(err);
+        throw AppError.parseErrorToTRPCError(error);
+      }
+    }),
 });

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

@@ -6,12 +6,21 @@ import {
   ZDocumentActionAuthTypesSchema,
 } from '@documenso/lib/types/document-auth';
 
+import { ZSignFieldWithTokenMutationSchema } from '../field-router/schema';
+
 export const ZCreateTemplateMutationSchema = z.object({
   title: z.string().min(1).trim(),
   teamId: z.number().optional(),
   templateDocumentDataId: z.string().min(1),
 });
 
+export const ZCreateDocumentFromDirectTemplateMutationSchema = z.object({
+  directRecipientEmail: z.string().email(),
+  directTemplateToken: z.string().min(1),
+  signedFieldValues: z.array(ZSignFieldWithTokenMutationSchema),
+  templateUpdatedAt: z.date(),
+});
+
 export const ZCreateDocumentFromTemplateMutationSchema = z.object({
   templateId: z.number(),
   teamId: z.number().optional(),
@@ -35,6 +44,20 @@ export const ZDuplicateTemplateMutationSchema = z.object({
   teamId: z.number().optional(),
 });
 
+export const ZCreateTemplateDirectLinkMutationSchema = z.object({
+  templateId: z.number().min(1),
+  directRecipientId: z.number().min(1).optional(),
+});
+
+export const ZDeleteTemplateDirectLinkMutationSchema = z.object({
+  templateId: z.number().min(1),
+});
+
+export const ZToggleTemplateDirectLinkMutationSchema = z.object({
+  templateId: z.number().min(1),
+  enabled: z.boolean(),
+});
+
 export const ZDeleteTemplateMutationSchema = z.object({
   id: z.number().min(1),
 });

packages/trpc/server/trpc.ts

@@ -29,6 +29,16 @@ export const authenticatedMiddleware = t.middleware(async ({ ctx, next }) => {
   });
 });
 
+export const maybeAuthenticatedMiddleware = t.middleware(async ({ ctx, next }) => {
+  return await next({
+    ctx: {
+      ...ctx,
+      user: ctx.user,
+      session: ctx.session,
+    },
+  });
+});
+
 export const adminMiddleware = t.middleware(async ({ ctx, next }) => {
   if (!ctx.session || !ctx.user) {
     throw new TRPCError({
@@ -49,7 +59,6 @@ export const adminMiddleware = t.middleware(async ({ ctx, next }) => {
   return await next({
     ctx: {
       ...ctx,
-
       user: ctx.user,
       session: ctx.session,
     },
@@ -62,4 +71,6 @@ export const adminMiddleware = t.middleware(async ({ ctx, next }) => {
 export const router = t.router;
 export const procedure = t.procedure;
 export const authenticatedProcedure = t.procedure.use(authenticatedMiddleware);
+// While this is functionally the same as `procedure`, it's useful for indicating purpose
+export const maybeAuthenticatedProcedure = t.procedure.use(maybeAuthenticatedMiddleware);
 export const adminProcedure = t.procedure.use(adminMiddleware);

packages/tsconfig/process-env.d.ts

@@ -6,6 +6,10 @@ declare namespace NodeJS {
     NEXT_PRIVATE_GOOGLE_CLIENT_ID?: string;
     NEXT_PRIVATE_GOOGLE_CLIENT_SECRET?: string;
 
+    NEXT_PRIVATE_OIDC_WELL_KNOWN?: string;
+    NEXT_PRIVATE_OIDC_CLIENT_ID?: string;
+    NEXT_PRIVATE_OIDC_CLIENT_SECRET?: string;
+
     NEXT_PRIVATE_DATABASE_URL: string;
     NEXT_PRIVATE_ENCRYPTION_KEY: string;
     NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY: string;

packages/ui/components/animate/animated-data-flow.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import { type RefObject, useEffect, useId, useState } from 'react';
+
+import { motion } from 'framer-motion';
+
+import { cn } from '../../lib/utils';
+
+export interface AnimatedDataFlowProps {
+  className?: string;
+  containerRef: RefObject<HTMLElement>;
+  fromRef: RefObject<HTMLElement>;
+  toRef: RefObject<HTMLElement>;
+  curvature?: number;
+  reverse?: boolean;
+  pathColor?: string;
+  pathWidth?: number;
+  pathOpacity?: number;
+  gradientStartColor?: string;
+  gradientStopColor?: string;
+  delay?: number;
+  duration?: number;
+  startXOffset?: number;
+  startYOffset?: number;
+  endXOffset?: number;
+  endYOffset?: number;
+}
+
+export const AnimatedDataFlow: React.FC<AnimatedDataFlowProps> = ({
+  className,
+  containerRef,
+  fromRef,
+  toRef,
+  curvature = 0,
+  reverse = false, // Include the reverse prop
+  duration = 5,
+  delay = 0,
+  pathColor = 'gray',
+  pathWidth = 2,
+  pathOpacity = 0.2,
+  gradientStartColor = '#A2E771',
+  gradientStopColor = '#1F5200',
+  startXOffset = 0,
+  startYOffset = 0,
+  endXOffset = 0,
+  endYOffset = 0,
+}) => {
+  const id = useId();
+  const [pathD, setPathD] = useState('');
+  const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 });
+
+  // Calculate the gradient coordinates based on the reverse prop
+  const gradientCoordinates = reverse
+    ? {
+        x1: ['90%', '-10%'],
+        x2: ['100%', '0%'],
+        y1: ['0%', '0%'],
+        y2: ['0%', '0%'],
+      }
+    : {
+        x1: ['10%', '110%'],
+        x2: ['0%', '100%'],
+        y1: ['0%', '0%'],
+        y2: ['0%', '0%'],
+      };
+
+  useEffect(() => {
+    const updatePath = () => {
+      if (containerRef.current && fromRef.current && toRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const rectA = fromRef.current.getBoundingClientRect();
+        const rectB = toRef.current.getBoundingClientRect();
+
+        const svgWidth = containerRect.width;
+        const svgHeight = containerRect.height;
+        setSvgDimensions({ width: svgWidth, height: svgHeight });
+
+        const startX = rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
+        const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
+        const endX = rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
+        const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
+
+        const controlY = startY - curvature;
+        const d = `M ${startX},${startY} Q ${(startX + endX) / 2},${controlY} ${endX},${endY}`;
+        setPathD(d);
+      }
+    };
+
+    // Initialize ResizeObserver
+    const resizeObserver = new ResizeObserver((entries) => {
+      // For all entries, recalculate the path
+      // eslint-disable-next-line unused-imports/no-unused-vars
+      for (const entry of entries) {
+        updatePath();
+      }
+    });
+
+    // Observe the container element
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    // Call the updatePath initially to set the initial path
+    updatePath();
+
+    // Clean up the observer on component unmount
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset]);
+
+  return (
+    <svg
+      fill="none"
+      width={svgDimensions.width}
+      height={svgDimensions.height}
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('pointer-events-none absolute left-0 top-0 transform-gpu stroke-2', className)}
+      viewBox={`0 0 ${svgDimensions.width} ${svgDimensions.height}`}
+    >
+      <path
+        d={pathD}
+        stroke={pathColor}
+        strokeWidth={pathWidth}
+        strokeOpacity={pathOpacity}
+        strokeLinecap="round"
+      />
+      <path
+        d={pathD}
+        strokeWidth={pathWidth}
+        stroke={`url(#${id})`}
+        strokeOpacity="1"
+        strokeLinecap="round"
+      />
+      <defs>
+        <motion.linearGradient
+          className="transform-gpu"
+          id={id}
+          gradientUnits={'userSpaceOnUse'}
+          initial={{
+            x1: '0%',
+            x2: '0%',
+            y1: '0%',
+            y2: '0%',
+          }}
+          animate={{
+            x1: gradientCoordinates.x1,
+            x2: gradientCoordinates.x2,
+            y1: gradientCoordinates.y1,
+            y2: gradientCoordinates.y2,
+          }}
+          transition={{
+            delay,
+            duration,
+            ease: [0.16, 1, 0.3, 1],
+            repeat: Infinity,
+            repeatDelay: 0,
+          }}
+        >
+          <stop stopColor={gradientStartColor} stopOpacity="0"></stop>
+          <stop stopColor={gradientStartColor}></stop>
+          <stop offset="32.5%" stopColor={gradientStopColor}></stop>
+          <stop offset="100%" stopColor={gradientStopColor} stopOpacity="0"></stop>
+        </motion.linearGradient>
+      </defs>
+    </svg>
+  );
+};

packages/ui/components/recipient/recipient-role-select.tsx

@@ -10,88 +10,94 @@ import { ROLE_ICONS } from '@documenso/ui/primitives/recipient-role-icons';
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@documenso/ui/primitives/select';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
-export type RecipientRoleSelectProps = SelectProps;
+export type RecipientRoleSelectProps = SelectProps & {
+  hideCCRecipients?: boolean;
+};
 
-export const RecipientRoleSelect = forwardRef<HTMLButtonElement, SelectProps>((props, ref) => (
-  <Select {...props}>
-    <SelectTrigger ref={ref} className="bg-background w-[60px]">
-      {/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */}
-      {ROLE_ICONS[props.value as RecipientRole]}
-    </SelectTrigger>
+export const RecipientRoleSelect = forwardRef<HTMLButtonElement, RecipientRoleSelectProps>(
+  ({ hideCCRecipients, ...props }, ref) => (
+    <Select {...props}>
+      <SelectTrigger ref={ref} className="bg-background w-[60px]">
+        {/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */}
+        {ROLE_ICONS[props.value as RecipientRole]}
+      </SelectTrigger>
 
-    <SelectContent align="end">
-      <SelectItem value={RecipientRole.SIGNER}>
-        <div className="flex items-center">
-          <div className="flex w-[150px] items-center">
-            <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
-            Needs to sign
+      <SelectContent align="end">
+        <SelectItem value={RecipientRole.SIGNER}>
+          <div className="flex items-center">
+            <div className="flex w-[150px] items-center">
+              <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
+              Needs to sign
+            </div>
+            <Tooltip>
+              <TooltipTrigger>
+                <InfoIcon className="h-4 w-4" />
+              </TooltipTrigger>
+              <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                <p>The recipient is required to sign the document for it to be completed.</p>
+              </TooltipContent>
+            </Tooltip>
           </div>
-          <Tooltip>
-            <TooltipTrigger>
-              <InfoIcon className="h-4 w-4" />
-            </TooltipTrigger>
-            <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-              <p>The recipient is required to sign the document for it to be completed.</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-      </SelectItem>
+        </SelectItem>
 
-      <SelectItem value={RecipientRole.APPROVER}>
-        <div className="flex items-center">
-          <div className="flex w-[150px] items-center">
-            <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
-            Needs to approve
+        <SelectItem value={RecipientRole.APPROVER}>
+          <div className="flex items-center">
+            <div className="flex w-[150px] items-center">
+              <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
+              Needs to approve
+            </div>
+            <Tooltip>
+              <TooltipTrigger>
+                <InfoIcon className="h-4 w-4" />
+              </TooltipTrigger>
+              <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                <p>The recipient is required to approve the document for it to be completed.</p>
+              </TooltipContent>
+            </Tooltip>
           </div>
-          <Tooltip>
-            <TooltipTrigger>
-              <InfoIcon className="h-4 w-4" />
-            </TooltipTrigger>
-            <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-              <p>The recipient is required to approve the document for it to be completed.</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-      </SelectItem>
+        </SelectItem>
 
-      <SelectItem value={RecipientRole.VIEWER}>
-        <div className="flex items-center">
-          <div className="flex w-[150px] items-center">
-            <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
-            Needs to view
+        <SelectItem value={RecipientRole.VIEWER}>
+          <div className="flex items-center">
+            <div className="flex w-[150px] items-center">
+              <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
+              Needs to view
+            </div>
+            <Tooltip>
+              <TooltipTrigger>
+                <InfoIcon className="h-4 w-4" />
+              </TooltipTrigger>
+              <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                <p>The recipient is required to view the document for it to be completed.</p>
+              </TooltipContent>
+            </Tooltip>
           </div>
-          <Tooltip>
-            <TooltipTrigger>
-              <InfoIcon className="h-4 w-4" />
-            </TooltipTrigger>
-            <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-              <p>The recipient is required to view the document for it to be completed.</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-      </SelectItem>
+        </SelectItem>
 
-      <SelectItem value={RecipientRole.CC}>
-        <div className="flex items-center">
-          <div className="flex w-[150px] items-center">
-            <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
-            Receives copy
-          </div>
-          <Tooltip>
-            <TooltipTrigger>
-              <InfoIcon className="h-4 w-4" />
-            </TooltipTrigger>
-            <TooltipContent className="text-foreground z-9999 max-w-md p-4">
-              <p>
-                The recipient is not required to take any action and receives a copy of the document
-                after it is completed.
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
-      </SelectItem>
-    </SelectContent>
-  </Select>
-));
+        {!hideCCRecipients && (
+          <SelectItem value={RecipientRole.CC}>
+            <div className="flex items-center">
+              <div className="flex w-[150px] items-center">
+                <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
+                Receives copy
+              </div>
+              <Tooltip>
+                <TooltipTrigger>
+                  <InfoIcon className="h-4 w-4" />
+                </TooltipTrigger>
+                <TooltipContent className="text-foreground z-9999 max-w-md p-4">
+                  <p>
+                    The recipient is not required to take any action and receives a copy of the
+                    document after it is completed.
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          </SelectItem>
+        )}
+      </SelectContent>
+    </Select>
+  ),
+);
 
 RecipientRoleSelect.displayName = 'RecipientRoleSelect';

packages/ui/package.json

@@ -38,6 +38,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-hover-card": "^1.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.1",
     "@radix-ui/react-menubar": "^1.0.2",
     "@radix-ui/react-navigation-menu": "^1.1.2",
@@ -76,4 +77,4 @@
     "ts-pattern": "^5.0.5",
     "zod": "^3.22.4"
   }
-}
+}

packages/ui/primitives/data-table-pagination.tsx

@@ -34,7 +34,7 @@ export function DataTablePagination<TData>({
             const visibleRows = table.getFilteredRowModel().rows.length;
 
             return (
-              <span>
+              <span data-testid="data-table-count">
                 Showing {visibleRows} result{visibleRows > 1 && 's'}.
               </span>
             );