Merge branch 'main' into fix/cc-recipient-order-last

apps/remix/app/components/dialogs/envelope-cancel-dialog.tsx

@@ -0,0 +1,134 @@
+import { trpc as trpcReact } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import { Label } from '@documenso/ui/primitives/label';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useEffect, useState } from 'react';
+
+export type EnvelopeCancelDialogProps = {
+  id: string;
+  title: string;
+  trigger?: React.ReactNode;
+  onCancel?: () => Promise<void> | void;
+};
+
+export const EnvelopeCancelDialog = ({ id, title, trigger, onCancel }: EnvelopeCancelDialogProps) => {
+  const { toast } = useToast();
+  const { t } = useLingui();
+  const trpcUtils = trpcReact.useUtils();
+
+  const [open, setOpen] = useState(false);
+  const [reason, setReason] = useState('');
+
+  const { mutateAsync: cancelEnvelope, isPending } = trpcReact.envelope.cancel.useMutation({
+    onSuccess: async () => {
+      toast({
+        title: t`Document cancelled`,
+        description: t`"${title}" has been successfully cancelled`,
+        duration: 5000,
+      });
+
+      await trpcUtils.document.findDocumentsInternal.invalidate();
+
+      await onCancel?.();
+
+      setOpen(false);
+    },
+    onError: () => {
+      toast({
+        title: t`Something went wrong`,
+        description: t`This document could not be cancelled at this time. Please try again.`,
+        variant: 'destructive',
+        duration: 7500,
+      });
+    },
+  });
+
+  useEffect(() => {
+    if (open) {
+      setReason('');
+    }
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !isPending && setOpen(value)}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Are you sure?</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Trans>
+              You are about to cancel <strong>"{title}"</strong>
+            </Trans>
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="warning" className="-mt-1">
+          <AlertDescription>
+            <p>
+              <Trans>Once confirmed, the following will occur:</Trans>
+            </p>
+
+            <ul className="mt-0.5 list-inside list-disc">
+              <li>
+                <Trans>The document signing process will be stopped</Trans>
+              </li>
+              <li>
+                <Trans>Recipients will be notified that the document was cancelled</Trans>
+              </li>
+              <li>
+                <Trans>The document will remain in your dashboard marked as Cancelled</Trans>
+              </li>
+            </ul>
+          </AlertDescription>
+        </Alert>
+
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="cancel-reason">
+            <Trans>Reason (optional)</Trans>
+          </Label>
+
+          <Textarea
+            id="cancel-reason"
+            value={reason}
+            onChange={(event) => setReason(event.target.value)}
+            placeholder={t`Add an optional reason for cancelling this document`}
+          />
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="secondary" disabled={isPending}>
+              <Trans>Cancel</Trans>
+            </Button>
+          </DialogClose>
+
+          <Button
+            type="button"
+            loading={isPending}
+            onClick={() => void cancelEnvelope({ envelopeId: id, reason: reason || undefined })}
+            variant="destructive"
+          >
+            <Trans>Cancel document</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/envelope-delete-dialog.tsx

@@ -166,7 +166,7 @@ export const EnvelopeDeleteDialog = ({
                   </ul>
                 </AlertDescription>
               ))
-              .with(P.union(DocumentStatus.COMPLETED, DocumentStatus.REJECTED), () => (
+              .with(P.union(DocumentStatus.COMPLETED, DocumentStatus.REJECTED, DocumentStatus.CANCELLED), () => (
                 <AlertDescription>
                   <p>
                     <Trans>By deleting this document, the following will occur:</Trans>

apps/remix/app/components/dialogs/envelopes-bulk-cancel-dialog.tsx

@@ -0,0 +1,159 @@
+import { trpc } from '@documenso/trpc/react';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@documenso/ui/primitives/dialog';
+import { Label } from '@documenso/ui/primitives/label';
+import { Textarea } from '@documenso/ui/primitives/textarea';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { plural } from '@lingui/core/macro';
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useEffect, useState } from 'react';
+
+export type EnvelopesBulkCancelDialogProps = {
+  envelopeIds: string[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess?: () => void;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const EnvelopesBulkCancelDialog = ({
+  envelopeIds,
+  open,
+  onOpenChange,
+  onSuccess,
+  ...props
+}: EnvelopesBulkCancelDialogProps) => {
+  const { t } = useLingui();
+  const { toast } = useToast();
+
+  const trpcUtils = trpc.useUtils();
+
+  const [reason, setReason] = useState('');
+
+  useEffect(() => {
+    if (open) {
+      setReason('');
+    }
+  }, [open]);
+
+  const { mutateAsync: bulkCancelEnvelopes, isPending } = trpc.envelope.bulk.cancel.useMutation({
+    onSuccess: async (result) => {
+      await trpcUtils.document.findDocumentsInternal.invalidate();
+
+      if (result.failedIds.length > 0) {
+        toast({
+          title: t`Documents partially cancelled`,
+          description: t`${plural(result.cancelledCount, {
+            one: '# document cancelled.',
+            other: '# documents cancelled.',
+          })} ${plural(result.failedIds.length, {
+            one: '# document could not be cancelled.',
+            other: '# documents could not be cancelled.',
+          })}`,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: t`Documents cancelled`,
+          description: plural(result.cancelledCount, {
+            one: '# document has been cancelled.',
+            other: '# documents have been cancelled.',
+          }),
+          variant: 'default',
+        });
+      }
+
+      onSuccess?.();
+      onOpenChange(false);
+    },
+    onError: () => {
+      toast({
+        title: t`Error`,
+        description: t`An error occurred while cancelling the documents.`,
+        variant: 'destructive',
+      });
+    },
+  });
+
+  return (
+    <Dialog {...props} open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            <Trans>Cancel Documents</Trans>
+          </DialogTitle>
+
+          <DialogDescription>
+            <Plural
+              value={envelopeIds.length}
+              one="You are about to cancel the selected document."
+              other="You are about to cancel # documents."
+            />
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="warning">
+          <AlertDescription>
+            <p>
+              <Trans>Only pending documents you have permission to manage will be cancelled.</Trans>
+            </p>
+
+            <p className="mt-1">
+              <Trans>Once confirmed, the following will occur:</Trans>
+            </p>
+
+            <ul className="mt-0.5 list-inside list-disc">
+              <li>
+                <Trans>The document signing process will be stopped</Trans>
+              </li>
+              <li>
+                <Trans>Recipients will be notified that the document was cancelled</Trans>
+              </li>
+              <li>
+                <Trans>The documents will remain in your dashboard marked as Cancelled</Trans>
+              </li>
+            </ul>
+          </AlertDescription>
+        </Alert>
+
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="bulk-cancel-reason">
+            <Trans>Reason (optional)</Trans>
+          </Label>
+
+          <Textarea
+            id="bulk-cancel-reason"
+            value={reason}
+            onChange={(event) => setReason(event.target.value)}
+            placeholder={t`Add an optional reason for cancelling these documents`}
+          />
+        </div>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)} disabled={isPending}>
+            <Trans>Cancel</Trans>
+          </Button>
+
+          <Button
+            onClick={(e) => {
+              e.preventDefault();
+              void bulkCancelEnvelopes({ envelopeIds, reason: reason || undefined });
+            }}
+            loading={isPending}
+            variant="destructive"
+          >
+            <Trans>Cancel documents</Trans>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/general/document/document-status.tsx

@@ -40,6 +40,12 @@ export const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus>
     icon: XCircle,
     color: 'text-red-500 dark:text-red-300',
   },
+  CANCELLED: {
+    label: msg`Cancelled`,
+    labelExtended: msg`Document cancelled`,
+    icon: XCircle,
+    color: 'text-red-500 dark:text-red-300',
+  },
   INBOX: {
     label: msg`Inbox`,
     labelExtended: msg`Document inbox`,

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

@@ -148,6 +148,11 @@ export default function EnvelopeEditorHeader() {
                     <Trans>Rejected</Trans>
                   </Badge>
                 ))
+                .with(DocumentStatus.CANCELLED, () => (
+                  <Badge variant="destructive" className="shrink-0">
+                    <Trans>Cancelled</Trans>
+                  </Badge>
+                ))
                 .exhaustive()}
 
             {autosaveError && (

apps/remix/app/components/tables/documents-table-action-dropdown.tsx

@@ -3,7 +3,7 @@ import type { TDocumentMany as TDocumentRow } from '@documenso/lib/types/documen
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { getEnvelopeItemPermissions } from '@documenso/lib/utils/envelope';
 import { findRecipientByEmail } from '@documenso/lib/utils/recipients';
-import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { formatDocumentsPath, isMemberManagerOrAbove } from '@documenso/lib/utils/teams';
 import { trpc as trpcReact } from '@documenso/trpc/react';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
@@ -30,11 +30,13 @@ import {
   Pencil,
   Share,
   Trash2,
+  XCircle,
 } from 'lucide-react';
 import { useState } from 'react';
 import { Link } from 'react-router';
 
 import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
+import { EnvelopeCancelDialog } from '~/components/dialogs/envelope-cancel-dialog';
 import { EnvelopeDeleteDialog } from '~/components/dialogs/envelope-delete-dialog';
 import { EnvelopeDuplicateDialog } from '~/components/dialogs/envelope-duplicate-dialog';
 import { EnvelopeSaveAsTemplateDialog } from '~/components/dialogs/envelope-save-as-template-dialog';
@@ -74,6 +76,12 @@ export const DocumentsTableActionDropdown = ({ row, onMoveDocument }: DocumentsT
   const isCurrentTeamDocument = team && row.team?.url === team.url;
   const canManageDocument = Boolean(isOwner || isCurrentTeamDocument);
 
+  // Cancelling a document is restricted server-side to the document owner or a
+  // privileged team member (ADMIN/MANAGER). Mirror that here so plain MEMBERs
+  // don't see a Cancel action that would fail on the server.
+  const isPrivilegedTeamMember = isMemberManagerOrAbove(team.currentTeamRole);
+  const canCancelDocument = isOwner || isPrivilegedTeamMember;
+
   const { canTitleBeChanged } = getEnvelopeItemPermissions(
     {
       completedAt: row.completedAt,
@@ -184,11 +192,23 @@ export const DocumentsTableActionDropdown = ({ row, onMoveDocument }: DocumentsT
           </DropdownMenuItem>
         )}
 
-        {/* No point displaying this if there's no functionality. */}
-        {/* <DropdownMenuItem disabled>
-          <XCircle className="mr-2 h-4 w-4" />
-          Void
-        </DropdownMenuItem> */}
+        {canCancelDocument && isPending && (
+          <EnvelopeCancelDialog
+            id={row.envelopeId}
+            title={row.title}
+            onCancel={async () => {
+              await trpcUtils.document.findDocumentsInternal.invalidate();
+            }}
+            trigger={
+              <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+                <div>
+                  <XCircle className="mr-2 h-4 w-4" />
+                  <Trans>Cancel</Trans>
+                </div>
+              </DropdownMenuItem>
+            }
+          />
+        )}
 
         <EnvelopeDeleteDialog
           id={row.envelopeId}

apps/remix/app/components/tables/documents-table-empty-state.tsx

@@ -1,7 +1,7 @@
 import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { Bird, CheckCircle2 } from 'lucide-react';
+import { Bird, CheckCircle2, XCircle } from 'lucide-react';
 import { match } from 'ts-pattern';
 
 export type DocumentsTableEmptyStateProps = { status: ExtendedDocumentStatus };
@@ -24,6 +24,11 @@ export const DocumentsTableEmptyState = ({ status }: DocumentsTableEmptyStatePro
       message: msg`There are no active drafts at the current moment. You can upload a document to start drafting.`,
       icon: CheckCircle2,
     }))
+    .with(ExtendedDocumentStatus.CANCELLED, () => ({
+      title: msg`Nothing cancelled`,
+      message: msg`There are no cancelled documents. Documents you cancel will remain here as a record that they were distributed.`,
+      icon: XCircle,
+    }))
     .with(ExtendedDocumentStatus.ALL, () => ({
       title: msg`We're all empty`,
       message: msg`You have not yet created or received any documents. To create a document please upload one.`,

apps/remix/app/components/tables/envelopes-table-bulk-action-bar.tsx

@@ -1,11 +1,12 @@
 import { Button } from '@documenso/ui/primitives/button';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { FolderInputIcon, Trash2Icon, XIcon } from 'lucide-react';
+import { FolderInputIcon, Trash2Icon, XCircleIcon, XIcon } from 'lucide-react';
 
 export type EnvelopesTableBulkActionBarProps = {
   selectedCount: number;
   onMoveClick: () => void;
   onDeleteClick: () => void;
+  onCancelClick?: () => void;
   onClearSelection: () => void;
 };
 
@@ -13,6 +14,7 @@ export const EnvelopesTableBulkActionBar = ({
   selectedCount,
   onMoveClick,
   onDeleteClick,
+  onCancelClick,
   onClearSelection,
 }: EnvelopesTableBulkActionBarProps) => {
   const { t } = useLingui();
@@ -34,6 +36,13 @@ export const EnvelopesTableBulkActionBar = ({
         <Trans>Move to Folder</Trans>
       </Button>
 
+      {onCancelClick && (
+        <Button type="button" variant="outline" size="sm" onClick={onCancelClick}>
+          <XCircleIcon className="mr-2 h-4 w-4" />
+          <Trans>Cancel</Trans>
+        </Button>
+      )}
+
       <Button type="button" variant="destructive" size="sm" onClick={onDeleteClick}>
         <Trash2Icon className="mr-2 h-4 w-4" />
         <Trans>Delete</Trans>