fix: embed editing updates (#2197)

Allows empty recipients for embed template authoring.

Also allows fixing the step to editing fields only for embedded
authoring updates.

packages/trpc/server/embedding-router/create-embedding-document.types.ts

@@ -21,33 +21,38 @@ import {
   ZFieldWidthSchema,
 } from '@documenso/lib/types/field';
 import { ZFieldAndMetaSchema } from '@documenso/lib/types/field-meta';
+import { RecipientRole } from '@documenso/prisma/client';
 import { DocumentSigningOrder } from '@documenso/prisma/generated/types';
 
 import { ZDocumentExternalIdSchema, ZDocumentTitleSchema } from '../document-router/schema';
-import { ZCreateRecipientSchema } from '../recipient-router/schema';
 
 export const ZCreateEmbeddingDocumentRequestSchema = z.object({
   title: ZDocumentTitleSchema,
   documentDataId: z.string(),
   externalId: ZDocumentExternalIdSchema.optional(),
-  recipients: z
-    .array(
-      ZCreateRecipientSchema.extend({
-        fields: ZFieldAndMetaSchema.and(
-          z.object({
-            pageNumber: ZFieldPageNumberSchema,
-            pageX: ZFieldPageXSchema,
-            pageY: ZFieldPageYSchema,
-            width: ZFieldWidthSchema,
-            height: ZFieldHeightSchema,
-          }),
-        )
-          .array()
-          .optional(),
-      }),
-    )
-
-    .optional(),
+  recipients: z.array(
+    z.object({
+      id: z.number().optional(),
+      email: z.string().email(),
+      name: z.string(),
+      role: z.nativeEnum(RecipientRole),
+      signingOrder: z.number().optional(),
+      // We have an any cast so any changes here you need to update it in the embeding document edit page
+      // Search: "map<any>" to find it
+      fields: ZFieldAndMetaSchema.and(
+        z.object({
+          id: z.number().optional(),
+          pageNumber: ZFieldPageNumberSchema,
+          pageX: ZFieldPageXSchema,
+          pageY: ZFieldPageYSchema,
+          width: ZFieldWidthSchema,
+          height: ZFieldHeightSchema,
+        }),
+      )
+        .array()
+        .optional(),
+    }),
+  ),
   meta: z
     .object({
       subject: ZDocumentMetaSubjectSchema.optional(),

packages/trpc/server/embedding-router/create-embedding-template.types.ts

@@ -1,4 +1,4 @@
-import { DocumentSigningOrder, FieldType, RecipientRole } from '@prisma/client';
+import { DocumentSigningOrder, RecipientRole } from '@prisma/client';
 import { z } from 'zod';
 
 import { ZDocumentEmailSettingsSchema } from '@documenso/lib/types/document-email';
@@ -21,30 +21,33 @@ import {
   ZFieldPageYSchema,
   ZFieldWidthSchema,
 } from '@documenso/lib/types/field';
-import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
+import { ZFieldAndMetaSchema } from '@documenso/lib/types/field-meta';
 
 import { ZDocumentTitleSchema } from '../document-router/schema';
 
-const ZFieldSchema = z.object({
-  type: z.nativeEnum(FieldType),
-  pageNumber: ZFieldPageNumberSchema,
-  pageX: ZFieldPageXSchema,
-  pageY: ZFieldPageYSchema,
-  width: ZFieldWidthSchema,
-  height: ZFieldHeightSchema,
-  fieldMeta: ZFieldMetaSchema.optional(),
-});
-
 export const ZCreateEmbeddingTemplateRequestSchema = z.object({
   title: ZDocumentTitleSchema,
   documentDataId: z.string(),
   recipients: z.array(
     z.object({
-      email: z.string().email(),
-      name: z.string().optional(),
-      role: z.nativeEnum(RecipientRole).optional(),
+      email: z.union([z.string().length(0), z.string().email()]),
+      name: z.string(),
+      role: z.nativeEnum(RecipientRole),
       signingOrder: z.number().optional(),
-      fields: z.array(ZFieldSchema).optional(),
+      // We have an any cast so any changes here you need to update it in the embeding document edit page
+      // Search: "map<any>" to find it
+      fields: ZFieldAndMetaSchema.and(
+        z.object({
+          id: z.number().optional(),
+          pageNumber: ZFieldPageNumberSchema,
+          pageX: ZFieldPageXSchema,
+          pageY: ZFieldPageYSchema,
+          width: ZFieldWidthSchema,
+          height: ZFieldHeightSchema,
+        }),
+      )
+        .array()
+        .optional(),
     }),
   ),
   meta: z

packages/trpc/server/embedding-router/update-embedding-document.types.ts

@@ -32,7 +32,7 @@ export const ZUpdateEmbeddingDocumentRequestSchema = z.object({
   recipients: z.array(
     z.object({
       id: z.number().optional(),
-      email: z.string().toLowerCase().email().min(1),
+      email: z.string().email(),
       name: z.string(),
       role: z.nativeEnum(RecipientRole),
       signingOrder: z.number().optional(),

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

@@ -3,7 +3,6 @@ import { verifyEmbeddingPresignToken } from '@documenso/lib/server-only/embeddin
 import { updateEnvelope } from '@documenso/lib/server-only/envelope/update-envelope';
 import { setFieldsForTemplate } from '@documenso/lib/server-only/field/set-fields-for-template';
 import { setTemplateRecipients } from '@documenso/lib/server-only/recipient/set-template-recipients';
-import { nanoid } from '@documenso/lib/universal/id';
 
 import { procedure } from '../trpc';
 import {
@@ -53,11 +52,6 @@ export const updateEmbeddingTemplateRoute = procedure
         requestMetadata: ctx.metadata,
       });
 
-      const recipientsWithClientId = recipients.map((recipient) => ({
-        ...recipient,
-        clientId: nanoid(),
-      }));
-
       const { recipients: updatedRecipients } = await setTemplateRecipients({
         userId: apiToken.userId,
         teamId: apiToken.teamId ?? undefined,
@@ -65,7 +59,7 @@ export const updateEmbeddingTemplateRoute = procedure
           type: 'templateId',
           id: templateId,
         },
-        recipients: recipientsWithClientId.map((recipient) => ({
+        recipients: recipients.map((recipient) => ({
           id: recipient.id,
           email: recipient.email,
           name: recipient.name ?? '',
@@ -74,8 +68,8 @@ export const updateEmbeddingTemplateRoute = procedure
         })),
       });
 
-      const fields = recipientsWithClientId.flatMap((recipient) => {
-        const recipientId = updatedRecipients.find((r) => r.email === recipient.email)?.id;
+      const fields = recipients.flatMap((recipient) => {
+        const recipientId = updatedRecipients.find((r) => r.id === recipient.id)?.id;
 
         if (!recipientId) {
           throw new AppError(AppErrorCode.UNKNOWN_ERROR, {
@@ -86,8 +80,6 @@ export const updateEmbeddingTemplateRoute = procedure
         return (recipient.fields ?? []).map((field) => ({
           ...field,
           recipientId,
-          // !: Temp property to be removed once we don't link based on signer email
-          signerEmail: recipient.email,
         }));
       });
 

packages/trpc/server/embedding-router/update-embedding-template.types.ts

@@ -21,7 +21,7 @@ import {
   ZFieldPageYSchema,
   ZFieldWidthSchema,
 } from '@documenso/lib/types/field';
-import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
+import { ZFieldAndMetaSchema, ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 
 import { ZDocumentTitleSchema } from '../document-router/schema';
 
@@ -44,11 +44,25 @@ export const ZUpdateEmbeddingTemplateRequestSchema = z.object({
   recipients: z.array(
     z.object({
       id: z.number().optional(),
-      email: z.string().email(),
-      name: z.string().optional(),
-      role: z.nativeEnum(RecipientRole).optional(),
+      email: z.union([z.string().length(0), z.string().email()]),
+      name: z.string(),
+      role: z.nativeEnum(RecipientRole),
       signingOrder: z.number().optional(),
-      fields: z.array(ZFieldSchema).optional(),
+      // We have an any cast so any changes here you need to update it in the embeding document edit page
+      // Search: "map<any>" to find it
+      fields: ZFieldAndMetaSchema.and(
+        z.object({
+          id: z.number().optional(),
+          pageNumber: ZFieldPageNumberSchema,
+          pageX: ZFieldPageXSchema,
+          pageY: ZFieldPageYSchema,
+          width: ZFieldWidthSchema,
+          height: ZFieldHeightSchema,
+          envelopeItemId: z.string(),
+        }),
+      )
+        .array()
+        .optional(),
     }),
   ),
   meta: z

packages/ui/primitives/recipient-selector.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
@@ -34,8 +34,8 @@ export const RecipientSelector = ({
   const { _ } = useLingui();
   const [showRecipientsSelector, setShowRecipientsSelector] = useState(false);
 
-  const recipientsByRole = useCallback(() => {
-    const recipientsByRole: Record<RecipientRole, Recipient[]> = {
+  const recipientsByRole = useMemo(() => {
+    const recipientsWithRole: Record<RecipientRole, Recipient[]> = {
       CC: [],
       VIEWER: [],
       SIGNER: [],
@@ -44,14 +44,14 @@ export const RecipientSelector = ({
     };
 
     recipients.forEach((recipient) => {
-      recipientsByRole[recipient.role].push(recipient);
+      recipientsWithRole[recipient.role].push(recipient);
     });
 
-    return recipientsByRole;
+    return recipientsWithRole;
   }, [recipients]);
 
-  const recipientsByRoleToDisplay = useCallback(() => {
-    return Object.entries(recipientsByRole())
+  const recipientsByRoleToDisplay = useMemo(() => {
+    return Object.entries(recipientsByRole)
       .filter(
         ([role]) =>
           role !== RecipientRole.CC &&
@@ -71,6 +71,28 @@ export const RecipientSelector = ({
       );
   }, [recipientsByRole]);
 
+  const getRecipientLabel = useCallback(
+    (recipient: Recipient) => {
+      if (recipient.name && recipient.email) {
+        return `${recipient.name} (${recipient.email})`;
+      }
+
+      if (recipient.name) {
+        return recipient.name;
+      }
+
+      if (recipient.email) {
+        return recipient.email;
+      }
+
+      // Since objects are basically pointers we can use `indexOf` rather than `findIndex`
+      const index = recipients.indexOf(recipient);
+
+      return `Recipient ${index + 1}`;
+    },
+    [recipients, selectedRecipient],
+  );
+
   return (
     <Popover open={showRecipientsSelector} onOpenChange={setShowRecipientsSelector}>
       <PopoverTrigger asChild>
@@ -89,16 +111,12 @@ export const RecipientSelector = ({
             className,
           )}
         >
-          {selectedRecipient?.email && (
+          {selectedRecipient && (
             <span className="flex-1 truncate text-left">
-              {selectedRecipient?.name} ({selectedRecipient?.email})
+              {getRecipientLabel(selectedRecipient)}
             </span>
           )}
 
-          {!selectedRecipient?.email && (
-            <span className="flex-1 truncate text-left">{selectedRecipient?.email}</span>
-          )}
-
           <ChevronsUpDown className="ml-2 h-4 w-4" />
         </Button>
       </PopoverTrigger>
@@ -113,7 +131,7 @@ export const RecipientSelector = ({
             </span>
           </CommandEmpty>
 
-          {recipientsByRoleToDisplay().map(([role, roleRecipients], roleIndex) => (
+          {recipientsByRoleToDisplay.map(([role, roleRecipients], roleIndex) => (
             <CommandGroup key={roleIndex}>
               <div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
                 {_(RECIPIENT_ROLES_DESCRIPTION[role].roleNamePlural)}
@@ -154,13 +172,7 @@ export const RecipientSelector = ({
                       'text-foreground/80': recipient.id === selectedRecipient?.id,
                     })}
                   >
-                    {recipient.name && (
-                      <span title={`${recipient.name} (${recipient.email})`}>
-                        {recipient.name} ({recipient.email})
-                      </span>
-                    )}
-
-                    {!recipient.name && <span title={recipient.email}>{recipient.email}</span>}
+                    {getRecipientLabel(recipient)}
                   </span>
 
                   <div className="ml-auto flex items-center justify-center">