feat: add general template enhancements (#1147)

## Description

Refactor the "use template" flow

## Changes Made

- Add placeholders for recipients
- Add audit log when document is created
- Trigger DOCUMENT_CREATED webhook when document is created
- Remove role field when using template
- Remove flaky logic when associating template recipients with form
recipients
- Refactor to use `Form` 

### Using template when document has no recipients

<img width="529" alt="image"
src="https://github.com/documenso/documenso/assets/20962767/a8494ac9-0397-4e3b-a0cf-818c8454a55c">

### Using template with recipients 

<img width="529" alt="image"
src="https://github.com/documenso/documenso/assets/20962767/54d949fc-ed6a-4318-bfd6-6a3179896ba9">

### Using template with the send option selected

<img width="529" alt="image"
src="https://github.com/documenso/documenso/assets/20962767/541b2664-0540-43e9-83dd-e040a45a44ea">

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

@@ -58,7 +58,7 @@ export const TemplatePageView = async ({ params, team }: TemplatePageViewProps)
   ]);
 
   return (
-    <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+    <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

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

@@ -1,14 +1,16 @@
 import { useRouter } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Plus } from 'lucide-react';
+import { InfoIcon, Plus } from 'lucide-react';
-import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
 import * as z from 'zod';
 
+import { TEMPLATE_RECIPIENT_PLACEHOLDER_REGEX } from '@documenso/lib/constants/template';
+import { AppError } from '@documenso/lib/errors/app-error';
 import type { Recipient } from '@documenso/prisma/client';
-import { RecipientRole } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
+import { Checkbox } from '@documenso/ui/primitives/checkbox';
 import {
   Dialog,
   DialogClose,
@@ -19,24 +21,59 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@documenso/ui/primitives/dialog';
-import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
-import { Label } from '@documenso/ui/primitives/label';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
-import { ROLE_ICONS } from '@documenso/ui/primitives/recipient-role-icons';
+import type { Toast } from '@documenso/ui/primitives/use-toast';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@documenso/ui/primitives/select';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useOptionalCurrentTeam } from '~/providers/team';
 
-const ZAddRecipientsForNewDocumentSchema = z.object({
+const ZAddRecipientsForNewDocumentSchema = z
+  .object({
+    sendDocument: z.boolean(),
     recipients: z.array(
       z.object({
+        id: z.number(),
         email: z.string().email(),
         name: z.string(),
-      role: z.nativeEnum(RecipientRole),
       }),
     ),
-});
+  })
+  // Display exactly which rows are duplicates.
+  .superRefine((items, ctx) => {
+    const uniqueEmails = new Map<string, number>();
+
+    for (const [index, recipients] of items.recipients.entries()) {
+      const email = recipients.email.toLowerCase();
+
+      const firstFoundIndex = uniqueEmails.get(email);
+
+      if (firstFoundIndex === undefined) {
+        uniqueEmails.set(email, index);
+        continue;
+      }
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Emails must be unique',
+        path: ['recipients', index, 'email'],
+      });
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Emails must be unique',
+        path: ['recipients', firstFoundIndex, 'email'],
+      });
+    }
+  });
 
 type TAddRecipientsForNewDocumentSchema = z.infer<typeof ZAddRecipientsForNewDocumentSchema>;
 
@@ -56,33 +93,31 @@ export function UseTemplateDialog({
 
   const team = useOptionalCurrentTeam();
 
-  const {
+  const form = useForm<TAddRecipientsForNewDocumentSchema>({
-    control,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<TAddRecipientsForNewDocumentSchema>({
     resolver: zodResolver(ZAddRecipientsForNewDocumentSchema),
     defaultValues: {
-      recipients:
+      sendDocument: false,
-        recipients.length > 0
+      recipients: recipients.map((recipient) => {
-          ? recipients.map((recipient) => ({
+        const isRecipientPlaceholder = recipient.email.match(TEMPLATE_RECIPIENT_PLACEHOLDER_REGEX);
-              nativeId: recipient.id,
+
-              formId: String(recipient.id),
+        if (isRecipientPlaceholder) {
-              name: recipient.name,
+          return {
-              email: recipient.email,
+            id: recipient.id,
-              role: recipient.role,
-            }))
-          : [
-              {
             name: '',
             email: '',
-                role: RecipientRole.SIGNER,
+          };
-              },
+        }
-            ],
+
+        return {
+          id: recipient.id,
+          name: recipient.name,
+          email: recipient.email,
+        };
+      }),
     },
   });
 
-  const { mutateAsync: createDocumentFromTemplate, isLoading: isCreatingDocumentFromTemplate } =
+  const { mutateAsync: createDocumentFromTemplate } =
     trpc.template.createDocumentFromTemplate.useMutation();
 
   const onSubmit = async (data: TAddRecipientsForNewDocumentSchema) => {
@@ -91,6 +126,7 @@ export function UseTemplateDialog({
         templateId,
         teamId: team?.id,
         recipients: data.recipients,
+        sendDocument: data.sendDocument,
       });
 
       toast({
@@ -101,18 +137,24 @@ export function UseTemplateDialog({
 
       router.push(`${documentRootPath}/${id}`);
     } catch (err) {
-      toast({
+      const error = AppError.parseError(err);
+
+      const toastPayload: Toast = {
         title: 'Error',
         description: 'An error occurred while creating document from template.',
         variant: 'destructive',
-      });
+      };
+
+      if (error.code === 'DOCUMENT_SEND_FAILED') {
+        toastPayload.description = 'The document was created but could not be sent to recipients.';
+      }
+
+      toast(toastPayload);
     }
   };
 
-  const onCreateDocumentFromTemplate = handleSubmit(onSubmit);
-
   const { fields: formRecipients } = useFieldArray({
-    control,
+    control: form.control,
     name: 'recipients',
   });
 
@@ -126,121 +168,110 @@ export function UseTemplateDialog({
       </DialogTrigger>
       <DialogContent className="sm:max-w-lg">
         <DialogHeader>
-          <DialogTitle>Document Recipients</DialogTitle>
+          <DialogTitle>Create document from template</DialogTitle>
-          <DialogDescription>Add the recipients to create the template with.</DialogDescription>
+          <DialogDescription>
+            {recipients.length === 0
+              ? 'A draft document will be created'
+              : 'Add the recipients to create the document with'}
+          </DialogDescription>
         </DialogHeader>
-        <div className="flex flex-col space-y-4">
-          {formRecipients.map((recipient, index) => (
-            <div
-              key={recipient.id}
-              data-native-id={recipient.id}
-              className="flex flex-wrap items-end gap-x-4"
-            >
-              <div className="flex-1">
-                <Label htmlFor={`recipient-${recipient.id}-email`}>
-                  Email
-                  <span className="text-destructive ml-1 inline-block font-medium">*</span>
-                </Label>
 
-                <Controller
+        <Form {...form}>
-                  control={control}
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+              <div className="custom-scrollbar -m-1 max-h-[60vh] space-y-4 overflow-y-auto p-1">
+                {formRecipients.map((recipient, index) => (
+                  <div className="flex w-full flex-row space-x-4" key={recipient.id}>
+                    <FormField
+                      control={form.control}
                       name={`recipients.${index}.email`}
                       render={({ field }) => (
-                    <Input
+                        <FormItem className="w-full">
-                      id={`recipient-${recipient.id}-email`}
+                          {index === 0 && <FormLabel required>Email</FormLabel>}
-                      type="email"
+
-                      className="bg-background mt-2"
+                          <FormControl>
-                      disabled={isSubmitting}
+                            <Input {...field} placeholder={recipients[index].email} />
-                      {...field}
+                          </FormControl>
-                    />
+                          <FormMessage />
+                        </FormItem>
                       )}
                     />
-              </div>
 
-              <div className="flex-1">
+                    <FormField
-                <Label htmlFor={`recipient-${recipient.id}-name`}>Name</Label>
+                      control={form.control}
-
-                <Controller
-                  control={control}
                       name={`recipients.${index}.name`}
                       render={({ field }) => (
-                    <Input
+                        <FormItem className="w-full">
-                      id={`recipient-${recipient.id}-name`}
+                          {index === 0 && <FormLabel>Name</FormLabel>}
-                      type="text"
+
-                      className="bg-background mt-2"
+                          <FormControl>
-                      disabled={isSubmitting}
+                            <Input {...field} placeholder={recipients[index].name} />
-                      {...field}
+                          </FormControl>
-                    />
+                          <FormMessage />
+                        </FormItem>
                       )}
                     />
                   </div>
-
-              <div className="w-[60px]">
-                <Controller
-                  control={control}
-                  name={`recipients.${index}.role`}
-                  render={({ field: { value, onChange } }) => (
-                    <Select value={value} onValueChange={(x) => onChange(x)}>
-                      <SelectTrigger className="bg-background">{ROLE_ICONS[value]}</SelectTrigger>
-
-                      <SelectContent className="" align="end">
-                        <SelectItem value={RecipientRole.SIGNER}>
-                          <div className="flex items-center">
-                            <span className="mr-2">{ROLE_ICONS[RecipientRole.SIGNER]}</span>
-                            Signer
-                          </div>
-                        </SelectItem>
-
-                        <SelectItem value={RecipientRole.CC}>
-                          <div className="flex items-center">
-                            <span className="mr-2">{ROLE_ICONS[RecipientRole.CC]}</span>
-                            Receives copy
-                          </div>
-                        </SelectItem>
-
-                        <SelectItem value={RecipientRole.APPROVER}>
-                          <div className="flex items-center">
-                            <span className="mr-2">{ROLE_ICONS[RecipientRole.APPROVER]}</span>
-                            Approver
-                          </div>
-                        </SelectItem>
-
-                        <SelectItem value={RecipientRole.VIEWER}>
-                          <div className="flex items-center">
-                            <span className="mr-2">{ROLE_ICONS[RecipientRole.VIEWER]}</span>
-                            Viewer
-                          </div>
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-                  )}
-                />
-              </div>
-
-              <div className="w-full">
-                <FormErrorMessage className="mt-2" error={errors.recipients?.[index]?.email} />
-                <FormErrorMessage className="mt-2" error={errors.recipients?.[index]?.name} />
-              </div>
-            </div>
                 ))}
               </div>
 
-        <DialogFooter className="justify-end">
+              {recipients.length > 0 && (
+                <div className="mt-4 flex flex-row items-center">
+                  <FormField
+                    control={form.control}
+                    name="sendDocument"
+                    render={({ field }) => (
+                      <FormItem>
+                        <div className="flex flex-row items-center">
+                          <Checkbox
+                            id="sendDocument"
+                            className="h-5 w-5"
+                            checkClassName="dark:text-white text-primary"
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+
+                          <label
+                            className="text-muted-foreground ml-2 flex items-center text-sm"
+                            htmlFor="sendDocument"
+                          >
+                            Send document
+                            <Tooltip>
+                              <TooltipTrigger type="button">
+                                <InfoIcon className="mx-1 h-4 w-4" />
+                              </TooltipTrigger>
+
+                              <TooltipContent className="text-muted-foreground z-[99999] max-w-md space-y-2 p-4">
+                                <p>
+                                  The document will be immediately sent to recipients if this is
+                                  checked.
+                                </p>
+
+                                <p>Otherwise, the document will be created as a draft.</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </label>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              )}
+
+              <DialogFooter>
                 <DialogClose asChild>
                   <Button type="button" variant="secondary">
                     Close
                   </Button>
                 </DialogClose>
 
-          <Button
+                <Button type="submit" loading={form.formState.isSubmitting}>
-            type="button"
+                  {form.getValues('sendDocument') ? 'Create and send' : 'Create as draft'}
-            loading={isCreatingDocumentFromTemplate}
-            disabled={isCreatingDocumentFromTemplate}
-            onClick={onCreateDocumentFromTemplate}
-          >
-            Create Document
                 </Button>
               </DialogFooter>
+            </fieldset>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );

packages/api/v1/implementation.ts

@@ -19,7 +19,7 @@ import { getRecipientById } from '@documenso/lib/server-only/recipient/get-recip
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { setRecipientsForDocument } from '@documenso/lib/server-only/recipient/set-recipients-for-document';
 import { updateRecipient } from '@documenso/lib/server-only/recipient/update-recipient';
-import { createDocumentFromTemplate } from '@documenso/lib/server-only/template/create-document-from-template';
+import { createDocumentFromTemplateLegacy } from '@documenso/lib/server-only/template/create-document-from-template-legacy';
 import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
@@ -286,7 +286,7 @@ export const ApiContractV1Implementation = createNextRoute(ApiContractV1, {
 
     const fileName = body.title.endsWith('.pdf') ? body.title : `${body.title}.pdf`;
 
-    const document = await createDocumentFromTemplate({
+    const document = await createDocumentFromTemplateLegacy({
       templateId,
       userId: user.id,
       teamId: team?.id,

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

@@ -189,7 +189,14 @@ test('[TEMPLATES]: use template', async ({ page }) => {
 
   // Use personal template.
   await page.getByRole('button', { name: 'Use Template' }).click();
-  await page.getByRole('button', { name: 'Create Document' }).click();
+
+  // Enter template values.
+  await page.getByPlaceholder('recipient.1@documenso.com').click();
+  await page.getByPlaceholder('recipient.1@documenso.com').fill(teamMemberUser.email);
+  await page.getByPlaceholder('Recipient 1').click();
+  await page.getByPlaceholder('Recipient 1').fill('name');
+
+  await page.getByRole('button', { name: 'Create as draft' }).click();
   await page.waitForURL(/documents/);
   await page.getByRole('main').getByRole('link', { name: 'Documents' }).click();
   await page.waitForURL('/documents');
@@ -200,7 +207,14 @@ test('[TEMPLATES]: use template', async ({ page }) => {
 
   // Use team template.
   await page.getByRole('button', { name: 'Use Template' }).click();
-  await page.getByRole('button', { name: 'Create Document' }).click();
+
+  // Enter template values.
+  await page.getByPlaceholder('recipient.1@documenso.com').click();
+  await page.getByPlaceholder('recipient.1@documenso.com').fill(teamMemberUser.email);
+  await page.getByPlaceholder('Recipient 1').click();
+  await page.getByPlaceholder('Recipient 1').fill('name');
+
+  await page.getByRole('button', { name: 'Create as draft' }).click();
   await page.waitForURL(/\/t\/.+\/documents/);
   await page.getByRole('main').getByRole('link', { name: 'Documents' }).click();
   await page.waitForURL(`/t/${team.url}/documents`);

packages/lib/constants/template.ts

@@ -0,0 +1 @@
+export const TEMPLATE_RECIPIENT_PLACEHOLDER_REGEX = /recipient\.\d+@documenso\.com/i;

packages/lib/errors/app-error.ts

@@ -1,4 +1,5 @@
 import { TRPCError } from '@trpc/server';
+import { match } from 'ts-pattern';
 import { z } from 'zod';
 
 import { TRPCClientError } from '@documenso/trpc/client';
@@ -149,4 +150,24 @@ export class AppError extends Error {
       return null;
     }
   }
+
+  static toRestAPIError(err: unknown): {
+    status: 400 | 401 | 404 | 500;
+    body: { message: string };
+  } {
+    const error = AppError.parseError(err);
+
+    const status = match(error.code)
+      .with(AppErrorCode.INVALID_BODY, AppErrorCode.INVALID_REQUEST, () => 400 as const)
+      .with(AppErrorCode.UNAUTHORIZED, () => 401 as const)
+      .with(AppErrorCode.NOT_FOUND, () => 404 as const)
+      .otherwise(() => 500 as const);
+
+    return {
+      status,
+      body: {
+        message: status !== 500 ? error.message : 'Something went wrong',
+      },
+    };
+  }
 }

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

@@ -0,0 +1,144 @@
+import { nanoid } from '@documenso/lib/universal/id';
+import { prisma } from '@documenso/prisma';
+import type { RecipientRole } from '@documenso/prisma/client';
+
+export type CreateDocumentFromTemplateLegacyOptions = {
+  templateId: number;
+  userId: number;
+  teamId?: number;
+  recipients?: {
+    name?: string;
+    email: string;
+    role?: RecipientRole;
+  }[];
+};
+
+/**
+ * Legacy server function for /api/v1
+ */
+export const createDocumentFromTemplateLegacy = async ({
+  templateId,
+  userId,
+  teamId,
+  recipients,
+}: CreateDocumentFromTemplateLegacyOptions) => {
+  const template = await prisma.template.findUnique({
+    where: {
+      id: templateId,
+      ...(teamId
+        ? {
+            team: {
+              id: teamId,
+              members: {
+                some: {
+                  userId,
+                },
+              },
+            },
+          }
+        : {
+            userId,
+            teamId: null,
+          }),
+    },
+    include: {
+      Recipient: true,
+      Field: true,
+      templateDocumentData: true,
+    },
+  });
+
+  if (!template) {
+    throw new Error('Template not found.');
+  }
+
+  const documentData = await prisma.documentData.create({
+    data: {
+      type: template.templateDocumentData.type,
+      data: template.templateDocumentData.data,
+      initialData: template.templateDocumentData.initialData,
+    },
+  });
+
+  const document = await prisma.document.create({
+    data: {
+      userId,
+      teamId: template.teamId,
+      title: template.title,
+      documentDataId: documentData.id,
+      Recipient: {
+        create: template.Recipient.map((recipient) => ({
+          email: recipient.email,
+          name: recipient.name,
+          role: recipient.role,
+          token: nanoid(),
+        })),
+      },
+    },
+
+    include: {
+      Recipient: {
+        orderBy: {
+          id: 'asc',
+        },
+      },
+      documentData: true,
+    },
+  });
+
+  await prisma.field.createMany({
+    data: template.Field.map((field) => {
+      const recipient = template.Recipient.find((recipient) => recipient.id === field.recipientId);
+
+      const documentRecipient = document.Recipient.find((doc) => doc.email === recipient?.email);
+
+      if (!documentRecipient) {
+        throw new Error('Recipient not found.');
+      }
+
+      return {
+        type: field.type,
+        page: field.page,
+        positionX: field.positionX,
+        positionY: field.positionY,
+        width: field.width,
+        height: field.height,
+        customText: field.customText,
+        inserted: field.inserted,
+        documentId: document.id,
+        recipientId: documentRecipient.id,
+      };
+    }),
+  });
+
+  if (recipients && recipients.length > 0) {
+    document.Recipient = await Promise.all(
+      recipients.map(async (recipient, index) => {
+        const existingRecipient = document.Recipient.at(index);
+
+        return await prisma.recipient.upsert({
+          where: {
+            documentId_email: {
+              documentId: document.id,
+              email: existingRecipient?.email ?? recipient.email,
+            },
+          },
+          update: {
+            name: recipient.name,
+            email: recipient.email,
+            role: recipient.role,
+          },
+          create: {
+            documentId: document.id,
+            email: recipient.email,
+            name: recipient.name,
+            role: recipient.role,
+            token: nanoid(),
+          },
+        });
+      }),
+    );
+  }
+
+  return document;
+};

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

@@ -1,16 +1,29 @@
 import { nanoid } from '@documenso/lib/universal/id';
 import { prisma } from '@documenso/prisma';
-import type { RecipientRole } from '@documenso/prisma/client';
+import type { Field } from '@documenso/prisma/client';
+import { type Recipient, WebhookTriggerEvents } from '@documenso/prisma/client';
+
+import { AppError, AppErrorCode } from '../../errors/app-error';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
+import { triggerWebhook } from '../webhooks/trigger/trigger-webhook';
+
+type FinalRecipient = Pick<Recipient, 'name' | 'email' | 'role'> & {
+  templateRecipientId: number;
+  fields: Field[];
+};
 
 export type CreateDocumentFromTemplateOptions = {
   templateId: number;
   userId: number;
   teamId?: number;
-  recipients?: {
+  recipients: {
+    id: number;
     name?: string;
     email: string;
-    role?: RecipientRole;
   }[];
+  requestMetadata?: RequestMetadata;
 };
 
 export const createDocumentFromTemplate = async ({
@@ -18,7 +31,14 @@ export const createDocumentFromTemplate = async ({
   userId,
   teamId,
   recipients,
+  requestMetadata,
 }: CreateDocumentFromTemplateOptions) => {
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+  });
+
   const template = await prisma.template.findUnique({
     where: {
       id: templateId,
@@ -39,16 +59,42 @@ export const createDocumentFromTemplate = async ({
           }),
     },
     include: {
-      Recipient: true,
+      Recipient: {
+        include: {
           Field: true,
+        },
+      },
       templateDocumentData: true,
     },
   });
 
   if (!template) {
-    throw new Error('Template not found.');
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Template not found');
   }
 
+  if (recipients.length !== template.Recipient.length) {
+    throw new AppError(AppErrorCode.INVALID_BODY, 'Invalid number of recipients.');
+  }
+
+  const finalRecipients: FinalRecipient[] = template.Recipient.map((templateRecipient) => {
+    const foundRecipient = recipients.find((recipient) => recipient.id === templateRecipient.id);
+
+    if (!foundRecipient) {
+      throw new AppError(
+        AppErrorCode.INVALID_BODY,
+        `Missing template recipient with ID ${templateRecipient.id}`,
+      );
+    }
+
+    return {
+      templateRecipientId: templateRecipient.id,
+      fields: templateRecipient.Field,
+      name: foundRecipient.name ?? '',
+      email: foundRecipient.email,
+      role: templateRecipient.role,
+    };
+  });
+
   const documentData = await prisma.documentData.create({
     data: {
       type: template.templateDocumentData.type,
@@ -57,14 +103,16 @@ export const createDocumentFromTemplate = async ({
     },
   });
 
-  const document = await prisma.document.create({
+  return await prisma.$transaction(async (tx) => {
+    const document = await tx.document.create({
       data: {
         userId,
         teamId: template.teamId,
         title: template.title,
         documentDataId: documentData.id,
         Recipient: {
-        create: template.Recipient.map((recipient) => ({
+          createMany: {
+            data: finalRecipients.map((recipient) => ({
               email: recipient.email,
               name: recipient.name,
               role: recipient.role,
@@ -72,7 +120,7 @@ export const createDocumentFromTemplate = async ({
             })),
           },
         },
-
+      },
       include: {
         Recipient: {
           orderBy: {
@@ -83,59 +131,54 @@ export const createDocumentFromTemplate = async ({
       },
     });
 
-  await prisma.field.createMany({
+    let fieldsToCreate: Omit<Field, 'id' | 'secondaryId' | 'templateId'>[] = [];
-    data: template.Field.map((field) => {
-      const recipient = template.Recipient.find((recipient) => recipient.id === field.recipientId);
 
-      const documentRecipient = document.Recipient.find((doc) => doc.email === recipient?.email);
+    Object.values(finalRecipients).forEach(({ email, fields }) => {
+      const recipient = document.Recipient.find((recipient) => recipient.email === email);
 
-      if (!documentRecipient) {
+      if (!recipient) {
         throw new Error('Recipient not found.');
       }
 
-      return {
+      fieldsToCreate = fieldsToCreate.concat(
+        fields.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: field.customText,
+          customText: '',
-        inserted: field.inserted,
+          inserted: false,
-        documentId: document.id,
+        })),
-        recipientId: documentRecipient.id,
-      };
-    }),
-  });
-
-  if (recipients && recipients.length > 0) {
-    document.Recipient = await Promise.all(
-      recipients.map(async (recipient, index) => {
-        const existingRecipient = document.Recipient.at(index);
-
-        return await prisma.recipient.upsert({
-          where: {
-            documentId_email: {
-              documentId: document.id,
-              email: existingRecipient?.email ?? recipient.email,
-            },
-          },
-          update: {
-            name: recipient.name,
-            email: recipient.email,
-            role: recipient.role,
-          },
-          create: {
-            documentId: document.id,
-            email: recipient.email,
-            name: recipient.name,
-            role: recipient.role,
-            token: nanoid(),
-          },
-        });
-      }),
       );
-  }
+    });
+
+    await tx.field.createMany({
+      data: fieldsToCreate,
+    });
+
+    await tx.documentAuditLog.create({
+      data: createDocumentAuditLogData({
+        type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_CREATED,
+        documentId: document.id,
+        user,
+        requestMetadata,
+        data: {
+          title: document.title,
+        },
+      }),
+    });
+
+    await triggerWebhook({
+      event: WebhookTriggerEvents.DOCUMENT_CREATED,
+      data: document,
+      userId,
+      teamId,
+    });
 
     return document;
+  });
 };

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

@@ -1,10 +1,14 @@
 import { TRPCError } from '@trpc/server';
 
 import { getServerLimits } from '@documenso/ee/server-only/limits/server';
+import { AppError } from '@documenso/lib/errors/app-error';
+import { sendDocument } from '@documenso/lib/server-only/document/send-document';
 import { createDocumentFromTemplate } from '@documenso/lib/server-only/template/create-document-from-template';
 import { createTemplate } from '@documenso/lib/server-only/template/create-template';
 import { deleteTemplate } from '@documenso/lib/server-only/template/delete-template';
 import { duplicateTemplate } from '@documenso/lib/server-only/template/duplicate-template';
+import { extractNextApiRequestMetadata } from '@documenso/lib/universal/extract-request-metadata';
+import type { Document } from '@documenso/prisma/client';
 
 import { authenticatedProcedure, router } from '../trpc';
 import {
@@ -49,19 +53,34 @@ export const templateRouter = router({
           throw new Error('You have reached your document limit.');
         }
 
-        return await createDocumentFromTemplate({
+        const requestMetadata = extractNextApiRequestMetadata(ctx.req);
+
+        let document: Document = await createDocumentFromTemplate({
           templateId,
           teamId,
           userId: ctx.user.id,
           recipients: input.recipients,
+          requestMetadata,
         });
+
+        if (input.sendDocument) {
+          document = await sendDocument({
+            documentId: document.id,
+            userId: ctx.user.id,
+            teamId,
+            requestMetadata,
+          }).catch((err) => {
+            console.error(err);
+
+            throw new AppError('DOCUMENT_SEND_FAILED');
+          });
+        }
+
+        return document;
       } catch (err) {
         console.error(err);
 
-        throw new TRPCError({
+        throw AppError.parseErrorToTRPCError(err);
-          code: 'BAD_REQUEST',
-          message: 'We were unable to create this document. Please try again later.',
-        });
       }
     }),
 

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

@@ -1,7 +1,5 @@
 import { z } from 'zod';
 
-import { RecipientRole } from '@documenso/prisma/client';
-
 export const ZCreateTemplateMutationSchema = z.object({
   title: z.string().min(1).trim(),
   teamId: z.number().optional(),
@@ -14,12 +12,16 @@ export const ZCreateDocumentFromTemplateMutationSchema = z.object({
   recipients: z
     .array(
       z.object({
+        id: z.number(),
         email: z.string().email(),
-        name: z.string(),
+        name: z.string().optional(),
-        role: z.nativeEnum(RecipientRole),
       }),
     )
-    .optional(),
+    .refine((recipients) => {
+      const emails = recipients.map((signer) => signer.email);
+      return new Set(emails).size === emails.length;
+    }, 'Recipients must have unique emails'),
+  sendDocument: z.boolean().optional(),
 });
 
 export const ZDuplicateTemplateMutationSchema = z.object({

packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx

@@ -103,6 +103,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
     appendSigner({
       formId: nanoid(12),
       name: `Recipient ${placeholderRecipientCount}`,
+      // Update TEMPLATE_RECIPIENT_PLACEHOLDER_REGEX if this is ever changed.
       email: `recipient.${placeholderRecipientCount}@documenso.com`,
       role: RecipientRole.SIGNER,
     });