fix: increase res

## Description

Add a global flag override for envelopes

.env.example

@@ -29,6 +29,10 @@ NEXT_PUBLIC_WEBAPP_URL="http://localhost:3000"
 # URL used by the web app to request itself (e.g. local background jobs)
 NEXT_PRIVATE_INTERNAL_WEBAPP_URL="http://localhost:3000"
 
+# [[SERVER]]
+# OPTIONAL: The port the server will listen on. Defaults to 3000.
+PORT=3000
+
 # [[DATABASE]]
 NEXT_PRIVATE_DATABASE_URL="postgres://documenso:password@127.0.0.1:54320/documenso"
 # Defines the URL to use for the database when running migrations and other commands that won't work with a connection pool.

apps/openpage-api/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev -p 3003",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -p 3003",
     "lint:fix": "next lint --fix",
     "clean": "rimraf .next && rimraf node_modules"
   },

apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx

@@ -15,18 +15,16 @@ import {
 import { AnimatePresence, motion } from 'framer-motion';
 import { InfoIcon } from 'lucide-react';
 import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 import * as z from 'zod';
 
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
-import { formatSigningLink } from '@documenso/lib/utils/recipients';
 import { trpc, trpc as trpcReact } from '@documenso/trpc/react';
-import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
 import { DocumentSendEmailMessageHelper } from '@documenso/ui/components/document/document-send-email-message-helper';
+import { cn } from '@documenso/ui/lib/utils';
 import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
-import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
@@ -65,6 +63,7 @@ export type EnvelopeDistributeDialogProps = {
     fields: Pick<Field, 'type' | 'recipientId'>[];
   };
   onDistribute?: () => Promise<void>;
+  documentRootPath: string;
   trigger?: React.ReactNode;
 };
 
@@ -89,6 +88,7 @@ export type TEnvelopeDistributeFormSchema = z.infer<typeof ZEnvelopeDistributeFo
 export const EnvelopeDistributeDialog = ({
   envelope,
   trigger,
+  documentRootPath,
   onDistribute,
 }: EnvelopeDistributeDialogProps) => {
   const organisation = useCurrentOrganisation();
@@ -97,6 +97,7 @@ export const EnvelopeDistributeDialog = ({
 
   const { toast } = useToast();
   const { t } = useLingui();
+  const navigate = useNavigate();
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -163,6 +164,14 @@ export const EnvelopeDistributeDialog = ({
 
       await onDistribute?.();
 
+      let redirectPath = `${documentRootPath}/${envelope.id}`;
+
+      if (meta.distributionMethod === DocumentDistributionMethod.NONE) {
+        redirectPath += '?action=copy-links';
+      }
+
+      await navigate(redirectPath);
+
       toast({
         title: t`Envelope distributed`,
         description: t`Your envelope has been distributed successfully.`,
@@ -198,6 +207,7 @@ export const EnvelopeDistributeDialog = ({
             <Trans>Recipients will be able to sign the document once sent</Trans>
           </DialogDescription>
         </DialogHeader>
+
         {!invalidEnvelopeCode ? (
           <Form {...form}>
             <form onSubmit={handleSubmit(onFormSubmit)}>
@@ -220,7 +230,11 @@ export const EnvelopeDistributeDialog = ({
                   </TabsList>
                 </Tabs>
 
-                <div className="min-h-72">
+                <div
+                  className={cn('min-h-72', {
+                    'min-h-[23rem]': organisation.organisationClaim.flags.emailDomains,
+                  })}
+                >
                   <AnimatePresence initial={false} mode="wait">
                     {distributionMethod === DocumentDistributionMethod.EMAIL && (
                       <motion.div
@@ -355,73 +369,18 @@ export const EnvelopeDistributeDialog = ({
                         exit={{ opacity: 0, transition: { duration: 0.15 } }}
                         className="min-h-60 rounded-lg border"
                       >
-                        {envelope.status === DocumentStatus.DRAFT ? (
+                        <div className="text-muted-foreground py-24 text-center text-sm">
-                          <div className="text-muted-foreground py-24 text-center text-sm">
+                          <p>
-                            <p>
+                            <Trans>We won't send anything to notify recipients.</Trans>
-                              <Trans>We won't send anything to notify recipients.</Trans>
+                          </p>
-                            </p>
 
-                            <p className="mt-2">
+                          <p className="mt-2">
-                              <Trans>
+                            <Trans>
-                                We will generate signing links for you, which you can send to the
+                              We will generate signing links for you, which you can send to the
-                                recipients through your method of choice.
+                              recipients through your method of choice.
-                              </Trans>
+                            </Trans>
-                            </p>
+                          </p>
-                          </div>
+                        </div>
-                        ) : (
-                          <ul className="text-muted-foreground divide-y">
-                            {/* Todo: Envelopes - I don't think this section shows up */}
-
-                            {recipients.length === 0 && (
-                              <li className="flex flex-col items-center justify-center py-6 text-sm">
-                                <Trans>No recipients</Trans>
-                              </li>
-                            )}
-
-                            {recipients.map((recipient) => (
-                              <li
-                                key={recipient.id}
-                                className="flex items-center justify-between px-4 py-3 text-sm"
-                              >
-                                <AvatarWithText
-                                  avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
-                                  primaryText={
-                                    <p className="text-muted-foreground text-sm">
-                                      {recipient.email}
-                                    </p>
-                                  }
-                                  secondaryText={
-                                    <p className="text-muted-foreground/70 text-xs">
-                                      {t(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
-                                    </p>
-                                  }
-                                />
-
-                                {recipient.role !== RecipientRole.CC && (
-                                  <CopyTextButton
-                                    value={formatSigningLink(recipient.token)}
-                                    onCopySuccess={() => {
-                                      toast({
-                                        title: t`Copied to clipboard`,
-                                        description: t`The signing link has been copied to your clipboard.`,
-                                      });
-                                    }}
-                                    badgeContentUncopied={
-                                      <p className="ml-1 text-xs">
-                                        <Trans>Copy</Trans>
-                                      </p>
-                                    }
-                                    badgeContentCopied={
-                                      <p className="ml-1 text-xs">
-                                        <Trans>Copied</Trans>
-                                      </p>
-                                    }
-                                  />
-                                )}
-                              </li>
-                            ))}
-                          </ul>
-                        )}
                       </motion.div>
                     )}
                   </AnimatePresence>

apps/remix/app/components/dialogs/envelope-download-dialog.tsx

@@ -213,8 +213,6 @@ export const EnvelopeDownloadDialog = ({
               </div>
             ))
           )}
-
-          {/* Todo: Envelopes - Download all button */}
         </div>
       </DialogContent>
     </Dialog>

apps/remix/app/components/forms/editor/editor-field-signature-form.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans } from '@lingui/react/macro';
 import { useForm, useWatch } from 'react-hook-form';
 import type { z } from 'zod';
 
@@ -60,7 +61,12 @@ export const EditorFieldSignatureForm = ({
     <Form {...form}>
       <form>
         <fieldset className="flex flex-col gap-2">
-          <EditorGenericFontSizeField formControl={form.control} />
+          <div>
+            <EditorGenericFontSizeField formControl={form.control} />
+            <p className="text-muted-foreground mt-0.5 text-xs">
+              <Trans>The typed signature font size</Trans>
+            </p>
+          </div>
         </fieldset>
       </form>
     </Form>

apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx

@@ -8,11 +8,13 @@ import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitive
 export type DocumentSigningAttachmentsPopoverProps = {
   envelopeId: string;
   token: string;
+  trigger?: React.ReactNode;
 };
 
 export const DocumentSigningAttachmentsPopover = ({
   envelopeId,
   token,
+  trigger,
 }: DocumentSigningAttachmentsPopoverProps) => {
   const { data: attachments } = trpc.envelope.attachment.find.useQuery({
     envelopeId,
@@ -26,15 +28,17 @@ export const DocumentSigningAttachmentsPopover = ({
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="outline" className="gap-2">
+        {trigger ?? (
-          <PaperclipIcon className="h-4 w-4" />
+          <Button variant="outline" className="gap-2">
-          <span>
+            <PaperclipIcon className="h-4 w-4" />
-            <Trans>Attachments</Trans>{' '}
+            <span>
-            {attachments && attachments.data.length > 0 && (
+              <Trans>Attachments</Trans>{' '}
-              <span className="ml-1">({attachments.data.length})</span>
+              {attachments && attachments.data.length > 0 && (
-            )}
+                <span className="ml-1">({attachments.data.length})</span>
-          </span>
+              )}
-        </Button>
+            </span>
+          </Button>
+        )}
       </PopoverTrigger>
 
       <PopoverContent className="w-96" align="start">

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

@@ -3,7 +3,7 @@ import { lazy, useMemo } from 'react';
 import { Plural, Trans } from '@lingui/react/macro';
 import { EnvelopeType, RecipientRole } from '@prisma/client';
 import { motion } from 'framer-motion';
-import { ArrowLeftIcon, BanIcon, DownloadCloudIcon } from 'lucide-react';
+import { ArrowLeftIcon, BanIcon, DownloadCloudIcon, PaperclipIcon } from 'lucide-react';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -75,7 +75,7 @@ export const DocumentSigningPageViewV2 = () => {
       <EnvelopeSignerHeader />
 
       {/* Main Content Area */}
-      <div className="flex h-[calc(100vh-73px)] w-screen">
+      <div className="flex h-[calc(100vh-4rem)] w-screen">
         {/* Left Section - Step Navigation */}
         <div className="bg-background border-border hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-r py-4 lg:flex">
           <div className="px-4">
@@ -121,12 +121,16 @@ export const DocumentSigningPageViewV2 = () => {
                 <Trans>Actions</Trans>
               </h4>
 
-              <div className="w-full">
+              <DocumentSigningAttachmentsPopover
-                <DocumentSigningAttachmentsPopover
+                envelopeId={envelope.id}
-                  envelopeId={envelope.id}
+                token={recipient.token}
-                  token={recipient.token}
+                trigger={
-                />
+                  <Button variant="ghost" size="sm" className="w-full justify-start">
-              </div>
+                    <PaperclipIcon className="mr-2 h-4 w-4" />
+                    <Trans>Attachments</Trans>
+                  </Button>
+                }
+              />
 
               <EnvelopeDownloadDialog
                 envelopeId={envelope.id}

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

@@ -8,6 +8,7 @@ import {
   RecipientRole,
   SigningStatus,
 } from '@prisma/client';
+import { prop, sortBy } from 'remeda';
 
 import { isBase64Image } from '@documenso/lib/constants/signatures';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -165,7 +166,29 @@ export const EnvelopeSigningProvider = ({
    * The fields that are still required to be signed by the actual recipient.
    */
   const recipientFieldsRemaining = useMemo(() => {
-    return envelopeData.recipient.fields.filter((field) => isFieldUnsignedAndRequired(field));
+    const requiredFields = envelopeData.recipient.fields
+      .filter((field) => isFieldUnsignedAndRequired(field))
+      .map((field) => {
+        const envelopeItem = envelope.envelopeItems.find(
+          (item) => item.id === field.envelopeItemId,
+        );
+
+        if (!envelopeItem) {
+          throw new Error('Missing envelope item');
+        }
+
+        return {
+          ...field,
+          envelopeItemOrder: envelopeItem.order,
+        };
+      });
+
+    return sortBy(
+      requiredFields,
+      [prop('envelopeItemOrder'), 'asc'],
+      [prop('page'), 'asc'],
+      [prop('positionY'), 'asc'],
+    );
   }, [envelopeData.recipient.fields]);
 
   /**

apps/remix/app/components/general/document/document-certificate-qr-view.tsx

@@ -4,7 +4,10 @@ import { Trans } from '@lingui/react/macro';
 import type { DocumentData, EnvelopeItem } from '@prisma/client';
 import { DateTime } from 'luxon';
 
-import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import {
+  EnvelopeRenderProvider,
+  useCurrentEnvelopeRender,
+} from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
@@ -92,6 +95,60 @@ export const DocumentCertificateQRView = ({
         </Dialog>
       )}
 
+      {internalVersion === 2 ? (
+        <EnvelopeRenderProvider envelope={{ envelopeItems }}>
+          <DocumentCertificateQrV2
+            title={title}
+            recipientCount={recipientCount}
+            formattedDate={formattedDate}
+          />
+        </EnvelopeRenderProvider>
+      ) : (
+        <>
+          <div className="flex w-full flex-col justify-between gap-4 md:flex-row md:items-end">
+            <div className="space-y-1">
+              <h1 className="text-xl font-medium">{title}</h1>
+              <div className="text-muted-foreground flex flex-col gap-0.5 text-sm">
+                <p>
+                  <Trans>{recipientCount} recipients</Trans>
+                </p>
+
+                <p>
+                  <Trans>Completed on {formattedDate}</Trans>
+                </p>
+              </div>
+            </div>
+
+            <ShareDocumentDownloadButton
+              title={title}
+              documentData={envelopeItems[0].documentData}
+            />
+          </div>
+
+          <div className="mt-12 w-full">
+            <PDFViewer key={envelopeItems[0].id} documentData={envelopeItems[0].documentData} />
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+type DocumentCertificateQrV2Props = {
+  title: string;
+  recipientCount: number;
+  formattedDate: string;
+};
+
+const DocumentCertificateQrV2 = ({
+  title,
+  recipientCount,
+  formattedDate,
+}: DocumentCertificateQrV2Props) => {
+  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
+
+  return (
+    <div className="flex min-h-screen flex-col items-start">
       <div className="flex w-full flex-col justify-between gap-4 md:flex-row md:items-end">
         <div className="space-y-1">
           <h1 className="text-xl font-medium">{title}</h1>
@@ -106,21 +163,18 @@ export const DocumentCertificateQRView = ({
           </div>
         </div>
 
-        <ShareDocumentDownloadButton title={title} documentData={envelopeItems[0].documentData} />
+        {currentEnvelopeItem && (
+          <ShareDocumentDownloadButton
+            title={title}
+            documentData={currentEnvelopeItem.documentData}
+          />
+        )}
       </div>
 
       <div className="mt-12 w-full">
-        {internalVersion === 2 ? (
+        <EnvelopeRendererFileSelector className="mb-4 p-0" fields={[]} secondaryOverride={''} />
-          <EnvelopeRenderProvider envelope={{ envelopeItems }}>
-            <EnvelopeRendererFileSelector className="mb-4 p-0" fields={[]} secondaryOverride={''} />
 
-            <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
+        <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
-          </EnvelopeRenderProvider>
-        ) : (
-          <>
-            <PDFViewer key={envelopeItems[0].id} documentData={envelopeItems[0].documentData} />
-          </>
-        )}
       </div>
     </div>
   );

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

@@ -1,7 +1,10 @@
+import { useEffect, useState } from 'react';
+
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
+import { TooltipArrow } from '@radix-ui/react-tooltip';
 import {
   AlertTriangle,
   CheckIcon,
@@ -12,7 +15,7 @@ import {
   PlusIcon,
   UserIcon,
 } from 'lucide-react';
-import { Link } from 'react-router';
+import { Link, useSearchParams } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
@@ -24,6 +27,12 @@ import { SignatureIcon } from '@documenso/ui/icons/signature';
 import { AvatarWithText } from '@documenso/ui/primitives/avatar';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { PopoverHover } from '@documenso/ui/primitives/popover';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@documenso/ui/primitives/tooltip';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DocumentPageViewRecipientsProps = {
@@ -37,8 +46,24 @@ export const DocumentPageViewRecipients = ({
 }: DocumentPageViewRecipientsProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
+  const [searchParams, setSearchParams] = useSearchParams();
 
   const recipients = envelope.recipients;
+  const [shouldHighlightCopyButtons, setShouldHighlightCopyButtons] = useState(false);
+
+  // Check for action=view-tokens query parameter and set highlighting state
+  useEffect(() => {
+    const hasViewTokensAction = searchParams.get('action') === 'copy-links';
+
+    if (hasViewTokensAction) {
+      setShouldHighlightCopyButtons(true);
+
+      // Remove the query parameter immediately
+      const params = new URLSearchParams(searchParams);
+      params.delete('action');
+      setSearchParams(params);
+    }
+  }, [searchParams, setSearchParams]);
 
   return (
     <section className="dark:bg-background border-border bg-widget flex flex-col rounded-xl border">
@@ -69,7 +94,7 @@ export const DocumentPageViewRecipients = ({
           </li>
         )}
 
-        {recipients.map((recipient) => (
+        {recipients.map((recipient, i) => (
           <li key={recipient.id} className="flex items-center justify-between px-4 py-2.5 text-sm">
             <AvatarWithText
               avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
@@ -159,15 +184,33 @@ export const DocumentPageViewRecipients = ({
               {envelope.status === DocumentStatus.PENDING &&
                 recipient.signingStatus === SigningStatus.NOT_SIGNED &&
                 recipient.role !== RecipientRole.CC && (
-                  <CopyTextButton
+                  <TooltipProvider>
-                    value={formatSigningLink(recipient.token)}
+                    <Tooltip open={shouldHighlightCopyButtons && i === 0}>
-                    onCopySuccess={() => {
+                      <TooltipTrigger asChild>
-                      toast({
+                        <div
-                        title: _(msg`Copied to clipboard`),
+                          className={shouldHighlightCopyButtons ? 'animate-pulse' : ''}
-                        description: _(msg`The signing link has been copied to your clipboard.`),
+                          onClick={() => setShouldHighlightCopyButtons(false)}
-                      });
+                        >
-                    }}
+                          <CopyTextButton
-                  />
+                            value={formatSigningLink(recipient.token)}
+                            onCopySuccess={() => {
+                              toast({
+                                title: _(msg`Copied to clipboard`),
+                                description: _(
+                                  msg`The signing link has been copied to your clipboard.`,
+                                ),
+                              });
+                              setShouldHighlightCopyButtons(false);
+                            }}
+                          />
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent sideOffset={2}>
+                        <Trans>Copy Signing Links</Trans>
+                        <TooltipArrow className="fill-background" />
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 )}
             </div>
           </li>

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page-renderer.tsx

@@ -57,8 +57,6 @@ export default function EnvelopeEditorFieldsPageRenderer() {
   );
 
   const handleResizeOrMove = (event: KonvaEventObject<Event>) => {
-    console.log('Field resized or moved');
-
     const { current: container } = canvasElement;
 
     if (!container) {
@@ -273,9 +271,6 @@ export default function EnvelopeEditorFieldsPageRenderer() {
         return;
       }
 
-      console.log(`pointerPosition.x: ${pointerPosition.x}`);
-      console.log(`pointerPosition.y: ${pointerPosition.y}`);
-
       x1 = pointerPosition.x / scale;
       y1 = pointerPosition.y / scale;
       x2 = pointerPosition.x / scale;

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx

@@ -5,6 +5,7 @@ import { msg } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { FieldType, RecipientRole } from '@prisma/client';
 import { FileTextIcon } from 'lucide-react';
+import { Link } from 'react-router';
 import { isDeepEqual } from 'remeda';
 import { match } from 'ts-pattern';
 
@@ -20,6 +21,7 @@ import type {
   TNameFieldMeta,
   TNumberFieldMeta,
   TRadioFieldMeta,
+  TSignatureFieldMeta,
   TTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
@@ -37,6 +39,7 @@ import { EditorFieldInitialsForm } from '~/components/forms/editor/editor-field-
 import { EditorFieldNameForm } from '~/components/forms/editor/editor-field-name-form';
 import { EditorFieldNumberForm } from '~/components/forms/editor/editor-field-number-form';
 import { EditorFieldRadioForm } from '~/components/forms/editor/editor-field-radio-form';
+import { EditorFieldSignatureForm } from '~/components/forms/editor/editor-field-signature-form';
 import { EditorFieldTextForm } from '~/components/forms/editor/editor-field-text-form';
 
 import { EnvelopeEditorFieldDragDrop } from './envelope-editor-fields-drag-drop';
@@ -61,7 +64,7 @@ const FieldSettingsTypeTranslations: Record<FieldType, MessageDescriptor> = {
 };
 
 export const EnvelopeEditorFieldsPage = () => {
-  const { envelope, editorFields } = useCurrentEnvelopeEditor();
+  const { envelope, editorFields, relativePath } = useCurrentEnvelopeEditor();
 
   const { currentEnvelopeItem } = useCurrentEnvelopeRender();
 
@@ -104,12 +107,12 @@ export const EnvelopeEditorFieldsPage = () => {
 
   return (
     <div className="relative flex h-full">
-      <div className="flex w-full flex-col">
+      <div className="flex w-full flex-col overflow-y-auto">
         {/* Horizontal envelope item selector */}
         <EnvelopeRendererFileSelector fields={editorFields.localFields} />
 
         {/* Document View */}
-        <div className="mt-4 flex justify-center p-4">
+        <div className="mt-4 flex h-full justify-center p-4">
           {currentEnvelopeItem !== null ? (
             <PDFViewerKonvaLazy customPageRenderer={EnvelopeEditorFieldsPageRenderer} />
           ) : (
@@ -128,7 +131,7 @@ export const EnvelopeEditorFieldsPage = () => {
 
       {/* Right Section - Form Fields Panel */}
       {currentEnvelopeItem && (
-        <div className="bg-background border-border sticky top-0 h-[calc(100vh-73px)] w-80 flex-shrink-0 overflow-y-auto border-l py-4">
+        <div className="bg-background border-border sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l py-4">
           {/* Recipient selector section. */}
           <section className="px-4">
             <h3 className="text-foreground mb-2 text-sm font-semibold">
@@ -137,8 +140,14 @@ export const EnvelopeEditorFieldsPage = () => {
 
             {envelope.recipients.length === 0 ? (
               <Alert variant="warning">
-                <AlertDescription>
+                <AlertDescription className="flex flex-col gap-2">
                   <Trans>You need at least one recipient to add fields</Trans>
+
+                  <Link to={`${relativePath.editorPath}`} className="text-sm">
+                    <p>
+                      <Trans>Click here to add a recipient</Trans>
+                    </p>
+                  </Link>
                 </AlertDescription>
               </Alert>
             ) : (
@@ -182,7 +191,7 @@ export const EnvelopeEditorFieldsPage = () => {
 
           {/* Field details section. */}
           <AnimateGenericFadeInOut key={editorFields.selectedField?.formId}>
-            {selectedField && selectedField.type !== FieldType.SIGNATURE && (
+            {selectedField && (
               <section>
                 <Separator className="my-4" />
 
@@ -192,6 +201,12 @@ export const EnvelopeEditorFieldsPage = () => {
                   </h3>
 
                   {match(selectedField.type)
+                    .with(FieldType.SIGNATURE, () => (
+                      <EditorFieldSignatureForm
+                        value={selectedField?.fieldMeta as TSignatureFieldMeta | undefined}
+                        onValueChange={(value) => updateSelectedFieldMeta(value)}
+                      />
+                    ))
                     .with(FieldType.CHECKBOX, () => (
                       <EditorFieldCheckboxForm
                         value={selectedField?.fieldMeta as TCheckboxFieldMeta | undefined}

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

@@ -37,7 +37,6 @@ export default function EnvelopeEditorHeader() {
     updateEnvelope,
     autosaveError,
     relativePath,
-    syncEnvelope,
     editorFields,
   } = useCurrentEnvelopeEditor();
 
@@ -152,7 +151,7 @@ export default function EnvelopeEditorHeader() {
                   ...envelope,
                   fields: editorFields.localFields,
                 }}
-                onDistribute={syncEnvelope}
+                documentRootPath={relativePath.documentRootPath}
                 trigger={
                   <Button size="sm">
                     <SendIcon className="mr-2 h-4 w-4" />

apps/remix/app/components/general/envelope-editor/envelope-editor-preview-page.tsx

@@ -33,7 +33,7 @@ export const EnvelopeEditorPreviewPage = () => {
 
   return (
     <div className="relative flex h-full">
-      <div className="flex w-full flex-col">
+      <div className="flex w-full flex-col overflow-y-auto">
         {/* Horizontal envelope item selector */}
         <EnvelopeRendererFileSelector fields={editorFields.localFields} />
 
@@ -82,7 +82,7 @@ export const EnvelopeEditorPreviewPage = () => {
 
       {/* Right Section - Form Fields Panel */}
       {currentEnvelopeItem && false && (
-        <div className="sticky top-0 h-[calc(100vh-73px)] w-80 flex-shrink-0 overflow-y-auto border-l border-gray-200 bg-white py-4">
+        <div className="sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l border-gray-200 bg-white py-4">
           {/* Add fields section. */}
           <section className="px-4">
             {/* <h3 className="mb-2 text-sm font-semibold text-gray-900">

apps/remix/app/components/general/envelope-editor/envelope-editor-recipient-form.tsx

@@ -14,7 +14,7 @@ import { DocumentSigningOrder, EnvelopeType, RecipientRole, SendStatus } from '@
 import { motion } from 'framer-motion';
 import { GripVerticalIcon, HelpCircleIcon, PlusIcon, TrashIcon } from 'lucide-react';
 import { useFieldArray, useForm, useWatch } from 'react-hook-form';
-import { prop, sortBy } from 'remeda';
+import { isDeepEqual, prop, sortBy } from 'remeda';
 import { z } from 'zod';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
@@ -148,8 +148,7 @@ export const EnvelopeEditorRecipientForm = () => {
     },
   });
 
-  // Always show advanced settings if any recipient has auth options.
+  const recipientHasAuthSettings = useMemo(() => {
-  const alwaysShowAdvancedSettings = useMemo(() => {
     const recipientHasAuthOptions = recipients.find((recipient) => {
       const recipientAuthOptions = ZRecipientAuthOptionsSchema.parse(recipient.authOptions);
 
@@ -165,7 +164,7 @@ export const EnvelopeEditorRecipientForm = () => {
     return recipientHasAuthOptions !== undefined || formHasActionAuth !== undefined;
   }, [recipients, form]);
 
-  const [showAdvancedSettings, setShowAdvancedSettings] = useState(alwaysShowAdvancedSettings);
+  const [showAdvancedSettings, setShowAdvancedSettings] = useState(recipientHasAuthSettings);
   const [showSigningOrderConfirmation, setShowSigningOrderConfirmation] = useState(false);
 
   const {
@@ -464,7 +463,7 @@ export const EnvelopeEditorRecipientForm = () => {
     const formValueSigners = formValues.signers || [];
 
     // Remove the last signer if it's empty.
-    const recipients = formValueSigners.filter((signer, i) => {
+    const nonEmptyRecipients = formValueSigners.filter((signer, i) => {
       if (i === formValueSigners.length - 1 && signer.email === '') {
         return false;
       }
@@ -474,26 +473,48 @@ export const EnvelopeEditorRecipientForm = () => {
 
     const validatedFormValues = ZEnvelopeRecipientsForm.safeParse({
       ...formValues,
-      signers: recipients,
+      signers: nonEmptyRecipients,
     });
 
-    if (validatedFormValues.success) {
+    if (!validatedFormValues.success) {
-      console.log('validatedFormValues', validatedFormValues);
+      return;
+    }
 
+    const { data } = validatedFormValues;
+
+    const hasSigningOrderChanged = envelope.documentMeta.signingOrder !== data.signingOrder;
+    const hasAllowDictateNextSignerChanged =
+      envelope.documentMeta.allowDictateNextSigner !== data.allowDictateNextSigner;
+
+    const hasSignersChanged =
+      data.signers.length !== recipients.length ||
+      data.signers.some((signer) => {
+        const recipient = recipients.find((recipient) => recipient.id === signer.id);
+
+        if (!recipient) {
+          return true;
+        }
+
+        return (
+          signer.email !== recipient.email ||
+          signer.name !== recipient.name ||
+          signer.role !== recipient.role ||
+          signer.signingOrder !== recipient.signingOrder ||
+          !isDeepEqual(signer.actionAuth, recipient.authOptions?.actionAuth)
+        );
+      });
+
+    if (hasSignersChanged) {
       setRecipientsDebounced(validatedFormValues.data.signers);
+    }
 
-      if (
+    if (hasSigningOrderChanged || hasAllowDictateNextSignerChanged) {
-        validatedFormValues.data.signingOrder !== envelope.documentMeta.signingOrder ||
+      updateEnvelope({
-        validatedFormValues.data.allowDictateNextSigner !==
+        meta: {
-          envelope.documentMeta.allowDictateNextSigner
+          signingOrder: validatedFormValues.data.signingOrder,
-      ) {
+          allowDictateNextSigner: validatedFormValues.data.allowDictateNextSigner,
-        updateEnvelope({
+        },
-          meta: {
+      });
-            signingOrder: validatedFormValues.data.signingOrder,
-            allowDictateNextSigner: validatedFormValues.data.allowDictateNextSigner,
-          },
-        });
-      }
     }
   }, [formValues]);
 
@@ -534,17 +555,16 @@ export const EnvelopeEditorRecipientForm = () => {
         <AnimateGenericFadeInOut motionKey={showAdvancedSettings ? 'Show' : 'Hide'}>
           <Form {...form}>
             <div className="bg-accent/50 -mt-2 mb-2 space-y-4 rounded-md p-4">
-              {!alwaysShowAdvancedSettings && organisation.organisationClaim.flags.cfr21 && (
+              {organisation.organisationClaim.flags.cfr21 && (
                 <div className="flex flex-row items-center">
                   <Checkbox
                     id="showAdvancedRecipientSettings"
-                    className="h-5 w-5"
                     checked={showAdvancedSettings}
                     onCheckedChange={(value) => setShowAdvancedSettings(Boolean(value))}
                   />
 
                   <label
-                    className="text-muted-foreground ml-2 text-sm"
+                    className="ml-2 text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                     htmlFor="showAdvancedRecipientSettings"
                   >
                     <Trans>Show advanced settings</Trans>
@@ -703,171 +723,48 @@ export const EnvelopeEditorRecipientForm = () => {
                             <motion.fieldset
                               data-native-id={signer.id}
                               disabled={isSubmitting || !canRecipientBeModified(signer.id)}
-                              className={cn('grid grid-cols-10 items-end gap-2 pb-2', {
+                              className={cn('pb-2', {
-                                'border-b pt-2': showAdvancedSettings,
+                                'border-b pb-4':
-                                'grid-cols-12 pr-3': isSigningOrderSequential,
+                                  showAdvancedSettings && index !== signers.length - 1,
+                                'pt-2': showAdvancedSettings && index === 0,
+                                'pr-3': isSigningOrderSequential,
                               })}
                             >
-                              {isSigningOrderSequential && (
+                              <div className="flex flex-row items-center gap-x-2">
-                                <FormField
+                                {isSigningOrderSequential && (
-                                  control={form.control}
-                                  name={`signers.${index}.signingOrder`}
-                                  render={({ field }) => (
-                                    <FormItem
-                                      className={cn(
-                                        'col-span-1 mt-auto flex items-center gap-x-1 space-y-0',
-                                        {
-                                          'mb-6':
-                                            form.formState.errors.signers?.[index] &&
-                                            !form.formState.errors.signers[index]?.signingOrder,
-                                        },
-                                      )}
-                                    >
-                                      <GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
-                                      <FormControl>
-                                        <Input
-                                          type="number"
-                                          max={signers.length}
-                                          data-testid="signing-order-input"
-                                          className={cn(
-                                            'w-full text-center',
-                                            '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
-                                          )}
-                                          {...field}
-                                          onChange={(e) => {
-                                            field.onChange(e);
-                                            handleSigningOrderChange(index, e.target.value);
-                                          }}
-                                          onBlur={(e) => {
-                                            field.onBlur();
-                                            handleSigningOrderChange(index, e.target.value);
-                                          }}
-                                          disabled={
-                                            snapshot.isDragging ||
-                                            isSubmitting ||
-                                            !canRecipientBeModified(signer.id)
-                                          }
-                                        />
-                                      </FormControl>
-                                      <FormMessage />
-                                    </FormItem>
-                                  )}
-                                />
-                              )}
-
-                              <FormField
-                                control={form.control}
-                                name={`signers.${index}.email`}
-                                render={({ field }) => (
-                                  <FormItem
-                                    className={cn('relative', {
-                                      'mb-6':
-                                        form.formState.errors.signers?.[index] &&
-                                        !form.formState.errors.signers[index]?.email,
-                                      'col-span-4': !showAdvancedSettings,
-                                      'col-span-5': showAdvancedSettings,
-                                    })}
-                                  >
-                                    {!showAdvancedSettings && index === 0 && (
-                                      <FormLabel required>
-                                        <Trans>Email</Trans>
-                                      </FormLabel>
-                                    )}
-
-                                    <FormControl>
-                                      <RecipientAutoCompleteInput
-                                        type="email"
-                                        placeholder={t`Email`}
-                                        value={field.value}
-                                        disabled={
-                                          snapshot.isDragging ||
-                                          isSubmitting ||
-                                          !canRecipientBeModified(signer.id)
-                                        }
-                                        options={recipientSuggestions}
-                                        onSelect={(suggestion) =>
-                                          handleRecipientAutoCompleteSelect(index, suggestion)
-                                        }
-                                        onSearchQueryChange={(query) => {
-                                          field.onChange(query);
-                                          setRecipientSearchQuery(query);
-                                        }}
-                                        loading={isLoading}
-                                        data-testid="signer-email-input"
-                                        maxLength={254}
-                                      />
-                                    </FormControl>
-
-                                    <FormMessage />
-                                  </FormItem>
-                                )}
-                              />
-
-                              <FormField
-                                control={form.control}
-                                name={`signers.${index}.name`}
-                                render={({ field }) => (
-                                  <FormItem
-                                    className={cn({
-                                      'mb-6':
-                                        form.formState.errors.signers?.[index] &&
-                                        !form.formState.errors.signers[index]?.name,
-                                      'col-span-4': !showAdvancedSettings,
-                                      'col-span-5': showAdvancedSettings,
-                                    })}
-                                  >
-                                    {!showAdvancedSettings && index === 0 && (
-                                      <FormLabel>
-                                        <Trans>Name</Trans>
-                                      </FormLabel>
-                                    )}
-
-                                    <FormControl>
-                                      <RecipientAutoCompleteInput
-                                        type="text"
-                                        placeholder={t`Name`}
-                                        {...field}
-                                        disabled={
-                                          snapshot.isDragging ||
-                                          isSubmitting ||
-                                          !canRecipientBeModified(signer.id)
-                                        }
-                                        options={recipientSuggestions}
-                                        onSelect={(suggestion) =>
-                                          handleRecipientAutoCompleteSelect(index, suggestion)
-                                        }
-                                        onSearchQueryChange={(query) => {
-                                          field.onChange(query);
-                                          setRecipientSearchQuery(query);
-                                        }}
-                                        loading={isLoading}
-                                        maxLength={255}
-                                      />
-                                    </FormControl>
-
-                                    <FormMessage />
-                                  </FormItem>
-                                )}
-                              />
-
-                              {showAdvancedSettings &&
-                                organisation.organisationClaim.flags.cfr21 && (
                                   <FormField
                                     control={form.control}
-                                    name={`signers.${index}.actionAuth`}
+                                    name={`signers.${index}.signingOrder`}
                                     render={({ field }) => (
                                       <FormItem
-                                        className={cn('col-span-8', {
+                                        className={cn(
-                                          'mb-6':
+                                          'mt-auto flex items-center gap-x-1 space-y-0',
-                                            form.formState.errors.signers?.[index] &&
+                                          {
-                                            !form.formState.errors.signers[index]?.actionAuth,
+                                            'mb-6':
-                                          'col-span-10': isSigningOrderSequential,
+                                              form.formState.errors.signers?.[index] &&
-                                        })}
+                                              !form.formState.errors.signers[index]?.signingOrder,
+                                          },
+                                        )}
                                       >
+                                        <GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
                                         <FormControl>
-                                          <RecipientActionAuthSelect
+                                          <Input
+                                            type="number"
+                                            max={signers.length}
+                                            data-testid="signing-order-input"
+                                            className={cn(
+                                              'w-10 text-center',
+                                              '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+                                            )}
                                             {...field}
-                                            onValueChange={field.onChange}
+                                            onChange={(e) => {
+                                              field.onChange(e);
+                                              handleSigningOrderChange(index, e.target.value);
+                                            }}
+                                            onBlur={(e) => {
+                                              field.onBlur();
+                                              handleSigningOrderChange(index, e.target.value);
+                                            }}
                                             disabled={
                                               snapshot.isDragging ||
                                               isSubmitting ||
@@ -875,20 +772,109 @@ export const EnvelopeEditorRecipientForm = () => {
                                             }
                                           />
                                         </FormControl>
-
                                         <FormMessage />
                                       </FormItem>
                                     )}
                                   />
                                 )}
 
-                              <div className="col-span-2 flex gap-x-2">
+                                <FormField
+                                  control={form.control}
+                                  name={`signers.${index}.email`}
+                                  render={({ field }) => (
+                                    <FormItem
+                                      className={cn('relative w-full', {
+                                        'mb-6':
+                                          form.formState.errors.signers?.[index] &&
+                                          !form.formState.errors.signers[index]?.email,
+                                      })}
+                                    >
+                                      {!showAdvancedSettings && index === 0 && (
+                                        <FormLabel required>
+                                          <Trans>Email</Trans>
+                                        </FormLabel>
+                                      )}
+
+                                      <FormControl>
+                                        <RecipientAutoCompleteInput
+                                          type="email"
+                                          placeholder={t`Email`}
+                                          value={field.value}
+                                          disabled={
+                                            snapshot.isDragging ||
+                                            isSubmitting ||
+                                            !canRecipientBeModified(signer.id)
+                                          }
+                                          options={recipientSuggestions}
+                                          onSelect={(suggestion) =>
+                                            handleRecipientAutoCompleteSelect(index, suggestion)
+                                          }
+                                          onSearchQueryChange={(query) => {
+                                            field.onChange(query);
+                                            setRecipientSearchQuery(query);
+                                          }}
+                                          loading={isLoading}
+                                          data-testid="signer-email-input"
+                                          maxLength={254}
+                                        />
+                                      </FormControl>
+
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+
+                                <FormField
+                                  control={form.control}
+                                  name={`signers.${index}.name`}
+                                  render={({ field }) => (
+                                    <FormItem
+                                      className={cn('w-full', {
+                                        'mb-6':
+                                          form.formState.errors.signers?.[index] &&
+                                          !form.formState.errors.signers[index]?.name,
+                                      })}
+                                    >
+                                      {!showAdvancedSettings && index === 0 && (
+                                        <FormLabel>
+                                          <Trans>Name</Trans>
+                                        </FormLabel>
+                                      )}
+
+                                      <FormControl>
+                                        <RecipientAutoCompleteInput
+                                          type="text"
+                                          placeholder={t`Name`}
+                                          {...field}
+                                          disabled={
+                                            snapshot.isDragging ||
+                                            isSubmitting ||
+                                            !canRecipientBeModified(signer.id)
+                                          }
+                                          options={recipientSuggestions}
+                                          onSelect={(suggestion) =>
+                                            handleRecipientAutoCompleteSelect(index, suggestion)
+                                          }
+                                          onSearchQueryChange={(query) => {
+                                            field.onChange(query);
+                                            setRecipientSearchQuery(query);
+                                          }}
+                                          loading={isLoading}
+                                          maxLength={255}
+                                        />
+                                      </FormControl>
+
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+
                                 <FormField
                                   control={form.control}
                                   name={`signers.${index}.role`}
                                   render={({ field }) => (
                                     <FormItem
-                                      className={cn('mt-auto', {
+                                      className={cn('mt-auto w-fit', {
                                         'mb-6':
                                           form.formState.errors.signers?.[index] &&
                                           !form.formState.errors.signers[index]?.role,
@@ -916,14 +902,11 @@ export const EnvelopeEditorRecipientForm = () => {
                                   )}
                                 />
 
-                                <button
+                                <Button
-                                  type="button"
+                                  variant="ghost"
-                                  className={cn(
+                                  className={cn('mt-auto px-2', {
-                                    'mt-auto inline-flex h-10 w-10 items-center justify-center hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
+                                    'mb-6': form.formState.errors.signers?.[index],
-                                    {
+                                  })}
-                                      'mb-6': form.formState.errors.signers?.[index],
-                                    },
-                                  )}
                                   data-testid="remove-signer-button"
                                   disabled={
                                     snapshot.isDragging ||
@@ -934,8 +917,40 @@ export const EnvelopeEditorRecipientForm = () => {
                                   onClick={() => onRemoveSigner(index)}
                                 >
                                   <TrashIcon className="h-4 w-4" />
-                                </button>
+                                </Button>
                               </div>
+
+                              {showAdvancedSettings &&
+                                organisation.organisationClaim.flags.cfr21 && (
+                                  <FormField
+                                    control={form.control}
+                                    name={`signers.${index}.actionAuth`}
+                                    render={({ field }) => (
+                                      <FormItem
+                                        className={cn('mt-2 w-full', {
+                                          'mb-6':
+                                            form.formState.errors.signers?.[index] &&
+                                            !form.formState.errors.signers[index]?.actionAuth,
+                                          'pl-6': isSigningOrderSequential,
+                                        })}
+                                      >
+                                        <FormControl>
+                                          <RecipientActionAuthSelect
+                                            {...field}
+                                            onValueChange={field.onChange}
+                                            disabled={
+                                              snapshot.isDragging ||
+                                              isSubmitting ||
+                                              !canRecipientBeModified(signer.id)
+                                            }
+                                          />
+                                        </FormControl>
+
+                                        <FormMessage />
+                                      </FormItem>
+                                    )}
+                                  />
+                                )}
                             </motion.fieldset>
                           </div>
                         )}

apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx

@@ -242,7 +242,6 @@ export const EnvelopeEditorSettingsDialog = ({
     try {
       await updateEnvelope({
         envelopeId: envelope.id,
-        envelopeType: envelope.type,
         data: {
           externalId: data.externalId || null,
           visibility: data.visibility,
@@ -355,7 +354,7 @@ export const EnvelopeEditorSettingsDialog = ({
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onFormSubmit)}>
               <fieldset
-                className="flex min-h-[45rem] w-full flex-col space-y-6 px-6 pt-6"
+                className="flex h-[45rem] max-h-[calc(100vh-14rem)] w-full flex-col space-y-6 overflow-y-auto px-6 pt-6"
                 disabled={form.formState.isSubmitting}
                 key={activeTab}
               >

apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx

@@ -142,7 +142,7 @@ export const EnvelopeEditorUploadPage = () => {
 
     const { createdEnvelopeItems } = await createEnvelopeItems({
       envelopeId: envelope.id,
-      items: envelopeItemsToCreate,
+      data: envelopeItemsToCreate,
     }).catch((error) => {
       console.error(error);
 

apps/remix/app/components/general/envelope-editor/envelope-editor.tsx

@@ -81,7 +81,6 @@ export default function EnvelopeEditor() {
     isAutosaving,
     flushAutosave,
     relativePath,
-    syncEnvelope,
     editorFields,
   } = useCurrentEnvelopeEditor();
 
@@ -157,7 +156,7 @@ export default function EnvelopeEditor() {
       <EnvelopeEditorHeader />
 
       {/* Main Content Area */}
-      <div className="flex h-[calc(100vh-73px)] w-screen">
+      <div className="flex h-[calc(100vh-4rem)] w-screen">
         {/* Left Section - Step Navigation */}
         <div className="bg-background border-border flex w-80 flex-shrink-0 flex-col overflow-y-auto border-r py-4">
           {/* Left section step selector. */}
@@ -251,7 +250,7 @@ export default function EnvelopeEditor() {
                   ...envelope,
                   fields: editorFields.localFields,
                 }}
-                onDistribute={syncEnvelope}
+                documentRootPath={relativePath.documentRootPath}
                 trigger={
                   <Button variant="ghost" size="sm" className="w-full justify-start">
                     <SendIcon className="mr-2 h-4 w-4" />
@@ -369,16 +368,14 @@ export default function EnvelopeEditor() {
         </div>
 
         {/* Main Content - Changes based on current step */}
-        <div className="flex-1 overflow-y-auto">
+        <AnimateGenericFadeInOut className="flex-1 overflow-y-auto" key={currentStep}>
-          <AnimateGenericFadeInOut key={currentStep}>
+          {match({ currentStep, isStepLoading })
-            {match({ currentStep, isStepLoading })
+            .with({ isStepLoading: true }, () => <SpinnerBox className="py-32" />)
-              .with({ isStepLoading: true }, () => <SpinnerBox className="py-32" />)
+            .with({ currentStep: 'upload' }, () => <EnvelopeEditorUploadPage />)
-              .with({ currentStep: 'upload' }, () => <EnvelopeEditorUploadPage />)
+            .with({ currentStep: 'addFields' }, () => <EnvelopeEditorFieldsPage />)
-              .with({ currentStep: 'addFields' }, () => <EnvelopeEditorFieldsPage />)
+            .with({ currentStep: 'preview' }, () => <EnvelopeEditorPreviewPage />)
-              .with({ currentStep: 'preview' }, () => <EnvelopeEditorPreviewPage />)
+            .exhaustive()}
-              .exhaustive()}
+        </AnimateGenericFadeInOut>
-          </AnimateGenericFadeInOut>
-        </div>
       </div>
     </div>
   );

apps/remix/app/components/general/envelope-editor/envelope-file-selector.tsx

@@ -20,7 +20,8 @@ export const EnvelopeItemSelector = ({
 }: EnvelopeItemSelectorProps) => {
   return (
     <button
-      className={`flex min-w-0 flex-shrink-0 cursor-pointer items-center space-x-3 rounded-lg border px-4 py-3 transition-colors ${
+      title={typeof primaryText === 'string' ? primaryText : undefined}
+      className={`flex h-fit max-w-72 flex-shrink-0 cursor-pointer items-center space-x-3 rounded-lg border px-4 py-3 transition-colors ${
         isSelected
           ? 'border-green-200 bg-green-50 text-green-900 dark:border-green-400/30 dark:bg-green-400/10 dark:text-green-400'
           : 'border-border bg-muted/50 hover:bg-muted/70'
@@ -39,7 +40,7 @@ export const EnvelopeItemSelector = ({
         <div className="text-xs text-gray-500">{secondaryText}</div>
       </div>
       <div
-        className={cn('h-2 w-2 rounded-full', {
+        className={cn('h-2 w-2 flex-shrink-0 rounded-full', {
           'bg-green-500': isSelected,
         })}
       ></div>
@@ -61,7 +62,7 @@ export const EnvelopeRendererFileSelector = ({
   const { envelopeItems, currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
 
   return (
-    <div className={cn('flex h-fit space-x-2 overflow-x-auto p-4', className)}>
+    <div className={cn('flex h-fit flex-shrink-0 space-x-2 overflow-x-auto p-4', className)}>
       {envelopeItems.map((doc, i) => (
         <EnvelopeItemSelector
           key={doc.id}

apps/remix/app/components/general/envelope-editor/envelope-generic-page-renderer.tsx

@@ -12,7 +12,7 @@ import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 export default function EnvelopeGenericPageRenderer() {
   const { i18n } = useLingui();
 
-  const { currentEnvelopeItem, fields } = useCurrentEnvelopeRender();
+  const { currentEnvelopeItem, fields, getRecipientColorKey } = useCurrentEnvelopeRender();
 
   const {
     stage,
@@ -60,8 +60,7 @@ export default function EnvelopeGenericPageRenderer() {
       translations: getClientSideFieldTranslations(i18n),
       pageWidth: unscaledViewport.width,
       pageHeight: unscaledViewport.height,
-      // color: getRecipientColorKey(field.recipientId),
+      color: getRecipientColorKey(field.recipientId),
-      color: 'purple', // Todo
       editable: false,
       mode: 'sign',
     });
@@ -80,7 +79,7 @@ export default function EnvelopeGenericPageRenderer() {
   };
 
   /**
-   * Render fields when they are added or removed from the localFields.
+   * Render fields when they are added or removed
    */
   useEffect(() => {
     if (!pageLayer.current || !stage.current) {
@@ -93,14 +92,12 @@ export default function EnvelopeGenericPageRenderer() {
         group.name() === 'field-group' &&
         !localPageFields.some((field) => field.id.toString() === group.id())
       ) {
-        console.log('Field removed, removing from canvas');
         group.destroy();
       }
     });
 
     // If it exists, rerender.
     localPageFields.forEach((field) => {
-      console.log('Field created/updated, rendering on canvas');
       renderFieldOnLayer(field);
     });
 

apps/remix/app/components/general/folder/folder-grid.tsx

@@ -6,6 +6,7 @@ import { FolderIcon, HomeIcon } from 'lucide-react';
 import { Link } from 'react-router';
 
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { IS_ENVELOPES_ENABLED } from '@documenso/lib/constants/app';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
 import { type TFolderWithSubfolders } from '@documenso/trpc/server/folder-router/schema';
@@ -98,7 +99,7 @@ export const FolderGrid = ({ type, parentId }: FolderGridProps) => {
         </div>
 
         <div className="flex gap-4 sm:flex-row sm:justify-end">
-          {organisation.organisationClaim.flags.allowEnvelopes && (
+          {(IS_ENVELOPES_ENABLED || organisation.organisationClaim.flags.allowEnvelopes) && (
             <EnvelopeUploadButton type={type} folderId={parentId || undefined} />
           )}
 

apps/remix/app/components/general/share-document-download-button.tsx

@@ -15,7 +15,6 @@ export type ShareDocumentDownloadButtonProps = {
   documentData: DocumentData;
 };
 
-// Todo: Envelopes - Support multiple item downloads.
 export const ShareDocumentDownloadButton = ({
   title,
   documentData,

apps/remix/app/routes/_authenticated+/_layout.tsx

@@ -116,7 +116,7 @@ export default function Layout({ loaderData, params, matches }: Route.ComponentP
 
         {!user.emailVerified && <VerifyEmailBanner email={user.email} />}
 
-        {banner && <AppBanner banner={banner} />}
+        {banner && !hideHeader && <AppBanner banner={banner} />}
 
         {!hideHeader && <Header />}
 

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id._index.tsx

@@ -148,6 +148,7 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
             <EnvelopeRenderProvider
               envelope={envelope}
               fields={envelope.status == DocumentStatus.COMPLETED ? [] : envelope.fields}
+              recipientIds={envelope.recipients.map((recipient) => recipient.id)}
             >
               {isMultiEnvelopeItem && (
                 <EnvelopeRendererFileSelector fields={envelope.fields} className="mb-4 p-0" />

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.edit.tsx

@@ -99,7 +99,11 @@ export default function EnvelopeEditorPage({ params }: Route.ComponentProps) {
 
   return (
     <EnvelopeEditorProvider initialEnvelope={envelope}>
-      <EnvelopeRenderProvider envelope={envelope}>
+      <EnvelopeRenderProvider
+        envelope={envelope}
+        fields={envelope.fields}
+        recipientIds={envelope.recipients.map((recipient) => recipient.id)}
+      >
         <EnvelopeEditor />
       </EnvelopeRenderProvider>
     </EnvelopeEditorProvider>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id._index.tsx

@@ -168,7 +168,11 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
       <div className="mt-6 grid w-full grid-cols-12 gap-8">
         {envelope.internalVersion === 2 ? (
           <div className="relative col-span-12 lg:col-span-6 xl:col-span-7">
-            <EnvelopeRenderProvider envelope={envelope} fields={envelope.fields}>
+            <EnvelopeRenderProvider
+              envelope={envelope}
+              fields={envelope.fields}
+              recipientIds={envelope.recipients.map((recipient) => recipient.id)}
+            >
               {isMultiEnvelopeItem && (
                 <EnvelopeRendererFileSelector fields={envelope.fields} className="mb-4 p-0" />
               )}

apps/remix/server/main.js

@@ -30,4 +30,6 @@ server.use(
 
 const handler = handle(build, server);
 
-serve({ fetch: handler.fetch, port: 3000 });
+const port = parseInt(process.env.PORT || '3000', 10);
+
+serve({ fetch: handler.fetch, port });

apps/remix/vite.config.ts

@@ -21,7 +21,7 @@ export default defineConfig({
     },
   },
   server: {
-    port: 3000,
+    port: parseInt(process.env.PORT || '3000', 10),
     strictPort: true,
   },
   plugins: [

package-lock.json

@@ -12557,6 +12557,16 @@
         "@types/pg": "*"
       }
     },
+    "node_modules/@types/pngjs": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/@types/pngjs/-/pngjs-6.0.5.tgz",
+      "integrity": "sha512-0k5eKfrA83JOZPppLtS2C7OUtyNAl2wKNxfyYl9Q5g9lPkgBl/9hNyAu6HuEH2J4XmIv2znEpkDd0SaZVxW6iQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.14",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
@@ -27544,6 +27554,19 @@
         "node": ">= 6"
       }
     },
+    "node_modules/pixelmatch": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-7.1.0.tgz",
+      "integrity": "sha512-1wrVzJ2STrpmONHKBy228LM1b84msXDUoAzVEl0R8Mz4Ce6EPr+IVtxm8+yvrqLYMHswREkjYFaMxnyGnaY3Ng==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "pngjs": "^7.0.0"
+      },
+      "bin": {
+        "pixelmatch": "bin/pixelmatch"
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -27740,6 +27763,16 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/pngjs": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-7.0.0.tgz",
+      "integrity": "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.19.0"
+      }
+    },
     "node_modules/pofile": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/pofile/-/pofile-1.1.4.tgz",
@@ -36183,7 +36216,10 @@
         "@documenso/lib": "*",
         "@documenso/prisma": "*",
         "@playwright/test": "1.52.0",
-        "@types/node": "^20"
+        "@types/node": "^20",
+        "@types/pngjs": "^6.0.5",
+        "pixelmatch": "^7.1.0",
+        "pngjs": "^7.0.0"
       }
     },
     "packages/app-tests/node_modules/@playwright/test": {

packages/api/v1/implementation.ts

@@ -20,12 +20,12 @@ import {
   getEnvelopeWhereInput,
 } from '@documenso/lib/server-only/envelope/get-envelope-by-id';
 import { deleteDocumentField } from '@documenso/lib/server-only/field/delete-document-field';
-import { updateDocumentFields } from '@documenso/lib/server-only/field/update-document-fields';
+import { updateEnvelopeFields } from '@documenso/lib/server-only/field/update-envelope-fields';
 import { insertFormValuesInPdf } from '@documenso/lib/server-only/pdf/insert-form-values-in-pdf';
-import { deleteDocumentRecipient } from '@documenso/lib/server-only/recipient/delete-document-recipient';
+import { deleteEnvelopeRecipient } from '@documenso/lib/server-only/recipient/delete-envelope-recipient';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { setDocumentRecipients } from '@documenso/lib/server-only/recipient/set-document-recipients';
-import { updateDocumentRecipients } from '@documenso/lib/server-only/recipient/update-document-recipients';
+import { updateEnvelopeRecipients } from '@documenso/lib/server-only/recipient/update-envelope-recipients';
 import { createDocumentFromTemplate } from '@documenso/lib/server-only/template/create-document-from-template';
 import { deleteTemplate } from '@documenso/lib/server-only/template/delete-template';
 import { findTemplates } from '@documenso/lib/server-only/template/find-templates';
@@ -1285,7 +1285,7 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
       };
     }
 
-    const updatedRecipient = await updateDocumentRecipients({
+    const updatedRecipient = await updateEnvelopeRecipients({
       userId: user.id,
       teamId: team.id,
       id: {
@@ -1336,7 +1336,7 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
       },
     });
 
-    const deletedRecipient = await deleteDocumentRecipient({
+    const deletedRecipient = await deleteEnvelopeRecipient({
       userId: user.id,
       teamId: team.id,
       recipientId: Number(recipientId),
@@ -1634,10 +1634,13 @@ export const ApiContractV1Implementation = tsr.router(ApiContractV1, {
       };
     }
 
-    const { fields } = await updateDocumentFields({
+    const { fields } = await updateEnvelopeFields({
       userId: user.id,
       teamId: team.id,
-      documentId: legacyDocumentId,
+      id: {
+        type: 'documentId',
+        id: legacyDocumentId,
+      },
       fields: [
         {
           id: Number(fieldId),

packages/app-tests/constants/field-alignment-pdf.ts

@@ -0,0 +1,498 @@
+import { FieldType } from '@prisma/client';
+
+import type { TFieldAndMeta } from '@documenso/lib/types/field-meta';
+import { toCheckboxCustomText } from '@documenso/lib/utils/fields';
+
+export type FieldTestData = TFieldAndMeta & {
+  page: number;
+  positionX: number;
+  positionY: number;
+  width: number;
+  height: number;
+  customText: string;
+  signature?: string;
+};
+
+const columnWidth = 19.125;
+const rowHeight = 6.7;
+
+const alignmentGridStartX = 31;
+const alignmentGridStartY = 19.02;
+
+export const ALIGNMENT_TEST_FIELDS: FieldTestData[] = [
+  /**
+   * Row 1 EMAIL
+   */
+  {
+    type: FieldType.EMAIL,
+    fieldMeta: {
+      fontSize: 10,
+      textAlign: 'left',
+      type: 'email',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'admin@documenso.com',
+  },
+  {
+    type: FieldType.EMAIL,
+    fieldMeta: {
+      textAlign: 'center',
+      type: 'email',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'admin@documenso.com',
+  },
+  {
+    type: FieldType.EMAIL,
+    fieldMeta: {
+      fontSize: 20,
+      textAlign: 'right',
+      type: 'email',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'admin@documenso.com',
+  },
+  /**
+   * Row 2 NAME
+   */
+  {
+    type: FieldType.NAME,
+    fieldMeta: {
+      fontSize: 10,
+      textAlign: 'left',
+      type: 'name',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'John Doe',
+  },
+  {
+    type: FieldType.NAME,
+    fieldMeta: {
+      textAlign: 'center',
+      type: 'name',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'John Doe',
+  },
+  {
+    type: FieldType.NAME,
+    fieldMeta: {
+      fontSize: 20,
+      textAlign: 'right',
+      type: 'name',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'John Doe',
+  },
+  /**
+   * Row 3 DATE
+   */
+  {
+    type: FieldType.DATE,
+    fieldMeta: {
+      fontSize: 10,
+      textAlign: 'left',
+      type: 'date',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  {
+    type: FieldType.DATE,
+    fieldMeta: {
+      textAlign: 'center',
+      type: 'date',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  {
+    type: FieldType.DATE,
+    fieldMeta: {
+      fontSize: 20,
+      textAlign: 'right',
+      type: 'date',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  /**
+   * Row 4 TEXT
+   */
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      fontSize: 10,
+      textAlign: 'left',
+      type: 'text',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      textAlign: 'center',
+      type: 'text',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      fontSize: 20,
+      textAlign: 'right',
+      type: 'text',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  /**
+   * Row 5 NUMBER
+   */
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      fontSize: 10,
+      textAlign: 'left',
+      type: 'number',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      textAlign: 'center',
+      type: 'number',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      fontSize: 20,
+      textAlign: 'right',
+      type: 'number',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '123456789',
+  },
+  /**
+   * Row 6 Initials
+   */
+  {
+    type: FieldType.INITIALS,
+    fieldMeta: {
+      fontSize: 10,
+      textAlign: 'left',
+      type: 'initials',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'JD',
+  },
+  {
+    type: FieldType.INITIALS,
+    fieldMeta: {
+      textAlign: 'center',
+      type: 'initials',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'JD',
+  },
+  {
+    type: FieldType.INITIALS,
+    fieldMeta: {
+      fontSize: 20,
+      textAlign: 'right',
+      type: 'initials',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'JD',
+  },
+  /**
+   * Row 7 Radio
+   */
+  {
+    type: FieldType.RADIO,
+    fieldMeta: {
+      fontSize: 10,
+      direction: 'vertical',
+      type: 'radio',
+      values: [
+        { id: 1, checked: true, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+      ],
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '0',
+  },
+  {
+    type: FieldType.RADIO,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'radio',
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: true, value: 'Option 2' },
+      ],
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '2',
+  },
+  {
+    type: FieldType.RADIO,
+    fieldMeta: {
+      fontSize: 20,
+      direction: 'horizontal',
+      type: 'radio',
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+      ],
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '',
+  },
+  /**
+   * Row 8 Checkbox
+   */
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      fontSize: 10,
+      direction: 'vertical',
+      type: 'checkbox',
+      values: [
+        { id: 1, checked: true, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+      ],
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: toCheckboxCustomText([0]),
+  },
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'checkbox',
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: true, value: 'Option 2' },
+      ],
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: toCheckboxCustomText([1]),
+  },
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      fontSize: 20,
+      direction: 'horizontal',
+      type: 'checkbox',
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+      ],
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '',
+  },
+  /**
+   * Row 8 Dropdown
+   */
+  {
+    type: FieldType.DROPDOWN,
+    fieldMeta: {
+      fontSize: 10,
+      values: [{ value: 'Option 1' }, { value: 'Option 2' }],
+      type: 'dropdown',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'Option 1',
+  },
+  {
+    type: FieldType.DROPDOWN,
+    fieldMeta: {
+      values: [{ value: 'Option 1' }, { value: 'Option 2' }],
+      type: 'dropdown',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'Option 1',
+  },
+  {
+    type: FieldType.DROPDOWN,
+    fieldMeta: {
+      fontSize: 20,
+      values: [{ value: 'Option 1' }, { value: 'Option 2' }, { value: 'Option 3' }],
+      type: 'dropdown',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: 'Option 1',
+  },
+  /**
+   * Row 9 Signature
+   */
+  {
+    type: FieldType.SIGNATURE,
+    fieldMeta: {
+      fontSize: 10,
+      type: 'signature',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '',
+    signature: 'My Signature',
+  },
+  {
+    type: FieldType.SIGNATURE,
+    fieldMeta: {
+      type: 'signature',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '',
+    signature: 'My Signature',
+  },
+  {
+    type: FieldType.SIGNATURE,
+    fieldMeta: {
+      fontSize: 20,
+      type: 'signature',
+    },
+    page: 1,
+    height: rowHeight,
+    width: columnWidth,
+    positionX: 0,
+    positionY: 0,
+    customText: '',
+    signature: 'My Signature',
+  },
+] as const;
+
+export const formatAlignmentTestFields = ALIGNMENT_TEST_FIELDS.map((field, index) => {
+  const row = Math.floor(index / 3);
+  const column = index % 3;
+
+  return {
+    ...field,
+    positionX: alignmentGridStartX + column * columnWidth,
+    positionY: alignmentGridStartY + row * rowHeight,
+  };
+});

packages/app-tests/constants/field-meta-pdf.ts

@@ -0,0 +1,482 @@
+import { FieldType } from '@prisma/client';
+
+import { toCheckboxCustomText } from '@documenso/lib/utils/fields';
+import {
+  CheckboxValidationRules,
+  numberFormatValues,
+} from '@documenso/ui/primitives/document-flow/field-items-advanced-settings/constants';
+
+import type { FieldTestData } from './field-alignment-pdf';
+
+const columnWidth = 20.1;
+const fullColumnWidth = 75.8;
+const rowHeight = 9.8;
+const rowPadding = 1.8;
+
+const alignmentGridStartX = 11.85;
+const alignmentGridStartY = 15.07;
+
+const calculatePosition = (row: number, column: number, width: 'full' | 'column' = 'column') => {
+  return {
+    height: rowHeight,
+    width: width === 'full' ? fullColumnWidth : columnWidth,
+    positionX: alignmentGridStartX + (column ?? 0) * columnWidth,
+    positionY: alignmentGridStartY + row * (rowHeight + rowPadding),
+  };
+};
+
+export const FIELD_META_TEST_FIELDS: FieldTestData[] = [
+  /**
+   * PAGE 2 Signature
+   */
+  {
+    type: FieldType.SIGNATURE,
+    fieldMeta: {
+      type: 'signature',
+    },
+    page: 2,
+    ...calculatePosition(0, 0),
+    customText: '',
+    signature: 'My Signature',
+  },
+  {
+    type: FieldType.SIGNATURE,
+    fieldMeta: {
+      type: 'signature',
+    },
+    page: 2,
+    ...calculatePosition(1, 0),
+    customText: '',
+    signature: 'My Signature',
+  },
+  {
+    type: FieldType.SIGNATURE,
+    fieldMeta: {
+      type: 'signature',
+    },
+    page: 2,
+    ...calculatePosition(2, 0),
+    customText: '',
+    signature: 'My Signature',
+  },
+  {
+    type: FieldType.SIGNATURE,
+    fieldMeta: {
+      type: 'signature',
+    },
+    page: 2,
+    ...calculatePosition(3, 0),
+    customText: '',
+    signature: 'My Signature',
+  },
+
+  /**
+   * PAGE 3 TEXT
+   */
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      type: 'text',
+    },
+    page: 3,
+    ...calculatePosition(0, 0, 'full'),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      type: 'text',
+    },
+    page: 3,
+    ...calculatePosition(1, 0),
+    customText: '123456789123456789123456789123456789',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      type: 'text',
+      characterLimit: 5,
+    },
+    page: 3,
+    ...calculatePosition(2, 0),
+    customText: '12345',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      type: 'text',
+      placeholder: 'Demo Placeholder',
+    },
+    page: 3,
+    ...calculatePosition(3, 0),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      type: 'text',
+      label: 'Demo Label',
+    },
+    page: 3,
+    ...calculatePosition(3, 1),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      type: 'text',
+      text: 'Prefilled text',
+    },
+    page: 3,
+    ...calculatePosition(3, 2),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      type: 'text',
+      required: true,
+    },
+    page: 3,
+    ...calculatePosition(4, 0),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.TEXT,
+    fieldMeta: {
+      type: 'text',
+      readOnly: true,
+      text: 'Readonly Value',
+    },
+    page: 3,
+    ...calculatePosition(4, 1),
+    customText: 'Readonly Value',
+  },
+
+  /**
+   * PAGE 4 NUMBER
+   */
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+    },
+    page: 4,
+    ...calculatePosition(0, 0, 'full'),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+    },
+    page: 4,
+    ...calculatePosition(1, 0),
+    customText: '123456789123456789123456789123456789',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+      minValue: 0,
+      maxValue: 100,
+    },
+    page: 4,
+    ...calculatePosition(2, 0),
+    customText: '50',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+      numberFormat: numberFormatValues[0].value, // Todo: Envelopes - Check this.
+      value: '123,456,789.00',
+    },
+    page: 4,
+    ...calculatePosition(2, 1),
+    customText: '123,456,789.00',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+      placeholder: 'Demo Placeholder',
+    },
+    page: 4,
+    ...calculatePosition(3, 0),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+      label: 'Demo Label',
+    },
+    page: 4,
+    ...calculatePosition(3, 1),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+      value: '123',
+    },
+    page: 4,
+    ...calculatePosition(3, 2),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+      required: true,
+    },
+    page: 4,
+    ...calculatePosition(4, 0),
+    customText: '123456789',
+  },
+  {
+    type: FieldType.NUMBER,
+    fieldMeta: {
+      type: 'number',
+      readOnly: true,
+    },
+    page: 4,
+    ...calculatePosition(4, 1),
+    customText: '123456789',
+  },
+
+  /**
+   * PAGE 5 RADIO
+   */
+  {
+    type: FieldType.RADIO,
+    fieldMeta: {
+      direction: 'horizontal',
+      type: 'radio',
+      values: [
+        { id: 1, checked: true, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+        { id: 3, checked: false, value: 'Option 3' },
+      ],
+    },
+    page: 5,
+    ...calculatePosition(0, 0, 'full'),
+    customText: '0',
+  },
+  {
+    type: FieldType.RADIO,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'radio',
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: true, value: 'Option 2' },
+        { id: 3, checked: false, value: 'Option 3' },
+      ],
+    },
+    page: 5,
+    ...calculatePosition(1, 0),
+    customText: '2',
+  },
+  {
+    type: FieldType.RADIO,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'radio',
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+        { id: 3, checked: false, value: 'Option 3' },
+      ],
+    },
+    page: 5,
+    ...calculatePosition(2, 0),
+    customText: '',
+  },
+  {
+    type: FieldType.RADIO,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'radio',
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+        { id: 3, checked: false, value: 'Option 3' },
+      ],
+    },
+    page: 5,
+    ...calculatePosition(2, 1),
+    customText: '',
+  },
+
+  /**
+   * PAGE 6 CHECKBOX
+   */
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      direction: 'horizontal',
+      type: 'checkbox',
+      values: [
+        { id: 1, checked: true, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+        { id: 2, checked: false, value: 'Option 3' },
+        { id: 2, checked: false, value: 'Option 4' },
+      ],
+    },
+    page: 6,
+    ...calculatePosition(0, 0, 'full'),
+    customText: toCheckboxCustomText([0]),
+  },
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'checkbox',
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: true, value: 'Option 2' },
+        { id: 2, checked: true, value: 'Option 3' },
+      ],
+    },
+    page: 6,
+    ...calculatePosition(1, 0),
+    customText: toCheckboxCustomText([1]),
+  },
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'checkbox',
+      required: true,
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+      ],
+    },
+    page: 6,
+    ...calculatePosition(2, 0),
+    customText: '',
+  },
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'checkbox',
+      readOnly: true,
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+      ],
+    },
+    page: 6,
+    ...calculatePosition(2, 1),
+    customText: '',
+  },
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'checkbox',
+      validationRule: CheckboxValidationRules.SELECT_AT_LEAST,
+      validationLength: 2,
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+        { id: 3, checked: false, value: 'Option 3' },
+      ],
+    },
+    page: 6,
+    ...calculatePosition(3, 0),
+    customText: '',
+  },
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'checkbox',
+      validationRule: CheckboxValidationRules.SELECT_EXACTLY,
+      validationLength: 2,
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+        { id: 3, checked: false, value: 'Option 3' },
+      ],
+    },
+    page: 6,
+    ...calculatePosition(3, 1),
+    customText: '',
+  },
+  {
+    type: FieldType.CHECKBOX,
+    fieldMeta: {
+      direction: 'vertical',
+      type: 'checkbox',
+      validationRule: CheckboxValidationRules.SELECT_AT_MOST,
+      validationLength: 2,
+      values: [
+        { id: 1, checked: false, value: 'Option 1' },
+        { id: 2, checked: false, value: 'Option 2' },
+        { id: 3, checked: false, value: 'Option 3' },
+      ],
+    },
+    page: 6,
+    ...calculatePosition(3, 2),
+    customText: '',
+  },
+
+  /**
+   * PAGE 7 DROPDOWN
+   */
+  {
+    type: FieldType.DROPDOWN,
+    fieldMeta: {
+      values: [{ value: 'Option 1' }, { value: 'Option 2' }],
+      type: 'dropdown',
+    },
+    page: 7,
+    ...calculatePosition(0, 0, 'full'),
+    customText: 'Option 1',
+  },
+  {
+    type: FieldType.DROPDOWN,
+    fieldMeta: {
+      values: [{ value: 'Option 1' }, { value: 'Option 2' }],
+      type: 'dropdown',
+      defaultValue: 'Option 1',
+    },
+    page: 7,
+    ...calculatePosition(1, 0),
+    customText: 'Option 1',
+  },
+  {
+    type: FieldType.DROPDOWN,
+    fieldMeta: {
+      values: [{ value: 'Option 1' }, { value: 'Option 2' }, { value: 'Option 3' }],
+      type: 'dropdown',
+      required: true,
+    },
+    page: 7,
+    ...calculatePosition(2, 0),
+    customText: 'Option 1',
+  },
+  {
+    type: FieldType.DROPDOWN,
+    fieldMeta: {
+      values: [{ value: 'Option 1' }, { value: 'Option 2' }, { value: 'Option 3' }],
+      type: 'dropdown',
+      readOnly: true,
+    },
+    page: 7,
+    ...calculatePosition(2, 1),
+    customText: 'Option 1',
+  },
+] as const;
+
+export const formatFieldMetaTestFields = FIELD_META_TEST_FIELDS.map((field, index) => {
+  return {
+    ...field,
+  };
+});

packages/app-tests/e2e/api/v2/envelopes-api.spec.ts

@@ -0,0 +1,264 @@
+import { expect, test } from '@playwright/test';
+import type { Team, User } from '@prisma/client';
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { incrementDocumentId } from '@documenso/lib/server-only/envelope/increment-id';
+import { createApiToken } from '@documenso/lib/server-only/public-api/create-api-token';
+import { prefixedId } from '@documenso/lib/universal/id';
+import { prisma } from '@documenso/prisma';
+import {
+  DocumentSource,
+  DocumentVisibility,
+  EnvelopeType,
+  RecipientRole,
+} from '@documenso/prisma/client';
+import { seedUser } from '@documenso/prisma/seed/users';
+import type { TCreateEnvelopeItemsRequest } from '@documenso/trpc/server/envelope-router/create-envelope-items.types';
+import type { TCreateEnvelopeRecipientsRequest } from '@documenso/trpc/server/envelope-router/envelope-recipients/create-envelope-recipients.types';
+import type { TGetEnvelopeResponse } from '@documenso/trpc/server/envelope-router/get-envelope.types';
+import type { TUpdateEnvelopeRequest } from '@documenso/trpc/server/envelope-router/update-envelope.types';
+
+import { formatAlignmentTestFields } from '../../../constants/field-alignment-pdf';
+import { FIELD_META_TEST_FIELDS } from '../../../constants/field-meta-pdf';
+
+const WEBAPP_BASE_URL = NEXT_PUBLIC_WEBAPP_URL();
+const baseUrl = `${WEBAPP_BASE_URL}/api/v2-beta`;
+
+test.describe.configure({
+  mode: 'parallel',
+});
+
+test.describe('API V2 Envelopes', () => {
+  let userA: User, teamA: Team, userB: User, teamB: Team, tokenA: string, tokenB: string;
+
+  test.beforeEach(async () => {
+    ({ user: userA, team: teamA } = await seedUser());
+    ({ token: tokenA } = await createApiToken({
+      userId: userA.id,
+      teamId: teamA.id,
+      tokenName: 'userA',
+      expiresIn: null,
+    }));
+
+    ({ user: userB, team: teamB } = await seedUser());
+    ({ token: tokenB } = await createApiToken({
+      userId: userB.id,
+      teamId: teamB.id,
+      tokenName: 'userB',
+      expiresIn: null,
+    }));
+  });
+
+  /**
+   * Creates envelopes with the two field test PDFs.
+   */
+  test('Envelope full test', async ({ request }) => {
+    // Step 1: Create initial envelope with Prisma (with first envelope item)
+    const alignmentPdf = fs
+      .readFileSync(path.join(__dirname, '../../../../../assets/field-font-alignment.pdf'))
+      .toString('base64');
+
+    const fieldMetaPdf = fs
+      .readFileSync(path.join(__dirname, '../../../../../assets/field-meta.pdf'))
+      .toString('base64');
+
+    const alignmentDocumentData = await prisma.documentData.create({
+      data: {
+        type: 'BYTES_64',
+        data: alignmentPdf,
+        initialData: alignmentPdf,
+      },
+    });
+
+    const documentId = await incrementDocumentId();
+    const documentMeta = await prisma.documentMeta.create({
+      data: {},
+    });
+
+    const createdEnvelope = await prisma.envelope.create({
+      data: {
+        id: prefixedId('envelope'),
+        secondaryId: documentId.formattedDocumentId,
+        internalVersion: 2,
+        type: EnvelopeType.DOCUMENT,
+        documentMetaId: documentMeta.id,
+        source: DocumentSource.DOCUMENT,
+        title: `Envelope Full Field Test`,
+        status: 'DRAFT',
+        userId: userA.id,
+        teamId: teamA.id,
+        envelopeItems: {
+          create: {
+            id: prefixedId('envelope_item'),
+            title: `Alignment Test`,
+            documentDataId: alignmentDocumentData.id,
+            order: 1,
+          },
+        },
+      },
+      include: {
+        envelopeItems: true,
+      },
+    });
+
+    // Step 2: Create second envelope item via API
+    const fieldMetaDocumentData = await prisma.documentData.create({
+      data: {
+        type: 'BYTES_64',
+        data: fieldMetaPdf,
+        initialData: fieldMetaPdf,
+      },
+    });
+
+    const createEnvelopeItemsRequest: TCreateEnvelopeItemsRequest = {
+      envelopeId: createdEnvelope.id,
+      data: [
+        {
+          title: 'Field Meta Test',
+          documentDataId: fieldMetaDocumentData.id,
+        },
+      ],
+    };
+
+    const createItemsRes = await request.post(`${baseUrl}/envelope/item/create-many`, {
+      headers: { Authorization: `Bearer ${tokenA}` },
+      data: createEnvelopeItemsRequest,
+    });
+
+    expect(createItemsRes.ok()).toBeTruthy();
+    expect(createItemsRes.status()).toBe(200);
+
+    // Step 3: Update envelope via API
+    const updateEnvelopeRequest: TUpdateEnvelopeRequest = {
+      envelopeId: createdEnvelope.id,
+      envelopeType: EnvelopeType.DOCUMENT,
+      data: {
+        title: 'Envelope Full Field Test',
+        visibility: DocumentVisibility.MANAGER_AND_ABOVE,
+      },
+    };
+
+    const updateRes = await request.post(`${baseUrl}/envelope/update`, {
+      headers: { Authorization: `Bearer ${tokenA}` },
+      data: updateEnvelopeRequest,
+    });
+
+    expect(updateRes.ok()).toBeTruthy();
+    expect(updateRes.status()).toBe(200);
+
+    // Step 4: Create recipient via API
+    const createRecipientsRequest: TCreateEnvelopeRecipientsRequest = {
+      envelopeId: createdEnvelope.id,
+      data: [
+        {
+          email: userA.email,
+          name: userA.name || '',
+          role: RecipientRole.SIGNER,
+          accessAuth: [],
+          actionAuth: [],
+        },
+      ],
+    };
+
+    const createRecipientsRes = await request.post(`${baseUrl}/envelope/recipient/create-many`, {
+      headers: { Authorization: `Bearer ${tokenA}` },
+      data: createRecipientsRequest,
+    });
+
+    expect(createRecipientsRes.ok()).toBeTruthy();
+    expect(createRecipientsRes.status()).toBe(200);
+
+    // Step 5: Get envelope to retrieve recipients and envelope items
+    const getRes = await request.get(`${baseUrl}/envelope/${createdEnvelope.id}`, {
+      headers: { Authorization: `Bearer ${tokenA}` },
+    });
+
+    expect(getRes.ok()).toBeTruthy();
+    expect(getRes.status()).toBe(200);
+
+    const envelopeResponse = (await getRes.json()) as TGetEnvelopeResponse;
+
+    const recipientId = envelopeResponse.recipients[0].id;
+    const alignmentItem = envelopeResponse.envelopeItems.find(
+      (item: { order: number }) => item.order === 1,
+    );
+    const fieldMetaItem = envelopeResponse.envelopeItems.find(
+      (item: { order: number }) => item.order === 2,
+    );
+
+    expect(recipientId).toBeDefined();
+    expect(alignmentItem).toBeDefined();
+    expect(fieldMetaItem).toBeDefined();
+
+    if (!alignmentItem || !fieldMetaItem) {
+      throw new Error('Envelope items not found');
+    }
+
+    // Step 6: Create fields for first PDF (alignment fields)
+    const alignmentFieldsRequest = {
+      envelopeId: createdEnvelope.id,
+      data: formatAlignmentTestFields.map((field) => ({
+        recipientId,
+        envelopeItemId: alignmentItem.id,
+        type: field.type,
+        page: field.page,
+        positionX: field.positionX,
+        positionY: field.positionY,
+        width: field.width,
+        height: field.height,
+        fieldMeta: field.fieldMeta,
+      })),
+    };
+
+    const createAlignmentFieldsRes = await request.post(`${baseUrl}/envelope/field/create-many`, {
+      headers: { Authorization: `Bearer ${tokenA}` },
+      data: alignmentFieldsRequest,
+    });
+
+    expect(createAlignmentFieldsRes.ok()).toBeTruthy();
+    expect(createAlignmentFieldsRes.status()).toBe(200);
+
+    // Step 7: Create fields for second PDF (field-meta fields)
+    const fieldMetaFieldsRequest = {
+      envelopeId: createdEnvelope.id,
+      data: FIELD_META_TEST_FIELDS.map((field) => ({
+        recipientId,
+        envelopeItemId: fieldMetaItem.id,
+        type: field.type,
+        page: field.page,
+        positionX: field.positionX,
+        positionY: field.positionY,
+        width: field.width,
+        height: field.height,
+        fieldMeta: field.fieldMeta,
+      })),
+    };
+
+    const createFieldMetaFieldsRes = await request.post(`${baseUrl}/envelope/field/create-many`, {
+      headers: { Authorization: `Bearer ${tokenA}` },
+      data: fieldMetaFieldsRequest,
+    });
+
+    expect(createFieldMetaFieldsRes.ok()).toBeTruthy();
+    expect(createFieldMetaFieldsRes.status()).toBe(200);
+
+    // Step 8: Verify final envelope structure
+    const finalGetRes = await request.get(`${baseUrl}/envelope/${createdEnvelope.id}`, {
+      headers: { Authorization: `Bearer ${tokenA}` },
+    });
+
+    expect(finalGetRes.ok()).toBeTruthy();
+    const finalEnvelope = (await finalGetRes.json()) as TGetEnvelopeResponse;
+
+    // Verify structure
+    expect(finalEnvelope.envelopeItems.length).toBe(2);
+    expect(finalEnvelope.recipients.length).toBe(1);
+    expect(finalEnvelope.fields.length).toBe(
+      formatAlignmentTestFields.length + FIELD_META_TEST_FIELDS.length,
+    );
+    expect(finalEnvelope.title).toBe('Envelope Full Field Test');
+    expect(finalEnvelope.type).toBe(EnvelopeType.DOCUMENT);
+  });
+});

packages/app-tests/e2e/envelopes/envelope-alignment.spec.ts

@@ -0,0 +1,282 @@
+// sort-imports-ignore
+
+// ---- PATCH pdfjs-dist's canvas require BEFORE importing it ----
+import Module from 'module';
+import { Canvas, Image } from 'skia-canvas';
+
+// Intercept require('canvas') and return skia-canvas equivalents
+const originalRequire = Module.prototype.require;
+Module.prototype.require = function (path: string) {
+  if (path === 'canvas') {
+    return {
+      createCanvas: (width: number, height: number) => new Canvas(width, height),
+      Image, // needed by pdfjs-dist
+    };
+  }
+  // eslint-disable-next-line prefer-rest-params, @typescript-eslint/consistent-type-assertions
+  return originalRequire.apply(this, arguments as unknown as [string]);
+};
+
+import pixelMatch from 'pixelmatch';
+import { PNG } from 'pngjs';
+import type { TestInfo } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+import { DocumentStatus } from '@prisma/client';
+import fs from 'node:fs';
+import path from 'node:path';
+import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf.js';
+
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { prisma } from '@documenso/prisma';
+import { seedAlignmentTestDocument } from '@documenso/prisma/seed/initial-seed';
+import { seedUser } from '@documenso/prisma/seed/users';
+
+import { apiSignin } from '../fixtures/authentication';
+
+test.describe.configure({ mode: 'parallel', timeout: 60000 });
+
+test('field placement visual regression', async ({ page }, testInfo) => {
+  const { user, team } = await seedUser();
+
+  const envelope = await seedAlignmentTestDocument({
+    userId: user.id,
+    teamId: team.id,
+    recipientName: user.name || '',
+    recipientEmail: user.email,
+    insertFields: true,
+    status: DocumentStatus.PENDING,
+  });
+
+  const token = envelope.recipients[0].token;
+
+  const signUrl = `/sign/${token}`;
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: signUrl,
+  });
+
+  await expect(page.getByRole('heading', { name: 'Sign Document' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'Complete' }).click();
+  await page.getByRole('button', { name: 'Sign' }).click();
+  await page.waitForURL(`${signUrl}/complete`);
+
+  await expect(async () => {
+    const { status } = await prisma.envelope.findFirstOrThrow({
+      where: {
+        id: envelope.id,
+      },
+    });
+
+    expect(status).toBe(DocumentStatus.COMPLETED);
+  }).toPass({
+    timeout: 10000,
+  });
+
+  const completedDocument = await prisma.envelope.findFirstOrThrow({
+    where: {
+      id: envelope.id,
+    },
+    include: {
+      envelopeItems: {
+        orderBy: {
+          order: 'asc',
+        },
+        include: {
+          documentData: true,
+        },
+      },
+    },
+  });
+
+  const storedImages = fs.readdirSync(path.join(__dirname, '../../visual-regression'));
+
+  await Promise.all(
+    completedDocument.envelopeItems.map(async (item) => {
+      const pdfData = await getFile(item.documentData);
+
+      const loadedImages = storedImages
+        .filter((image) => image.includes(item.title))
+        .map((image) => fs.readFileSync(path.join(__dirname, '../../visual-regression', image)));
+
+      await compareSignedPdfWithImages({
+        id: item.title.replaceAll(' ', '-').toLowerCase(),
+        pdfData,
+        images: loadedImages,
+        testInfo,
+      });
+    }),
+  );
+});
+
+/**
+ * Used to download the envelope images when updating the visual regression test.
+ *
+ * DON'T COMMIT THIS WITHOUT THE "SKIP" COMMAND.
+ */
+test.skip('download envelope images', async ({ page }) => {
+  const { user, team } = await seedUser();
+
+  const envelope = await seedAlignmentTestDocument({
+    userId: user.id,
+    teamId: team.id,
+    recipientName: user.name || '',
+    recipientEmail: user.email,
+    insertFields: true,
+    status: DocumentStatus.PENDING,
+  });
+
+  const token = envelope.recipients[0].token;
+
+  const signUrl = `/sign/${token}`;
+
+  await apiSignin({
+    page,
+    email: user.email,
+    redirectPath: signUrl,
+  });
+
+  await expect(page.getByRole('heading', { name: 'Sign Document' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'Complete' }).click();
+  await page.getByRole('button', { name: 'Sign' }).click();
+  await page.waitForURL(`${signUrl}/complete`);
+
+  await expect(async () => {
+    const { status } = await prisma.envelope.findFirstOrThrow({
+      where: {
+        id: envelope.id,
+      },
+    });
+
+    expect(status).toBe(DocumentStatus.COMPLETED);
+  }).toPass({
+    timeout: 10000,
+  });
+
+  const completedDocument = await prisma.envelope.findFirstOrThrow({
+    where: {
+      id: envelope.id,
+    },
+    include: {
+      envelopeItems: {
+        orderBy: {
+          order: 'asc',
+        },
+        include: {
+          documentData: true,
+        },
+      },
+    },
+  });
+
+  await Promise.all(
+    completedDocument.envelopeItems.map(async (item) => {
+      const pdfData = await getFile(item.documentData);
+
+      const pdfImages = await renderPdfToImage(pdfData);
+
+      for (const [index, { image }] of pdfImages.entries()) {
+        fs.writeFileSync(
+          path.join(__dirname, '../../visual-regression', `${item.title}-${index}.png`),
+          new Uint8Array(image),
+        );
+      }
+    }),
+  );
+});
+
+async function renderPdfToImage(pdfBytes: Uint8Array) {
+  const loadingTask = pdfjsLib.getDocument({ data: pdfBytes });
+  const pdf = await loadingTask.promise;
+
+  // Increase for higher resolution
+  const scale = 4;
+
+  return await Promise.all(
+    Array.from({ length: pdf.numPages }, async (_, index) => {
+      const page = await pdf.getPage(index + 1);
+
+      const viewport = page.getViewport({ scale });
+
+      const virtualCanvas = new Canvas(viewport.width, viewport.height);
+      const context = virtualCanvas.getContext('2d');
+      context.imageSmoothingEnabled = false;
+
+      // @ts-expect-error skia-canvas context satisfies runtime requirements for pdfjs
+      await page.render({ canvasContext: context, viewport }).promise;
+
+      return {
+        image: await virtualCanvas.toBuffer('png'),
+
+        // Rounded down because the certificate page somehow gives dimensions with decimals
+        width: Math.floor(viewport.width),
+        height: Math.floor(viewport.height),
+      };
+    }),
+  );
+}
+
+type CompareSignedPdfWithImagesOptions = {
+  id: string;
+  pdfData: Uint8Array;
+  images: Buffer[];
+  testInfo: TestInfo;
+};
+
+const compareSignedPdfWithImages = async ({
+  id,
+  pdfData,
+  images,
+  testInfo,
+}: CompareSignedPdfWithImagesOptions) => {
+  const renderedImages = await renderPdfToImage(pdfData);
+
+  const blankCertificateFile = fs.readFileSync(
+    path.join(__dirname, '../../visual-regression/blank-certificate.png'),
+  );
+  const blankCertificateImage = PNG.sync.read(blankCertificateFile).data;
+
+  for (const [index, { image, width, height }] of renderedImages.entries()) {
+    const isCertificate = index === renderedImages.length - 1;
+
+    const diff = new PNG({ width, height });
+
+    const storedImage = PNG.sync.read(images[index]).data;
+
+    const newImage = PNG.sync.read(image).data;
+
+    const oldImage = isCertificate ? blankCertificateImage : storedImage;
+
+    const comparison = pixelMatch(
+      new Uint8Array(oldImage),
+      new Uint8Array(newImage),
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      diff.data as unknown as Uint8Array,
+      width,
+      height,
+      {
+        threshold: 0.25,
+        // includeAA: true, // This allows stricter testing.
+      },
+    );
+    console.log(`${id}-${index}: ${comparison}`);
+
+    const diffFilePath = path.join(testInfo.outputPath(), `${id}-${index}-diff.png`);
+    const oldFilePath = path.join(testInfo.outputPath(), `${id}-${index}-old.png`);
+    const newFilePath = path.join(testInfo.outputPath(), `${id}-${index}-new.png`);
+
+    fs.writeFileSync(diffFilePath, new Uint8Array(PNG.sync.write(diff)));
+    fs.writeFileSync(oldFilePath, new Uint8Array(images[index]));
+    fs.writeFileSync(newFilePath, new Uint8Array(image));
+
+    if (isCertificate) {
+      // Expect the certificate to NOT be blank. Since the storedImage is blank.
+      expect.soft(comparison).toBeGreaterThan(20000);
+    } else {
+      expect.soft(comparison).toEqual(0);
+    }
+  }
+};

packages/app-tests/package.json

@@ -15,7 +15,10 @@
     "@documenso/lib": "*",
     "@documenso/prisma": "*",
     "@playwright/test": "1.52.0",
-    "@types/node": "^20"
+    "@types/node": "^20",
+    "@types/pngjs": "^6.0.5",
+    "pixelmatch": "^7.1.0",
+    "pngjs": "^7.0.0"
   },
   "dependencies": {
     "start-server-and-test": "^2.0.12"

packages/lib/client-only/hooks/use-editor-fields.ts

@@ -50,6 +50,7 @@ type UseEditorFieldsResponse = {
 
   // Field operations
   addField: (field: Omit<TLocalField, 'formId'>) => TLocalField;
+  setFieldId: (formId: string, id: number) => void;
   removeFieldsByFormId: (formIds: string[]) => void;
   updateFieldByFormId: (formId: string, updates: Partial<TLocalField>) => void;
   duplicateField: (field: TLocalField, recipientId?: number) => TLocalField;
@@ -160,6 +161,17 @@ export const useEditorFields = ({
     [localFields, remove, triggerFieldsUpdate],
   );
 
+  const setFieldId = (formId: string, id: number) => {
+    const index = localFields.findIndex((field) => field.formId === formId);
+
+    if (index !== -1) {
+      update(index, {
+        ...localFields[index],
+        id,
+      });
+    }
+  };
+
   const updateFieldByFormId = useCallback(
     (formId: string, updates: Partial<TLocalField>) => {
       const index = localFields.findIndex((field) => field.formId === formId);
@@ -269,6 +281,7 @@ export const useEditorFields = ({
 
     // Field operations
     addField,
+    setFieldId,
     removeFieldsByFormId,
     updateFieldByFormId,
     duplicateField,

packages/lib/client-only/providers/envelope-editor-provider.tsx

@@ -97,6 +97,11 @@ export const EnvelopeEditorProvider = ({
   const [envelope, setEnvelope] = useState(initialEnvelope);
   const [autosaveError, setAutosaveError] = useState<boolean>(false);
 
+  const editorFields = useEditorFields({
+    envelope,
+    handleFieldsUpdate: (fields) => setFieldsDebounced(fields),
+  });
+
   const envelopeUpdateMutationQuery = trpc.envelope.update.useMutation({
     onSuccess: (response, input) => {
       setEnvelope({
@@ -184,13 +189,24 @@ export const EnvelopeEditorProvider = ({
     triggerSave: setFieldsDebounced,
     flush: setFieldsAsync,
     isPending: isFieldsMutationPending,
-  } = useEnvelopeAutosave(async (fields: TLocalField[]) => {
+  } = useEnvelopeAutosave(async (localFields: TLocalField[]) => {
-    await envelopeFieldSetMutationQuery.mutateAsync({
+    const envelopeFields = await envelopeFieldSetMutationQuery.mutateAsync({
       envelopeId: envelope.id,
       envelopeType: envelope.type,
-      fields,
+      fields: localFields,
     });
-  }, 1000);
+
+    // Insert the IDs into the local fields.
+    envelopeFields.fields.forEach((field) => {
+      const localField = localFields.find((localField) => localField.formId === field.formId);
+
+      if (localField && !localField.id) {
+        localField.id = field.id;
+
+        editorFields.setFieldId(localField.formId, field.id);
+      }
+    });
+  }, 2000);
 
   const {
     triggerSave: setEnvelopeDebounced,
@@ -199,7 +215,6 @@ export const EnvelopeEditorProvider = ({
   } = useEnvelopeAutosave(async (envelopeUpdates: UpdateEnvelopePayload) => {
     await envelopeUpdateMutationQuery.mutateAsync({
       envelopeId: envelope.id,
-      envelopeType: envelope.type,
       data: envelopeUpdates.data,
       meta: envelopeUpdates.meta,
     });
@@ -221,11 +236,6 @@ export const EnvelopeEditorProvider = ({
     setEnvelopeDebounced(envelopeUpdates);
   };
 
-  const editorFields = useEditorFields({
-    envelope,
-    handleFieldsUpdate: (fields) => setFieldsDebounced(fields),
-  });
-
   const getRecipientColorKey = useCallback(
     (recipientId: number) => {
       const recipientIndex = envelope.recipients.findIndex(

packages/lib/client-only/providers/envelope-render-provider.tsx

@@ -3,6 +3,9 @@ import React from 'react';
 
 import type { DocumentData } from '@prisma/client';
 
+import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
+import { AVAILABLE_RECIPIENT_COLORS } from '@documenso/ui/lib/recipient-colors';
+
 import type { TEnvelope } from '../../types/envelope';
 import { getFile } from '../../universal/upload/get-file';
 
@@ -23,6 +26,7 @@ type EnvelopeRenderProviderValue = {
   currentEnvelopeItem: EnvelopeRenderItem | null;
   setCurrentEnvelopeItem: (envelopeItemId: string) => void;
   fields: TEnvelope['fields'];
+  getRecipientColorKey: (recipientId: number) => TRecipientColor;
 };
 
 interface EnvelopeRenderProviderProps {
@@ -35,6 +39,13 @@ interface EnvelopeRenderProviderProps {
    * Only pass if the CustomRenderer you are passing in wants fields.
    */
   fields?: TEnvelope['fields'];
+
+  /**
+   * Optional recipient IDs used to determine the color of the fields.
+   *
+   * Only required for generic page renderers.
+   */
+  recipientIds?: number[];
 }
 
 const EnvelopeRenderContext = createContext<EnvelopeRenderProviderValue | null>(null);
@@ -56,6 +67,7 @@ export const EnvelopeRenderProvider = ({
   children,
   envelope,
   fields,
+  recipientIds = [],
 }: EnvelopeRenderProviderProps) => {
   // Indexed by documentDataId.
   const [files, setFiles] = useState<Record<string, FileData>>({});
@@ -132,6 +144,17 @@ export const EnvelopeRenderProvider = ({
     }
   }, [envelope.envelopeItems]);
 
+  const getRecipientColorKey = useCallback(
+    (recipientId: number) => {
+      const recipientIndex = recipientIds.findIndex((id) => id === recipientId);
+
+      return AVAILABLE_RECIPIENT_COLORS[
+        Math.max(recipientIndex, 0) % AVAILABLE_RECIPIENT_COLORS.length
+      ];
+    },
+    [recipientIds],
+  );
+
   return (
     <EnvelopeRenderContext.Provider
       value={{
@@ -140,6 +163,7 @@ export const EnvelopeRenderProvider = ({
         currentEnvelopeItem: currentItem,
         setCurrentEnvelopeItem,
         fields: fields ?? [],
+        getRecipientColorKey,
       }}
     >
       {children}

packages/lib/constants/app.ts

@@ -14,3 +14,5 @@ export const IS_BILLING_ENABLED = () => env('NEXT_PUBLIC_FEATURE_BILLING_ENABLED
 export const API_V2_BETA_URL = '/api/v2-beta';
 
 export const SUPPORT_EMAIL = env('NEXT_PUBLIC_SUPPORT_EMAIL') ?? 'support@documenso.com';
+
+export const IS_ENVELOPES_ENABLED = env('NEXT_PUBLIC_FEATURE_ENVELOPES_ENABLED') === 'true';

packages/lib/jobs/definitions/internal/seal-document.handler.ts

@@ -189,7 +189,6 @@ export const run = async ({
     settings,
   });
 
-  // Todo: Envelopes - Is it okay to have dynamic IDs?
   const newDocumentData = await Promise.all(
     envelopeItems.map(async (envelopeItem) =>
       io.runTask(`decorate-and-sign-envelope-item-${envelopeItem.id}`, async () => {

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

@@ -20,7 +20,12 @@ import { validateCheckboxLength } from '../../advanced-fields-validation/validat
 import { AppError, AppErrorCode } from '../../errors/app-error';
 import { jobs } from '../../jobs/client';
 import { extractDerivedDocumentEmailSettings } from '../../types/document-email';
-import { ZCheckboxFieldMeta, ZDropdownFieldMeta, ZRadioFieldMeta } from '../../types/field-meta';
+import {
+  ZCheckboxFieldMeta,
+  ZDropdownFieldMeta,
+  ZFieldAndMetaSchema,
+  ZRadioFieldMeta,
+} from '../../types/field-meta';
 import {
   ZWebhookDocumentSchema,
   mapEnvelopeToWebhookDocumentPayload,
@@ -174,9 +179,20 @@ export const sendDocument = async ({
 
   const fieldsToAutoInsert: { fieldId: number; customText: string }[] = [];
 
-  // Auto insert radio and checkboxes that have default values.
+  // Validate and autoinsert fields for V2 envelopes.
   if (envelope.internalVersion === 2) {
-    for (const field of envelope.fields) {
+    for (const unknownField of envelope.fields) {
+      const parsedField = ZFieldAndMetaSchema.safeParse(unknownField);
+
+      if (parsedField.error) {
+        throw new AppError(AppErrorCode.INVALID_REQUEST, {
+          message: 'One or more fields have invalid metadata. Error: ' + parsedField.error.message,
+        });
+      }
+
+      const field = parsedField.data;
+      const fieldId = unknownField.id;
+
       if (field.type === FieldType.RADIO) {
         const { values = [] } = ZRadioFieldMeta.parse(field.fieldMeta);
 
@@ -184,7 +200,7 @@ export const sendDocument = async ({
 
         if (checkedItemIndex !== -1) {
           fieldsToAutoInsert.push({
-            fieldId: field.id,
+            fieldId,
             customText: toRadioCustomText(checkedItemIndex),
           });
         }
@@ -195,7 +211,7 @@ export const sendDocument = async ({
 
         if (defaultValue && values.some((value) => value.value === defaultValue)) {
           fieldsToAutoInsert.push({
-            fieldId: field.id,
+            fieldId,
             customText: defaultValue,
           });
         }
@@ -236,7 +252,7 @@ export const sendDocument = async ({
 
         if (isValid) {
           fieldsToAutoInsert.push({
-            fieldId: field.id,
+            fieldId,
             customText: toCheckboxCustomText(checkedIndices),
           });
         }
@@ -256,11 +272,10 @@ export const sendDocument = async ({
       });
     }
 
-    // Todo: Envelopes - [AUDIT_LOGS]
     if (envelope.internalVersion === 2) {
-      await Promise.all(
+      const autoInsertedFields = await Promise.all(
         fieldsToAutoInsert.map(async (field) => {
-          await tx.field.update({
+          return await tx.field.update({
             where: {
               id: field.fieldId,
             },
@@ -271,6 +286,21 @@ export const sendDocument = async ({
           });
         }),
       );
+
+      await tx.documentAuditLog.create({
+        data: createDocumentAuditLogData({
+          type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELDS_AUTO_INSERTED,
+          envelopeId: envelope.id,
+          data: {
+            fields: autoInsertedFields.map((field) => ({
+              fieldId: field.id,
+              fieldType: field.type,
+              recipientId: field.recipientId,
+            })),
+          },
+          // Don't put metadata or user here since it's a system event.
+        }),
+      });
     }
 
     return await tx.envelope.update({

packages/lib/server-only/field/create-envelope-fields.ts

@@ -26,9 +26,9 @@ export interface CreateEnvelopeFieldsOptions {
     envelopeItemId?: string;
 
     recipientId: number;
-    pageNumber: number;
+    page: number;
-    pageX: number;
+    positionX: number;
-    pageY: number;
+    positionY: number;
     width: number;
     height: number;
   })[];
@@ -122,9 +122,9 @@ export const createEnvelopeFields = async ({
     const newlyCreatedFields = await tx.field.createManyAndReturn({
       data: validatedFields.map((field) => ({
         type: field.type,
-        page: field.pageNumber,
+        page: field.page,
-        positionX: field.pageX,
+        positionX: field.positionX,
-        positionY: field.pageY,
+        positionY: field.positionY,
         width: field.width,
         height: field.height,
         customText: '',

packages/lib/server-only/field/get-field-by-id.ts

@@ -11,7 +11,7 @@ export type GetFieldByIdOptions = {
   userId: number;
   teamId: number;
   fieldId: number;
-  envelopeType: EnvelopeType;
+  envelopeType?: EnvelopeType;
 };
 
 export const getFieldById = async ({
@@ -41,7 +41,7 @@ export const getFieldById = async ({
       type: 'envelopeId',
       id: field.envelopeId,
     },
-    type: envelopeType,
+    type: envelopeType ?? null,
     userId,
     teamId,
   });

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

@@ -158,7 +158,7 @@ export const setFieldsForDocument = async ({
           const numberFieldParsedMeta = ZNumberFieldMeta.parse(field.fieldMeta);
 
           const errors = validateNumberField(
-            String(numberFieldParsedMeta.value),
+            String(numberFieldParsedMeta.value || ''),
             numberFieldParsedMeta,
             false,
           );
@@ -306,7 +306,10 @@ export const setFieldsForDocument = async ({
           });
         }
 
-        return upsertedField;
+        return {
+          ...upsertedField,
+          formId: field.formId,
+        };
       }),
     );
   });
@@ -340,17 +343,25 @@ export const setFieldsForDocument = async ({
   }
 
   // Filter out fields that have been removed or have been updated.
-  const filteredFields = existingFields.filter((field) => {
+  const mappedFilteredFields = existingFields
-    const isRemoved = removedFields.find((removedField) => removedField.id === field.id);
+    .filter((field) => {
-    const isUpdated = persistedFields.find((persistedField) => persistedField.id === field.id);
+      const isRemoved = removedFields.find((removedField) => removedField.id === field.id);
+      const isUpdated = persistedFields.find((persistedField) => persistedField.id === field.id);
 
-    return !isRemoved && !isUpdated;
+      return !isRemoved && !isUpdated;
-  });
+    })
+    .map((field) => ({
+      ...mapFieldToLegacyField(field, envelope),
+      formId: undefined,
+    }));
+
+  const mappedPersistentFields = persistedFields.map((field) => ({
+    ...mapFieldToLegacyField(field, envelope),
+    formId: field?.formId,
+  }));
 
   return {
-    fields: [...filteredFields, ...persistedFields].map((field) =>
+    fields: [...mappedFilteredFields, ...mappedPersistentFields],
-      mapFieldToLegacyField(field, envelope),
-    ),
   };
 };
 
@@ -359,6 +370,7 @@ export const setFieldsForDocument = async ({
  */
 type FieldData = {
   id?: number | null;
+  formId?: string;
   envelopeItemId: string;
   type: FieldType;
   recipientId: number;

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

@@ -27,6 +27,7 @@ export type SetFieldsForTemplateOptions = {
   id: EnvelopeIdOptions;
   fields: {
     id?: number | null;
+    formId?: string;
     envelopeItemId: string;
     type: FieldType;
     recipientId: number;
@@ -111,10 +112,10 @@ export const setFieldsForTemplate = async ({
     };
   });
 
-  const persistedFields = await prisma.$transaction(
+  const persistedFields = await Promise.all(
     // Disabling as wrapping promises here causes type issues
     // eslint-disable-next-line @typescript-eslint/promise-function-async
-    linkedFields.map((field) => {
+    linkedFields.map(async (field) => {
       const parsedFieldMeta = field.fieldMeta ? ZFieldMetaSchema.parse(field.fieldMeta) : undefined;
 
       if (field.type === FieldType.TEXT && field.fieldMeta) {
@@ -176,7 +177,7 @@ export const setFieldsForTemplate = async ({
       }
 
       // Proceed with upsert operation
-      return prisma.field.upsert({
+      const upsertedField = await prisma.field.upsert({
         where: {
           id: field._persisted?.id ?? -1,
           envelopeId: envelope.id,
@@ -219,6 +220,11 @@ export const setFieldsForTemplate = async ({
           },
         },
       });
+
+      return {
+        ...upsertedField,
+        formId: field.formId,
+      };
     }),
   );
 
@@ -240,9 +246,17 @@ export const setFieldsForTemplate = async ({
     return !isRemoved && !isUpdated;
   });
 
+  const mappedFilteredFields = filteredFields.map((field) => ({
+    ...mapFieldToLegacyField(field, envelope),
+    formId: undefined,
+  }));
+
+  const mappedPersistentFields = persistedFields.map((field) => ({
+    ...mapFieldToLegacyField(field, envelope),
+    formId: field?.formId,
+  }));
+
   return {
-    fields: [...filteredFields, ...persistedFields].map((field) =>
+    fields: [...mappedFilteredFields, ...mappedPersistentFields],
-      mapFieldToLegacyField(field, envelope),
-    ),
   };
 };

packages/lib/server-only/field/update-envelope-fields.ts

@@ -10,18 +10,21 @@ import {
 import { prisma } from '@documenso/prisma';
 
 import { AppError, AppErrorCode } from '../../errors/app-error';
+import { type EnvelopeIdOptions } from '../../utils/envelope';
 import { mapFieldToLegacyField } from '../../utils/fields';
 import { canRecipientFieldsBeModified } from '../../utils/recipients';
 import { getEnvelopeWhereInput } from '../envelope/get-envelope-by-id';
 
-export interface UpdateDocumentFieldsOptions {
+export interface UpdateEnvelopeFieldsOptions {
   userId: number;
   teamId: number;
-  documentId: number;
+  id: EnvelopeIdOptions;
+  type?: EnvelopeType | null; // Only used to enforce the type.
   fields: {
     id: number;
     type?: FieldType;
     pageNumber?: number;
+    envelopeItemId?: string;
     pageX?: number;
     pageY?: number;
     width?: number;
@@ -31,19 +34,17 @@ export interface UpdateDocumentFieldsOptions {
   requestMetadata: ApiRequestMetadata;
 }
 
-export const updateDocumentFields = async ({
+export const updateEnvelopeFields = async ({
   userId,
   teamId,
-  documentId,
+  id,
+  type = null,
   fields,
   requestMetadata,
-}: UpdateDocumentFieldsOptions) => {
+}: UpdateEnvelopeFieldsOptions) => {
   const { envelopeWhereInput } = await getEnvelopeWhereInput({
-    id: {
+    id,
-      type: 'documentId',
+    type,
-      id: documentId,
-    },
-    type: EnvelopeType.DOCUMENT,
     userId,
     teamId,
   });
@@ -53,18 +54,19 @@ export const updateDocumentFields = async ({
     include: {
       recipients: true,
       fields: true,
+      envelopeItems: true,
     },
   });
 
   if (!envelope) {
     throw new AppError(AppErrorCode.NOT_FOUND, {
-      message: 'Document not found',
+      message: 'Envelope not found',
     });
   }
 
   if (envelope.completedAt) {
     throw new AppError(AppErrorCode.INVALID_REQUEST, {
-      message: 'Document already complete',
+      message: 'Envelope already complete',
     });
   }
 
@@ -96,6 +98,29 @@ export const updateDocumentFields = async ({
       });
     }
 
+    const fieldType = field.type || originalField.type;
+    const fieldMetaType = field.fieldMeta?.type || originalField.fieldMeta?.type;
+
+    // Not going to mess with V1 envelopes.
+    if (
+      envelope.internalVersion === 2 &&
+      fieldMetaType &&
+      fieldMetaType.toLowerCase() !== fieldType.toLowerCase()
+    ) {
+      throw new AppError(AppErrorCode.INVALID_REQUEST, {
+        message: 'Field meta type does not match the field type',
+      });
+    }
+
+    if (
+      field.envelopeItemId &&
+      !envelope.envelopeItems.some((item) => item.id === field.envelopeItemId)
+    ) {
+      throw new AppError(AppErrorCode.INVALID_REQUEST, {
+        message: 'Envelope item not found',
+      });
+    }
+
     return {
       originalField,
       updateData: field,
@@ -118,27 +143,30 @@ export const updateDocumentFields = async ({
             width: updateData.width,
             height: updateData.height,
             fieldMeta: updateData.fieldMeta,
+            envelopeItemId: updateData.envelopeItemId,
           },
         });
 
-        const changes = diffFieldChanges(originalField, updatedField);
-
         // Handle field updated audit log.
-        if (changes.length > 0) {
+        if (envelope.type === EnvelopeType.DOCUMENT) {
-          await tx.documentAuditLog.create({
+          const changes = diffFieldChanges(originalField, updatedField);
-            data: createDocumentAuditLogData({
+
-              type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_UPDATED,
+          if (changes.length > 0) {
-              envelopeId: envelope.id,
+            await tx.documentAuditLog.create({
-              metadata: requestMetadata,
+              data: createDocumentAuditLogData({
-              data: {
+                type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_UPDATED,
-                fieldId: updatedField.secondaryId,
+                envelopeId: envelope.id,
-                fieldRecipientEmail: recipientEmail,
+                metadata: requestMetadata,
-                fieldRecipientId: updatedField.recipientId,
+                data: {
-                fieldType: updatedField.type,
+                  fieldId: updatedField.secondaryId,
-                changes,
+                  fieldRecipientEmail: recipientEmail,
-              },
+                  fieldRecipientId: updatedField.recipientId,
-            }),
+                  fieldType: updatedField.type,
-          });
+                  changes,
+                },
+              }),
+            });
+          }
         }
 
         return updatedField;

packages/lib/server-only/field/update-template-fields.ts

@@ -1,116 +0,0 @@
-import { EnvelopeType, type FieldType } from '@prisma/client';
-
-import type { TFieldMetaSchema } from '@documenso/lib/types/field-meta';
-import { prisma } from '@documenso/prisma';
-
-import { AppError, AppErrorCode } from '../../errors/app-error';
-import { mapFieldToLegacyField } from '../../utils/fields';
-import { canRecipientFieldsBeModified } from '../../utils/recipients';
-import { getEnvelopeWhereInput } from '../envelope/get-envelope-by-id';
-
-export interface UpdateTemplateFieldsOptions {
-  userId: number;
-  teamId: number;
-  templateId: number;
-  fields: {
-    id: number;
-    type?: FieldType;
-    pageNumber?: number;
-    pageX?: number;
-    pageY?: number;
-    width?: number;
-    height?: number;
-    fieldMeta?: TFieldMetaSchema;
-  }[];
-}
-
-export const updateTemplateFields = async ({
-  userId,
-  teamId,
-  templateId,
-  fields,
-}: UpdateTemplateFieldsOptions) => {
-  const { envelopeWhereInput } = await getEnvelopeWhereInput({
-    id: {
-      type: 'templateId',
-      id: templateId,
-    },
-    type: EnvelopeType.TEMPLATE,
-    userId,
-    teamId,
-  });
-
-  const envelope = await prisma.envelope.findFirst({
-    where: envelopeWhereInput,
-    include: {
-      recipients: true,
-      fields: true,
-    },
-  });
-
-  if (!envelope) {
-    throw new AppError(AppErrorCode.NOT_FOUND, {
-      message: 'Document not found',
-    });
-  }
-
-  const fieldsToUpdate = fields.map((field) => {
-    const originalField = envelope.fields.find((existingField) => existingField.id === field.id);
-
-    if (!originalField) {
-      throw new AppError(AppErrorCode.NOT_FOUND, {
-        message: `Field with id ${field.id} not found`,
-      });
-    }
-
-    const recipient = envelope.recipients.find(
-      (recipient) => recipient.id === originalField.recipientId,
-    );
-
-    // Each field MUST have a recipient associated with it.
-    if (!recipient) {
-      throw new AppError(AppErrorCode.INVALID_REQUEST, {
-        message: `Recipient attached to field ${field.id} not found`,
-      });
-    }
-
-    // Check whether the recipient associated with the field can be modified.
-    if (!canRecipientFieldsBeModified(recipient, envelope.fields)) {
-      throw new AppError(AppErrorCode.INVALID_REQUEST, {
-        message:
-          'Cannot modify a field where the recipient has already interacted with the document',
-      });
-    }
-
-    return {
-      updateData: field,
-    };
-  });
-
-  const updatedFields = await prisma.$transaction(async (tx) => {
-    return await Promise.all(
-      fieldsToUpdate.map(async ({ updateData }) => {
-        const updatedField = await tx.field.update({
-          where: {
-            id: updateData.id,
-          },
-          data: {
-            type: updateData.type,
-            page: updateData.pageNumber,
-            positionX: updateData.pageX,
-            positionY: updateData.pageY,
-            width: updateData.width,
-            height: updateData.height,
-            fieldMeta: updateData.fieldMeta,
-          },
-        });
-
-        return updatedField;
-      }),
-    );
-  });
-
-  return {
-    fields: updatedFields.map((field) => mapFieldToLegacyField(field, envelope)),
-  };
-};

packages/lib/server-only/recipient/create-envelope-recipients.ts

@@ -15,7 +15,7 @@ import type { EnvelopeIdOptions } from '../../utils/envelope';
 import { mapRecipientToLegacyRecipient } from '../../utils/recipients';
 import { getEnvelopeWhereInput } from '../envelope/get-envelope-by-id';
 
-export interface CreateDocumentRecipientsOptions {
+export interface CreateEnvelopeRecipientsOptions {
   userId: number;
   teamId: number;
   id: EnvelopeIdOptions;
@@ -30,16 +30,16 @@ export interface CreateDocumentRecipientsOptions {
   requestMetadata: ApiRequestMetadata;
 }
 
-export const createDocumentRecipients = async ({
+export const createEnvelopeRecipients = async ({
   userId,
   teamId,
   id,
   recipients: recipientsToCreate,
   requestMetadata,
-}: CreateDocumentRecipientsOptions) => {
+}: CreateEnvelopeRecipientsOptions) => {
   const { envelopeWhereInput } = await getEnvelopeWhereInput({
     id,
-    type: EnvelopeType.DOCUMENT,
+    type: null,
     userId,
     teamId,
   });
@@ -62,13 +62,13 @@ export const createDocumentRecipients = async ({
 
   if (!envelope) {
     throw new AppError(AppErrorCode.NOT_FOUND, {
-      message: 'Document not found',
+      message: 'Envelope not found',
     });
   }
 
   if (envelope.completedAt) {
     throw new AppError(AppErrorCode.INVALID_REQUEST, {
-      message: 'Document already complete',
+      message: 'Envelope already complete',
     });
   }
 
@@ -112,21 +112,23 @@ export const createDocumentRecipients = async ({
         });
 
         // Handle recipient created audit log.
-        await tx.documentAuditLog.create({
+        if (envelope.type === EnvelopeType.DOCUMENT) {
-          data: createDocumentAuditLogData({
+          await tx.documentAuditLog.create({
-            type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_CREATED,
+            data: createDocumentAuditLogData({
-            envelopeId: envelope.id,
+              type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_CREATED,
-            metadata: requestMetadata,
+              envelopeId: envelope.id,
-            data: {
+              metadata: requestMetadata,
-              recipientEmail: createdRecipient.email,
+              data: {
-              recipientName: createdRecipient.name,
+                recipientEmail: createdRecipient.email,
-              recipientId: createdRecipient.id,
+                recipientName: createdRecipient.name,
-              recipientRole: createdRecipient.role,
+                recipientId: createdRecipient.id,
-              accessAuth: recipient.accessAuth ?? [],
+                recipientRole: createdRecipient.role,
-              actionAuth: recipient.actionAuth ?? [],
+                accessAuth: recipient.accessAuth ?? [],
-            },
+                actionAuth: recipient.actionAuth ?? [],
-          }),
+              },
-        });
+            }),
+          });
+        }
 
         return createdRecipient;
       }),

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

@@ -1,115 +0,0 @@
-import { EnvelopeType, RecipientRole } from '@prisma/client';
-import { SendStatus, SigningStatus } from '@prisma/client';
-
-import type { TRecipientAccessAuthTypes } from '@documenso/lib/types/document-auth';
-import { type TRecipientActionAuthTypes } from '@documenso/lib/types/document-auth';
-import { nanoid } from '@documenso/lib/universal/id';
-import { createRecipientAuthOptions } from '@documenso/lib/utils/document-auth';
-import { prisma } from '@documenso/prisma';
-
-import { AppError, AppErrorCode } from '../../errors/app-error';
-import { mapRecipientToLegacyRecipient } from '../../utils/recipients';
-import { getEnvelopeWhereInput } from '../envelope/get-envelope-by-id';
-
-export interface CreateTemplateRecipientsOptions {
-  userId: number;
-  teamId: number;
-  templateId: number;
-  recipients: {
-    email: string;
-    name: string;
-    role: RecipientRole;
-    signingOrder?: number | null;
-    accessAuth?: TRecipientAccessAuthTypes[];
-    actionAuth?: TRecipientActionAuthTypes[];
-  }[];
-}
-
-export const createTemplateRecipients = async ({
-  userId,
-  teamId,
-  templateId,
-  recipients: recipientsToCreate,
-}: CreateTemplateRecipientsOptions) => {
-  const { envelopeWhereInput } = await getEnvelopeWhereInput({
-    id: {
-      type: 'templateId',
-      id: templateId,
-    },
-    type: EnvelopeType.TEMPLATE,
-    userId,
-    teamId,
-  });
-
-  const template = await prisma.envelope.findFirst({
-    where: envelopeWhereInput,
-    include: {
-      recipients: true,
-      team: {
-        select: {
-          organisation: {
-            select: {
-              organisationClaim: true,
-            },
-          },
-        },
-      },
-    },
-  });
-
-  if (!template) {
-    throw new AppError(AppErrorCode.NOT_FOUND, {
-      message: 'Template not found',
-    });
-  }
-
-  const recipientsHaveActionAuth = recipientsToCreate.some(
-    (recipient) => recipient.actionAuth && recipient.actionAuth.length > 0,
-  );
-
-  // Check if user has permission to set the global action auth.
-  if (recipientsHaveActionAuth && !template.team.organisation.organisationClaim.flags.cfr21) {
-    throw new AppError(AppErrorCode.UNAUTHORIZED, {
-      message: 'You do not have permission to set the action auth',
-    });
-  }
-
-  const normalizedRecipients = recipientsToCreate.map((recipient) => ({
-    ...recipient,
-    email: recipient.email.toLowerCase(),
-  }));
-
-  const createdRecipients = await prisma.$transaction(async (tx) => {
-    return await Promise.all(
-      normalizedRecipients.map(async (recipient) => {
-        const authOptions = createRecipientAuthOptions({
-          accessAuth: recipient.accessAuth ?? [],
-          actionAuth: recipient.actionAuth ?? [],
-        });
-
-        const createdRecipient = await tx.recipient.create({
-          data: {
-            envelopeId: template.id,
-            name: recipient.name,
-            email: recipient.email,
-            role: recipient.role,
-            signingOrder: recipient.signingOrder,
-            token: nanoid(),
-            sendStatus: recipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
-            signingStatus:
-              recipient.role === RecipientRole.CC ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
-            authOptions,
-          },
-        });
-
-        return createdRecipient;
-      }),
-    );
-  });
-
-  return {
-    recipients: createdRecipients.map((recipient) =>
-      mapRecipientToLegacyRecipient(recipient, template),
-    ),
-  };
-};

packages/lib/server-only/recipient/delete-envelope-recipient.ts

@@ -14,26 +14,27 @@ import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
 import { AppError, AppErrorCode } from '../../errors/app-error';
 import { extractDerivedDocumentEmailSettings } from '../../types/document-email';
 import { createDocumentAuditLogData } from '../../utils/document-audit-logs';
+import { canRecipientBeModified } from '../../utils/recipients';
 import { renderEmailWithI18N } from '../../utils/render-email-with-i18n';
 import { buildTeamWhereQuery } from '../../utils/teams';
 import { getEmailContext } from '../email/get-email-context';
+import { getEnvelopeWhereInput } from '../envelope/get-envelope-by-id';
 
-export interface DeleteDocumentRecipientOptions {
+export interface DeleteEnvelopeRecipientOptions {
   userId: number;
   teamId: number;
   recipientId: number;
   requestMetadata: ApiRequestMetadata;
 }
 
-export const deleteDocumentRecipient = async ({
+export const deleteEnvelopeRecipient = async ({
   userId,
   teamId,
   recipientId,
   requestMetadata,
-}: DeleteDocumentRecipientOptions) => {
+}: DeleteEnvelopeRecipientOptions) => {
   const envelope = await prisma.envelope.findFirst({
     where: {
-      type: EnvelopeType.DOCUMENT,
       recipients: {
         some: {
           id: recipientId,
@@ -48,6 +49,9 @@ export const deleteDocumentRecipient = async ({
         where: {
           id: recipientId,
         },
+        include: {
+          fields: true,
+        },
       },
     },
   });
@@ -89,24 +93,43 @@ export const deleteDocumentRecipient = async ({
     });
   }
 
-  const deletedRecipient = await prisma.$transaction(async (tx) => {
+  if (!canRecipientBeModified(recipientToDelete, recipientToDelete.fields)) {
-    await tx.documentAuditLog.create({
+    throw new AppError(AppErrorCode.INVALID_REQUEST, {
-      data: createDocumentAuditLogData({
+      message: 'Recipient has already interacted with the document.',
-        type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_DELETED,
-        envelopeId: envelope.id,
-        metadata: requestMetadata,
-        data: {
-          recipientEmail: recipientToDelete.email,
-          recipientName: recipientToDelete.name,
-          recipientId: recipientToDelete.id,
-          recipientRole: recipientToDelete.role,
-        },
-      }),
     });
+  }
+
+  const { envelopeWhereInput } = await getEnvelopeWhereInput({
+    id: {
+      type: 'envelopeId',
+      id: envelope.id,
+    },
+    type: null,
+    userId,
+    teamId,
+  });
+
+  const deletedRecipient = await prisma.$transaction(async (tx) => {
+    if (envelope.type === EnvelopeType.DOCUMENT) {
+      await tx.documentAuditLog.create({
+        data: createDocumentAuditLogData({
+          type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_DELETED,
+          envelopeId: envelope.id,
+          metadata: requestMetadata,
+          data: {
+            recipientEmail: recipientToDelete.email,
+            recipientName: recipientToDelete.name,
+            recipientId: recipientToDelete.id,
+            recipientRole: recipientToDelete.role,
+          },
+        }),
+      });
+    }
 
     return await tx.recipient.delete({
       where: {
         id: recipientId,
+        envelope: envelopeWhereInput,
       },
     });
   });
@@ -116,7 +139,11 @@ export const deleteDocumentRecipient = async ({
   ).recipientRemoved;
 
   // Send email to deleted recipient.
-  if (recipientToDelete.sendStatus === SendStatus.SENT && isRecipientRemovedEmailEnabled) {
+  if (
+    recipientToDelete.sendStatus === SendStatus.SENT &&
+    isRecipientRemovedEmailEnabled &&
+    envelope.type === EnvelopeType.DOCUMENT
+  ) {
     const assetBaseUrl = NEXT_PUBLIC_WEBAPP_URL() || 'http://localhost:3000';
 
     const template = createElement(RecipientRemovedFromDocumentTemplate, {

packages/lib/server-only/recipient/delete-template-recipient.ts

@@ -1,58 +0,0 @@
-import { EnvelopeType } from '@prisma/client';
-
-import { prisma } from '@documenso/prisma';
-
-import { AppError, AppErrorCode } from '../../errors/app-error';
-import { buildTeamWhereQuery } from '../../utils/teams';
-import { getEnvelopeWhereInput } from '../envelope/get-envelope-by-id';
-
-export interface DeleteTemplateRecipientOptions {
-  userId: number;
-  teamId: number;
-  recipientId: number;
-}
-
-export const deleteTemplateRecipient = async ({
-  userId,
-  teamId,
-  recipientId,
-}: DeleteTemplateRecipientOptions): Promise<void> => {
-  const recipientToDelete = await prisma.recipient.findFirst({
-    where: {
-      id: recipientId,
-      envelope: {
-        type: EnvelopeType.TEMPLATE,
-        team: buildTeamWhereQuery({ teamId, userId }),
-      },
-    },
-  });
-
-  if (!recipientToDelete) {
-    throw new AppError(AppErrorCode.NOT_FOUND, {
-      message: 'Recipient not found',
-    });
-  }
-
-  const { envelopeWhereInput } = await getEnvelopeWhereInput({
-    id: {
-      type: 'envelopeId',
-      id: recipientToDelete.envelopeId,
-    },
-    type: EnvelopeType.TEMPLATE,
-    userId,
-    teamId,
-  });
-
-  if (!recipientToDelete || recipientToDelete.id !== recipientId) {
-    throw new AppError(AppErrorCode.NOT_FOUND, {
-      message: 'Recipient not found',
-    });
-  }
-
-  await prisma.recipient.delete({
-    where: {
-      id: recipientId,
-      envelope: envelopeWhereInput,
-    },
-  });
-};

packages/lib/server-only/recipient/update-envelope-recipients.ts

@@ -1,5 +1,4 @@
-import { EnvelopeType, RecipientRole } from '@prisma/client';
+import { EnvelopeType, RecipientRole, SendStatus, SigningStatus } from '@prisma/client';
-import { SendStatus, SigningStatus } from '@prisma/client';
 
 import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
 import type { TRecipientAccessAuthTypes } from '@documenso/lib/types/document-auth';
@@ -16,29 +15,38 @@ import { createRecipientAuthOptions } from '@documenso/lib/utils/document-auth';
 import { prisma } from '@documenso/prisma';
 
 import { AppError, AppErrorCode } from '../../errors/app-error';
-import { type EnvelopeIdOptions, mapSecondaryIdToDocumentId } from '../../utils/envelope';
+import { extractLegacyIds } from '../../universal/id';
+import { type EnvelopeIdOptions } from '../../utils/envelope';
 import { mapFieldToLegacyField } from '../../utils/fields';
 import { canRecipientBeModified } from '../../utils/recipients';
 import { getEnvelopeWhereInput } from '../envelope/get-envelope-by-id';
 
-export interface UpdateDocumentRecipientsOptions {
+export interface UpdateEnvelopeRecipientsOptions {
   userId: number;
   teamId: number;
   id: EnvelopeIdOptions;
-  recipients: RecipientData[];
+  recipients: {
+    id: number;
+    email?: string;
+    name?: string;
+    role?: RecipientRole;
+    signingOrder?: number | null;
+    accessAuth?: TRecipientAccessAuthTypes[];
+    actionAuth?: TRecipientActionAuthTypes[];
+  }[];
   requestMetadata: ApiRequestMetadata;
 }
 
-export const updateDocumentRecipients = async ({
+export const updateEnvelopeRecipients = async ({
   userId,
   teamId,
   id,
   recipients,
   requestMetadata,
-}: UpdateDocumentRecipientsOptions) => {
+}: UpdateEnvelopeRecipientsOptions) => {
   const { envelopeWhereInput } = await getEnvelopeWhereInput({
     id,
-    type: EnvelopeType.DOCUMENT,
+    type: null,
     userId,
     teamId,
   });
@@ -62,13 +70,13 @@ export const updateDocumentRecipients = async ({
 
   if (!envelope) {
     throw new AppError(AppErrorCode.NOT_FOUND, {
-      message: 'Document not found',
+      message: 'Envelope not found',
     });
   }
 
   if (envelope.completedAt) {
     throw new AppError(AppErrorCode.INVALID_REQUEST, {
-      message: 'Document already complete',
+      message: 'Envelope already complete',
     });
   }
 
@@ -160,24 +168,26 @@ export const updateDocumentRecipients = async ({
           });
         }
 
-        const changes = diffRecipientChanges(originalRecipient, updatedRecipient);
-
         // Handle recipient updated audit log.
-        if (changes.length > 0) {
+        if (envelope.type === EnvelopeType.DOCUMENT) {
-          await tx.documentAuditLog.create({
+          const changes = diffRecipientChanges(originalRecipient, updatedRecipient);
-            data: createDocumentAuditLogData({
+
-              type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_UPDATED,
+          if (changes.length > 0) {
-              envelopeId: envelope.id,
+            await tx.documentAuditLog.create({
-              metadata: requestMetadata,
+              data: createDocumentAuditLogData({
-              data: {
+                type: DOCUMENT_AUDIT_LOG_TYPE.RECIPIENT_UPDATED,
-                recipientEmail: updatedRecipient.email,
+                envelopeId: envelope.id,
-                recipientName: updatedRecipient.name,
+                metadata: requestMetadata,
-                recipientId: updatedRecipient.id,
+                data: {
-                recipientRole: updatedRecipient.role,
+                  recipientEmail: updatedRecipient.email,
-                changes,
+                  recipientName: updatedRecipient.name,
-              },
+                  recipientId: updatedRecipient.id,
-            }),
+                  recipientRole: updatedRecipient.role,
-          });
+                  changes,
+                },
+              }),
+            });
+          }
         }
 
         return updatedRecipient;
@@ -188,19 +198,8 @@ export const updateDocumentRecipients = async ({
   return {
     recipients: updatedRecipients.map((recipient) => ({
       ...recipient,
-      documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
+      ...extractLegacyIds(envelope),
-      templateId: null,
       fields: recipient.fields.map((field) => mapFieldToLegacyField(field, envelope)),
     })),
   };
 };
-
-type RecipientData = {
-  id: number;
-  email?: string;
-  name?: string;
-  role?: RecipientRole;
-  signingOrder?: number | null;
-  accessAuth?: TRecipientAccessAuthTypes[];
-  actionAuth?: TRecipientActionAuthTypes[];
-};

packages/lib/server-only/recipient/update-template-recipients.ts

@@ -1,168 +0,0 @@
-import { EnvelopeType, RecipientRole } from '@prisma/client';
-import { SendStatus, SigningStatus } from '@prisma/client';
-
-import type { TRecipientAccessAuthTypes } from '@documenso/lib/types/document-auth';
-import {
-  type TRecipientActionAuthTypes,
-  ZRecipientAuthOptionsSchema,
-} from '@documenso/lib/types/document-auth';
-import { createRecipientAuthOptions } from '@documenso/lib/utils/document-auth';
-import { prisma } from '@documenso/prisma';
-
-import { AppError, AppErrorCode } from '../../errors/app-error';
-import { mapSecondaryIdToTemplateId } from '../../utils/envelope';
-import { mapFieldToLegacyField } from '../../utils/fields';
-import { getEnvelopeWhereInput } from '../envelope/get-envelope-by-id';
-
-export interface UpdateTemplateRecipientsOptions {
-  userId: number;
-  teamId: number;
-  templateId: number;
-  recipients: {
-    id: number;
-    email?: string;
-    name?: string;
-    role?: RecipientRole;
-    signingOrder?: number | null;
-    accessAuth?: TRecipientAccessAuthTypes[];
-    actionAuth?: TRecipientActionAuthTypes[];
-  }[];
-}
-
-export const updateTemplateRecipients = async ({
-  userId,
-  teamId,
-  templateId,
-  recipients,
-}: UpdateTemplateRecipientsOptions) => {
-  const { envelopeWhereInput } = await getEnvelopeWhereInput({
-    id: {
-      type: 'templateId',
-      id: templateId,
-    },
-    type: EnvelopeType.TEMPLATE,
-    userId,
-    teamId,
-  });
-
-  const envelope = await prisma.envelope.findFirst({
-    where: envelopeWhereInput,
-    include: {
-      recipients: true,
-      team: {
-        select: {
-          organisation: {
-            select: {
-              organisationClaim: true,
-            },
-          },
-        },
-      },
-    },
-  });
-
-  if (!envelope) {
-    throw new AppError(AppErrorCode.NOT_FOUND, {
-      message: 'Template not found',
-    });
-  }
-
-  const recipientsHaveActionAuth = recipients.some(
-    (recipient) => recipient.actionAuth && recipient.actionAuth.length > 0,
-  );
-
-  // Check if user has permission to set the global action auth.
-  if (recipientsHaveActionAuth && !envelope.team.organisation.organisationClaim.flags.cfr21) {
-    throw new AppError(AppErrorCode.UNAUTHORIZED, {
-      message: 'You do not have permission to set the action auth',
-    });
-  }
-
-  const recipientsToUpdate = recipients.map((recipient) => {
-    const originalRecipient = envelope.recipients.find(
-      (existingRecipient) => existingRecipient.id === recipient.id,
-    );
-
-    if (!originalRecipient) {
-      throw new AppError(AppErrorCode.NOT_FOUND, {
-        message: `Recipient with id ${recipient.id} not found`,
-      });
-    }
-
-    return {
-      originalRecipient,
-      recipientUpdateData: recipient,
-    };
-  });
-
-  const updatedRecipients = await prisma.$transaction(async (tx) => {
-    return await Promise.all(
-      recipientsToUpdate.map(async ({ originalRecipient, recipientUpdateData }) => {
-        let authOptions = ZRecipientAuthOptionsSchema.parse(originalRecipient.authOptions);
-
-        if (
-          recipientUpdateData.actionAuth !== undefined ||
-          recipientUpdateData.accessAuth !== undefined
-        ) {
-          authOptions = createRecipientAuthOptions({
-            accessAuth: recipientUpdateData.accessAuth || authOptions.accessAuth,
-            actionAuth: recipientUpdateData.actionAuth || authOptions.actionAuth,
-          });
-        }
-
-        const mergedRecipient = {
-          ...originalRecipient,
-          ...recipientUpdateData,
-        };
-
-        const updatedRecipient = await tx.recipient.update({
-          where: {
-            id: originalRecipient.id,
-            envelopeId: envelope.id,
-          },
-          data: {
-            name: mergedRecipient.name,
-            email: mergedRecipient.email,
-            role: mergedRecipient.role,
-            signingOrder: mergedRecipient.signingOrder,
-            envelopeId: envelope.id,
-            sendStatus:
-              mergedRecipient.role === RecipientRole.CC ? SendStatus.SENT : SendStatus.NOT_SENT,
-            signingStatus:
-              mergedRecipient.role === RecipientRole.CC
-                ? SigningStatus.SIGNED
-                : SigningStatus.NOT_SIGNED,
-            authOptions,
-          },
-          include: {
-            fields: true,
-          },
-        });
-
-        // Clear all fields if the recipient role is changed to a type that cannot have fields.
-        if (
-          originalRecipient.role !== updatedRecipient.role &&
-          (updatedRecipient.role === RecipientRole.CC ||
-            updatedRecipient.role === RecipientRole.VIEWER)
-        ) {
-          await tx.field.deleteMany({
-            where: {
-              recipientId: updatedRecipient.id,
-            },
-          });
-        }
-
-        return updatedRecipient;
-      }),
-    );
-  });
-
-  return {
-    recipients: updatedRecipients.map((recipient) => ({
-      ...recipient,
-      documentId: null,
-      templateId: mapSecondaryIdToTemplateId(envelope.secondaryId),
-      fields: recipient.fields.map((field) => mapFieldToLegacyField(field, envelope)),
-    })),
-  };
-};

packages/lib/translations/de/web.po

@@ -262,10 +262,20 @@ msgstr "{prefix} hat ein Feld hinzugefügt"
 msgid "{prefix} added a recipient"
 msgstr "{prefix} hat einen Empfänger hinzugefügt"
 
+#. placeholder {0}: data.envelopeItemTitle
+#: packages/lib/utils/document-audit-logs.ts
+msgid "{prefix} created an envelope item with title {0}"
+msgstr ""
+
 #: packages/lib/utils/document-audit-logs.ts
 msgid "{prefix} created the document"
 msgstr "{prefix} hat das Dokument erstellt"
 
+#. placeholder {0}: data.envelopeItemTitle
+#: packages/lib/utils/document-audit-logs.ts
+msgid "{prefix} deleted an envelope item with title {0}"
+msgstr ""
+
 #: packages/lib/utils/document-audit-logs.ts
 msgid "{prefix} deleted the document"
 msgstr "{prefix} hat das Dokument gelöscht"
@@ -356,6 +366,7 @@ msgstr "{recipientActionVerb} Dokument"
 msgid "{recipientActionVerb} the document to complete the process."
 msgstr "{recipientActionVerb} das Dokument, um den Prozess abzuschließen."
 
+#: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 #: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 msgid "{recipientCount} recipients"
 msgstr "{recipientCount} Empfänger"
@@ -1742,8 +1753,9 @@ msgstr ""
 
 #: apps/remix/app/components/general/document/document-attachments-popover.tsx
 msgid "Attachment removed successfully."
-msgstr ""
+msgstr "<<<<<<< Updated upstream======="
 
+#: apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx
 #: apps/remix/app/components/general/document/document-attachments-popover.tsx
@@ -2158,6 +2170,10 @@ msgstr "Filter löschen"
 msgid "Clear Signature"
 msgstr "Unterschrift löschen"
 
+#: apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
+msgid "Click here to add a recipient"
+msgstr ""
+
 #: apps/remix/app/components/tables/settings-public-profile-templates-table.tsx
 msgid "Click here to get started"
 msgstr "Klicken Sie hier, um zu beginnen"
@@ -2280,6 +2296,7 @@ msgstr "Abgeschlossene Dokumente"
 msgid "Completed Documents"
 msgstr "Abgeschlossene Dokumente"
 
+#: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 #: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 msgid "Completed on {formattedDate}"
 msgstr "Abgeschlossen am {formattedDate}"
@@ -2479,7 +2496,6 @@ msgid "Controls which signatures are allowed to be used when signing a document.
 msgstr "Bestimmt, welche Signaturen beim Unterschreiben eines Dokuments verwendet werden dürfen."
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "Copied"
 msgstr "Kopiert"
@@ -2497,14 +2513,12 @@ msgstr "Kopiert"
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 #: packages/ui/components/document/document-share-button.tsx
 msgid "Copied to clipboard"
 msgstr "In die Zwischenablage kopiert"
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "Copy"
 msgstr "Kopieren"
@@ -2522,6 +2536,7 @@ msgid "Copy Shareable Link"
 msgstr "Kopiere den teilbaren Link"
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
+#: apps/remix/app/components/general/document/document-page-view-recipients.tsx
 msgid "Copy Signing Links"
 msgstr "Signierlinks kopieren"
 
@@ -3646,7 +3661,6 @@ msgstr "Legen Sie Ihr Dokument hier ab"
 #: apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx
 #: packages/ui/primitives/template-flow/add-template-fields.tsx
 #: packages/ui/primitives/document-flow/add-fields.tsx
-#: packages/lib/utils/fields.ts
 msgid "Dropdown"
 msgstr "Dropdown"
 
@@ -4035,6 +4049,14 @@ msgstr ""
 msgid "Envelope Item Count"
 msgstr ""
 
+#: packages/lib/utils/document-audit-logs.ts
+msgid "Envelope item created"
+msgstr ""
+
+#: packages/lib/utils/document-audit-logs.ts
+msgid "Envelope item deleted"
+msgstr ""
+
 #: apps/remix/app/components/dialogs/envelope-redistribute-dialog.tsx
 msgid "Envelope resent"
 msgstr ""
@@ -5544,7 +5566,6 @@ msgstr "Kein passender Empfänger mit dieser Beschreibung gefunden."
 #: apps/remix/app/components/general/template/template-page-view-recipients.tsx
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
 #: apps/remix/app/components/general/document/document-page-view-recipients.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "No recipients"
 msgstr "Keine Empfänger"
@@ -7066,6 +7087,10 @@ msgstr "Wählen Sie Mitglieder oder Gruppen von Mitgliedern, die dem Team hinzug
 msgid "Select members to add to this team"
 msgstr "Wählen Sie Mitglieder aus, die diesem Team hinzugefügt werden sollen"
 
+#: packages/lib/utils/fields.ts
+msgid "Select Option"
+msgstr ""
+
 #: apps/remix/app/components/general/document-signing/document-signing-auth-passkey.tsx
 msgid "Select passkey"
 msgstr "Passkey auswählen"
@@ -7870,6 +7895,15 @@ msgstr "E-Mail-Domains synchronisieren"
 msgid "Sync failed, changes not saved"
 msgstr ""
 
+#: packages/lib/utils/document-audit-logs.ts
+msgctxt "Audit log format"
+msgid "System auto inserted fields"
+msgstr ""
+
+#: packages/lib/utils/document-audit-logs.ts
+msgid "System auto inserted fields"
+msgstr ""
+
 #: apps/remix/app/routes/_unauthenticated+/articles.signature-disclosure.tsx
 msgid "System Requirements"
 msgstr "Systemanforderungen"
@@ -8412,7 +8446,6 @@ msgstr "Der Name des Unterzeichners"
 #: apps/remix/app/components/general/avatar-with-recipient.tsx
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
 #: apps/remix/app/components/general/document/document-page-view-recipients.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "The signing link has been copied to your clipboard."
 msgstr "Der Signierlink wurde in die Zwischenablage kopiert."

packages/lib/translations/en/web.po

@@ -257,10 +257,20 @@ msgstr "{prefix} added a field"
 msgid "{prefix} added a recipient"
 msgstr "{prefix} added a recipient"
 
+#. placeholder {0}: data.envelopeItemTitle
+#: packages/lib/utils/document-audit-logs.ts
+msgid "{prefix} created an envelope item with title {0}"
+msgstr "{prefix} created an envelope item with title {0}"
+
 #: packages/lib/utils/document-audit-logs.ts
 msgid "{prefix} created the document"
 msgstr "{prefix} created the document"
 
+#. placeholder {0}: data.envelopeItemTitle
+#: packages/lib/utils/document-audit-logs.ts
+msgid "{prefix} deleted an envelope item with title {0}"
+msgstr "{prefix} deleted an envelope item with title {0}"
+
 #: packages/lib/utils/document-audit-logs.ts
 msgid "{prefix} deleted the document"
 msgstr "{prefix} deleted the document"
@@ -351,6 +361,7 @@ msgstr "{recipientActionVerb} document"
 msgid "{recipientActionVerb} the document to complete the process."
 msgstr "{recipientActionVerb} the document to complete the process."
 
+#: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 #: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 msgid "{recipientCount} recipients"
 msgstr "{recipientCount} recipients"
@@ -1737,8 +1748,9 @@ msgstr "Attachment added successfully."
 
 #: apps/remix/app/components/general/document/document-attachments-popover.tsx
 msgid "Attachment removed successfully."
-msgstr "Attachment removed successfully."
+msgstr "Attachment removed successfully.<<<<<<< Updated upstream======="
 
+#: apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx
 #: apps/remix/app/components/general/document/document-attachments-popover.tsx
@@ -2153,6 +2165,10 @@ msgstr "Clear filters"
 msgid "Clear Signature"
 msgstr "Clear Signature"
 
+#: apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
+msgid "Click here to add a recipient"
+msgstr "Click here to add a recipient"
+
 #: apps/remix/app/components/tables/settings-public-profile-templates-table.tsx
 msgid "Click here to get started"
 msgstr "Click here to get started"
@@ -2275,6 +2291,7 @@ msgstr "Completed documents"
 msgid "Completed Documents"
 msgstr "Completed Documents"
 
+#: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 #: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 msgid "Completed on {formattedDate}"
 msgstr "Completed on {formattedDate}"
@@ -2474,7 +2491,6 @@ msgid "Controls which signatures are allowed to be used when signing a document.
 msgstr "Controls which signatures are allowed to be used when signing a document."
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "Copied"
 msgstr "Copied"
@@ -2492,14 +2508,12 @@ msgstr "Copied"
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 #: packages/ui/components/document/document-share-button.tsx
 msgid "Copied to clipboard"
 msgstr "Copied to clipboard"
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "Copy"
 msgstr "Copy"
@@ -2517,6 +2531,7 @@ msgid "Copy Shareable Link"
 msgstr "Copy Shareable Link"
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
+#: apps/remix/app/components/general/document/document-page-view-recipients.tsx
 msgid "Copy Signing Links"
 msgstr "Copy Signing Links"
 
@@ -3641,7 +3656,6 @@ msgstr "Drop your document here"
 #: apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx
 #: packages/ui/primitives/template-flow/add-template-fields.tsx
 #: packages/ui/primitives/document-flow/add-fields.tsx
-#: packages/lib/utils/fields.ts
 msgid "Dropdown"
 msgstr "Dropdown"
 
@@ -4030,6 +4044,14 @@ msgstr "Envelope ID"
 msgid "Envelope Item Count"
 msgstr "Envelope Item Count"
 
+#: packages/lib/utils/document-audit-logs.ts
+msgid "Envelope item created"
+msgstr "Envelope item created"
+
+#: packages/lib/utils/document-audit-logs.ts
+msgid "Envelope item deleted"
+msgstr "Envelope item deleted"
+
 #: apps/remix/app/components/dialogs/envelope-redistribute-dialog.tsx
 msgid "Envelope resent"
 msgstr "Envelope resent"
@@ -5539,7 +5561,6 @@ msgstr "No recipient matching this description was found."
 #: apps/remix/app/components/general/template/template-page-view-recipients.tsx
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
 #: apps/remix/app/components/general/document/document-page-view-recipients.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "No recipients"
 msgstr "No recipients"
@@ -7061,6 +7082,10 @@ msgstr "Select members or groups of members to add to the team."
 msgid "Select members to add to this team"
 msgstr "Select members to add to this team"
 
+#: packages/lib/utils/fields.ts
+msgid "Select Option"
+msgstr "Select Option"
+
 #: apps/remix/app/components/general/document-signing/document-signing-auth-passkey.tsx
 msgid "Select passkey"
 msgstr "Select passkey"
@@ -7865,6 +7890,15 @@ msgstr "Sync Email Domains"
 msgid "Sync failed, changes not saved"
 msgstr "Sync failed, changes not saved"
 
+#: packages/lib/utils/document-audit-logs.ts
+msgctxt "Audit log format"
+msgid "System auto inserted fields"
+msgstr "System auto inserted fields"
+
+#: packages/lib/utils/document-audit-logs.ts
+msgid "System auto inserted fields"
+msgstr "System auto inserted fields"
+
 #: apps/remix/app/routes/_unauthenticated+/articles.signature-disclosure.tsx
 msgid "System Requirements"
 msgstr "System Requirements"
@@ -8417,7 +8451,6 @@ msgstr "The signer's name"
 #: apps/remix/app/components/general/avatar-with-recipient.tsx
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
 #: apps/remix/app/components/general/document/document-page-view-recipients.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "The signing link has been copied to your clipboard."
 msgstr "The signing link has been copied to your clipboard."

packages/lib/translations/es/web.po

@@ -262,10 +262,20 @@ msgstr "{prefix} agregó un campo"
 msgid "{prefix} added a recipient"
 msgstr "{prefix} agregó un destinatario"
 
+#. placeholder {0}: data.envelopeItemTitle
+#: packages/lib/utils/document-audit-logs.ts
+msgid "{prefix} created an envelope item with title {0}"
+msgstr ""
+
 #: packages/lib/utils/document-audit-logs.ts
 msgid "{prefix} created the document"
 msgstr "{prefix} creó el documento"
 
+#. placeholder {0}: data.envelopeItemTitle
+#: packages/lib/utils/document-audit-logs.ts
+msgid "{prefix} deleted an envelope item with title {0}"
+msgstr ""
+
 #: packages/lib/utils/document-audit-logs.ts
 msgid "{prefix} deleted the document"
 msgstr "{prefix} eliminó el documento"
@@ -356,6 +366,7 @@ msgstr "{recipientActionVerb} documento"
 msgid "{recipientActionVerb} the document to complete the process."
 msgstr "{recipientActionVerb} el documento para completar el proceso."
 
+#: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 #: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 msgid "{recipientCount} recipients"
 msgstr "{recipientCount} destinatarios"
@@ -1742,8 +1753,9 @@ msgstr ""
 
 #: apps/remix/app/components/general/document/document-attachments-popover.tsx
 msgid "Attachment removed successfully."
-msgstr ""
+msgstr "<<<<<<< Updated upstream======="
 
+#: apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx
 #: apps/remix/app/components/general/document/document-attachments-popover.tsx
@@ -2158,6 +2170,10 @@ msgstr "Limpiar filtros"
 msgid "Clear Signature"
 msgstr "Limpiar firma"
 
+#: apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
+msgid "Click here to add a recipient"
+msgstr ""
+
 #: apps/remix/app/components/tables/settings-public-profile-templates-table.tsx
 msgid "Click here to get started"
 msgstr "Haga clic aquí para comenzar"
@@ -2280,6 +2296,7 @@ msgstr "Documentos completados"
 msgid "Completed Documents"
 msgstr "Documentos Completados"
 
+#: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 #: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 msgid "Completed on {formattedDate}"
 msgstr "Completado el {formattedDate}"
@@ -2479,7 +2496,6 @@ msgid "Controls which signatures are allowed to be used when signing a document.
 msgstr "Controla qué firmas están permitidas al firmar un documento."
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "Copied"
 msgstr "Copiado"
@@ -2497,14 +2513,12 @@ msgstr "Copiado"
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 #: packages/ui/components/document/document-share-button.tsx
 msgid "Copied to clipboard"
 msgstr "Copiado al portapapeles"
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "Copy"
 msgstr "Copiar"
@@ -2522,6 +2536,7 @@ msgid "Copy Shareable Link"
 msgstr "Copiar enlace compartible"
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
+#: apps/remix/app/components/general/document/document-page-view-recipients.tsx
 msgid "Copy Signing Links"
 msgstr "Copiar enlaces de firma"
 
@@ -3646,7 +3661,6 @@ msgstr "Suelta tu documento aquí"
 #: apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx
 #: packages/ui/primitives/template-flow/add-template-fields.tsx
 #: packages/ui/primitives/document-flow/add-fields.tsx
-#: packages/lib/utils/fields.ts
 msgid "Dropdown"
 msgstr "Menú desplegable"
 
@@ -4035,6 +4049,14 @@ msgstr ""
 msgid "Envelope Item Count"
 msgstr ""
 
+#: packages/lib/utils/document-audit-logs.ts
+msgid "Envelope item created"
+msgstr ""
+
+#: packages/lib/utils/document-audit-logs.ts
+msgid "Envelope item deleted"
+msgstr ""
+
 #: apps/remix/app/components/dialogs/envelope-redistribute-dialog.tsx
 msgid "Envelope resent"
 msgstr ""
@@ -5544,7 +5566,6 @@ msgstr "No se encontró ningún destinatario que coincidiera con esta descripci
 #: apps/remix/app/components/general/template/template-page-view-recipients.tsx
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
 #: apps/remix/app/components/general/document/document-page-view-recipients.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "No recipients"
 msgstr "Sin destinatarios"
@@ -7066,6 +7087,10 @@ msgstr "Seleccione miembros o grupos de miembros para agregar al equipo."
 msgid "Select members to add to this team"
 msgstr "Seleccione los miembros para añadir a este equipo"
 
+#: packages/lib/utils/fields.ts
+msgid "Select Option"
+msgstr ""
+
 #: apps/remix/app/components/general/document-signing/document-signing-auth-passkey.tsx
 msgid "Select passkey"
 msgstr "Seleccionar clave de acceso"
@@ -7870,6 +7895,15 @@ msgstr "Sincronizar dominios de correo electrónico"
 msgid "Sync failed, changes not saved"
 msgstr ""
 
+#: packages/lib/utils/document-audit-logs.ts
+msgctxt "Audit log format"
+msgid "System auto inserted fields"
+msgstr ""
+
+#: packages/lib/utils/document-audit-logs.ts
+msgid "System auto inserted fields"
+msgstr ""
+
 #: apps/remix/app/routes/_unauthenticated+/articles.signature-disclosure.tsx
 msgid "System Requirements"
 msgstr "Requisitos del Sistema"
@@ -8412,7 +8446,6 @@ msgstr "El nombre del firmante"
 #: apps/remix/app/components/general/avatar-with-recipient.tsx
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
 #: apps/remix/app/components/general/document/document-page-view-recipients.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "The signing link has been copied to your clipboard."
 msgstr "El enlace de firma ha sido copiado a tu portapapeles."

packages/lib/translations/fr/web.po

@@ -262,10 +262,20 @@ msgstr "{prefix} a ajouté un champ"
 msgid "{prefix} added a recipient"
 msgstr "{prefix} a ajouté un destinataire"
 
+#. placeholder {0}: data.envelopeItemTitle
+#: packages/lib/utils/document-audit-logs.ts
+msgid "{prefix} created an envelope item with title {0}"
+msgstr ""
+
 #: packages/lib/utils/document-audit-logs.ts
 msgid "{prefix} created the document"
 msgstr "{prefix} a créé le document"
 
+#. placeholder {0}: data.envelopeItemTitle
+#: packages/lib/utils/document-audit-logs.ts
+msgid "{prefix} deleted an envelope item with title {0}"
+msgstr ""
+
 #: packages/lib/utils/document-audit-logs.ts
 msgid "{prefix} deleted the document"
 msgstr "{prefix} a supprimé le document"
@@ -356,6 +366,7 @@ msgstr "{recipientActionVerb} document"
 msgid "{recipientActionVerb} the document to complete the process."
 msgstr "{recipientActionVerb} the document to complete the process."
 
+#: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 #: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 msgid "{recipientCount} recipients"
 msgstr "{recipientCount} destinataires"
@@ -1742,8 +1753,9 @@ msgstr ""
 
 #: apps/remix/app/components/general/document/document-attachments-popover.tsx
 msgid "Attachment removed successfully."
-msgstr ""
+msgstr "<<<<<<< Updated upstream======="
 
+#: apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx
 #: apps/remix/app/components/general/document/document-attachments-popover.tsx
@@ -2158,6 +2170,10 @@ msgstr "Effacer les filtres"
 msgid "Clear Signature"
 msgstr "Effacer la signature"
 
+#: apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
+msgid "Click here to add a recipient"
+msgstr ""
+
 #: apps/remix/app/components/tables/settings-public-profile-templates-table.tsx
 msgid "Click here to get started"
 msgstr "Cliquez ici pour commencer"
@@ -2280,6 +2296,7 @@ msgstr "Documents complétés"
 msgid "Completed Documents"
 msgstr "Documents Complétés"
 
+#: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 #: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 msgid "Completed on {formattedDate}"
 msgstr "Terminé le {formattedDate}"
@@ -2479,7 +2496,6 @@ msgid "Controls which signatures are allowed to be used when signing a document.
 msgstr "Contrôle quelles signatures sont autorisées lors de la signature d'un document."
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "Copied"
 msgstr "Copié"
@@ -2497,14 +2513,12 @@ msgstr "Copié"
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 #: packages/ui/components/document/document-share-button.tsx
 msgid "Copied to clipboard"
 msgstr "Copié dans le presse-papiers"
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "Copy"
 msgstr "Copier"
@@ -2522,6 +2536,7 @@ msgid "Copy Shareable Link"
 msgstr "Copier le lien partageable"
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
+#: apps/remix/app/components/general/document/document-page-view-recipients.tsx
 msgid "Copy Signing Links"
 msgstr "Copier les liens de signature"
 
@@ -3646,7 +3661,6 @@ msgstr "Déposez votre document ici"
 #: apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx
 #: packages/ui/primitives/template-flow/add-template-fields.tsx
 #: packages/ui/primitives/document-flow/add-fields.tsx
-#: packages/lib/utils/fields.ts
 msgid "Dropdown"
 msgstr "Liste déroulante"
 
@@ -4035,6 +4049,14 @@ msgstr ""
 msgid "Envelope Item Count"
 msgstr ""
 
+#: packages/lib/utils/document-audit-logs.ts
+msgid "Envelope item created"
+msgstr ""
+
+#: packages/lib/utils/document-audit-logs.ts
+msgid "Envelope item deleted"
+msgstr ""
+
 #: apps/remix/app/components/dialogs/envelope-redistribute-dialog.tsx
 msgid "Envelope resent"
 msgstr ""
@@ -5544,7 +5566,6 @@ msgstr "Aucun destinataire correspondant à cette description n'a été trouvé.
 #: apps/remix/app/components/general/template/template-page-view-recipients.tsx
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
 #: apps/remix/app/components/general/document/document-page-view-recipients.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "No recipients"
 msgstr "Aucun destinataire"
@@ -7066,6 +7087,10 @@ msgstr "Sélectionnez des membres ou groupes de membres à ajouter à l'équipe.
 msgid "Select members to add to this team"
 msgstr "Sélectionnez des membres à ajouter à cette équipe"
 
+#: packages/lib/utils/fields.ts
+msgid "Select Option"
+msgstr ""
+
 #: apps/remix/app/components/general/document-signing/document-signing-auth-passkey.tsx
 msgid "Select passkey"
 msgstr "Sélectionner la clé d'authentification"
@@ -7870,6 +7895,15 @@ msgstr "Synchroniser les domaines de messagerie"
 msgid "Sync failed, changes not saved"
 msgstr ""
 
+#: packages/lib/utils/document-audit-logs.ts
+msgctxt "Audit log format"
+msgid "System auto inserted fields"
+msgstr ""
+
+#: packages/lib/utils/document-audit-logs.ts
+msgid "System auto inserted fields"
+msgstr ""
+
 #: apps/remix/app/routes/_unauthenticated+/articles.signature-disclosure.tsx
 msgid "System Requirements"
 msgstr "Exigences du système"
@@ -8412,7 +8446,6 @@ msgstr "Le nom du signataire"
 #: apps/remix/app/components/general/avatar-with-recipient.tsx
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
 #: apps/remix/app/components/general/document/document-page-view-recipients.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "The signing link has been copied to your clipboard."
 msgstr "Le lien de signature a été copié dans votre presse-papiers."

packages/lib/translations/it/web.po

@@ -262,10 +262,20 @@ msgstr "{prefix} ha aggiunto un campo"
 msgid "{prefix} added a recipient"
 msgstr "{prefix} ha aggiunto un destinatario"
 
+#. placeholder {0}: data.envelopeItemTitle
+#: packages/lib/utils/document-audit-logs.ts
+msgid "{prefix} created an envelope item with title {0}"
+msgstr ""
+
 #: packages/lib/utils/document-audit-logs.ts
 msgid "{prefix} created the document"
 msgstr "{prefix} ha creato il documento"
 
+#. placeholder {0}: data.envelopeItemTitle
+#: packages/lib/utils/document-audit-logs.ts
+msgid "{prefix} deleted an envelope item with title {0}"
+msgstr ""
+
 #: packages/lib/utils/document-audit-logs.ts
 msgid "{prefix} deleted the document"
 msgstr "{prefix} ha eliminato il documento"
@@ -356,6 +366,7 @@ msgstr "{recipientActionVerb} documento"
 msgid "{recipientActionVerb} the document to complete the process."
 msgstr "{recipientActionVerb} il documento per completare il processo."
 
+#: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 #: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 msgid "{recipientCount} recipients"
 msgstr "{recipientCount} destinatari"
@@ -1742,8 +1753,9 @@ msgstr ""
 
 #: apps/remix/app/components/general/document/document-attachments-popover.tsx
 msgid "Attachment removed successfully."
-msgstr ""
+msgstr "<<<<<<< Updated upstream======="
 
+#: apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx
 #: apps/remix/app/components/general/document/document-attachments-popover.tsx
@@ -2158,6 +2170,10 @@ msgstr "Cancella filtri"
 msgid "Clear Signature"
 msgstr "Cancella firma"
 
+#: apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
+msgid "Click here to add a recipient"
+msgstr ""
+
 #: apps/remix/app/components/tables/settings-public-profile-templates-table.tsx
 msgid "Click here to get started"
 msgstr "Clicca qui per iniziare"
@@ -2280,6 +2296,7 @@ msgstr "Documenti Completati"
 msgid "Completed Documents"
 msgstr "Documenti Completati"
 
+#: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 #: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 msgid "Completed on {formattedDate}"
 msgstr "Completato il {formattedDate}"
@@ -2479,7 +2496,6 @@ msgid "Controls which signatures are allowed to be used when signing a document.
 msgstr "Controlla quali firme sono consentite per firmare un documento."
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "Copied"
 msgstr "Copiato"
@@ -2497,14 +2513,12 @@ msgstr "Copiato"
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 #: packages/ui/components/document/document-share-button.tsx
 msgid "Copied to clipboard"
 msgstr "Copiato negli appunti"
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "Copy"
 msgstr "Copia"
@@ -2522,6 +2536,7 @@ msgid "Copy Shareable Link"
 msgstr "Copia il Link Condivisibile"
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
+#: apps/remix/app/components/general/document/document-page-view-recipients.tsx
 msgid "Copy Signing Links"
 msgstr "Copia link di firma"
 
@@ -3646,7 +3661,6 @@ msgstr "Rilascia qui il tuo documento"
 #: apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx
 #: packages/ui/primitives/template-flow/add-template-fields.tsx
 #: packages/ui/primitives/document-flow/add-fields.tsx
-#: packages/lib/utils/fields.ts
 msgid "Dropdown"
 msgstr "Menu a tendina"
 
@@ -4035,6 +4049,14 @@ msgstr ""
 msgid "Envelope Item Count"
 msgstr ""
 
+#: packages/lib/utils/document-audit-logs.ts
+msgid "Envelope item created"
+msgstr ""
+
+#: packages/lib/utils/document-audit-logs.ts
+msgid "Envelope item deleted"
+msgstr ""
+
 #: apps/remix/app/components/dialogs/envelope-redistribute-dialog.tsx
 msgid "Envelope resent"
 msgstr ""
@@ -5544,7 +5566,6 @@ msgstr "Nessun destinatario corrispondente a questa descrizione è stato trovato
 #: apps/remix/app/components/general/template/template-page-view-recipients.tsx
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
 #: apps/remix/app/components/general/document/document-page-view-recipients.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "No recipients"
 msgstr "Nessun destinatario"
@@ -7066,6 +7087,10 @@ msgstr "Seleziona membri o gruppi di membri da aggiungere al team."
 msgid "Select members to add to this team"
 msgstr "Seleziona membri da aggiungere a questo team"
 
+#: packages/lib/utils/fields.ts
+msgid "Select Option"
+msgstr ""
+
 #: apps/remix/app/components/general/document-signing/document-signing-auth-passkey.tsx
 msgid "Select passkey"
 msgstr "Seleziona una chiave di accesso"
@@ -7870,6 +7895,15 @@ msgstr "Sincronizza Domini Email"
 msgid "Sync failed, changes not saved"
 msgstr ""
 
+#: packages/lib/utils/document-audit-logs.ts
+msgctxt "Audit log format"
+msgid "System auto inserted fields"
+msgstr ""
+
+#: packages/lib/utils/document-audit-logs.ts
+msgid "System auto inserted fields"
+msgstr ""
+
 #: apps/remix/app/routes/_unauthenticated+/articles.signature-disclosure.tsx
 msgid "System Requirements"
 msgstr "Requisiti di sistema"
@@ -8420,7 +8454,6 @@ msgstr "Il nome del firmatario"
 #: apps/remix/app/components/general/avatar-with-recipient.tsx
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
 #: apps/remix/app/components/general/document/document-page-view-recipients.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "The signing link has been copied to your clipboard."
 msgstr "Il link di firma è stato copiato negli appunti."

packages/lib/translations/pl/web.po

@@ -262,10 +262,20 @@ msgstr "Użytkownik {prefix} dodał pole"
 msgid "{prefix} added a recipient"
 msgstr "Użytkownik {prefix} dodał odbiorcę"
 
+#. placeholder {0}: data.envelopeItemTitle
+#: packages/lib/utils/document-audit-logs.ts
+msgid "{prefix} created an envelope item with title {0}"
+msgstr ""
+
 #: packages/lib/utils/document-audit-logs.ts
 msgid "{prefix} created the document"
 msgstr "Użytkownik {prefix} utworzył dokument"
 
+#. placeholder {0}: data.envelopeItemTitle
+#: packages/lib/utils/document-audit-logs.ts
+msgid "{prefix} deleted an envelope item with title {0}"
+msgstr ""
+
 #: packages/lib/utils/document-audit-logs.ts
 msgid "{prefix} deleted the document"
 msgstr "Użytkownik {prefix} usunął dokument"
@@ -356,6 +366,7 @@ msgstr "{recipientActionVerb} dokument"
 msgid "{recipientActionVerb} the document to complete the process."
 msgstr "Sprawdź i {recipientActionVerb} dokument, aby zakończyć proces."
 
+#: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 #: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 msgid "{recipientCount} recipients"
 msgstr "{recipientCount} odbiorców"
@@ -1742,8 +1753,9 @@ msgstr ""
 
 #: apps/remix/app/components/general/document/document-attachments-popover.tsx
 msgid "Attachment removed successfully."
-msgstr ""
+msgstr "<<<<<<< Updated upstream======="
 
+#: apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-attachments-popover.tsx
 #: apps/remix/app/components/general/document/document-attachments-popover.tsx
@@ -2158,6 +2170,10 @@ msgstr "Wyczyść filtry"
 msgid "Clear Signature"
 msgstr "Wyczyść podpis"
 
+#: apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
+msgid "Click here to add a recipient"
+msgstr ""
+
 #: apps/remix/app/components/tables/settings-public-profile-templates-table.tsx
 msgid "Click here to get started"
 msgstr "Kliknij, aby rozpocząć"
@@ -2280,6 +2296,7 @@ msgstr "Dokumenty zakończone"
 msgid "Completed Documents"
 msgstr "Zakończone dokumenty"
 
+#: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 #: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 msgid "Completed on {formattedDate}"
 msgstr "Zakończono {formattedDate}"
@@ -2479,7 +2496,6 @@ msgid "Controls which signatures are allowed to be used when signing a document.
 msgstr "Kontroluje, które podpisy są dozwolone do użycia podczas podpisywania dokumentu."
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "Copied"
 msgstr "Skopiowano"
@@ -2497,14 +2513,12 @@ msgstr "Skopiowano"
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-email-domain-records-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 #: packages/ui/components/document/document-share-button.tsx
 msgid "Copied to clipboard"
 msgstr "Skopiowano do schowka"
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "Copy"
 msgstr "Kopiuj"
@@ -2522,6 +2536,7 @@ msgid "Copy Shareable Link"
 msgstr "Kopiuj udostępniany link"
 
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
+#: apps/remix/app/components/general/document/document-page-view-recipients.tsx
 msgid "Copy Signing Links"
 msgstr "Kopiuj linki do podpisania"
 
@@ -3646,7 +3661,6 @@ msgstr "Upuść swój dokument tutaj"
 #: apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx
 #: packages/ui/primitives/template-flow/add-template-fields.tsx
 #: packages/ui/primitives/document-flow/add-fields.tsx
-#: packages/lib/utils/fields.ts
 msgid "Dropdown"
 msgstr "Lista rozwijana"
 
@@ -4035,6 +4049,14 @@ msgstr ""
 msgid "Envelope Item Count"
 msgstr ""
 
+#: packages/lib/utils/document-audit-logs.ts
+msgid "Envelope item created"
+msgstr ""
+
+#: packages/lib/utils/document-audit-logs.ts
+msgid "Envelope item deleted"
+msgstr ""
+
 #: apps/remix/app/components/dialogs/envelope-redistribute-dialog.tsx
 msgid "Envelope resent"
 msgstr ""
@@ -5544,7 +5566,6 @@ msgstr "Nie znaleziono odbiorcy pasującego do tego opisu."
 #: apps/remix/app/components/general/template/template-page-view-recipients.tsx
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
 #: apps/remix/app/components/general/document/document-page-view-recipients.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "No recipients"
 msgstr "Brak odbiorców"
@@ -7066,6 +7087,10 @@ msgstr "Wybierz członków lub grupy członków, aby dodać do zespołu."
 msgid "Select members to add to this team"
 msgstr "Wybierz członków, aby dodać do tego zespołu"
 
+#: packages/lib/utils/fields.ts
+msgid "Select Option"
+msgstr ""
+
 #: apps/remix/app/components/general/document-signing/document-signing-auth-passkey.tsx
 msgid "Select passkey"
 msgstr "Wybierz klucz uwierzytelniający"
@@ -7870,6 +7895,15 @@ msgstr "Synchronizuj domeny e-mail"
 msgid "Sync failed, changes not saved"
 msgstr ""
 
+#: packages/lib/utils/document-audit-logs.ts
+msgctxt "Audit log format"
+msgid "System auto inserted fields"
+msgstr ""
+
+#: packages/lib/utils/document-audit-logs.ts
+msgid "System auto inserted fields"
+msgstr ""
+
 #: apps/remix/app/routes/_unauthenticated+/articles.signature-disclosure.tsx
 msgid "System Requirements"
 msgstr "Wymagania systemowe"
@@ -8412,7 +8446,6 @@ msgstr "Nazwa podpisującego"
 #: apps/remix/app/components/general/avatar-with-recipient.tsx
 #: apps/remix/app/components/general/document/document-recipient-link-copy-dialog.tsx
 #: apps/remix/app/components/general/document/document-page-view-recipients.tsx
-#: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "The signing link has been copied to your clipboard."
 msgstr "Link do podpisu został skopiowany do schowka."

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

@@ -21,10 +21,14 @@ export const ZDocumentAuditLogTypeSchema = z.enum([
   'RECIPIENT_DELETED',
   'RECIPIENT_UPDATED',
 
+  'ENVELOPE_ITEM_CREATED',
+  'ENVELOPE_ITEM_DELETED',
+
   // Document events.
   'DOCUMENT_COMPLETED', // When the document is sealed and fully completed.
   'DOCUMENT_CREATED', // When the document is created.
   'DOCUMENT_DELETED', // When the document is soft deleted.
+  'DOCUMENT_FIELDS_AUTO_INSERTED', // When a field is auto inserted during send due to default values (radio/dropdown/checkbox).
   'DOCUMENT_FIELD_INSERTED', // When a field is inserted (signed/approved/etc) by a recipient.
   'DOCUMENT_FIELD_UNINSERTED', // When a field is uninserted by a recipient.
   'DOCUMENT_FIELD_PREFILLED', // When a field is prefilled by an assistant.
@@ -181,6 +185,28 @@ const ZBaseRecipientDataSchema = z.object({
   recipientRole: z.string(),
 });
 
+/**
+ * Event: Envelope item created.
+ */
+export const ZDocumentAuditLogEventEnvelopeItemCreatedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.ENVELOPE_ITEM_CREATED),
+  data: z.object({
+    envelopeItemId: z.string(),
+    envelopeItemTitle: z.string(),
+  }),
+});
+
+/**
+ * Event: Envelope item deleted.
+ */
+export const ZDocumentAuditLogEventEnvelopeItemDeletedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.ENVELOPE_ITEM_DELETED),
+  data: z.object({
+    envelopeItemId: z.string(),
+    envelopeItemTitle: z.string(),
+  }),
+});
+
 /**
  * Event: Email sent.
  */
@@ -315,6 +341,22 @@ export const ZDocumentAuditLogEventDocumentFieldInsertedSchema = z.object({
   }),
 });
 
+/**
+ * Event: Document field auto inserted.
+ */
+export const ZDocumentAuditLogEventDocumentFieldsAutoInsertedSchema = z.object({
+  type: z.literal(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELDS_AUTO_INSERTED),
+  data: z.object({
+    fields: z.array(
+      z.object({
+        fieldId: z.number(),
+        fieldType: z.nativeEnum(FieldType),
+        recipientId: z.number(),
+      }),
+    ),
+  }),
+});
+
 /**
  * Event: Document field uninserted.
  */
@@ -652,11 +694,14 @@ export const ZDocumentAuditLogBaseSchema = z.object({
 
 export const ZDocumentAuditLogSchema = ZDocumentAuditLogBaseSchema.and(
   z.union([
+    ZDocumentAuditLogEventEnvelopeItemCreatedSchema,
+    ZDocumentAuditLogEventEnvelopeItemDeletedSchema,
     ZDocumentAuditLogEventEmailSentSchema,
     ZDocumentAuditLogEventDocumentCompletedSchema,
     ZDocumentAuditLogEventDocumentCreatedSchema,
     ZDocumentAuditLogEventDocumentDeletedSchema,
     ZDocumentAuditLogEventDocumentMovedToTeamSchema,
+    ZDocumentAuditLogEventDocumentFieldsAutoInsertedSchema,
     ZDocumentAuditLogEventDocumentFieldInsertedSchema,
     ZDocumentAuditLogEventDocumentFieldUninsertedSchema,
     ZDocumentAuditLogEventDocumentFieldPrefilledSchema,

packages/lib/types/envelope.ts

@@ -37,11 +37,8 @@ export const ZEnvelopeSchema = EnvelopeSchema.pick({
   userId: true,
   teamId: true,
   folderId: true,
+  templateId: true,
 }).extend({
-  templateId: z
-    .number()
-    .nullish()
-    .describe('The ID of the template that the document was created from, if any.'),
   documentMeta: DocumentMetaSchema.pick({
     signingOrder: true,
     distributionMethod: true,

packages/lib/types/field-meta.ts

@@ -188,7 +188,7 @@ export type TFieldMetaSchema = z.infer<typeof ZFieldMetaSchema>;
 export const ZFieldAndMetaSchema = z.discriminatedUnion('type', [
   z.object({
     type: z.literal(FieldType.SIGNATURE),
-    fieldMeta: z.undefined(),
+    fieldMeta: ZSignatureFieldMeta.optional(),
   }),
   z.object({
     type: z.literal(FieldType.FREE_SIGNATURE),

packages/lib/types/field.ts

@@ -50,6 +50,11 @@ export const ZFieldSchema = FieldSchema.pick({
   templateId: z.number().nullish(),
 });
 
+export const ZEnvelopeFieldSchema = ZFieldSchema.omit({
+  documentId: true,
+  templateId: true,
+});
+
 export const ZFieldPageNumberSchema = z
   .number()
   .min(1)
@@ -69,9 +74,32 @@ export const ZFieldWidthSchema = z.number().min(1).describe('The width of the fi
 
 export const ZFieldHeightSchema = z.number().min(1).describe('The height of the field.');
 
+export const ZClampedFieldPositionXSchema = z
+  .number()
+  .min(0)
+  .max(100)
+  .describe('The percentage based X coordinate where the field will be placed.');
+
+export const ZClampedFieldPositionYSchema = z
+  .number()
+  .min(0)
+  .max(100)
+  .describe('The percentage based Y coordinate where the field will be placed.');
+
+export const ZClampedFieldWidthSchema = z
+  .number()
+  .min(0)
+  .max(100)
+  .describe('The percentage based width of the field on the page.');
+
+export const ZClampedFieldHeightSchema = z
+  .number()
+  .min(0)
+  .max(100)
+  .describe('The percentage based height of the field on the page.');
+
 // ---------------------------------------------
 
-// Todo: Envelopes - dunno man
 const PrismaDecimalSchema = z.preprocess(
   (val) => (typeof val === 'string' ? new Prisma.Decimal(val) : val),
   z.instanceof(Prisma.Decimal, { message: 'Must be a Decimal' }),

packages/lib/types/recipient.ts

@@ -95,3 +95,18 @@ export const ZRecipientManySchema = RecipientSchema.pick({
   documentId: z.number().nullish(),
   templateId: z.number().nullish(),
 });
+
+export const ZEnvelopeRecipientSchema = ZRecipientSchema.omit({
+  documentId: true,
+  templateId: true,
+});
+
+export const ZEnvelopeRecipientLiteSchema = ZRecipientLiteSchema.omit({
+  documentId: true,
+  templateId: true,
+});
+
+export const ZEnvelopeRecipientManySchema = ZRecipientManySchema.omit({
+  documentId: true,
+  templateId: true,
+});

packages/lib/universal/field-renderer/field-generic-items.ts

@@ -129,3 +129,58 @@ export const createSpinner = ({
 
   return loadingGroup;
 };
+
+type CreateFieldHoverInteractionOptions = {
+  options: RenderFieldElementOptions;
+  fieldGroup: Konva.Group;
+  fieldRect: Konva.Rect;
+};
+
+/**
+ * Adds smooth transition-like behavior for hover effects to the field group and rectangle.
+ */
+export const createFieldHoverInteraction = ({
+  options,
+  fieldGroup,
+  fieldRect,
+}: CreateFieldHoverInteractionOptions) => {
+  const { mode } = options;
+
+  if (mode === 'export' || !options.color) {
+    return;
+  }
+
+  const hoverColor = RECIPIENT_COLOR_STYLES[options.color].baseRingHover;
+
+  fieldGroup.on('mouseover', () => {
+    new Konva.Tween({
+      node: fieldRect,
+      duration: 0.3,
+      fill: hoverColor,
+    }).play();
+  });
+
+  fieldGroup.on('mouseout', () => {
+    new Konva.Tween({
+      node: fieldRect,
+      duration: 0.3,
+      fill: DEFAULT_RECT_BACKGROUND,
+    }).play();
+  });
+
+  fieldGroup.on('transformstart', () => {
+    new Konva.Tween({
+      node: fieldRect,
+      duration: 0.3,
+      fill: hoverColor,
+    }).play();
+  });
+
+  fieldGroup.on('transformend', () => {
+    new Konva.Tween({
+      node: fieldRect,
+      duration: 0.3,
+      fill: DEFAULT_RECT_BACKGROUND,
+    }).play();
+  });
+};

packages/lib/universal/field-renderer/render-checkbox-field.ts

@@ -3,7 +3,9 @@ import { match } from 'ts-pattern';
 
 import { DEFAULT_STANDARD_FONT_SIZE } from '../../constants/pdf';
 import type { TCheckboxFieldMeta } from '../../types/field-meta';
+import { parseCheckboxCustomText } from '../../utils/fields';
 import {
+  createFieldHoverInteraction,
   konvaTextFill,
   konvaTextFontFamily,
   upsertFieldGroup,
@@ -26,25 +28,27 @@ export const renderCheckboxFieldElement = (
 ) => {
   const { pageWidth, pageHeight, pageLayer, mode } = options;
 
-  const isFirstRender = !pageLayer.findOne(`#${field.renderId}`);
+  const { fieldWidth, fieldHeight } = calculateFieldPosition(field, pageWidth, pageHeight);
-
-  const fieldGroup = upsertFieldGroup(field, options);
-
-  // Clear previous children and listeners to re-render fresh.
-  fieldGroup.removeChildren();
-  fieldGroup.off('transform');
-
-  fieldGroup.add(upsertFieldRect(field, options));
 
   const checkboxMeta: TCheckboxFieldMeta | null = (field.fieldMeta as TCheckboxFieldMeta) || null;
   const checkboxValues = checkboxMeta?.values || [];
 
-  const fontSize = checkboxMeta?.fontSize || DEFAULT_STANDARD_FONT_SIZE;
+  const isFirstRender = !pageLayer.findOne(`#${field.renderId}`);
+
+  // Clear previous children and listeners to re-render fresh.
+  const fieldGroup = upsertFieldGroup(field, options);
+  fieldGroup.removeChildren();
+  fieldGroup.off('transform');
 
   if (isFirstRender) {
     pageLayer.add(fieldGroup);
   }
 
+  const fieldRect = upsertFieldRect(field, options);
+  fieldGroup.add(fieldRect);
+
+  const fontSize = checkboxMeta?.fontSize || DEFAULT_STANDARD_FONT_SIZE;
+
   // Handle rescaling items during transforms.
   fieldGroup.on('transform', () => {
     const groupScaleX = fieldGroup.scaleX();
@@ -127,11 +131,9 @@ export const renderCheckboxFieldElement = (
     pageLayer.batchDraw();
   });
 
-  const { fieldWidth, fieldHeight } = calculateFieldPosition(field, pageWidth, pageHeight);
+  const checkedValues: number[] = field.customText ? parseCheckboxCustomText(field.customText) : [];
 
-  const checkedValues: number[] = field.customText ? JSON.parse(field.customText) : [];
+  checkboxValues.forEach(({ value, checked }, index) => {
-
-  checkboxValues.forEach(({ id, value, checked }, index) => {
     const isCheckboxChecked = match(mode)
       .with('edit', () => checked)
       .with('sign', () => checkedValues.includes(index))
@@ -145,8 +147,6 @@ export const renderCheckboxFieldElement = (
       })
       .exhaustive();
 
-    console.log('wtf?');
-
     const itemSize = calculateCheckboxSize(fontSize);
 
     const { itemInputX, itemInputY, textX, textY, textWidth, textHeight } =
@@ -171,7 +171,7 @@ export const renderCheckboxFieldElement = (
       width: itemSize,
       height: itemSize,
       stroke: '#374151',
-      strokeWidth: 2,
+      strokeWidth: 1.5,
       cornerRadius: 2,
       fill: 'white',
     });
@@ -211,6 +211,8 @@ export const renderCheckboxFieldElement = (
     fieldGroup.add(text);
   });
 
+  createFieldHoverInteraction({ fieldGroup, fieldRect, options });
+
   return {
     fieldGroup,
     isFirstRender,

packages/lib/universal/field-renderer/render-dropdown-field.ts

@@ -1,8 +1,10 @@
+import { FieldType } from '@prisma/client';
 import Konva from 'konva';
 
 import { DEFAULT_STANDARD_FONT_SIZE } from '../../constants/pdf';
 import type { TDropdownFieldMeta } from '../../types/field-meta';
 import {
+  createFieldHoverInteraction,
   konvaTextFill,
   konvaTextFontFamily,
   upsertFieldGroup,
@@ -48,79 +50,30 @@ export const renderDropdownFieldElement = (
   field: FieldToRender,
   options: RenderFieldElementOptions,
 ) => {
-  const { pageWidth, pageHeight, pageLayer, mode } = options;
+  const { pageWidth, pageHeight, pageLayer, mode, translations } = options;
+
+  const { fieldWidth, fieldHeight } = calculateFieldPosition(field, pageWidth, pageHeight);
+
+  const dropdownMeta: TDropdownFieldMeta | null = (field.fieldMeta as TDropdownFieldMeta) || null;
+
+  let selectedValue = translations?.[FieldType.DROPDOWN] || 'Select Option';
 
   const isFirstRender = !pageLayer.findOne(`#${field.renderId}`);
 
-  const fieldGroup = upsertFieldGroup(field, options);
-
   // Clear previous children to re-render fresh.
+  const fieldGroup = upsertFieldGroup(field, options);
   fieldGroup.removeChildren();
+  fieldGroup.off('transform');
 
-  fieldGroup.add(upsertFieldRect(field, options));
+  const fieldRect = upsertFieldRect(field, options);
+  fieldGroup.add(fieldRect);
 
   if (isFirstRender) {
     pageLayer.add(fieldGroup);
-
-    fieldGroup.on('transform', () => {
-      const groupScaleX = fieldGroup.scaleX();
-      const groupScaleY = fieldGroup.scaleY();
-
-      const fieldRect = fieldGroup.findOne('.field-rect');
-      const text = fieldGroup.findOne('.dropdown-selected-text');
-      const arrow = fieldGroup.findOne('.dropdown-arrow');
-
-      if (!fieldRect || !text || !arrow) {
-        console.log('fieldRect or text or arrow not found');
-        return;
-      }
-
-      const rectWidth = fieldRect.width() * groupScaleX;
-      const rectHeight = fieldRect.height() * groupScaleY;
-
-      const { arrowX, arrowY, textX, textY, textWidth, textHeight } = calculateDropdownPosition({
-        fieldWidth: rectWidth,
-        fieldHeight: rectHeight,
-      });
-
-      arrow.setAttrs({
-        x: arrowX,
-        y: arrowY,
-        scaleX: 1,
-        scaleY: 1,
-      });
-
-      text.setAttrs({
-        scaleX: 1,
-        scaleY: 1,
-        x: textX,
-        y: textY,
-        width: textWidth,
-        height: textHeight,
-      });
-
-      fieldRect.setAttrs({
-        width: rectWidth,
-        height: rectHeight,
-      });
-
-      fieldGroup.scale({
-        x: 1,
-        y: 1,
-      });
-
-      pageLayer.batchDraw();
-    });
   }
 
-  const dropdownMeta: TDropdownFieldMeta | null = (field.fieldMeta as TDropdownFieldMeta) || null;
-  const { fieldWidth, fieldHeight } = calculateFieldPosition(field, pageWidth, pageHeight);
-
   const fontSize = dropdownMeta?.fontSize || DEFAULT_STANDARD_FONT_SIZE;
 
-  // Todo: Envelopes - Translations
-  let selectedValue = 'Select Option';
-
   if (field.inserted) {
     selectedValue = field.customText;
   }
@@ -158,27 +111,63 @@ export const renderDropdownFieldElement = (
     visible: mode !== 'export',
   });
 
-  // Add hover state for dropdown
-  fieldGroup.on('mouseenter', () => {
-    // dropdownContainer.stroke('#2563EB');
-    // dropdownContainer.strokeWidth(2);
-    document.body.style.cursor = 'pointer';
-    pageLayer.batchDraw();
-  });
-
-  fieldGroup.on('mouseleave', () => {
-    // dropdownContainer.stroke('#374151');
-    // dropdownContainer.strokeWidth(2);
-    document.body.style.cursor = 'default';
-    pageLayer.batchDraw();
-  });
-
   fieldGroup.add(selectedText);
 
   if (!field.inserted || mode === 'export') {
     fieldGroup.add(arrow);
   }
 
+  fieldGroup.on('transform', () => {
+    const groupScaleX = fieldGroup.scaleX();
+    const groupScaleY = fieldGroup.scaleY();
+
+    const fieldRect = fieldGroup.findOne('.field-rect');
+    const text = fieldGroup.findOne('.dropdown-selected-text');
+    const arrow = fieldGroup.findOne('.dropdown-arrow');
+
+    if (!fieldRect || !text || !arrow) {
+      return;
+    }
+
+    const rectWidth = fieldRect.width() * groupScaleX;
+    const rectHeight = fieldRect.height() * groupScaleY;
+
+    const { arrowX, arrowY, textX, textY, textWidth, textHeight } = calculateDropdownPosition({
+      fieldWidth: rectWidth,
+      fieldHeight: rectHeight,
+    });
+
+    arrow.setAttrs({
+      x: arrowX,
+      y: arrowY,
+      scaleX: 1,
+      scaleY: 1,
+    });
+
+    text.setAttrs({
+      scaleX: 1,
+      scaleY: 1,
+      x: textX,
+      y: textY,
+      width: textWidth,
+      height: textHeight,
+    });
+
+    fieldRect.setAttrs({
+      width: rectWidth,
+      height: rectHeight,
+    });
+
+    fieldGroup.scale({
+      x: 1,
+      y: 1,
+    });
+
+    pageLayer.batchDraw();
+  });
+
+  createFieldHoverInteraction({ fieldGroup, fieldRect, options });
+
   return {
     fieldGroup,
     isFirstRender,

packages/lib/universal/field-renderer/render-radio-field.ts

@@ -4,6 +4,7 @@ import { match } from 'ts-pattern';
 import { DEFAULT_STANDARD_FONT_SIZE } from '../../constants/pdf';
 import type { TRadioFieldMeta } from '../../types/field-meta';
 import {
+  createFieldHoverInteraction,
   konvaTextFill,
   konvaTextFontFamily,
   upsertFieldGroup,
@@ -26,25 +27,24 @@ export const renderRadioFieldElement = (
 ) => {
   const { pageWidth, pageHeight, pageLayer, mode } = options;
 
-  const isFirstRender = !pageLayer.findOne(`#${field.renderId}`);
-
-  const fieldGroup = upsertFieldGroup(field, options);
-
-  // Clear previous children to re-render fresh
-  fieldGroup.removeChildren();
-
-  fieldGroup.add(upsertFieldRect(field, options));
-
   const radioMeta: TRadioFieldMeta | null = (field.fieldMeta as TRadioFieldMeta) || null;
   const radioValues = radioMeta?.values || [];
 
-  const fontSize = radioMeta?.fontSize || DEFAULT_STANDARD_FONT_SIZE;
+  const isFirstRender = !pageLayer.findOne(`#${field.renderId}`);
+
+  // Clear previous children and listeners to re-render fresh
+  const fieldGroup = upsertFieldGroup(field, options);
+  fieldGroup.removeChildren();
+  fieldGroup.off('transform');
 
   if (isFirstRender) {
     pageLayer.add(fieldGroup);
   }
 
-  fieldGroup.off('transform');
+  const fieldRect = upsertFieldRect(field, options);
+  fieldGroup.add(fieldRect);
+
+  const fontSize = radioMeta?.fontSize || DEFAULT_STANDARD_FONT_SIZE;
 
   // Handle rescaling items during transforms.
   fieldGroup.on('transform', () => {
@@ -159,7 +159,7 @@ export const renderRadioFieldElement = (
       y: itemInputY,
       radius: calculateRadioSize(fontSize) / 2,
       stroke: '#374151',
-      strokeWidth: 2,
+      strokeWidth: 1.5,
       fill: 'white',
     });
 
@@ -195,6 +195,8 @@ export const renderRadioFieldElement = (
     fieldGroup.add(text);
   });
 
+  createFieldHoverInteraction({ fieldGroup, fieldRect, options });
+
   return {
     fieldGroup,
     isFirstRender,

packages/lib/universal/field-renderer/render-signature-field.ts

@@ -1,13 +1,12 @@
 import Konva from 'konva';
 
-import {
-  DEFAULT_RECT_BACKGROUND,
-  RECIPIENT_COLOR_STYLES,
-} from '@documenso/ui/lib/recipient-colors';
-
 import { DEFAULT_SIGNATURE_TEXT_FONT_SIZE } from '../../constants/pdf';
 import { AppError } from '../../errors/app-error';
-import { upsertFieldGroup, upsertFieldRect } from './field-generic-items';
+import {
+  createFieldHoverInteraction,
+  upsertFieldGroup,
+  upsertFieldRect,
+} from './field-generic-items';
 import { calculateFieldPosition } from './field-renderer';
 import type { FieldToRender, RenderFieldElementOptions } from './field-renderer';
 
@@ -212,33 +211,7 @@ export const renderSignatureFieldElement = (
     fieldRect.opacity(0);
   }
 
-  // Todo: Doesn't work.
+  createFieldHoverInteraction({ fieldGroup, fieldRect, options });
-  if (mode !== 'export') {
-    const hoverColor = options.color
-      ? RECIPIENT_COLOR_STYLES[options.color].baseRingHover
-      : '#e5e7eb';
-
-    // Todo: Envelopes - On hover add text color
-
-    // Add smooth transition-like behavior for hover effects
-    fieldGroup.on('mouseover', () => {
-      new Konva.Tween({
-        node: fieldRect,
-        duration: 0.3,
-        fill: hoverColor,
-      }).play();
-    });
-
-    fieldGroup.on('mouseout', () => {
-      new Konva.Tween({
-        node: fieldRect,
-        duration: 0.3,
-        fill: DEFAULT_RECT_BACKGROUND,
-      }).play();
-    });
-
-    fieldGroup.add(fieldRect);
-  }
 
   return {
     fieldGroup,

packages/lib/universal/field-renderer/render-text-field.ts

@@ -1,13 +1,9 @@
 import Konva from 'konva';
 
-import {
-  DEFAULT_RECT_BACKGROUND,
-  RECIPIENT_COLOR_STYLES,
-} from '@documenso/ui/lib/recipient-colors';
-
 import { DEFAULT_STANDARD_FONT_SIZE } from '../../constants/pdf';
 import type { TTextFieldMeta } from '../../types/field-meta';
 import {
+  createFieldHoverInteraction,
   konvaTextFill,
   konvaTextFontFamily,
   upsertFieldGroup,
@@ -19,12 +15,12 @@ import { calculateFieldPosition } from './field-renderer';
 const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOptions): Konva.Text => {
   const { pageWidth, pageHeight, mode = 'edit', pageLayer, translations } = options;
 
-  const fieldTypeName = translations?.[field.type] || field.type;
-
   const { fieldWidth, fieldHeight } = calculateFieldPosition(field, pageWidth, pageHeight);
 
   const textMeta = field.fieldMeta as TTextFieldMeta | undefined;
 
+  const fieldTypeName = translations?.[field.type] || field.type;
+
   const fieldText: Konva.Text =
     pageLayer.findOne(`#${field.renderId}-text`) ||
     new Konva.Text({
@@ -118,9 +114,8 @@ export const renderTextFieldElement = (
 
   const isFirstRender = !pageLayer.findOne(`#${field.renderId}`);
 
-  const fieldGroup = upsertFieldGroup(field, options);
-
   // Clear previous children and listeners to re-render fresh.
+  const fieldGroup = upsertFieldGroup(field, options);
   fieldGroup.removeChildren();
   fieldGroup.off('transform');
 
@@ -183,33 +178,7 @@ export const renderTextFieldElement = (
     fieldRect.opacity(0);
   }
 
-  // Todo: Doesn't work.
+  createFieldHoverInteraction({ fieldGroup, fieldRect, options });
-  if (mode !== 'export') {
-    const hoverColor = options.color
-      ? RECIPIENT_COLOR_STYLES[options.color].baseRingHover
-      : '#e5e7eb';
-
-    // Todo: Envelopes - On hover add text color
-
-    // Add smooth transition-like behavior for hover effects
-    fieldGroup.on('mouseover', () => {
-      new Konva.Tween({
-        node: fieldRect,
-        duration: 0.3,
-        fill: hoverColor,
-      }).play();
-    });
-
-    fieldGroup.on('mouseout', () => {
-      new Konva.Tween({
-        node: fieldRect,
-        duration: 0.3,
-        fill: DEFAULT_RECT_BACKGROUND,
-      }).play();
-    });
-
-    fieldGroup.add(fieldRect);
-  }
 
   return {
     fieldGroup,

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

@@ -353,6 +353,13 @@ export const formatDocumentAuditLogAction = (
       }),
       identified: msg`${prefix} deleted the document`,
     }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELDS_AUTO_INSERTED }, () => ({
+      anonymous: msg({
+        message: `System auto inserted fields`,
+        context: `Audit log format`,
+      }),
+      identified: msg`System auto inserted fields`,
+    }))
     .with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_INSERTED }, () => ({
       anonymous: msg({
         message: `Field signed`,
@@ -515,6 +522,14 @@ export const formatDocumentAuditLogAction = (
         context: `Audit log format`,
       }),
     }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.ENVELOPE_ITEM_CREATED }, ({ data }) => ({
+      anonymous: msg`Envelope item created`,
+      identified: msg`${prefix} created an envelope item with title ${data.envelopeItemTitle}`,
+    }))
+    .with({ type: DOCUMENT_AUDIT_LOG_TYPE.ENVELOPE_ITEM_DELETED }, ({ data }) => ({
+      anonymous: msg`Envelope item deleted`,
+      identified: msg`${prefix} deleted an envelope item with title ${data.envelopeItemTitle}`,
+    }))
     .exhaustive();
 
   return {

packages/lib/utils/fields.ts

@@ -81,6 +81,10 @@ export const mapFieldToLegacyField = (
 };
 
 export const parseCheckboxCustomText = (customText: string): number[] => {
+  if (!customText) {
+    return [];
+  }
+
   return JSON.parse(customText);
 };
 
@@ -101,7 +105,7 @@ export const getClientSideFieldTranslations = ({ t }: I18n): Record<FieldType, s
     [FieldType.TEXT]: t(msg`Text`),
     [FieldType.CHECKBOX]: t(msg`Checkbox`),
     [FieldType.RADIO]: t(msg`Radio`),
-    [FieldType.DROPDOWN]: t(msg`Dropdown`),
+    [FieldType.DROPDOWN]: t(msg`Select Option`),
     [FieldType.SIGNATURE]: t(msg`Signature`),
     [FieldType.FREE_SIGNATURE]: t(msg`Free Signature`),
     [FieldType.INITIALS]: t(msg`Initials`),

packages/prisma/seed/initial-seed.ts

@@ -1,11 +1,22 @@
 import fs from 'node:fs';
 import path from 'node:path';
 
+import { formatAlignmentTestFields } from '@documenso/app-tests/constants/field-alignment-pdf';
+import { FIELD_META_TEST_FIELDS } from '@documenso/app-tests/constants/field-meta-pdf';
+import { isBase64Image } from '@documenso/lib/constants/signatures';
 import { incrementDocumentId } from '@documenso/lib/server-only/envelope/increment-id';
-import { prefixedId } from '@documenso/lib/universal/id';
+import { nanoid, prefixedId } from '@documenso/lib/universal/id';
 
 import { prisma } from '..';
-import { DocumentDataType, DocumentSource, EnvelopeType } from '../client';
+import {
+  DocumentDataType,
+  DocumentSource,
+  DocumentStatus,
+  EnvelopeType,
+  ReadStatus,
+  SendStatus,
+  SigningStatus,
+} from '../client';
 import { seedPendingDocument } from './documents';
 import { seedDirectTemplate, seedTemplate } from './templates';
 import { seedUser } from './users';
@@ -155,7 +166,6 @@ export const seedDatabase = async () => {
       userId: exampleUser.user.id,
       teamId: exampleUser.team.id,
     }),
-
     seedTemplate({
       title: 'Template 1',
       userId: adminUser.user.id,
@@ -166,5 +176,185 @@ export const seedDatabase = async () => {
       userId: adminUser.user.id,
       teamId: adminUser.team.id,
     }),
+    seedAlignmentTestDocument({
+      userId: exampleUser.user.id,
+      teamId: exampleUser.team.id,
+      recipientName: exampleUser.user.name || '',
+      recipientEmail: exampleUser.user.email,
+      insertFields: false,
+      status: DocumentStatus.DRAFT,
+    }),
+    seedAlignmentTestDocument({
+      userId: exampleUser.user.id,
+      teamId: exampleUser.team.id,
+      recipientName: exampleUser.user.name || '',
+      recipientEmail: exampleUser.user.email,
+      insertFields: true,
+      status: DocumentStatus.PENDING,
+    }),
+    seedAlignmentTestDocument({
+      userId: adminUser.user.id,
+      teamId: adminUser.team.id,
+      recipientName: adminUser.user.name || '',
+      recipientEmail: adminUser.user.email,
+      insertFields: false,
+      status: DocumentStatus.DRAFT,
+    }),
+    seedAlignmentTestDocument({
+      userId: adminUser.user.id,
+      teamId: adminUser.team.id,
+      recipientName: adminUser.user.name || '',
+      recipientEmail: adminUser.user.email,
+      insertFields: true,
+      status: DocumentStatus.PENDING,
+    }),
   ]);
 };
+
+export const seedAlignmentTestDocument = async ({
+  userId,
+  teamId,
+  recipientName,
+  recipientEmail,
+  insertFields,
+  status,
+}: {
+  userId: number;
+  teamId: number;
+  recipientName: string;
+  recipientEmail: string;
+  insertFields: boolean;
+  status: DocumentStatus;
+}) => {
+  const alignmentPdf = fs
+    .readFileSync(path.join(__dirname, '../../../assets/field-font-alignment.pdf'))
+    .toString('base64');
+
+  const fieldMetaPdf = fs
+    .readFileSync(path.join(__dirname, '../../../assets/field-meta.pdf'))
+    .toString('base64');
+
+  const alignmentDocumentData = await createDocumentData({ documentData: alignmentPdf });
+  const fieldMetaDocumentData = await createDocumentData({ documentData: fieldMetaPdf });
+
+  const documentId = await incrementDocumentId();
+
+  const documentMeta = await prisma.documentMeta.create({
+    data: {},
+  });
+
+  const createdEnvelope = await prisma.envelope.create({
+    data: {
+      id: prefixedId('envelope'),
+      secondaryId: documentId.formattedDocumentId,
+      internalVersion: 2,
+      type: EnvelopeType.DOCUMENT,
+      documentMetaId: documentMeta.id,
+      source: DocumentSource.DOCUMENT,
+      title: `Envelope Full Field Test`,
+      status,
+      envelopeItems: {
+        createMany: {
+          data: [
+            {
+              id: prefixedId('envelope_item'),
+              title: `alignment-pdf`,
+              documentDataId: alignmentDocumentData.id,
+              order: 1,
+            },
+            {
+              id: prefixedId('envelope_item'),
+              title: `field-meta-pdf`,
+              documentDataId: fieldMetaDocumentData.id,
+              order: 2,
+            },
+          ],
+        },
+      },
+      userId,
+      teamId,
+      recipients: {
+        create: {
+          name: recipientName,
+          email: recipientEmail,
+          token: nanoid(),
+          sendStatus: status === 'DRAFT' ? SendStatus.NOT_SENT : SendStatus.SENT,
+          signingStatus: status === 'COMPLETED' ? SigningStatus.SIGNED : SigningStatus.NOT_SIGNED,
+          readStatus: status !== 'DRAFT' ? ReadStatus.OPENED : ReadStatus.NOT_OPENED,
+        },
+      },
+    },
+    include: {
+      recipients: true,
+      envelopeItems: true,
+    },
+  });
+
+  const { id, recipients, envelopeItems } = createdEnvelope;
+
+  const recipientId = recipients[0].id;
+  const envelopeItemAlignmentItem = envelopeItems.find((item) => item.order === 1)?.id;
+  const envelopeItemFieldMetaItem = envelopeItems.find((item) => item.order === 2)?.id;
+
+  if (!envelopeItemAlignmentItem || !envelopeItemFieldMetaItem) {
+    throw new Error('Envelope item not found');
+  }
+
+  await Promise.all(
+    formatAlignmentTestFields.map(async (field) => {
+      await prisma.field.create({
+        data: {
+          ...field,
+          recipientId,
+          envelopeItemId: envelopeItemAlignmentItem,
+          envelopeId: id,
+          customText: insertFields ? field.customText : '',
+          inserted: insertFields,
+          signature: field.signature
+            ? {
+                create: {
+                  recipientId,
+                  signatureImageAsBase64: isBase64Image(field.signature) ? field.signature : null,
+                  typedSignature: isBase64Image(field.signature) ? null : field.signature,
+                },
+              }
+            : undefined,
+        },
+      });
+    }),
+  );
+
+  await Promise.all(
+    FIELD_META_TEST_FIELDS.map(async (field) => {
+      await prisma.field.create({
+        data: {
+          ...field,
+          recipientId,
+          envelopeItemId: envelopeItemFieldMetaItem,
+          envelopeId: id,
+          customText: insertFields ? field.customText : '',
+          inserted: insertFields,
+          signature: field.signature
+            ? {
+                create: {
+                  recipientId,
+                  signatureImageAsBase64: isBase64Image(field.signature) ? field.signature : null,
+                  typedSignature: isBase64Image(field.signature) ? null : field.signature,
+                },
+              }
+            : undefined,
+        },
+      });
+    }),
+  );
+
+  return await prisma.envelope.findFirstOrThrow({
+    where: {
+      id: createdEnvelope.id,
+    },
+    include: {
+      recipients: true,
+      envelopeItems: true,
+    },
+  });
+};

packages/trpc/server/envelope-router/attachment/create-attachment.ts

@@ -13,7 +13,7 @@ export const createAttachmentRoute = authenticatedProcedure
       path: '/envelope/attachment/create',
       summary: 'Create attachment',
       description: 'Create a new attachment for an envelope',
-      tags: ['Envelope'],
+      tags: ['Envelope Attachment'],
     },
   })
   .input(ZCreateAttachmentRequestSchema)

packages/trpc/server/envelope-router/attachment/delete-attachment.ts

@@ -13,7 +13,7 @@ export const deleteAttachmentRoute = authenticatedProcedure
       path: '/envelope/attachment/delete',
       summary: 'Delete attachment',
       description: 'Delete an attachment from an envelope',
-      tags: ['Envelope'],
+      tags: ['Envelope Attachment'],
     },
   })
   .input(ZDeleteAttachmentRequestSchema)

packages/trpc/server/envelope-router/attachment/find-attachments.ts

@@ -2,20 +2,20 @@ import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { findAttachmentsByEnvelopeId } from '@documenso/lib/server-only/envelope-attachment/find-attachments-by-envelope-id';
 import { findAttachmentsByToken } from '@documenso/lib/server-only/envelope-attachment/find-attachments-by-token';
 
-import { procedure } from '../../trpc';
+import { maybeAuthenticatedProcedure } from '../../trpc';
 import {
   ZFindAttachmentsRequestSchema,
   ZFindAttachmentsResponseSchema,
 } from './find-attachments.types';
 
-export const findAttachmentsRoute = procedure
+export const findAttachmentsRoute = maybeAuthenticatedProcedure
   .meta({
     openapi: {
       method: 'GET',
       path: '/envelope/attachment',
       summary: 'Find attachments',
       description: 'Find all attachments for an envelope',
-      tags: ['Envelope'],
+      tags: ['Envelope Attachment'],
     },
   })
   .input(ZFindAttachmentsRequestSchema)

packages/trpc/server/envelope-router/attachment/update-attachment.ts

@@ -13,7 +13,7 @@ export const updateAttachmentRoute = authenticatedProcedure
       path: '/envelope/attachment/update',
       summary: 'Update attachment',
       description: 'Update an existing attachment',
-      tags: ['Envelope'],
+      tags: ['Envelope Attachment'],
     },
   })
   .input(ZUpdateAttachmentRequestSchema)

packages/trpc/server/envelope-router/create-envelope-items.ts

@@ -1,6 +1,8 @@
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { getEnvelopeWhereInput } from '@documenso/lib/server-only/envelope/get-envelope-by-id';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
 import { prefixedId } from '@documenso/lib/universal/id';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { canEnvelopeItemsBeModified } from '@documenso/lib/utils/envelope';
 import { prisma } from '@documenso/prisma';
 
@@ -11,11 +13,21 @@ import {
 } from './create-envelope-items.types';
 
 export const createEnvelopeItemsRoute = authenticatedProcedure
+  // Todo: Envelopes - Pending direct uploads
+  .meta({
+    openapi: {
+      method: 'POST',
+      path: '/envelope/item/create-many',
+      summary: 'Create envelope items',
+      description: 'Create multiple envelope items for an envelope',
+      tags: ['Envelope Item'],
+    },
+  })
   .input(ZCreateEnvelopeItemsRequestSchema)
   .output(ZCreateEnvelopeItemsResponseSchema)
   .mutation(async ({ input, ctx }) => {
-    const { user, teamId } = ctx;
+    const { user, teamId, metadata } = ctx;
-    const { envelopeId, items } = input;
+    const { envelopeId, data: items } = input;
 
     ctx.logger.info({
       input: {
@@ -110,17 +122,39 @@ export const createEnvelopeItemsRoute = authenticatedProcedure
     const currentHighestOrderValue =
       envelope.envelopeItems[envelope.envelopeItems.length - 1]?.order ?? 1;
 
-    const result = await prisma.envelopeItem.createManyAndReturn({
+    const result = await prisma.$transaction(async (tx) => {
-      data: items.map((item) => ({
+      const createdItems = await tx.envelopeItem.createManyAndReturn({
-        id: prefixedId('envelope_item'),
+        data: items.map((item) => ({
-        envelopeId,
+          id: prefixedId('envelope_item'),
-        title: item.title,
+          envelopeId,
-        documentDataId: item.documentDataId,
+          title: item.title,
-        order: currentHighestOrderValue + 1,
+          documentDataId: item.documentDataId,
-      })),
+          order: currentHighestOrderValue + 1,
-      include: {
+        })),
-        documentData: true,
+        include: {
-      },
+          documentData: true,
+        },
+      });
+
+      await tx.documentAuditLog.createMany({
+        data: createdItems.map((item) =>
+          createDocumentAuditLogData({
+            type: DOCUMENT_AUDIT_LOG_TYPE.ENVELOPE_ITEM_CREATED,
+            envelopeId: envelope.id,
+            data: {
+              envelopeItemId: item.id,
+              envelopeItemTitle: item.title,
+            },
+            user: {
+              name: user.name,
+              email: user.email,
+            },
+            requestMetadata: metadata.requestMetadata,
+          }),
+        ),
+      });
+
+      return createdItems;
     });
 
     return {

packages/trpc/server/envelope-router/create-envelope-items.types.ts

@@ -7,7 +7,7 @@ import { ZDocumentTitleSchema } from '../document-router/schema';
 
 export const ZCreateEnvelopeItemsRequestSchema = z.object({
   envelopeId: z.string(),
-  items: z
+  data: z
     .object({
       title: ZDocumentTitleSchema,
       documentDataId: z.string(),

packages/trpc/server/envelope-router/create-envelope.ts

@@ -9,6 +9,15 @@ import {
 } from './create-envelope.types';
 
 export const createEnvelopeRoute = authenticatedProcedure
+  // Todo: Envelopes - Pending direct uploads
+  // .meta({
+  //   openapi: {
+  //     method: 'POST',
+  //     path: '/envelope/create',
+  //     summary: 'Create envelope',
+  //     tags: ['Envelope'],
+  //   },
+  // })
   .input(ZCreateEnvelopeRequestSchema)
   .output(ZCreateEnvelopeResponseSchema)
   .mutation(async ({ input, ctx }) => {

packages/trpc/server/envelope-router/create-envelope.types.ts

@@ -24,16 +24,6 @@ import {
 } from '../document-router/schema';
 import { ZCreateRecipientSchema } from '../recipient-router/schema';
 
-// Currently not in use until we allow passthrough documents on create.
-// export const createEnvelopeMeta: TrpcRouteMeta = {
-//   openapi: {
-//     method: 'POST',
-//     path: '/envelope/create',
-//     summary: 'Create envelope',
-//     tags: ['Envelope'],
-//   },
-// };
-
 export const ZCreateEnvelopeRequestSchema = z.object({
   title: ZDocumentTitleSchema,
   type: z.nativeEnum(EnvelopeType),

packages/trpc/server/envelope-router/delete-envelope-item.ts

@@ -1,5 +1,7 @@
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { getEnvelopeWhereInput } from '@documenso/lib/server-only/envelope/get-envelope-by-id';
+import { DOCUMENT_AUDIT_LOG_TYPE } from '@documenso/lib/types/document-audit-logs';
+import { createDocumentAuditLogData } from '@documenso/lib/utils/document-audit-logs';
 import { canEnvelopeItemsBeModified } from '@documenso/lib/utils/envelope';
 import { prisma } from '@documenso/prisma';
 
@@ -10,10 +12,19 @@ import {
 } from './delete-envelope-item.types';
 
 export const deleteEnvelopeItemRoute = authenticatedProcedure
+  .meta({
+    openapi: {
+      method: 'POST',
+      path: '/envelope/item/delete',
+      summary: 'Delete envelope item',
+      description: 'Delete an envelope item from an envelope',
+      tags: ['Envelope Item'],
+    },
+  })
   .input(ZDeleteEnvelopeItemRequestSchema)
   .output(ZDeleteEnvelopeItemResponseSchema)
   .mutation(async ({ input, ctx }) => {
-    const { user, teamId } = ctx;
+    const { user, teamId, metadata } = ctx;
     const { envelopeId, envelopeItemId } = input;
 
     ctx.logger.info({
@@ -52,29 +63,48 @@ export const deleteEnvelopeItemRoute = authenticatedProcedure
       });
     }
 
-    const deletedEnvelopeItem = await prisma.envelopeItem.delete({
+    const result = await prisma.$transaction(async (tx) => {
-      where: {
+      const deletedEnvelopeItem = await tx.envelopeItem.delete({
-        id: envelopeItemId,
+        where: {
-        envelopeId: envelope.id,
+          id: envelopeItemId,
-      },
+          envelopeId: envelope.id,
-      select: {
+        },
-        documentData: {
+        select: {
-          select: {
+          id: true,
-            id: true,
+          title: true,
+          documentData: {
+            select: {
+              id: true,
+            },
           },
         },
-      },
+      });
+
+      await tx.documentAuditLog.create({
+        data: createDocumentAuditLogData({
+          type: DOCUMENT_AUDIT_LOG_TYPE.ENVELOPE_ITEM_DELETED,
+          envelopeId: envelope.id,
+          data: {
+            envelopeItemId: deletedEnvelopeItem.id,
+            envelopeItemTitle: deletedEnvelopeItem.title,
+          },
+          user: {
+            name: user.name,
+            email: user.email,
+          },
+          requestMetadata: metadata.requestMetadata,
+        }),
+      });
+
+      return deletedEnvelopeItem;
     });
 
-    // Todo: Envelopes [ASK] - Should we delete the document data?
     await prisma.documentData.delete({
       where: {
-        id: deletedEnvelopeItem.documentData.id,
+        id: result.documentData.id,
         envelopeItem: {
           is: null,
         },
       },
     });
-
-    // Todo: Envelope [AUDIT_LOGS]
   });

packages/trpc/server/envelope-router/delete-envelope.ts

@@ -1,8 +1,10 @@
 import { EnvelopeType } from '@prisma/client';
 import { match } from 'ts-pattern';
 
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { deleteDocument } from '@documenso/lib/server-only/document/delete-document';
 import { deleteTemplate } from '@documenso/lib/server-only/template/delete-template';
+import { prisma } from '@documenso/prisma';
 
 import { authenticatedProcedure } from '../trpc';
 import {
@@ -11,12 +13,19 @@ import {
 } from './delete-envelope.types';
 
 export const deleteEnvelopeRoute = authenticatedProcedure
-  // .meta(deleteEnvelopeMeta)
+  .meta({
+    openapi: {
+      method: 'POST',
+      path: '/envelope/delete',
+      summary: 'Delete envelope',
+      tags: ['Envelope'],
+    },
+  })
   .input(ZDeleteEnvelopeRequestSchema)
   .output(ZDeleteEnvelopeResponseSchema)
   .mutation(async ({ input, ctx }) => {
     const { teamId } = ctx;
-    const { envelopeId, envelopeType } = input;
+    const { envelopeId } = input;
 
     ctx.logger.info({
       input: {
@@ -24,7 +33,22 @@ export const deleteEnvelopeRoute = authenticatedProcedure
       },
     });
 
-    await match(envelopeType)
+    const unsafeEnvelope = await prisma.envelope.findUnique({
+      where: {
+        id: envelopeId,
+      },
+      select: {
+        type: true,
+      },
+    });
+
+    if (!unsafeEnvelope) {
+      throw new AppError(AppErrorCode.NOT_FOUND, {
+        message: 'Envelope not found',
+      });
+    }
+
+    await match(unsafeEnvelope.type)
       .with(EnvelopeType.DOCUMENT, async () =>
         deleteDocument({
           userId: ctx.user.id,

packages/trpc/server/envelope-router/delete-envelope.types.ts

@@ -1,18 +1,7 @@
-import { EnvelopeType } from '@prisma/client';
 import { z } from 'zod';
 
-// export const deleteEnvelopeMeta: TrpcRouteMeta = {
-//   openapi: {
-//     method: 'POST',
-//     path: '/envelope/delete',
-//     summary: 'Delete envelope',
-//     tags: ['Envelope'],
-//   },
-// };
-
 export const ZDeleteEnvelopeRequestSchema = z.object({
   envelopeId: z.string(),
-  envelopeType: z.nativeEnum(EnvelopeType),
 });
 
 export const ZDeleteEnvelopeResponseSchema = z.void();

packages/trpc/server/envelope-router/distribute-envelope.ts

@@ -8,7 +8,15 @@ import {
 } from './distribute-envelope.types';
 
 export const distributeEnvelopeRoute = authenticatedProcedure
-  // .meta(distributeEnvelopeMeta)
+  .meta({
+    openapi: {
+      method: 'POST',
+      path: '/envelope/distribute',
+      summary: 'Distribute envelope',
+      description: 'Send the envelope to recipients based on your distribution method',
+      tags: ['Envelope'],
+    },
+  })
   .input(ZDistributeEnvelopeRequestSchema)
   .output(ZDistributeEnvelopeResponseSchema)
   .mutation(async ({ input, ctx }) => {

packages/trpc/server/envelope-router/distribute-envelope.types.ts

@@ -2,16 +2,6 @@ import { z } from 'zod';
 
 import { ZDocumentMetaUpdateSchema } from '@documenso/lib/types/document-meta';
 
-// export const distributeEnvelopeMeta: TrpcRouteMeta = {
-//   openapi: {
-//     method: 'POST',
-//     path: '/envelope/distribute',
-//     summary: 'Distribute envelope',
-//     description: 'Send the document out to recipients based on your distribution method',
-//     tags: ['Envelope'],
-//   },
-// };
-
 export const ZDistributeEnvelopeRequestSchema = z.object({
   envelopeId: z.string().describe('The ID of the envelope to send.'),
   meta: ZDocumentMetaUpdateSchema.pick({