feat: enhance document signing page with field canvas style integration (#2876)

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

@@ -9,6 +9,10 @@ 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 {
+  createFieldCanvasStyleCache,
+  type FieldCanvasStyleCache,
+} from '@documenso/lib/universal/field-renderer/field-canvas-style';
 import { createSpinner } from '@documenso/lib/universal/field-renderer/field-generic-items';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
@@ -135,7 +139,10 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
     });
   }, [envelope.recipients, pageNumber, currentEnvelopeItem?.id]);
 
-  const unsafeRenderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
+  const unsafeRenderFieldOnLayer = (
+    unparsedField: Field & { signature?: Signature | null },
+    fieldCanvasStyleCache: FieldCanvasStyleCache,
+  ) => {
     if (!pageLayer.current) {
       console.error('Layer not loaded yet');
       return;
@@ -143,11 +150,9 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
 
     const fieldToRender = ZFullFieldSchema.parse(unparsedField);
 
-    const color = fieldToRender.fieldMeta?.readOnly
-      ? 'readOnly'
-      : showPendingFieldTooltip && isFieldUnsignedAndRequired(fieldToRender)
-        ? 'orange'
-        : 'green';
+    const isValidating = showPendingFieldTooltip && isFieldUnsignedAndRequired(fieldToRender);
+
+    const color = fieldToRender.fieldMeta?.readOnly ? 'readOnly' : isValidating ? 'orange' : 'green';
 
     const { fieldGroup } = renderField({
       scale,
@@ -159,6 +164,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
         height: Number(fieldToRender.height),
         positionX: Number(fieldToRender.positionX),
         positionY: Number(fieldToRender.positionY),
+        isValidating,
         signature: unparsedField.signature,
       },
       translations: getClientSideFieldTranslations(i18n),
@@ -166,6 +172,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
       pageHeight: unscaledViewport.height,
       color,
       mode: 'sign',
+      fieldCanvasStyleCache,
     });
 
     const handleFieldGroupClick = (e: KonvaEventObject<Event>) => {
@@ -411,9 +418,12 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
     fieldGroup.on('pointerdown', handleFieldGroupClick);
   };
 
-  const renderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
+  const renderFieldOnLayer = (
+    unparsedField: Field & { signature?: Signature | null },
+    fieldCanvasStyleCache: FieldCanvasStyleCache,
+  ) => {
     try {
-      unsafeRenderFieldOnLayer(unparsedField);
+      unsafeRenderFieldOnLayer(unparsedField, fieldCanvasStyleCache);
     } catch (err) {
       console.error(err);
       setRenderError(true);
@@ -426,6 +436,8 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
       return;
     }
 
+    const fieldCanvasStyleCache = createFieldCanvasStyleCache();
+
     // Render current recipient fields which have changed or are not currently rendered.
     for (const field of localPageFields) {
       const existingCachedField = cachedRenderFields.current.get(field.id);
@@ -437,7 +449,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
         existingCachedField.inserted !== field.inserted ||
         existingCachedField.customText !== field.customText
       ) {
-        renderFieldOnLayer(field);
+        renderFieldOnLayer(field, fieldCanvasStyleCache);
         cachedRenderFields.current.set(field.id, field);
       }
     }
@@ -463,6 +475,7 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
           color: 'readOnly',
           editable: false,
           mode: 'sign',
+          fieldCanvasStyleCache,
         });
 
         // Other-recipient fields are display-only — they have no click handlers