feat: allow editing pending envelope titles (#2604)

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

@@ -28,7 +28,7 @@ import {
   type TSignatureFieldMeta,
   type TTextFieldMeta,
 } from '@documenso/lib/types/field-meta';
-import { canEnvelopeItemsBeModified } from '@documenso/lib/utils/envelope';
+import { getEnvelopeItemPermissions } from '@documenso/lib/utils/envelope';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { cn } from '@documenso/ui/lib/utils';
@@ -88,8 +88,8 @@ export const EnvelopeEditorFieldsPage = () => {
   const [isAiEnableDialogOpen, setIsAiEnableDialogOpen] = useState(false);
   const { revalidate } = useRevalidator();
 
-  const canItemsBeModified = useMemo(
-    () => canEnvelopeItemsBeModified(envelope, envelope.recipients),
+  const envelopeItemPermissions = useMemo(
+    () => getEnvelopeItemPermissions(envelope, envelope.recipients),
     [envelope, envelope.recipients],
   );
 
@@ -171,7 +171,7 @@ export const EnvelopeEditorFieldsPage = () => {
           renderItemAction={
             editorConfig.envelopeItems !== null &&
             editorConfig.envelopeItems.allowReplace &&
-            canItemsBeModified
+            envelopeItemPermissions.canFileBeChanged
               ? (item) => (
                   <div className="relative flex h-5 w-5 flex-shrink-0 items-center justify-center">
                     <div

apps/remix/app/components/general/envelope-editor/envelope-editor-header.tsx

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import { Trans, useLingui } from '@lingui/react/macro';
 import { DocumentStatus, EnvelopeType, TemplateType } from '@prisma/client';
 import {
@@ -13,7 +15,10 @@ import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import { mapSecondaryIdToTemplateId } from '@documenso/lib/utils/envelope';
+import {
+  getEnvelopeItemPermissions,
+  mapSecondaryIdToTemplateId,
+} from '@documenso/lib/utils/envelope';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import { Separator } from '@documenso/ui/primitives/separator';
@@ -50,6 +55,11 @@ export default function EnvelopeEditorHeader() {
     actions: { allowAttachments, allowDistributing },
   } = editorConfig;
 
+  const envelopeItemPermissions = useMemo(
+    () => getEnvelopeItemPermissions(envelope, envelope.recipients),
+    [envelope, envelope.recipients],
+  );
+
   const handleCreateEmbeddedEnvelope = async () => {
     const latestEnvelope = await flushAutosave();
 
@@ -81,7 +91,8 @@ export default function EnvelopeEditorHeader() {
 
           <div className="flex items-center space-x-2">
             <EnvelopeItemTitleInput
-              disabled={envelope.status !== DocumentStatus.DRAFT || !allowConfigureEnvelopeTitle}
+              dataTestId="envelope-title-input"
+              disabled={!envelopeItemPermissions.canTitleBeChanged || !allowConfigureEnvelopeTitle}
               value={envelope.title}
               onChange={(title) => {
                 updateEnvelope({

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

@@ -4,7 +4,6 @@ import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
 import type { DropResult } from '@hello-pangea/dnd';
 import { msg, plural } from '@lingui/core/macro';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { DocumentStatus } from '@prisma/client';
 import { FileWarningIcon, GripVerticalIcon, Loader2Icon, PencilIcon, XIcon } from 'lucide-react';
 import { ErrorCode as DropzoneErrorCode, type FileRejection, useDropzone } from 'react-dropzone';
 
@@ -17,7 +16,7 @@ import type { TEditorEnvelope } from '@documenso/lib/types/envelope-editor';
 import { nanoid } from '@documenso/lib/universal/id';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
 import { PRESIGNED_ENVELOPE_ITEM_ID_PREFIX } from '@documenso/lib/utils/embed-config';
-import { canEnvelopeItemsBeModified } from '@documenso/lib/utils/envelope';
+import { getEnvelopeItemPermissions } from '@documenso/lib/utils/envelope';
 import { trpc } from '@documenso/trpc/react';
 import type { TCreateEnvelopeItemsPayload } from '@documenso/trpc/server/envelope-router/create-envelope-items.types';
 import type { TReplaceEnvelopeItemPdfPayload } from '@documenso/trpc/server/envelope-router/replace-envelope-item-pdf.types';
@@ -137,6 +136,11 @@ export const EnvelopeEditorUploadPage = () => {
     },
   });
 
+  const envelopeItemPermissions = useMemo(
+    () => getEnvelopeItemPermissions(envelope, envelope.recipients),
+    [envelope, envelope.recipients],
+  );
+
   const { mutateAsync: replaceEnvelopeItemPdf } = trpc.envelope.item.replacePdf.useMutation({
     onSuccess: ({ data, fields }) => {
       // Update the envelope item with the new documentDataId.
@@ -155,11 +159,6 @@ export const EnvelopeEditorUploadPage = () => {
     },
   });
 
-  const canItemsBeModified = useMemo(
-    () => canEnvelopeItemsBeModified(envelope, envelope.recipients),
-    [envelope, envelope.recipients],
-  );
-
   const onFileDrop = async (files: File[]) => {
     const newUploadingFiles: (LocalFile & {
       file: File;
@@ -418,7 +417,7 @@ export const EnvelopeEditorUploadPage = () => {
   };
 
   const dropzoneDisabledMessage = useMemo(() => {
-    if (!canItemsBeModified) {
+    if (!envelopeItemPermissions.canFileBeChanged) {
       return msg`Cannot upload items after the document has been sent`;
     }
 
@@ -509,8 +508,8 @@ export const EnvelopeEditorUploadPage = () => {
                         key={localFile.id}
                         isDragDisabled={
                           isCreatingEnvelopeItems ||
+                          !envelopeItemPermissions.canOrderBeChanged ||
                           localFile.isReplacing ||
-                          !canItemsBeModified ||
                           !uploadConfig?.allowConfigureOrder
                         }
                         draggableId={localFile.id}
@@ -541,7 +540,7 @@ export const EnvelopeEditorUploadPage = () => {
                                 {localFile.envelopeItemId !== null ? (
                                   <EnvelopeItemTitleInput
                                     disabled={
-                                      envelope.status !== DocumentStatus.DRAFT ||
+                                      !envelopeItemPermissions.canTitleBeChanged ||
                                       !uploadConfig?.allowConfigureTitle ||
                                       localFile.isReplacing
                                     }
@@ -579,7 +578,7 @@ export const EnvelopeEditorUploadPage = () => {
                               )}
 
                               {localFile.envelopeItemId &&
-                                canItemsBeModified &&
+                                envelopeItemPermissions.canFileBeChanged &&
                                 uploadConfig?.allowReplace && (
                                   <Button
                                     variant="ghost"
@@ -613,7 +612,7 @@ export const EnvelopeEditorUploadPage = () => {
                                   </Button>
                                 ) : (
                                   <EnvelopeItemDeleteDialog
-                                    canItemBeDeleted={canItemsBeModified}
+                                    canItemBeDeleted={envelopeItemPermissions.canFileBeChanged}
                                     envelopeId={envelope.id}
                                     envelopeItemId={localFile.envelopeItemId}
                                     envelopeItemTitle={localFile.title}