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.

apps/remix/app/components/embed/authoring/configure-document-advanced-settings.tsx

@@ -81,33 +81,6 @@ export const ConfigureDocumentAdvancedSettings = ({
 
         <TabsContent value="general" className="mt-0">
           <div className="flex flex-col space-y-6">
-            {/* <FormField
-              control={control}
-              name="meta.externalId"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel className="flex flex-row items-center">
-                    <Trans>External ID</Trans>
-                    <Tooltip>
-                      <TooltipTrigger>
-                        <InfoIcon className="mx-2 h-4 w-4" />
-                      </TooltipTrigger>
-                      <TooltipContent className="text-muted-foreground max-w-xs">
-                        <Trans>
-                          Add an external ID to the document. This can be used to identify the
-                          document in external systems.
-                        </Trans>
-                      </TooltipContent>
-                    </Tooltip>
-                  </FormLabel>
-                  <FormControl>
-                    <Input className="bg-background" {...field} disabled={isSubmitting} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            /> */}
-
             {features.allowConfigureSignatureTypes && (
               <FormField
                 control={control}

apps/remix/app/components/embed/authoring/configure-document-recipients.tsx

@@ -66,14 +66,13 @@ export const ConfigureDocumentRecipients = ({
   });
 
   const onAddSigner = useCallback(() => {
-    const signerNumber = signers.length + 1;
     const recipientSigningOrder =
       signers.length > 0 ? (signers[signers.length - 1]?.signingOrder || 0) + 1 : 1;
 
     appendSigner({
       formId: nanoid(8),
-      name: isTemplate ? `Recipient ${signerNumber}` : '',
+      name: '',
-      email: isTemplate ? `recipient.${signerNumber}@document.com` : '',
+      email: '',
       role: RecipientRole.SIGNER,
       signingOrder:
         signingOrder === DocumentSigningOrder.SEQUENTIAL ? recipientSigningOrder : undefined,

apps/remix/app/components/embed/authoring/configure-document-view.tsx

@@ -25,9 +25,11 @@ import { ConfigureDocumentUpload } from './configure-document-upload';
 import {
   type TConfigureEmbedFormSchema,
   ZConfigureEmbedFormSchema,
+  ZConfigureTemplateEmbedFormSchema,
 } from './configure-document-view.types';
 
 export interface ConfigureDocumentViewProps {
+  type?: 'document' | 'template';
   onSubmit: (data: TConfigureEmbedFormSchema) => void | Promise<void>;
   defaultValues?: Partial<TConfigureEmbedFormSchema>;
   disableUpload?: boolean;
@@ -35,6 +37,7 @@ export interface ConfigureDocumentViewProps {
 }
 
 export const ConfigureDocumentView = ({
+  type = 'document',
   onSubmit,
   defaultValues,
   disableUpload,
@@ -42,14 +45,16 @@ export const ConfigureDocumentView = ({
   const { isTemplate } = useConfigureDocument();
 
   const form = useForm<TConfigureEmbedFormSchema>({
-    resolver: zodResolver(ZConfigureEmbedFormSchema),
+    resolver: zodResolver(
+      type === 'template' ? ZConfigureTemplateEmbedFormSchema : ZConfigureEmbedFormSchema,
+    ),
     defaultValues: {
       title: defaultValues?.title || '',
       signers: defaultValues?.signers || [
         {
           formId: nanoid(8),
-          name: isTemplate ? `Recipient ${1}` : '',
+          name: '',
-          email: isTemplate ? `recipient.${1}@document.com` : '',
+          email: '',
           role: RecipientRole.SIGNER,
           signingOrder: 1,
           disabled: false,

apps/remix/app/components/embed/authoring/configure-document-view.types.ts

@@ -17,7 +17,7 @@ export const ZConfigureEmbedFormSchema = z.object({
       z.object({
         nativeId: z.number().optional(),
         formId: z.string(),
-        name: z.string().min(1, { message: 'Name is required' }),
+        name: z.string(),
         email: z.string().email('Invalid email address'),
         role: z.enum(['SIGNER', 'CC', 'APPROVER', 'VIEWER', 'ASSISTANT']),
         signingOrder: z.number().optional(),
@@ -48,3 +48,17 @@ export const ZConfigureEmbedFormSchema = z.object({
     })
     .optional(),
 });
+
+export const ZConfigureTemplateEmbedFormSchema = ZConfigureEmbedFormSchema.extend({
+  signers: z.array(
+    z.object({
+      nativeId: z.number().optional(),
+      formId: z.string(),
+      name: z.string(),
+      email: z.union([z.string().length(0), z.string().email('Invalid email address')]),
+      role: z.enum(['SIGNER', 'CC', 'APPROVER', 'VIEWER', 'ASSISTANT']),
+      signingOrder: z.number().optional(),
+      disabled: z.boolean().optional(),
+    }),
+  ),
+});

apps/remix/app/components/embed/authoring/configure-fields-view.tsx

@@ -42,7 +42,7 @@ export type ConfigureFieldsViewProps = {
   configData: TConfigureEmbedFormSchema;
   documentData?: DocumentData;
   defaultValues?: Partial<TConfigureFieldsFormSchema>;
-  onBack: (data: TConfigureFieldsFormSchema) => void;
+  onBack?: (data: TConfigureFieldsFormSchema) => void;
   onSubmit: (data: TConfigureFieldsFormSchema) => void;
 };
 
@@ -481,6 +481,7 @@ export const ConfigureFieldsView = ({
               </div>
 
               <div className="mt-6 flex gap-2">
+                {onBack && (
                   <Button
                     type="button"
                     variant="ghost"
@@ -490,6 +491,7 @@ export const ConfigureFieldsView = ({
                   >
                     <Trans>Back</Trans>
                   </Button>
+                )}
 
                 <Button
                   className="flex-1"
@@ -642,6 +644,7 @@ export const ConfigureFieldsView = ({
             </div>
 
             <div className="mt-6 flex gap-2">
+              {onBack && (
                 <Button
                   type="button"
                   variant="ghost"
@@ -651,6 +654,7 @@ export const ConfigureFieldsView = ({
                 >
                   <Trans>Back</Trans>
                 </Button>
+              )}
 
               <Button
                 className="flex-1"

apps/remix/app/routes/embed+/v1+/authoring+/_layout.tsx

@@ -36,14 +36,14 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
   }
 
   return {
-    hasValidToken: !!result,
     token,
+    hasValidToken: !!result,
     allowEmbedAuthoringWhiteLabel,
   };
 };
 
 export default function AuthoringLayout() {
-  const { hasValidToken, token, allowEmbedAuthoringWhiteLabel } = useLoaderData<typeof loader>();
+  const { token, hasValidToken, allowEmbedAuthoringWhiteLabel } = useLoaderData<typeof loader>();
 
   useLayoutEffect(() => {
     try {

apps/remix/app/routes/embed+/v1+/authoring+/document.edit.$id.tsx

@@ -27,7 +27,7 @@ import { ConfigureFieldsView } from '~/components/embed/authoring/configure-fiel
 import type { TConfigureFieldsFormSchema } from '~/components/embed/authoring/configure-fields-view.types';
 import {
   type TBaseEmbedAuthoringSchema,
-  ZBaseEmbedAuthoringSchema,
+  ZBaseEmbedAuthoringEditSchema,
 } from '~/types/embed-authoring-base-schema';
 
 import type { Route } from './+types/document.edit.$id';
@@ -88,6 +88,8 @@ export default function EmbeddingAuthoringDocumentEditPage() {
 
   const { document } = useLoaderData<typeof loader>();
 
+  const [hasFinishedInit, setHasFinishedInit] = useState(false);
+
   const signatureTypes = useMemo(() => {
     const types: string[] = [];
 
@@ -159,6 +161,7 @@ export default function EmbeddingAuthoringDocumentEditPage() {
   const [features, setFeatures] = useState<TBaseEmbedAuthoringSchema['features'] | null>(null);
   const [externalId, setExternalId] = useState<string | null>(null);
   const [currentStep, setCurrentStep] = useState(1);
+  const [canGoBack, setCanGoBack] = useState(true);
 
   const { mutateAsync: updateEmbeddingDocument } =
     trpc.embeddingPresign.updateEmbeddingDocument.useMutation();
@@ -177,6 +180,7 @@ export default function EmbeddingAuthoringDocumentEditPage() {
         fields: fieldData.fields.filter((field) => signerEmails.includes(field.signerEmail)),
       };
     });
+
     setCurrentStep(2);
   };
 
@@ -275,7 +279,7 @@ export default function EmbeddingAuthoringDocumentEditPage() {
     try {
       const hash = window.location.hash.slice(1);
 
-      const result = ZBaseEmbedAuthoringSchema.safeParse(
+      const result = ZBaseEmbedAuthoringEditSchema.safeParse(
         JSON.parse(decodeURIComponent(atob(hash))),
       );
 
@@ -285,15 +289,26 @@ export default function EmbeddingAuthoringDocumentEditPage() {
 
       setFeatures(result.data.features);
 
+      if (result.data.onlyEditFields) {
+        setCurrentStep(2);
+        setCanGoBack(false);
+      }
+
       // Extract externalId from the parsed data if available
       if (result.data.externalId) {
         setExternalId(result.data.externalId);
       }
+
+      setHasFinishedInit(true);
     } catch (err) {
       console.error('Error parsing embedding params:', err);
     }
   }, []);
 
+  if (!hasFinishedInit) {
+    return null;
+  }
+
   return (
     <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg p-6">
       <ConfigureDocumentProvider isTemplate={false} features={features ?? {}}>
@@ -308,7 +323,7 @@ export default function EmbeddingAuthoringDocumentEditPage() {
             configData={configuration!}
             documentData={document.documentData}
             defaultValues={fields ?? undefined}
-            onBack={handleBackToConfig}
+            onBack={canGoBack ? handleBackToConfig : undefined}
             onSubmit={handleConfigureFieldsSubmit}
           />
         </Stepper>

apps/remix/app/routes/embed+/v1+/authoring+/template.create.tsx

@@ -154,6 +154,7 @@ export default function EmbeddingAuthoringTemplateCreatePage() {
       <ConfigureDocumentProvider isTemplate={true} features={features ?? {}}>
         <Stepper currentStep={currentStep} setCurrentStep={setCurrentStep}>
           <ConfigureDocumentView
+            type="template"
             defaultValues={configuration ?? undefined}
             onSubmit={handleConfigurePageViewSubmit}
           />

apps/remix/app/routes/embed+/v1+/authoring+/template.edit.$id.tsx

@@ -27,7 +27,7 @@ import { ConfigureFieldsView } from '~/components/embed/authoring/configure-fiel
 import type { TConfigureFieldsFormSchema } from '~/components/embed/authoring/configure-fields-view.types';
 import {
   type TBaseEmbedAuthoringSchema,
-  ZBaseEmbedAuthoringSchema,
+  ZBaseEmbedAuthoringEditSchema,
 } from '~/types/embed-authoring-base-schema';
 
 import type { Route } from './+types/document.edit.$id';
@@ -88,6 +88,8 @@ export default function EmbeddingAuthoringTemplateEditPage() {
 
   const { template } = useLoaderData<typeof loader>();
 
+  const [hasFinishedInit, setHasFinishedInit] = useState(false);
+
   const signatureTypes = useMemo(() => {
     const types: string[] = [];
 
@@ -159,6 +161,7 @@ export default function EmbeddingAuthoringTemplateEditPage() {
   const [features, setFeatures] = useState<TBaseEmbedAuthoringSchema['features'] | null>(null);
   const [externalId, setExternalId] = useState<string | null>(null);
   const [currentStep, setCurrentStep] = useState(1);
+  const [canGoBack, setCanGoBack] = useState(true);
 
   const { mutateAsync: updateEmbeddingTemplate } =
     trpc.embeddingPresign.updateEmbeddingTemplate.useMutation();
@@ -230,7 +233,9 @@ export default function EmbeddingAuthoringTemplateEditPage() {
           signingOrder: signer.signingOrder,
           fields: fields
             .filter((field) => field.signerEmail === signer.email)
-            .map((f) => ({
+            // There's a gnarly discriminated union that makes this hard to satisfy, we're casting for the second
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .map<any>((f) => ({
               ...f,
               id: f.nativeId,
               envelopeItemId: template.templateDocumentData.envelopeItemId,
@@ -273,7 +278,7 @@ export default function EmbeddingAuthoringTemplateEditPage() {
     try {
       const hash = window.location.hash.slice(1);
 
-      const result = ZBaseEmbedAuthoringSchema.safeParse(
+      const result = ZBaseEmbedAuthoringEditSchema.safeParse(
         JSON.parse(decodeURIComponent(atob(hash))),
       );
 
@@ -283,20 +288,32 @@ export default function EmbeddingAuthoringTemplateEditPage() {
 
       setFeatures(result.data.features);
 
+      if (result.data.onlyEditFields) {
+        setCurrentStep(2);
+        setCanGoBack(false);
+      }
+
       // Extract externalId from the parsed data if available
       if (result.data.externalId) {
         setExternalId(result.data.externalId);
       }
+
+      setHasFinishedInit(true);
     } catch (err) {
       console.error('Error parsing embedding params:', err);
     }
   }, []);
 
+  if (!hasFinishedInit) {
+    return null;
+  }
+
   return (
     <div className="relative mx-auto flex min-h-[100dvh] max-w-screen-lg p-6">
       <ConfigureDocumentProvider isTemplate={false} features={features ?? {}}>
         <Stepper currentStep={currentStep} setCurrentStep={setCurrentStep}>
           <ConfigureDocumentView
+            type="template"
             defaultValues={configuration ?? undefined}
             disableUpload={true}
             onSubmit={handleConfigurePageViewSubmit}
@@ -306,7 +323,7 @@ export default function EmbeddingAuthoringTemplateEditPage() {
             configData={configuration!}
             documentData={template.templateDocumentData}
             defaultValues={fields ?? undefined}
-            onBack={handleBackToConfig}
+            onBack={canGoBack ? handleBackToConfig : undefined}
             onSubmit={handleConfigureFieldsSubmit}
           />
         </Stepper>

apps/remix/app/types/embed-authoring-base-schema.ts

@@ -2,8 +2,7 @@ import { z } from 'zod';
 
 import { ZBaseEmbedDataSchema } from './embed-base-schemas';
 
-export const ZBaseEmbedAuthoringSchema = z
+export const ZBaseEmbedAuthoringSchema = ZBaseEmbedDataSchema.extend({
-  .object({
   externalId: z.string().optional(),
   features: z
     .object({
@@ -16,7 +15,11 @@ export const ZBaseEmbedAuthoringSchema = z
     })
     .optional()
     .default({}),
-  })
+});
-  .and(ZBaseEmbedDataSchema);
+
+export const ZBaseEmbedAuthoringEditSchema = ZBaseEmbedAuthoringSchema.extend({
+  onlyEditFields: z.boolean().optional().default(false),
+});
 
 export type TBaseEmbedAuthoringSchema = z.infer<typeof ZBaseEmbedAuthoringSchema>;
+export type TBaseEmbedAuthoringEditSchema = z.infer<typeof ZBaseEmbedAuthoringEditSchema>;

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

@@ -21,20 +21,27 @@ 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
+  recipients: z.array(
-    .array(
+    z.object({
-      ZCreateRecipientSchema.extend({
+      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,
@@ -45,9 +52,7 @@ export const ZCreateEmbeddingDocumentRequestSchema = z.object({
         .array()
         .optional(),
     }),
-    )
+  ),
-
-    .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(),
+      email: z.union([z.string().length(0), z.string().email()]),
-      name: z.string().optional(),
+      name: z.string(),
-      role: z.nativeEnum(RecipientRole).optional(),
+      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 fields = recipients.flatMap((recipient) => {
-        const recipientId = updatedRecipients.find((r) => r.email === recipient.email)?.id;
+        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(),
+      email: z.union([z.string().length(0), z.string().email()]),
-      name: z.string().optional(),
+      name: z.string(),
-      role: z.nativeEnum(RecipientRole).optional(),
+      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 = useMemo(() => {
-    const recipientsByRole: Record<RecipientRole, Recipient[]> = {
+    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(() => {
+  const recipientsByRoleToDisplay = useMemo(() => {
-    return Object.entries(recipientsByRole())
+    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 && (
+                    {getRecipientLabel(recipient)}
-                      <span title={`${recipient.name} (${recipient.email})`}>
-                        {recipient.name} ({recipient.email})
-                      </span>
-                    )}
-
-                    {!recipient.name && <span title={recipient.email}>{recipient.email}</span>}
                   </span>
 
                   <div className="ml-auto flex items-center justify-center">