feat: polish envelopes (#2090)

## Description

The rest of the owl

apps/remix/app/components/general/document/document-attachments-popover.tsx

@@ -10,6 +10,7 @@ import { z } from 'zod';
 
 import { AppError } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
+import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Form,
@@ -24,6 +25,8 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type DocumentAttachmentsPopoverProps = {
   envelopeId: string;
+  buttonClassName?: string;
+  buttonSize?: 'sm' | 'default';
 };
 
 const ZAttachmentFormSchema = z.object({
@@ -33,7 +36,11 @@ const ZAttachmentFormSchema = z.object({
 
 type TAttachmentFormSchema = z.infer<typeof ZAttachmentFormSchema>;
 
-export const DocumentAttachmentsPopover = ({ envelopeId }: DocumentAttachmentsPopoverProps) => {
+export const DocumentAttachmentsPopover = ({
+  envelopeId,
+  buttonClassName,
+  buttonSize,
+}: DocumentAttachmentsPopoverProps) => {
   const { toast } = useToast();
   const { _ } = useLingui();
 
@@ -118,7 +125,7 @@ export const DocumentAttachmentsPopover = ({ envelopeId }: DocumentAttachmentsPo
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
       <PopoverTrigger asChild>
-        <Button variant="outline" className="gap-2">
+        <Button variant="outline" className={cn('gap-2', buttonClassName)} size={buttonSize}>
           <Paperclip className="h-4 w-4" />
 
           <span>
@@ -215,9 +222,6 @@ export const DocumentAttachmentsPopover = ({ envelopeId }: DocumentAttachmentsPo
                 />
 
                 <div className="flex gap-2">
-                  <Button type="submit" size="sm" className="flex-1" loading={isCreating}>
-                    <Trans>Add</Trans>
-                  </Button>
                   <Button
                     type="button"
                     variant="outline"
@@ -230,6 +234,9 @@ export const DocumentAttachmentsPopover = ({ envelopeId }: DocumentAttachmentsPo
                   >
                     <Trans>Cancel</Trans>
                   </Button>
+                  <Button type="submit" size="sm" className="flex-1" loading={isCreating}>
+                    <Trans>Add</Trans>
+                  </Button>
                 </div>
               </form>
             </Form>

apps/remix/app/components/general/document/document-drop-zone-wrapper.tsx

@@ -95,6 +95,10 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon
           AppErrorCode.LIMIT_EXCEEDED,
           () => msg`You have reached your document limit for this month. Please upgrade your plan.`,
         )
+        .with(
+          'ENVELOPE_ITEM_LIMIT_EXCEEDED',
+          () => msg`You have reached the limit of the number of files per envelope`,
+        )
         .otherwise(() => msg`An error occurred while uploading your document.`);
 
       toast({

apps/remix/app/components/general/document/document-page-view-button.tsx

@@ -14,6 +14,8 @@ import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { Button } from '@documenso/ui/primitives/button';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
+
 export type DocumentPageViewButtonProps = {
   envelope: TEnvelope;
 };
@@ -59,6 +61,7 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
     isPending,
     isComplete,
     isSigned,
+    internalVersion: envelope.internalVersion,
   })
     .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
       <Button className="w-full" asChild>
@@ -92,6 +95,20 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
         </Link>
       </Button>
     ))
+    .with({ isComplete: true, internalVersion: 2 }, () => (
+      <EnvelopeDownloadDialog
+        envelopeId={envelope.id}
+        envelopeStatus={envelope.status}
+        envelopeItems={envelope.envelopeItems}
+        token={recipient?.token}
+        trigger={
+          <Button className="w-full">
+            <Download className="-ml-1 mr-2 inline h-4 w-4" />
+            <Trans>Download</Trans>
+          </Button>
+        }
+      />
+    ))
     .with({ isComplete: true }, () => (
       <Button className="w-full" onClick={onDownloadClick}>
         <Download className="-ml-1 mr-2 inline h-4 w-4" />

apps/remix/app/components/general/document/document-page-view-dropdown.tsx

@@ -36,6 +36,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
 import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
 import { DocumentResendDialog } from '~/components/dialogs/document-resend-dialog';
+import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import { useCurrentTeam } from '~/providers/team';
 
@@ -146,17 +147,36 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
           </DropdownMenuItem>
         )}
 
-        {isComplete && (
-          <DropdownMenuItem onClick={onDownloadClick}>
-            <Download className="mr-2 h-4 w-4" />
-            <Trans>Download</Trans>
-          </DropdownMenuItem>
-        )}
+        {envelope.internalVersion === 2 ? (
+          <EnvelopeDownloadDialog
+            envelopeId={envelope.id}
+            envelopeStatus={envelope.status}
+            token={recipient?.token}
+            envelopeItems={envelope.envelopeItems}
+            trigger={
+              <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+                <div>
+                  <Download className="mr-2 h-4 w-4" />
+                  <Trans>Download</Trans>
+                </div>
+              </DropdownMenuItem>
+            }
+          />
+        ) : (
+          <>
+            {isComplete && (
+              <DropdownMenuItem onClick={onDownloadClick}>
+                <Download className="mr-2 h-4 w-4" />
+                <Trans>Download</Trans>
+              </DropdownMenuItem>
+            )}
 
-        <DropdownMenuItem onClick={onDownloadOriginalClick}>
-          <Download className="mr-2 h-4 w-4" />
-          <Trans>Download Original</Trans>
-        </DropdownMenuItem>
+            <DropdownMenuItem onClick={onDownloadOriginalClick}>
+              <Download className="mr-2 h-4 w-4" />
+              <Trans>Download Original</Trans>
+            </DropdownMenuItem>
+          </>
+        )}
 
         <DropdownMenuItem asChild>
           <Link to={`${documentsPath}/${envelope.id}/logs`}>

apps/remix/app/components/general/document/document-upload-button.tsx

@@ -108,6 +108,10 @@ export const DocumentUploadButton = ({ className }: DocumentUploadButtonProps) =
           AppErrorCode.LIMIT_EXCEEDED,
           () => msg`You have reached your document limit for this month. Please upgrade your plan.`,
         )
+        .with(
+          'ENVELOPE_ITEM_LIMIT_EXCEEDED',
+          () => msg`You have reached the limit of the number of files per envelope`,
+        )
         .otherwise(() => msg`An error occurred while uploading your document.`);
 
       toast({

apps/remix/app/components/general/document/envelope-upload-button.tsx

@@ -4,6 +4,7 @@ import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
 import { EnvelopeType } from '@prisma/client';
+import { ErrorCode as DropzoneErrorCode, type FileRejection } from 'react-dropzone';
 import { useNavigate } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -51,7 +52,7 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
     (timezone) => timezone === Intl.DateTimeFormat().resolvedOptions().timeZone,
   );
 
-  const { quota, remaining, refreshLimits } = useLimits();
+  const { quota, remaining, refreshLimits, maximumEnvelopeItemCount } = useLimits();
 
   const [isLoading, setIsLoading] = useState(false);
 
@@ -69,6 +70,7 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
     if (!user.emailVerified) {
       return msg`Verify your email to upload documents.`;
     }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [remaining.documents, user.emailVerified, team]);
 
@@ -138,6 +140,10 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
           AppErrorCode.LIMIT_EXCEEDED,
           () => t`You have reached your document limit for this month. Please upgrade your plan.`,
         )
+        .with(
+          'ENVELOPE_ITEM_LIMIT_EXCEEDED',
+          () => t`You have reached the limit of the number of files per envelope`,
+        )
         .otherwise(() => t`An error occurred while uploading your document.`);
 
       toast({
@@ -151,12 +157,23 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
     }
   };
 
-  const onFileDropRejected = () => {
+  const onFileDropRejected = (fileRejections: FileRejection[]) => {
+    const maxItemsReached = fileRejections.some((fileRejection) =>
+      fileRejection.errors.some((error) => error.code === DropzoneErrorCode.TooManyFiles),
+    );
+
+    if (maxItemsReached) {
+      toast({
+        title: t`You cannot upload more than ${maximumEnvelopeItemCount} items per envelope.`,
+        duration: 5000,
+        variant: 'destructive',
+      });
+
+      return;
+    }
+
     toast({
-      title:
-        type === EnvelopeType.DOCUMENT
-          ? t`Your document failed to upload.`
-          : t`Your template failed to upload.`,
+      title: t`Upload failed`,
       description: t`File cannot be larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`,
       duration: 5000,
       variant: 'destructive',
@@ -176,6 +193,7 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
                 onDrop={onFileDrop}
                 onDropRejected={onFileDropRejected}
                 type="envelope"
+                maxFiles={maximumEnvelopeItemCount}
               />
             </div>
           </TooltipTrigger>