feat: add additional field options (#2154)

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

@@ -2,7 +2,7 @@ import { lazy, useEffect, useMemo, useState } from 'react';
 
 import { faker } from '@faker-js/faker/locale/en';
 import { Trans } from '@lingui/react/macro';
-import { FieldType } from '@prisma/client';
+import { FieldType, SigningStatus } from '@prisma/client';
 import { FileTextIcon } from 'lucide-react';
 import { match } from 'ts-pattern';
 
@@ -201,7 +201,10 @@ export const EnvelopeEditorPreviewPage = () => {
       envelope={envelope}
       token={undefined}
       fields={fieldsWithPlaceholders}
-      recipients={envelope.recipients}
+      recipients={envelope.recipients.map((recipient) => ({
+        ...recipient,
+        signingStatus: SigningStatus.SIGNED,
+      }))}
       overrideSettings={{
         mode: 'export',
       }}

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

@@ -49,7 +49,7 @@ export const EnvelopeEditorUploadPage = () => {
   const organisation = useCurrentOrganisation();
 
   const { t } = useLingui();
-  const { envelope, setLocalEnvelope, relativePath } = useCurrentEnvelopeEditor();
+  const { envelope, setLocalEnvelope, relativePath, editorFields } = useCurrentEnvelopeEditor();
   const { maximumEnvelopeItemCount, remaining } = useLimits();
   const { toast } = useToast();
 
@@ -165,9 +165,17 @@ export const EnvelopeEditorUploadPage = () => {
   const onFileDelete = (envelopeItemId: string) => {
     setLocalFiles((prev) => prev.filter((uploadingFile) => uploadingFile.id !== envelopeItemId));
 
+    const fieldsWithoutDeletedItem = envelope.fields.filter(
+      (field) => field.envelopeItemId !== envelopeItemId,
+    );
+
     setLocalEnvelope({
       envelopeItems: envelope.envelopeItems.filter((item) => item.id !== envelopeItemId),
+      fields: envelope.fields.filter((field) => field.envelopeItemId !== envelopeItemId),
     });
+
+    // Reset editor fields.
+    editorFields.resetForm(fieldsWithoutDeletedItem);
   };
 
   /**

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

@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
-import { type Recipient, SigningStatus } from '@prisma/client';
+import { DocumentStatus, type Recipient, SigningStatus } from '@prisma/client';
 import type Konva from 'konva';
 
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
@@ -19,6 +19,7 @@ export default function EnvelopeGenericPageRenderer() {
   const { i18n } = useLingui();
 
   const {
+    envelopeStatus,
     currentEnvelopeItem,
     fields,
     recipients,
@@ -42,6 +43,10 @@ export default function EnvelopeGenericPageRenderer() {
   const { _className, scale } = pageContext;
 
   const localPageFields = useMemo((): GenericLocalField[] => {
+    if (envelopeStatus === DocumentStatus.COMPLETED) {
+      return [];
+    }
+
     return fields
       .filter(
         (field) =>
@@ -54,11 +59,20 @@ export default function EnvelopeGenericPageRenderer() {
           throw new Error(`Recipient not found for field ${field.id}`);
         }
 
+        const isInserted = recipient.signingStatus === SigningStatus.SIGNED && field.inserted;
+
         return {
           ...field,
+          inserted: isInserted,
+          customText: isInserted ? field.customText : '',
           recipient,
         };
-      });
+      })
+      .filter(
+        ({ inserted, fieldMeta, recipient }) =>
+          (recipient.signingStatus === SigningStatus.SIGNED ? inserted : true) ||
+          fieldMeta?.readOnly,
+      );
   }, [fields, pageContext.pageNumber, currentEnvelopeItem?.id, recipients]);
 
   const unsafeRenderFieldOnLayer = (field: GenericLocalField) => {
@@ -67,12 +81,8 @@ export default function EnvelopeGenericPageRenderer() {
       return;
     }
 
-    const { recipient } = field;
-
     const fieldTranslations = getClientSideFieldTranslations(i18n);
 
-    const isInserted = recipient.signingStatus === SigningStatus.SIGNED && field.inserted;
-
     renderField({
       scale,
       pageLayer: pageLayer.current,
@@ -83,7 +93,6 @@ export default function EnvelopeGenericPageRenderer() {
         height: Number(field.height),
         positionX: Number(field.positionX),
         positionY: Number(field.positionY),
-        customText: isInserted ? field.customText : '',
         fieldMeta: field.fieldMeta,
         signature: {
           signatureImageAsBase64: '',