feat: add additional field options (#2154)

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

@@ -1,7 +1,14 @@
 import { useEffect, useMemo } from 'react';
 
 import { Trans, useLingui } from '@lingui/react/macro';
-import { type Field, FieldType, RecipientRole, type Signature } from '@prisma/client';
+import {
+  type Field,
+  FieldType,
+  type Recipient,
+  RecipientRole,
+  type Signature,
+  SigningStatus,
+} from '@prisma/client';
 import type Konva from 'konva';
 import type { KonvaEventObject } from 'konva/lib/Node';
 import { match } from 'ts-pattern';
@@ -12,6 +19,7 @@ import { useOptionalSession } from '@documenso/lib/client-only/providers/session
 import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct-templates';
 import { isBase64Image } from '@documenso/lib/constants/signatures';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { ZFullFieldSchema } from '@documenso/lib/types/field';
 import { createSpinner } from '@documenso/lib/universal/field-renderer/field-generic-items';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
@@ -19,6 +27,7 @@ import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields
 import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import type { TSignEnvelopeFieldValue } from '@documenso/trpc/server/envelope-router/sign-envelope-field.types';
+import { EnvelopeRecipientFieldTooltip } from '@documenso/ui/components/document/envelope-recipient-field-tooltip';
 import { EnvelopeFieldToolTip } from '@documenso/ui/components/field/envelope-field-tooltip';
 import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -36,6 +45,10 @@ import { handleTextFieldClick } from '~/utils/field-signing/text-field';
 import { useRequiredDocumentSigningAuthContext } from '../document-signing/document-signing-auth-provider';
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
 
+type GenericLocalField = TEnvelope['fields'][number] & {
+  recipient: Pick<Recipient, 'id' | 'name' | 'email' | 'signingStatus'>;
+};
+
 export default function EnvelopeSignerPageRenderer() {
   const { t, i18n } = useLingui();
   const { currentEnvelopeItem, setRenderError } = useCurrentEnvelopeRender();
@@ -91,6 +104,36 @@ export default function EnvelopeSignerPageRenderer() {
     );
   }, [recipientFields, selectedAssistantRecipientFields, pageContext.pageNumber]);
 
+  /**
+   * Returns fields that have been fully signed by other recipients for this specific
+   * page.
+   */
+  const localPageOtherRecipientFields = useMemo((): GenericLocalField[] => {
+    const signedRecipients = envelope.recipients.filter(
+      (recipient) => recipient.signingStatus === SigningStatus.SIGNED,
+    );
+
+    return signedRecipients.flatMap((recipient) => {
+      return recipient.fields
+        .filter(
+          (field) =>
+            field.page === pageContext.pageNumber &&
+            field.envelopeItemId === currentEnvelopeItem?.id &&
+            (field.inserted || field.fieldMeta?.readOnly),
+        )
+        .map((field) => ({
+          ...field,
+          recipient: {
+            id: recipient.id,
+            name: recipient.name,
+            email: recipient.email,
+            signingStatus: recipient.signingStatus,
+            role: recipient.role,
+          },
+        }));
+    });
+  }, [envelope.recipients, pageContext.pageNumber]);
+
   const unsafeRenderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
     if (!pageLayer.current) {
       console.error('Layer not loaded yet');
@@ -376,6 +419,46 @@ export default function EnvelopeSignerPageRenderer() {
     }
   };
 
+  const renderFields = () => {
+    if (!pageLayer.current) {
+      console.error('Layer not loaded yet');
+      return;
+    }
+
+    // Render current recipient fields.
+    for (const field of localPageFields) {
+      renderFieldOnLayer(field);
+    }
+
+    // Render other recipient signed and inserted fields.
+    for (const field of localPageOtherRecipientFields) {
+      try {
+        renderField({
+          scale,
+          pageLayer: pageLayer.current,
+          field: {
+            renderId: field.id.toString(),
+            ...field,
+            width: Number(field.width),
+            height: Number(field.height),
+            positionX: Number(field.positionX),
+            positionY: Number(field.positionY),
+            fieldMeta: field.fieldMeta,
+          },
+          translations: getClientSideFieldTranslations(i18n),
+          pageWidth: unscaledViewport.width,
+          pageHeight: unscaledViewport.height,
+          color: 'readOnly',
+          editable: false,
+          mode: 'sign',
+        });
+      } catch (err) {
+        console.error('Unable to render one or more fields belonging to other recipients.');
+        console.error(err);
+      }
+    }
+  };
+
   const signField = async (
     fieldId: number,
     payload: TSignEnvelopeFieldValue,
@@ -412,11 +495,7 @@ export default function EnvelopeSignerPageRenderer() {
    * Initialize the Konva page canvas and all fields and interactions.
    */
   const createPageCanvas = (currentStage: Konva.Stage, currentPageLayer: Konva.Layer) => {
-    // Render the fields.
-    for (const field of localPageFields) {
-      renderFieldOnLayer(field);
-    }
-
+    renderFields();
     currentPageLayer.batchDraw();
   };
 
@@ -428,9 +507,7 @@ export default function EnvelopeSignerPageRenderer() {
       return;
     }
 
-    localPageFields.forEach((field) => {
-      renderFieldOnLayer(field);
-    });
+    renderFields();
 
     pageLayer.current.batchDraw();
   }, [localPageFields, showPendingFieldTooltip, fullName, signature, email]);
@@ -446,9 +523,7 @@ export default function EnvelopeSignerPageRenderer() {
     // Rerender the whole page.
     pageLayer.current.destroyChildren();
 
-    localPageFields.forEach((field) => {
-      renderFieldOnLayer(field);
-    });
+    renderFields();
 
     pageLayer.current.batchDraw();
   }, [selectedAssistantRecipient]);
@@ -475,6 +550,15 @@ export default function EnvelopeSignerPageRenderer() {
           </EnvelopeFieldToolTip>
         )}
 
+      {localPageOtherRecipientFields.map((field) => (
+        <EnvelopeRecipientFieldTooltip
+          key={field.id}
+          field={field}
+          showFieldStatus={true}
+          showRecipientTooltip={true}
+        />
+      ))}
+
       {/* The element Konva will inject it's canvas into. */}
       <div className="konva-container absolute inset-0 z-10 w-full" ref={konvaContainer}></div>