feat: render signatures on pending envelopes (#2743)

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

@@ -25,12 +25,17 @@ export const EnvelopeGenericPageRenderer = ({ pageData }: { pageData: PageRender
     envelopeStatus,
     currentEnvelopeItem,
     fields,
+    signatures,
     recipients,
     getRecipientColorKey,
     setRenderError,
     overrideSettings,
   } = useCurrentEnvelopeRender();
 
+  const signaturesByFieldId = useMemo(() => {
+    return new Map(signatures.map((signature) => [signature.fieldId, signature]));
+  }, [signatures]);
+
   const { stage, pageLayer, konvaContainer, unscaledViewport } = usePageRenderer(
     ({ stage, pageLayer }) => {
       createPageCanvas(stage, pageLayer);
@@ -80,6 +85,16 @@ export const EnvelopeGenericPageRenderer = ({ pageData }: { pageData: PageRender
 
     const fieldTranslations = getClientSideFieldTranslations(i18n);
 
+    // Look up an inserted signature for this field. If we don't have one (e.g.
+    // the signatures haven't been loaded, or the field hasn't been signed yet)
+    // fall back to a placeholder so the field still renders something.
+    const insertedSignature = signaturesByFieldId.get(field.id);
+
+    const signature = insertedSignature ?? {
+      signatureImageAsBase64: '',
+      typedSignature: fieldTranslations.SIGNATURE,
+    };
+
     renderField({
       scale,
       pageLayer: pageLayer.current,
@@ -91,10 +106,7 @@ export const EnvelopeGenericPageRenderer = ({ pageData }: { pageData: PageRender
         positionX: Number(field.positionX),
         positionY: Number(field.positionY),
         fieldMeta: field.fieldMeta,
-        signature: {
-          signatureImageAsBase64: '',
-          typedSignature: fieldTranslations.SIGNATURE,
-        },
+        signature,
       },
       translations: fieldTranslations,
       pageWidth: unscaledViewport.width,
@@ -150,7 +162,7 @@ export const EnvelopeGenericPageRenderer = ({ pageData }: { pageData: PageRender
     });
 
     pageLayer.current.batchDraw();
-  }, [localPageFields]);
+  }, [localPageFields, signaturesByFieldId]);
 
   if (!currentEnvelopeItem) {
     return null;

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

@@ -62,6 +62,17 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
     },
   );
 
+  const { data: fieldSignatures } = trpc.envelope.field.getSignatures.useQuery(
+    {
+      envelopeId: params.id,
+    },
+    {
+      ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+      enabled:
+        envelope && envelope.internalVersion === 2 && envelope.status === DocumentStatus.PENDING,
+    },
+  );
+
   if (isLoadingEnvelope) {
     return (
       <div className="flex w-screen flex-col items-center justify-center gap-2 py-64 text-foreground">
@@ -159,6 +170,7 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
               envelopeItems={envelope.envelopeItems}
               token={undefined}
               fields={envelope.fields}
+              signatures={fieldSignatures}
               recipients={envelope.recipients}
               overrideSettings={{
                 showRecipientSigningStatus: true,