fix: move open meta around

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

@@ -49,20 +49,20 @@ export const DocumentDuplicateDialog = ({
       },
     );
 
-  const envelopeItems = envelopeItemsPayload?.envelopeItems || [];
+  const envelopeItems = envelopeItemsPayload?.data || [];
 
   const documentsPath = formatDocumentsPath(team.url);
 
   const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
     trpcReact.envelope.duplicate.useMutation({
-      onSuccess: async ({ duplicatedEnvelopeId }) => {
+      onSuccess: async ({ id }) => {
         toast({
           title: _(msg`Document Duplicated`),
           description: _(msg`Your document has been successfully duplicated.`),
           duration: 5000,
         });
 
-        await navigate(`${documentsPath}/${duplicatedEnvelopeId}/edit`);
+        await navigate(`${documentsPath}/${id}/edit`);
         onOpenChange(false);
       },
     });

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

@@ -61,12 +61,12 @@ export const EnvelopeDownloadDialog = ({
         access: token ? { type: 'recipient', token } : { type: 'user' },
       },
       {
-        initialData: initialEnvelopeItems ? { envelopeItems: initialEnvelopeItems } : undefined,
+        initialData: initialEnvelopeItems ? { data: initialEnvelopeItems } : undefined,
         enabled: open,
       },
     );
 
-  const envelopeItems = envelopeItemsPayload?.envelopeItems || [];
+  const envelopeItems = envelopeItemsPayload?.data || [];
 
   const onDownload = async (
     envelopeItem: EnvelopeItemToDownload,

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

@@ -43,7 +43,7 @@ export const EnvelopeDuplicateDialog = ({
 
   const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
     trpc.envelope.duplicate.useMutation({
-      onSuccess: async ({ duplicatedEnvelopeId }) => {
+      onSuccess: async ({ id }) => {
         toast({
           title: t`Envelope Duplicated`,
           description: t`Your envelope has been successfully duplicated.`,
@@ -55,7 +55,7 @@ export const EnvelopeDuplicateDialog = ({
             ? formatDocumentsPath(team.url)
             : formatTemplatesPath(team.url);
 
-        await navigate(`${path}/${duplicatedEnvelopeId}/edit`);
+        await navigate(`${path}/${id}/edit`);
         setOpen(false);
       },
     });

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

@@ -143,7 +143,7 @@ export function TemplateUseDialog({
     },
   );
 
-  const envelopeItems = response?.envelopeItems ?? [];
+  const envelopeItems = response?.data ?? [];
 
   const { mutateAsync: createDocumentFromTemplate } =
     trpc.template.createDocumentFromTemplate.useMutation();

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

@@ -218,7 +218,7 @@ export const DocumentSigningPageViewV2 = () => {
               )}
 
               {/* Mobile widget - Additional padding to allow users to scroll */}
-              <div className="block pb-16 md:hidden">
+              <div className="block pb-16 lg:hidden">
                 <DocumentSigningMobileWidget />
               </div>
             </div>

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

@@ -201,7 +201,7 @@ export const EnvelopeEditorPreviewPage = () => {
       envelope={envelope}
       token={undefined}
       fields={fieldsWithPlaceholders}
-      recipientIds={envelope.recipients.map((recipient) => recipient.id)}
+      recipients={envelope.recipients}
       overrideSettings={{
         mode: 'export',
       }}

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

@@ -67,8 +67,8 @@ export const EnvelopeEditorUploadPage = () => {
 
   const { mutateAsync: createEnvelopeItems, isPending: isCreatingEnvelopeItems } =
     trpc.envelope.item.createMany.useMutation({
-      onSuccess: (data) => {
-        const createdEnvelopes = data.createdEnvelopeItems.filter(
+      onSuccess: ({ data }) => {
+        const createdEnvelopes = data.filter(
           (item) => !envelope.envelopeItems.find((envelopeItem) => envelopeItem.id === item.id),
         );
 
@@ -79,10 +79,10 @@ export const EnvelopeEditorUploadPage = () => {
     });
 
   const { mutateAsync: updateEnvelopeItems } = trpc.envelope.item.updateMany.useMutation({
-    onSuccess: (data) => {
+    onSuccess: ({ data }) => {
       setLocalEnvelope({
         envelopeItems: envelope.envelopeItems.map((originalItem) => {
-          const updatedItem = data.updatedEnvelopeItems.find((item) => item.id === originalItem.id);
+          const updatedItem = data.find((item) => item.id === originalItem.id);
 
           if (updatedItem) {
             return {
@@ -126,7 +126,7 @@ export const EnvelopeEditorUploadPage = () => {
       formData.append('files', file);
     }
 
-    const { createdEnvelopeItems } = await createEnvelopeItems(formData).catch((error) => {
+    const { data } = await createEnvelopeItems(formData).catch((error) => {
       console.error(error);
 
       // Set error state on files in batch upload.
@@ -148,7 +148,7 @@ export const EnvelopeEditorUploadPage = () => {
       );
 
       return filteredFiles.concat(
-        createdEnvelopeItems.map((item) => ({
+        data.map((item) => ({
           id: item.id,
           envelopeItemId: item.id,
           title: item.title,

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

@@ -1,6 +1,7 @@
 import { useEffect, useMemo } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
+import { type Recipient, SigningStatus } from '@prisma/client';
 import type Konva from 'konva';
 
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
@@ -8,12 +9,23 @@ import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/e
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
+import { EnvelopeRecipientFieldTooltip } from '@documenso/ui/components/document/envelope-recipient-field-tooltip';
+
+type GenericLocalField = TEnvelope['fields'][number] & {
+  recipient: Pick<Recipient, 'id' | 'name' | 'email' | 'signingStatus'>;
+};
 
 export default function EnvelopeGenericPageRenderer() {
   const { i18n } = useLingui();
 
-  const { currentEnvelopeItem, fields, getRecipientColorKey, setRenderError, overrideSettings } =
-    useCurrentEnvelopeRender();
+  const {
+    currentEnvelopeItem,
+    fields,
+    recipients,
+    getRecipientColorKey,
+    setRenderError,
+    overrideSettings,
+  } = useCurrentEnvelopeRender();
 
   const {
     stage,
@@ -29,21 +41,38 @@ export default function EnvelopeGenericPageRenderer() {
 
   const { _className, scale } = pageContext;
 
-  const localPageFields = useMemo(
-    () =>
-      fields.filter(
+  const localPageFields = useMemo((): GenericLocalField[] => {
+    return fields
+      .filter(
         (field) =>
           field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
-      ),
-    [fields, pageContext.pageNumber],
-  );
+      )
+      .map((field) => {
+        const recipient = recipients.find((recipient) => recipient.id === field.recipientId);
 
-  const unsafeRenderFieldOnLayer = (field: TEnvelope['fields'][number]) => {
+        if (!recipient) {
+          throw new Error(`Recipient not found for field ${field.id}`);
+        }
+
+        return {
+          ...field,
+          recipient,
+        };
+      });
+  }, [fields, pageContext.pageNumber, currentEnvelopeItem?.id, recipients]);
+
+  const unsafeRenderFieldOnLayer = (field: GenericLocalField) => {
     if (!pageLayer.current) {
       console.error('Layer not loaded yet');
       return;
     }
 
+    const { recipient } = field;
+
+    const fieldTranslations = getClientSideFieldTranslations(i18n);
+
+    const isInserted = recipient.signingStatus === SigningStatus.SIGNED && field.inserted;
+
     renderField({
       scale,
       pageLayer: pageLayer.current,
@@ -54,10 +83,14 @@ export default function EnvelopeGenericPageRenderer() {
         height: Number(field.height),
         positionX: Number(field.positionX),
         positionY: Number(field.positionY),
-        customText: field.inserted ? field.customText : '',
+        customText: isInserted ? field.customText : '',
         fieldMeta: field.fieldMeta,
+        signature: {
+          signatureImageAsBase64: '',
+          typedSignature: fieldTranslations.SIGNATURE,
+        },
       },
-      translations: getClientSideFieldTranslations(i18n),
+      translations: fieldTranslations,
       pageWidth: unscaledViewport.width,
       pageHeight: unscaledViewport.height,
       color: getRecipientColorKey(field.recipientId),
@@ -66,7 +99,7 @@ export default function EnvelopeGenericPageRenderer() {
     });
   };
 
-  const renderFieldOnLayer = (field: TEnvelope['fields'][number]) => {
+  const renderFieldOnLayer = (field: GenericLocalField) => {
     try {
       unsafeRenderFieldOnLayer(field);
     } catch (err) {
@@ -122,6 +155,16 @@ export default function EnvelopeGenericPageRenderer() {
       className="relative w-full"
       key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
     >
+      {overrideSettings?.showRecipientTooltip &&
+        localPageFields.map((field) => (
+          <EnvelopeRecipientFieldTooltip
+            key={field.id}
+            field={field}
+            showFieldStatus={overrideSettings?.showRecipientSigningStatus}
+            showRecipientTooltip={overrideSettings?.showRecipientTooltip}
+          />
+        ))}
+
       {/* The element Konva will inject it's canvas into. */}
       <div className="konva-container absolute inset-0 z-10 w-full" ref={konvaContainer}></div>
 

apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx

@@ -413,7 +413,6 @@ export default function EnvelopeSignerPageRenderer() {
     }
 
     localPageFields.forEach((field) => {
-      console.log('Field changed/inserted, rendering on canvas');
       renderFieldOnLayer(field);
     });
 

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

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

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

@@ -103,7 +103,7 @@ export default function EnvelopeEditorPage({ params }: Route.ComponentProps) {
         envelope={envelope}
         token={undefined}
         fields={envelope.fields}
-        recipientIds={envelope.recipients.map((recipient) => recipient.id)}
+        recipients={envelope.recipients}
       >
         <EnvelopeEditor />
       </EnvelopeRenderProvider>

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

@@ -172,7 +172,10 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
               envelope={envelope}
               token={undefined}
               fields={envelope.fields}
-              recipientIds={envelope.recipients.map((recipient) => recipient.id)}
+              recipients={envelope.recipients}
+              overrideSettings={{
+                showRecipientTooltip: true,
+              }}
             >
               {isMultiEnvelopeItem && (
                 <EnvelopeRendererFileSelector fields={envelope.fields} className="mb-4 p-0" />

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

@@ -150,7 +150,7 @@ export const EnvelopeEditorProvider = ({
   });
 
   const envelopeRecipientSetMutationQuery = trpc.envelope.recipient.set.useMutation({
-    onSuccess: ({ recipients }) => {
+    onSuccess: ({ data: recipients }) => {
       setEnvelope((prev) => ({
         ...prev,
         recipients,
@@ -196,7 +196,7 @@ export const EnvelopeEditorProvider = ({
     });
 
     // Insert the IDs into the local fields.
-    envelopeFields.fields.forEach((field) => {
+    envelopeFields.data.forEach((field) => {
       const localField = localFields.find((localField) => localField.formId === field.formId);
 
       if (localField && !localField.id) {

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

@@ -1,10 +1,13 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import React from 'react';
 
+import type { Field, Recipient } 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 type { FieldRenderMode } from '../../universal/field-renderer/render-field';
 import { getEnvelopeDownloadUrl } from '../../utils/envelope-download';
 
 type FileData =
@@ -17,7 +20,9 @@ type FileData =
     };
 
 type EnvelopeRenderOverrideSettings = {
-  mode: 'edit' | 'sign' | 'export';
+  mode?: FieldRenderMode;
+  showRecipientTooltip?: boolean;
+  showRecipientSigningStatus?: boolean;
 };
 
 type EnvelopeRenderItem = TEnvelope['envelopeItems'][number];
@@ -27,7 +32,8 @@ type EnvelopeRenderProviderValue = {
   envelopeItems: EnvelopeRenderItem[];
   currentEnvelopeItem: EnvelopeRenderItem | null;
   setCurrentEnvelopeItem: (envelopeItemId: string) => void;
-  fields: TEnvelope['fields'];
+  fields: Field[];
+  recipients: Pick<Recipient, 'id' | 'name' | 'email' | 'signingStatus'>[];
   getRecipientColorKey: (recipientId: number) => TRecipientColor;
 
   renderError: boolean;
@@ -45,14 +51,15 @@ interface EnvelopeRenderProviderProps {
    *
    * Only pass if the CustomRenderer you are passing in wants fields.
    */
-  fields?: TEnvelope['fields'];
+  fields?: Field[];
 
   /**
-   * Optional recipient IDs used to determine the color of the fields.
+   * Optional recipient used to determine the color of the fields and hover
+   * previews.
    *
    * Only required for generic page renderers.
    */
-  recipientIds?: number[];
+  recipients?: Pick<Recipient, 'id' | 'name' | 'email' | 'signingStatus'>[];
 
   /**
    * The token to access the envelope.
@@ -87,7 +94,7 @@ export const EnvelopeRenderProvider = ({
   envelope,
   fields,
   token,
-  recipientIds = [],
+  recipients = [],
   overrideSettings,
 }: EnvelopeRenderProviderProps) => {
   // Indexed by documentDataId.
@@ -175,6 +182,11 @@ export const EnvelopeRenderProvider = ({
     }
   }, [envelope.envelopeItems]);
 
+  const recipientIds = useMemo(
+    () => recipients.map((recipient) => recipient.id).sort(),
+    [recipients],
+  );
+
   const getRecipientColorKey = useCallback(
     (recipientId: number) => {
       const recipientIndex = recipientIds.findIndex((id) => id === recipientId);
@@ -194,6 +206,7 @@ export const EnvelopeRenderProvider = ({
         currentEnvelopeItem: currentItem,
         setCurrentEnvelopeItem,
         fields: fields ?? [],
+        recipients,
         getRecipientColorKey,
         renderError,
         setRenderError,

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

@@ -19,7 +19,7 @@ export type FieldToRender = Pick<
   positionX: number;
   positionY: number;
   fieldMeta?: TFieldMetaSchema | null;
-  signature?: Signature | null;
+  signature?: Pick<Signature, 'signatureImageAsBase64' | 'typedSignature'> | null;
 };
 
 export type RenderFieldElementOptions = {

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

@@ -15,6 +15,17 @@ import { renderSignatureFieldElement } from './render-signature-field';
 export const MIN_FIELD_HEIGHT_PX = 12;
 export const MIN_FIELD_WIDTH_PX = 36;
 
+/**
+ * The render type.
+ *
+ * @default 'edit'
+ *
+ * - `edit` - The field is rendered in editor page.
+ * - `sign` - The field is rendered for the signing page.
+ * - `export` - The field is rendered for exporting and sealing into the PDF. No backgrounds, interactive elements, etc.
+ */
+export type FieldRenderMode = 'edit' | 'sign' | 'export';
+
 export type FieldToRender = Pick<
   Field,
   'envelopeItemId' | 'recipientId' | 'type' | 'page' | 'customText' | 'inserted' | 'recipientId'
@@ -25,7 +36,7 @@ export type FieldToRender = Pick<
   positionX: number;
   positionY: number;
   fieldMeta?: TFieldMetaSchema | null;
-  signature?: Signature | null;
+  signature?: Pick<Signature, 'signatureImageAsBase64' | 'typedSignature'> | null;
 };
 
 type RenderFieldOptions = {
@@ -38,16 +49,7 @@ type RenderFieldOptions = {
 
   translations: Record<FieldType, string> | null;
 
-  /**
-   * The render type.
-   *
-   * @default 'edit'
-   *
-   * - `edit` - The field is rendered in editor page.
-   * - `sign` - The field is rendered for the signing page.
-   * - `export` - The field is rendered for exporting and sealing into the PDF. No backgrounds, interactive elements, etc.
-   */
-  mode: 'edit' | 'sign' | 'export';
+  mode: FieldRenderMode;
 
   scale: number;
   editable?: boolean;

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

@@ -4,18 +4,11 @@ import { authenticatedProcedure } from '../../trpc';
 import {
   ZCreateAttachmentRequestSchema,
   ZCreateAttachmentResponseSchema,
+  createAttachmentMeta,
 } from './create-attachment.types';
 
 export const createAttachmentRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'POST',
-      path: '/envelope/attachment/create',
-      summary: 'Create attachment',
-      description: 'Create a new attachment for an envelope',
-      tags: ['Envelope Attachments'],
-    },
-  })
+  .meta(createAttachmentMeta)
   .input(ZCreateAttachmentRequestSchema)
   .output(ZCreateAttachmentResponseSchema)
   .mutation(async ({ input, ctx }) => {

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

@@ -1,5 +1,17 @@
 import { z } from 'zod';
 
+import type { TrpcRouteMeta } from '../../trpc';
+
+export const createAttachmentMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/attachment/create',
+    summary: 'Create attachment',
+    description: 'Create a new attachment for an envelope',
+    tags: ['Envelope Attachments'],
+  },
+};
+
 export const ZCreateAttachmentRequestSchema = z.object({
   envelopeId: z.string(),
   data: z.object({

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

@@ -4,18 +4,11 @@ import { authenticatedProcedure } from '../../trpc';
 import {
   ZDeleteAttachmentRequestSchema,
   ZDeleteAttachmentResponseSchema,
+  deleteAttachmentMeta,
 } from './delete-attachment.types';
 
 export const deleteAttachmentRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'POST',
-      path: '/envelope/attachment/delete',
-      summary: 'Delete attachment',
-      description: 'Delete an attachment from an envelope',
-      tags: ['Envelope Attachments'],
-    },
-  })
+  .meta(deleteAttachmentMeta)
   .input(ZDeleteAttachmentRequestSchema)
   .output(ZDeleteAttachmentResponseSchema)
   .mutation(async ({ input, ctx }) => {

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

@@ -1,5 +1,17 @@
 import { z } from 'zod';
 
+import type { TrpcRouteMeta } from '../../trpc';
+
+export const deleteAttachmentMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/attachment/delete',
+    summary: 'Delete attachment',
+    description: 'Delete an attachment from an envelope',
+    tags: ['Envelope Attachments'],
+  },
+};
+
 export const ZDeleteAttachmentRequestSchema = z.object({
   id: z.string(),
 });

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

@@ -6,18 +6,11 @@ import { maybeAuthenticatedProcedure } from '../../trpc';
 import {
   ZFindAttachmentsRequestSchema,
   ZFindAttachmentsResponseSchema,
+  findAttachmentsMeta,
 } from './find-attachments.types';
 
 export const findAttachmentsRoute = maybeAuthenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'GET',
-      path: '/envelope/attachment',
-      summary: 'Find attachments',
-      description: 'Find all attachments for an envelope',
-      tags: ['Envelope Attachments'],
-    },
-  })
+  .meta(findAttachmentsMeta)
   .input(ZFindAttachmentsRequestSchema)
   .output(ZFindAttachmentsResponseSchema)
   .query(async ({ input, ctx }) => {

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

@@ -2,6 +2,18 @@ import { z } from 'zod';
 
 import { ZEnvelopeAttachmentTypeSchema } from '@documenso/lib/types/envelope-attachment';
 
+import type { TrpcRouteMeta } from '../../trpc';
+
+export const findAttachmentsMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'GET',
+    path: '/envelope/attachment',
+    summary: 'Find attachments',
+    description: 'Find all attachments for an envelope',
+    tags: ['Envelope Attachments'],
+  },
+};
+
 export const ZFindAttachmentsRequestSchema = z.object({
   envelopeId: z.string(),
   token: z.string().optional(),

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

@@ -4,18 +4,11 @@ import { authenticatedProcedure } from '../../trpc';
 import {
   ZUpdateAttachmentRequestSchema,
   ZUpdateAttachmentResponseSchema,
+  updateAttachmentMeta,
 } from './update-attachment.types';
 
 export const updateAttachmentRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'POST',
-      path: '/envelope/attachment/update',
-      summary: 'Update attachment',
-      description: 'Update an existing attachment',
-      tags: ['Envelope Attachments'],
-    },
-  })
+  .meta(updateAttachmentMeta)
   .input(ZUpdateAttachmentRequestSchema)
   .output(ZUpdateAttachmentResponseSchema)
   .mutation(async ({ input, ctx }) => {

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

@@ -1,5 +1,17 @@
 import { z } from 'zod';
 
+import type { TrpcRouteMeta } from '../../trpc';
+
+export const updateAttachmentMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/attachment/update',
+    summary: 'Update attachment',
+    description: 'Update an existing attachment',
+    tags: ['Envelope Attachments'],
+  },
+};
+
 export const ZUpdateAttachmentRequestSchema = z.object({
   id: z.string(),
   data: z.object({

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

@@ -11,18 +11,11 @@ import { authenticatedProcedure } from '../trpc';
 import {
   ZCreateEnvelopeItemsRequestSchema,
   ZCreateEnvelopeItemsResponseSchema,
+  createEnvelopeItemsMeta,
 } from './create-envelope-items.types';
 
 export const createEnvelopeItemsRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'POST',
-      path: '/envelope/item/create-many',
-      summary: 'Create envelope items',
-      description: 'Create multiple envelope items for an envelope',
-      tags: ['Envelope Items'],
-    },
-  })
+  .meta(createEnvelopeItemsMeta)
   .input(ZCreateEnvelopeItemsRequestSchema)
   .output(ZCreateEnvelopeItemsResponseSchema)
   .mutation(async ({ input, ctx }) => {
@@ -142,6 +135,6 @@ export const createEnvelopeItemsRoute = authenticatedProcedure
     });
 
     return {
-      createdEnvelopeItems: result,
+      data: result,
     };
   });

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

@@ -4,6 +4,17 @@ import { zfd } from 'zod-form-data';
 import EnvelopeItemSchema from '@documenso/prisma/generated/zod/modelSchema/EnvelopeItemSchema';
 
 import { zodFormData } from '../../utils/zod-form-data';
+import type { TrpcRouteMeta } from '../trpc';
+
+export const createEnvelopeItemsMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/item/create-many',
+    summary: 'Create envelope items',
+    description: 'Create multiple envelope items for an envelope',
+    tags: ['Envelope Items'],
+  },
+};
 
 export const ZCreateEnvelopeItemsPayloadSchema = z.object({
   envelopeId: z.string(),
@@ -16,7 +27,7 @@ export const ZCreateEnvelopeItemsRequestSchema = zodFormData({
 });
 
 export const ZCreateEnvelopeItemsResponseSchema = z.object({
-  createdEnvelopeItems: EnvelopeItemSchema.pick({
+  data: EnvelopeItemSchema.pick({
     id: true,
     title: true,
     envelopeId: true,

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

@@ -7,17 +7,11 @@ import { authenticatedProcedure } from '../trpc';
 import {
   ZCreateEnvelopeRequestSchema,
   ZCreateEnvelopeResponseSchema,
+  createEnvelopeMeta,
 } from './create-envelope.types';
 
 export const createEnvelopeRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'POST',
-      path: '/envelope/create',
-      summary: 'Create envelope',
-      tags: ['Envelope'],
-    },
-  })
+  .meta(createEnvelopeMeta)
   .input(ZCreateEnvelopeRequestSchema)
   .output(ZCreateEnvelopeResponseSchema)
   .mutation(async ({ input, ctx }) => {

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

@@ -27,14 +27,13 @@ import {
 import { ZCreateRecipientSchema } from '../recipient-router/schema';
 import type { TrpcRouteMeta } from '../trpc';
 
-// Currently not in use until we allow passthrough documents on create.
 export const createEnvelopeMeta: TrpcRouteMeta = {
   openapi: {
     method: 'POST',
     path: '/envelope/create',
     contentTypes: ['multipart/form-data'],
     summary: 'Create envelope',
-    description: 'Create a envelope using form data.',
+    description: 'Create an envelope using form data.',
     tags: ['Envelope'],
   },
 };

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

@@ -9,18 +9,11 @@ import { authenticatedProcedure } from '../trpc';
 import {
   ZDeleteEnvelopeItemRequestSchema,
   ZDeleteEnvelopeItemResponseSchema,
+  deleteEnvelopeItemMeta,
 } 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 Items'],
-    },
-  })
+  .meta(deleteEnvelopeItemMeta)
   .input(ZDeleteEnvelopeItemRequestSchema)
   .output(ZDeleteEnvelopeItemResponseSchema)
   .mutation(async ({ input, ctx }) => {

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

@@ -1,5 +1,17 @@
 import { z } from 'zod';
 
+import type { TrpcRouteMeta } from '../trpc';
+
+export const deleteEnvelopeItemMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/item/delete',
+    summary: 'Delete envelope item',
+    description: 'Delete an envelope item from an envelope',
+    tags: ['Envelope Items'],
+  },
+};
+
 export const ZDeleteEnvelopeItemRequestSchema = z.object({
   envelopeId: z.string(),
   envelopeItemId: z.string(),

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

@@ -10,17 +10,11 @@ import { authenticatedProcedure } from '../trpc';
 import {
   ZDeleteEnvelopeRequestSchema,
   ZDeleteEnvelopeResponseSchema,
+  deleteEnvelopeMeta,
 } from './delete-envelope.types';
 
 export const deleteEnvelopeRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'POST',
-      path: '/envelope/delete',
-      summary: 'Delete envelope',
-      tags: ['Envelope'],
-    },
-  })
+  .meta(deleteEnvelopeMeta)
   .input(ZDeleteEnvelopeRequestSchema)
   .output(ZDeleteEnvelopeResponseSchema)
   .mutation(async ({ input, ctx }) => {

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

@@ -1,5 +1,16 @@
 import { z } from 'zod';
 
+import type { TrpcRouteMeta } from '../trpc';
+
+export const deleteEnvelopeMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/delete',
+    summary: 'Delete envelope',
+    tags: ['Envelope'],
+  },
+};
+
 export const ZDeleteEnvelopeRequestSchema = z.object({
   envelopeId: z.string(),
 });

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

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

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

@@ -2,6 +2,18 @@ import { z } from 'zod';
 
 import { ZDocumentMetaUpdateSchema } from '@documenso/lib/types/document-meta';
 
+import type { TrpcRouteMeta } from '../trpc';
+
+export const distributeEnvelopeMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/distribute',
+    summary: 'Distribute envelope',
+    description: 'Send the envelope 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({

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

@@ -4,18 +4,11 @@ import { authenticatedProcedure } from '../trpc';
 import {
   ZDuplicateEnvelopeRequestSchema,
   ZDuplicateEnvelopeResponseSchema,
+  duplicateEnvelopeMeta,
 } from './duplicate-envelope.types';
 
 export const duplicateEnvelopeRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'POST',
-      path: '/envelope/duplicate',
-      summary: 'Duplicate envelope',
-      description: 'Duplicate an envelope with all its settings',
-      tags: ['Envelope'],
-    },
-  })
+  .meta(duplicateEnvelopeMeta)
   .input(ZDuplicateEnvelopeRequestSchema)
   .output(ZDuplicateEnvelopeResponseSchema)
   .mutation(async ({ input, ctx }) => {
@@ -38,6 +31,6 @@ export const duplicateEnvelopeRoute = authenticatedProcedure
     });
 
     return {
-      duplicatedEnvelopeId: duplicatedEnvelope.id,
+      id: duplicatedEnvelope.id,
     };
   });

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

@@ -1,11 +1,23 @@
 import { z } from 'zod';
 
+import type { TrpcRouteMeta } from '../trpc';
+
+export const duplicateEnvelopeMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/duplicate',
+    summary: 'Duplicate envelope',
+    description: 'Duplicate an envelope with all its settings',
+    tags: ['Envelope'],
+  },
+};
+
 export const ZDuplicateEnvelopeRequestSchema = z.object({
   envelopeId: z.string(),
 });
 
 export const ZDuplicateEnvelopeResponseSchema = z.object({
-  duplicatedEnvelopeId: z.string(),
+  id: z.string().describe('The ID of the newly created envelope.'),
 });
 
 export type TDuplicateEnvelopeRequest = z.infer<typeof ZDuplicateEnvelopeRequestSchema>;

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

@@ -4,18 +4,11 @@ import { authenticatedProcedure } from '../../trpc';
 import {
   ZCreateEnvelopeFieldsRequestSchema,
   ZCreateEnvelopeFieldsResponseSchema,
+  createEnvelopeFieldsMeta,
 } from './create-envelope-fields.types';
 
 export const createEnvelopeFieldsRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'POST',
-      path: '/envelope/field/create-many',
-      summary: 'Create envelope fields',
-      description: 'Create multiple fields for an envelope',
-      tags: ['Envelope Fields'],
-    },
-  })
+  .meta(createEnvelopeFieldsMeta)
   .input(ZCreateEnvelopeFieldsRequestSchema)
   .output(ZCreateEnvelopeFieldsResponseSchema)
   .mutation(async ({ input, ctx }) => {
@@ -28,7 +21,7 @@ export const createEnvelopeFieldsRoute = authenticatedProcedure
       },
     });
 
-    return await createEnvelopeFields({
+    const { fields: data } = await createEnvelopeFields({
       userId: user.id,
       teamId,
       id: {
@@ -38,4 +31,8 @@ export const createEnvelopeFieldsRoute = authenticatedProcedure
       fields,
       requestMetadata: metadata,
     });
+
+    return {
+      data,
+    };
   });

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

@@ -10,6 +10,19 @@ import {
 } from '@documenso/lib/types/field';
 import { ZFieldAndMetaSchema } from '@documenso/lib/types/field-meta';
 
+import type { TrpcRouteMeta } from '../../trpc';
+
+export const createEnvelopeFieldsMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/field/create-many',
+    contentTypes: ['multipart/form-data'],
+    summary: 'Create envelope fields',
+    description: 'Create multiple fields for an envelope',
+    tags: ['Envelope Fields'],
+  },
+};
+
 const ZCreateFieldSchema = ZFieldAndMetaSchema.and(
   z.object({
     recipientId: z.number().describe('The ID of the recipient to create the field for'),
@@ -33,7 +46,7 @@ export const ZCreateEnvelopeFieldsRequestSchema = z.object({
 });
 
 export const ZCreateEnvelopeFieldsResponseSchema = z.object({
-  fields: z.array(ZFieldSchema),
+  data: z.array(ZFieldSchema),
 });
 
 export type TCreateEnvelopeFieldsRequest = z.infer<typeof ZCreateEnvelopeFieldsRequestSchema>;

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

@@ -11,18 +11,11 @@ import { authenticatedProcedure } from '../../trpc';
 import {
   ZDeleteEnvelopeFieldRequestSchema,
   ZDeleteEnvelopeFieldResponseSchema,
+  deleteEnvelopeFieldMeta,
 } from './delete-envelope-field.types';
 
 export const deleteEnvelopeFieldRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'POST',
-      path: '/envelope/field/delete',
-      summary: 'Delete envelope field',
-      description: 'Delete an envelope field',
-      tags: ['Envelope Fields'],
-    },
-  })
+  .meta(deleteEnvelopeFieldMeta)
   .input(ZDeleteEnvelopeFieldRequestSchema)
   .output(ZDeleteEnvelopeFieldResponseSchema)
   .mutation(async ({ input, ctx }) => {

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

@@ -1,5 +1,17 @@
 import { z } from 'zod';
 
+import type { TrpcRouteMeta } from '../../trpc';
+
+export const deleteEnvelopeFieldMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/field/delete',
+    summary: 'Delete envelope field',
+    description: 'Delete an envelope field',
+    tags: ['Envelope Fields'],
+  },
+};
+
 export const ZDeleteEnvelopeFieldRequestSchema = z.object({
   fieldId: z.number(),
 });

packages/trpc/server/envelope-router/envelope-fields/get-envelope-field.ts

@@ -4,18 +4,11 @@ import { authenticatedProcedure } from '../../trpc';
 import {
   ZGetEnvelopeFieldRequestSchema,
   ZGetEnvelopeFieldResponseSchema,
+  getEnvelopeFieldMeta,
 } from './get-envelope-field.types';
 
 export const getEnvelopeFieldRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'GET',
-      path: '/envelope/field/{fieldId}',
-      summary: 'Get envelope field',
-      description: 'Returns an envelope field given an ID',
-      tags: ['Envelope Fields'],
-    },
-  })
+  .meta(getEnvelopeFieldMeta)
   .input(ZGetEnvelopeFieldRequestSchema)
   .output(ZGetEnvelopeFieldResponseSchema)
   .query(async ({ input, ctx }) => {

packages/trpc/server/envelope-router/envelope-fields/get-envelope-field.types.ts

@@ -2,6 +2,18 @@ import { z } from 'zod';
 
 import { ZEnvelopeFieldSchema } from '@documenso/lib/types/field';
 
+import type { TrpcRouteMeta } from '../../trpc';
+
+export const getEnvelopeFieldMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'GET',
+    path: '/envelope/field/{fieldId}',
+    summary: 'Get envelope field',
+    description: 'Returns an envelope field given an ID',
+    tags: ['Envelope Fields'],
+  },
+};
+
 export const ZGetEnvelopeFieldRequestSchema = z.object({
   fieldId: z.number(),
 });

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

@@ -4,18 +4,11 @@ import { authenticatedProcedure } from '../../trpc';
 import {
   ZUpdateEnvelopeFieldsRequestSchema,
   ZUpdateEnvelopeFieldsResponseSchema,
+  updateEnvelopeFieldsMeta,
 } from './update-envelope-fields.types';
 
 export const updateEnvelopeFieldsRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'POST',
-      path: '/envelope/field/update-many',
-      summary: 'Update envelope fields',
-      description: 'Update multiple envelope fields for an envelope',
-      tags: ['Envelope Fields'],
-    },
-  })
+  .meta(updateEnvelopeFieldsMeta)
   .input(ZUpdateEnvelopeFieldsRequestSchema)
   .output(ZUpdateEnvelopeFieldsResponseSchema)
   .mutation(async ({ input, ctx }) => {
@@ -28,7 +21,7 @@ export const updateEnvelopeFieldsRoute = authenticatedProcedure
       },
     });
 
-    return await updateEnvelopeFields({
+    const { fields: data } = await updateEnvelopeFields({
       userId: user.id,
       teamId,
       id: {
@@ -39,4 +32,8 @@ export const updateEnvelopeFieldsRoute = authenticatedProcedure
       fields,
       requestMetadata: ctx.metadata,
     });
+
+    return {
+      data,
+    };
   });

packages/trpc/server/envelope-router/envelope-fields/update-envelope-fields.types.ts

@@ -10,6 +10,18 @@ import {
 } from '@documenso/lib/types/field';
 import { ZFieldAndMetaSchema } from '@documenso/lib/types/field-meta';
 
+import type { TrpcRouteMeta } from '../../trpc';
+
+export const updateEnvelopeFieldsMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/field/update-many',
+    summary: 'Update envelope fields',
+    description: 'Update multiple envelope fields for an envelope',
+    tags: ['Envelope Fields'],
+  },
+};
+
 const ZUpdateFieldSchema = ZFieldAndMetaSchema.and(
   z.object({
     id: z.number().describe('The ID of the field to update.'),
@@ -33,7 +45,7 @@ export const ZUpdateEnvelopeFieldsRequestSchema = z.object({
 });
 
 export const ZUpdateEnvelopeFieldsResponseSchema = z.object({
-  fields: z.array(ZFieldSchema),
+  data: z.array(ZFieldSchema),
 });
 
 export type TUpdateEnvelopeFieldsRequest = z.infer<typeof ZUpdateEnvelopeFieldsRequestSchema>;

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

@@ -4,18 +4,11 @@ import { authenticatedProcedure } from '../../trpc';
 import {
   ZCreateEnvelopeRecipientsRequestSchema,
   ZCreateEnvelopeRecipientsResponseSchema,
+  createEnvelopeRecipientsMeta,
 } from './create-envelope-recipients.types';
 
 export const createEnvelopeRecipientsRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'POST',
-      path: '/envelope/recipient/create-many',
-      summary: 'Create envelope recipients',
-      description: 'Create multiple recipients for an envelope',
-      tags: ['Envelope Recipients'],
-    },
-  })
+  .meta(createEnvelopeRecipientsMeta)
   .input(ZCreateEnvelopeRecipientsRequestSchema)
   .output(ZCreateEnvelopeRecipientsResponseSchema)
   .mutation(async ({ input, ctx }) => {
@@ -28,7 +21,7 @@ export const createEnvelopeRecipientsRoute = authenticatedProcedure
       },
     });
 
-    return await createEnvelopeRecipients({
+    const { recipients: data } = await createEnvelopeRecipients({
       userId: user.id,
       teamId,
       id: {
@@ -38,4 +31,8 @@ export const createEnvelopeRecipientsRoute = authenticatedProcedure
       recipients,
       requestMetadata: metadata,
     });
+
+    return {
+      data,
+    };
   });

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

@@ -3,6 +3,17 @@ import { z } from 'zod';
 import { ZEnvelopeRecipientLiteSchema } from '@documenso/lib/types/recipient';
 
 import { ZCreateRecipientSchema } from '../../recipient-router/schema';
+import type { TrpcRouteMeta } from '../../trpc';
+
+export const createEnvelopeRecipientsMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/recipient/create-many',
+    summary: 'Create envelope recipients',
+    description: 'Create multiple recipients for an envelope',
+    tags: ['Envelope Recipients'],
+  },
+};
 
 export const ZCreateEnvelopeRecipientsRequestSchema = z.object({
   envelopeId: z.string(),
@@ -10,7 +21,7 @@ export const ZCreateEnvelopeRecipientsRequestSchema = z.object({
 });
 
 export const ZCreateEnvelopeRecipientsResponseSchema = z.object({
-  recipients: ZEnvelopeRecipientLiteSchema.array(),
+  data: ZEnvelopeRecipientLiteSchema.array(),
 });
 
 export type TCreateEnvelopeRecipientsRequest = z.infer<

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

@@ -4,18 +4,11 @@ import { authenticatedProcedure } from '../../trpc';
 import {
   ZDeleteEnvelopeRecipientRequestSchema,
   ZDeleteEnvelopeRecipientResponseSchema,
+  deleteEnvelopeRecipientMeta,
 } from './delete-envelope-recipient.types';
 
 export const deleteEnvelopeRecipientRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'POST',
-      path: '/envelope/recipient/delete',
-      summary: 'Delete envelope recipient',
-      description: 'Delete an envelope recipient',
-      tags: ['Envelope Recipients'],
-    },
-  })
+  .meta(deleteEnvelopeRecipientMeta)
   .input(ZDeleteEnvelopeRecipientRequestSchema)
   .output(ZDeleteEnvelopeRecipientResponseSchema)
   .mutation(async ({ input, ctx }) => {

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

@@ -1,5 +1,17 @@
 import { z } from 'zod';
 
+import type { TrpcRouteMeta } from '../../trpc';
+
+export const deleteEnvelopeRecipientMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/recipient/delete',
+    summary: 'Delete envelope recipient',
+    description: 'Delete an envelope recipient',
+    tags: ['Envelope Recipients'],
+  },
+};
+
 export const ZDeleteEnvelopeRecipientRequestSchema = z.object({
   recipientId: z.number(),
 });

packages/trpc/server/envelope-router/envelope-recipients/get-envelope-recipient.ts

@@ -6,18 +6,11 @@ import { authenticatedProcedure } from '../../trpc';
 import {
   ZGetEnvelopeRecipientRequestSchema,
   ZGetEnvelopeRecipientResponseSchema,
+  getEnvelopeRecipientMeta,
 } from './get-envelope-recipient.types';
 
 export const getEnvelopeRecipientRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'GET',
-      path: '/envelope/recipient/{recipientId}',
-      summary: 'Get envelope recipient',
-      description: 'Returns an envelope recipient given an ID',
-      tags: ['Envelope Recipients'],
-    },
-  })
+  .meta(getEnvelopeRecipientMeta)
   .input(ZGetEnvelopeRecipientRequestSchema)
   .output(ZGetEnvelopeRecipientResponseSchema)
   .query(async ({ input, ctx }) => {

packages/trpc/server/envelope-router/envelope-recipients/get-envelope-recipient.types.ts

@@ -2,6 +2,18 @@ import { z } from 'zod';
 
 import { ZEnvelopeRecipientSchema } from '@documenso/lib/types/recipient';
 
+import type { TrpcRouteMeta } from '../../trpc';
+
+export const getEnvelopeRecipientMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'GET',
+    path: '/envelope/recipient/{recipientId}',
+    summary: 'Get envelope recipient',
+    description: 'Returns an envelope recipient given an ID',
+    tags: ['Envelope Recipients'],
+  },
+};
+
 export const ZGetEnvelopeRecipientRequestSchema = z.object({
   recipientId: z.number(),
 });

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

@@ -4,18 +4,11 @@ import { authenticatedProcedure } from '../../trpc';
 import {
   ZUpdateEnvelopeRecipientsRequestSchema,
   ZUpdateEnvelopeRecipientsResponseSchema,
+  updateEnvelopeRecipientsMeta,
 } from './update-envelope-recipients.types';
 
 export const updateEnvelopeRecipientsRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'POST',
-      path: '/envelope/recipient/update-many',
-      summary: 'Update envelope recipients',
-      description: 'Update multiple recipients for an envelope',
-      tags: ['Envelope Recipients'],
-    },
-  })
+  .meta(updateEnvelopeRecipientsMeta)
   .input(ZUpdateEnvelopeRecipientsRequestSchema)
   .output(ZUpdateEnvelopeRecipientsResponseSchema)
   .mutation(async ({ input, ctx }) => {
@@ -28,7 +21,7 @@ export const updateEnvelopeRecipientsRoute = authenticatedProcedure
       },
     });
 
-    return await updateEnvelopeRecipients({
+    const { recipients: data } = await updateEnvelopeRecipients({
       userId: user.id,
       teamId,
       id: {
@@ -38,4 +31,8 @@ export const updateEnvelopeRecipientsRoute = authenticatedProcedure
       recipients,
       requestMetadata: ctx.metadata,
     });
+
+    return {
+      data,
+    };
   });

packages/trpc/server/envelope-router/envelope-recipients/update-envelope-recipients.types.ts

@@ -3,6 +3,17 @@ import { z } from 'zod';
 import { ZRecipientLiteSchema } from '@documenso/lib/types/recipient';
 
 import { ZUpdateRecipientSchema } from '../../recipient-router/schema';
+import type { TrpcRouteMeta } from '../../trpc';
+
+export const updateEnvelopeRecipientsMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/recipient/update-many',
+    summary: 'Update envelope recipients',
+    description: 'Update multiple recipients for an envelope',
+    tags: ['Envelope Recipients'],
+  },
+};
 
 export const ZUpdateEnvelopeRecipientsRequestSchema = z.object({
   envelopeId: z.string(),
@@ -10,7 +21,7 @@ export const ZUpdateEnvelopeRecipientsRequestSchema = z.object({
 });
 
 export const ZUpdateEnvelopeRecipientsResponseSchema = z.object({
-  recipients: ZRecipientLiteSchema.array(),
+  data: ZRecipientLiteSchema.array(),
 });
 
 export type TUpdateEnvelopeRecipientsRequest = z.infer<

packages/trpc/server/envelope-router/get-envelope-items-by-token.ts

@@ -34,10 +34,25 @@ export const getEnvelopeItemsByTokenRoute = maybeAuthenticatedProcedure
         });
       }
 
-      return await handleGetEnvelopeItemsByUser({ envelopeId, userId: user.id, teamId });
+      const { envelopeItems: data } = await handleGetEnvelopeItemsByUser({
+        envelopeId,
+        userId: user.id,
+        teamId,
+      });
+
+      return {
+        data,
+      };
     }
 
-    return await handleGetEnvelopeItemsByToken({ envelopeId, token: access.token });
+    const { envelopeItems: data } = await handleGetEnvelopeItemsByToken({
+      envelopeId,
+      token: access.token,
+    });
+
+    return {
+      data,
+    };
   });
 
 const handleGetEnvelopeItemsByToken = async ({

packages/trpc/server/envelope-router/get-envelope-items-by-token.types.ts

@@ -16,7 +16,7 @@ export const ZGetEnvelopeItemsByTokenRequestSchema = z.object({
 });
 
 export const ZGetEnvelopeItemsByTokenResponseSchema = z.object({
-  envelopeItems: EnvelopeItemSchema.pick({
+  data: EnvelopeItemSchema.pick({
     id: true,
     envelopeId: true,
     title: true,

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

@@ -50,6 +50,6 @@ export const getEnvelopeItemsRoute = authenticatedProcedure
     }
 
     return {
-      envelopeItems: envelope.envelopeItems,
+      data: envelope.envelopeItems,
     };
   });

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

@@ -8,7 +8,7 @@ export const ZGetEnvelopeItemsRequestSchema = z.object({
 });
 
 export const ZGetEnvelopeItemsResponseSchema = z.object({
-  envelopeItems: EnvelopeItemSchema.pick({
+  data: EnvelopeItemSchema.pick({
     id: true,
     title: true,
     order: true,

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

@@ -1,18 +1,14 @@
 import { getEnvelopeById } from '@documenso/lib/server-only/envelope/get-envelope-by-id';
 
 import { authenticatedProcedure } from '../trpc';
-import { ZGetEnvelopeRequestSchema, ZGetEnvelopeResponseSchema } from './get-envelope.types';
+import {
+  ZGetEnvelopeRequestSchema,
+  ZGetEnvelopeResponseSchema,
+  getEnvelopeMeta,
+} from './get-envelope.types';
 
 export const getEnvelopeRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'GET',
-      path: '/envelope/{envelopeId}',
-      summary: 'Get envelope',
-      description: 'Returns an envelope given an ID',
-      tags: ['Envelope'],
-    },
-  })
+  .meta(getEnvelopeMeta)
   .input(ZGetEnvelopeRequestSchema)
   .output(ZGetEnvelopeResponseSchema)
   .query(async ({ input, ctx }) => {

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

@@ -2,6 +2,18 @@ import { z } from 'zod';
 
 import { ZEnvelopeSchema } from '@documenso/lib/types/envelope';
 
+import type { TrpcRouteMeta } from '../trpc';
+
+export const getEnvelopeMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'GET',
+    path: '/envelope/{envelopeId}',
+    summary: 'Get envelope',
+    description: 'Returns an envelope given an ID',
+    tags: ['Envelope'],
+  },
+};
+
 export const ZGetEnvelopeRequestSchema = z.object({
   envelopeId: z.string(),
 });

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

@@ -4,19 +4,11 @@ import { authenticatedProcedure } from '../trpc';
 import {
   ZRedistributeEnvelopeRequestSchema,
   ZRedistributeEnvelopeResponseSchema,
+  redistributeEnvelopeMeta,
 } from './redistribute-envelope.types';
 
 export const redistributeEnvelopeRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'POST',
-      path: '/envelope/redistribute',
-      summary: 'Redistribute envelope',
-      description:
-        'Redistribute the envelope to the provided recipients who have not actioned the envelope. Will use the distribution method set in the envelope',
-      tags: ['Envelope'],
-    },
-  })
+  .meta(redistributeEnvelopeMeta)
   .input(ZRedistributeEnvelopeRequestSchema)
   .output(ZRedistributeEnvelopeResponseSchema)
   .mutation(async ({ input, ctx }) => {

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

@@ -1,5 +1,18 @@
 import { z } from 'zod';
 
+import type { TrpcRouteMeta } from '../trpc';
+
+export const redistributeEnvelopeMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/redistribute',
+    summary: 'Redistribute envelope',
+    description:
+      'Redistribute the envelope to the provided recipients who have not actioned the envelope. Will use the distribution method set in the envelope',
+    tags: ['Envelope'],
+  },
+};
+
 export const ZRedistributeEnvelopeRequestSchema = z.object({
   envelopeId: z.string(),
   recipients: z

packages/trpc/server/envelope-router/set-envelope-fields.ts

@@ -65,7 +65,7 @@ export const setEnvelopeFieldsRoute = authenticatedProcedure
       .exhaustive();
 
     return {
-      fields: result.fields.map((field) => ({
+      data: result.fields.map((field) => ({
         id: field.id,
         formId: field.formId,
       })),

packages/trpc/server/envelope-router/set-envelope-fields.types.ts

@@ -37,7 +37,7 @@ export const ZSetEnvelopeFieldsRequestSchema = z.object({
 });
 
 export const ZSetEnvelopeFieldsResponseSchema = z.object({
-  fields: z
+  data: z
     .object({
       id: z.number(),
       formId: z.string().optional(),

packages/trpc/server/envelope-router/set-envelope-recipients.ts

@@ -23,7 +23,7 @@ export const setEnvelopeRecipientsRoute = authenticatedProcedure
       },
     });
 
-    return await match(envelopeType)
+    const { recipients: data } = await match(envelopeType)
       .with(EnvelopeType.DOCUMENT, async () =>
         setDocumentRecipients({
           userId: ctx.user.id,
@@ -48,4 +48,8 @@ export const setEnvelopeRecipientsRoute = authenticatedProcedure
         }),
       )
       .exhaustive();
+
+    return {
+      data,
+    };
   });

packages/trpc/server/envelope-router/set-envelope-recipients.types.ts

@@ -20,7 +20,7 @@ export const ZSetEnvelopeRecipientsRequestSchema = z.object({
 });
 
 export const ZSetEnvelopeRecipientsResponseSchema = z.object({
-  recipients: ZRecipientLiteSchema.omit({
+  data: ZRecipientLiteSchema.omit({
     documentId: true,
     templateId: true,
   }).array(),

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

@@ -7,18 +7,11 @@ import { authenticatedProcedure } from '../trpc';
 import {
   ZUpdateEnvelopeItemsRequestSchema,
   ZUpdateEnvelopeItemsResponseSchema,
+  updateEnvelopeItemsMeta,
 } from './update-envelope-items.types';
 
 export const updateEnvelopeItemsRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'POST',
-      path: '/envelope/item/update-many',
-      summary: 'Update envelope items',
-      description: 'Update multiple envelope items for an envelope',
-      tags: ['Envelope Items'],
-    },
-  })
+  .meta(updateEnvelopeItemsMeta)
   .input(ZUpdateEnvelopeItemsRequestSchema)
   .output(ZUpdateEnvelopeItemsResponseSchema)
   .mutation(async ({ input, ctx }) => {
@@ -102,6 +95,6 @@ export const updateEnvelopeItemsRoute = authenticatedProcedure
     // Todo: Envelope [AUDIT_LOGS]
 
     return {
-      updatedEnvelopeItems,
+      data: updatedEnvelopeItems,
     };
   });

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

@@ -3,6 +3,17 @@ import { z } from 'zod';
 import EnvelopeItemSchema from '@documenso/prisma/generated/zod/modelSchema/EnvelopeItemSchema';
 
 import { ZDocumentTitleSchema } from '../document-router/schema';
+import type { TrpcRouteMeta } from '../trpc';
+
+export const updateEnvelopeItemsMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/item/update-many',
+    summary: 'Update envelope items',
+    description: 'Update multiple envelope items for an envelope',
+    tags: ['Envelope Items'],
+  },
+};
 
 export const ZUpdateEnvelopeItemsRequestSchema = z.object({
   envelopeId: z.string(),
@@ -17,7 +28,7 @@ export const ZUpdateEnvelopeItemsRequestSchema = z.object({
 });
 
 export const ZUpdateEnvelopeItemsResponseSchema = z.object({
-  updatedEnvelopeItems: EnvelopeItemSchema.pick({
+  data: EnvelopeItemSchema.pick({
     id: true,
     order: true,
     title: true,

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

@@ -4,17 +4,11 @@ import { authenticatedProcedure } from '../trpc';
 import {
   ZUpdateEnvelopeRequestSchema,
   ZUpdateEnvelopeResponseSchema,
+  updateEnvelopeMeta,
 } from './update-envelope.types';
 
 export const updateEnvelopeRoute = authenticatedProcedure
-  .meta({
-    openapi: {
-      method: 'POST',
-      path: '/envelope/update',
-      summary: 'Update envelope',
-      tags: ['Envelope'],
-    },
-  })
+  .meta(updateEnvelopeMeta)
   .input(ZUpdateEnvelopeRequestSchema)
   .output(ZUpdateEnvelopeResponseSchema)
   .mutation(async ({ input, ctx }) => {

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

@@ -12,6 +12,16 @@ import {
   ZDocumentTitleSchema,
   ZDocumentVisibilitySchema,
 } from '../document-router/schema';
+import type { TrpcRouteMeta } from '../trpc';
+
+export const updateEnvelopeMeta: TrpcRouteMeta = {
+  openapi: {
+    method: 'POST',
+    path: '/envelope/update',
+    summary: 'Update envelope',
+    tags: ['Envelope'],
+  },
+};
 
 export const ZUpdateEnvelopeRequestSchema = z.object({
   envelopeId: z.string(),

packages/ui/components/document/envelope-recipient-field-tooltip.tsx

@@ -0,0 +1,189 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+import { SigningStatus } from '@prisma/client';
+import type { Field, Recipient } from '@prisma/client';
+import { ClockIcon, EyeOffIcon } from 'lucide-react';
+
+import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
+import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
+
+import { isTemplateRecipientEmailPlaceholder } from '../../../lib/constants/template';
+import { extractInitials } from '../../../lib/utils/recipient-formatter';
+import { SignatureIcon } from '../../icons/signature';
+import { cn } from '../../lib/utils';
+import { Avatar, AvatarFallback } from '../../primitives/avatar';
+import { Badge } from '../../primitives/badge';
+import { FRIENDLY_FIELD_TYPE } from '../../primitives/document-flow/types';
+import { PopoverHover } from '../../primitives/popover';
+
+interface EnvelopeRecipientFieldTooltipProps {
+  field: Pick<
+    Field,
+    'id' | 'inserted' | 'positionX' | 'positionY' | 'width' | 'height' | 'page' | 'type'
+  > & {
+    recipient: Pick<Recipient, 'name' | 'email' | 'signingStatus'>;
+  };
+  showFieldStatus?: boolean;
+  showRecipientTooltip?: boolean;
+  showRecipientColors?: boolean;
+}
+
+const getRecipientDisplayText = (recipient: { name: string; email: string }) => {
+  if (recipient.name && !isTemplateRecipientEmailPlaceholder(recipient.email)) {
+    return `${recipient.name} (${recipient.email})`;
+  }
+
+  if (recipient.name && isTemplateRecipientEmailPlaceholder(recipient.email)) {
+    return recipient.name;
+  }
+
+  return recipient.email;
+};
+
+/**
+ * Renders a tooltip for a given field.
+ */
+export function EnvelopeRecipientFieldTooltip({
+  field,
+  showFieldStatus = false,
+  showRecipientTooltip = false,
+  showRecipientColors = false,
+}: EnvelopeRecipientFieldTooltipProps) {
+  const { t } = useLingui();
+
+  const [hideField, setHideField] = useState<boolean>(!showRecipientTooltip);
+
+  const [coords, setCoords] = useState({
+    x: 0,
+    y: 0,
+    height: 0,
+    width: 0,
+  });
+
+  const calculateCoords = useCallback(() => {
+    const $page = document.querySelector<HTMLElement>(
+      `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.page}"]`,
+    );
+
+    if (!$page) {
+      return;
+    }
+
+    const { height, width } = getBoundingClientRect($page);
+
+    const fieldHeight = (Number(field.height) / 100) * height;
+    const fieldWidth = (Number(field.width) / 100) * width;
+
+    const fieldX = (Number(field.positionX) / 100) * width + Number(fieldWidth);
+    const fieldY = (Number(field.positionY) / 100) * height;
+
+    setCoords({
+      x: fieldX,
+      y: fieldY,
+      height: fieldHeight,
+      width: fieldWidth,
+    });
+  }, [field.height, field.page, field.positionX, field.positionY, field.width]);
+
+  useEffect(() => {
+    calculateCoords();
+  }, [calculateCoords]);
+
+  useEffect(() => {
+    const onResize = () => {
+      calculateCoords();
+    };
+
+    window.addEventListener('resize', onResize);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, [calculateCoords]);
+
+  useEffect(() => {
+    const $page = document.querySelector<HTMLElement>(
+      `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.page}"]`,
+    );
+
+    if (!$page) {
+      return;
+    }
+
+    const observer = new ResizeObserver(() => {
+      calculateCoords();
+    });
+
+    observer.observe($page);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [calculateCoords, field.page]);
+
+  if (hideField) {
+    return null;
+  }
+
+  return (
+    <div
+      id="field-recipient-tooltip"
+      className={cn('absolute z-40')}
+      style={{
+        top: `${coords.y}px`,
+        left: `${coords.x}px`,
+      }}
+    >
+      <PopoverHover
+        trigger={
+          <Avatar className="absolute -left-3 -top-3 z-50 h-6 w-6 border-2 border-solid border-gray-200/50 transition-colors hover:border-gray-200">
+            <AvatarFallback className="bg-neutral-50 text-xs text-gray-400">
+              {extractInitials(field.recipient.name || field.recipient.email)}
+            </AvatarFallback>
+          </Avatar>
+        }
+        contentProps={{
+          className: 'relative flex mb-4 w-fit flex-col p-4 text-sm',
+        }}
+      >
+        {showFieldStatus && (
+          <Badge
+            className="mx-auto mb-1 py-0.5"
+            variant={
+              field.recipient.signingStatus === SigningStatus.SIGNED ? 'default' : 'secondary'
+            }
+          >
+            {field.recipient.signingStatus === SigningStatus.SIGNED ? (
+              <>
+                <SignatureIcon className="mr-1 h-3 w-3" />
+                <Trans>Signed</Trans>
+              </>
+            ) : (
+              <>
+                <ClockIcon className="mr-1 h-3 w-3" />
+                <Trans>Pending</Trans>
+              </>
+            )}
+          </Badge>
+        )}
+
+        <p className="text-center font-semibold">
+          <span>{t(FRIENDLY_FIELD_TYPE[field.type])} field</span>
+        </p>
+
+        <p className="text-muted-foreground mt-1 text-center text-xs">
+          {getRecipientDisplayText(field.recipient)}
+        </p>
+
+        <button
+          className="absolute right-0 top-0 my-1 p-2 focus:outline-none focus-visible:ring-0"
+          onClick={() => setHideField(true)}
+          title="Hide field"
+        >
+          <EyeOffIcon className="h-3 w-3" />
+        </button>
+      </PopoverHover>
+    </div>
+  );
+}