feat: add envelopes api (#2105)

2025-11-13 00:03:33 +10:00 · 2025-11-07 14:17:52 +11:00
parent d2a009d52e
commit d05bfa9fed
230 changed files with 10066 additions and 2812 deletions
--- a/apps/remix/app/components/general/document/document-certificate-qr-view.tsx
+++ b/apps/remix/app/components/general/document/document-certificate-qr-view.tsx
@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';

 import { Trans } from '@lingui/react/macro';
-import type { DocumentData, EnvelopeItem } from '@prisma/client';
+import { type DocumentData, DocumentStatus, type EnvelopeItem } from '@prisma/client';
+import { DownloadIcon } from 'lucide-react';
 import { DateTime } from 'luxon';

 import {
@ -22,9 +23,10 @@ import {
 } from '@documenso/ui/primitives/dialog';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';

+import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
+
 import { EnvelopeRendererFileSelector } from '../envelope-editor/envelope-file-selector';
 import EnvelopeGenericPageRenderer from '../envelope-editor/envelope-generic-page-renderer';
-import { ShareDocumentDownloadButton } from '../share-document-download-button';

 export type DocumentCertificateQRViewProps = {
  documentId: number;
@ -34,6 +36,7 @@ export type DocumentCertificateQRViewProps = {
  documentTeamUrl: string;
  recipientCount?: number;
  completedDate?: Date;
+  token: string;
 };

 export const DocumentCertificateQRView = ({
@ -44,6 +47,7 @@ export const DocumentCertificateQRView = ({
  documentTeamUrl,
  recipientCount = 0,
  completedDate,
+  token,
 }: DocumentCertificateQRViewProps) => {
  const { data: documentViaUser } = trpc.document.get.useQuery({
    documentId,
@ -96,11 +100,12 @@ export const DocumentCertificateQRView = ({
      )}

      {internalVersion === 2 ? (
-        <EnvelopeRenderProvider envelope={{ envelopeItems }}>
+        <EnvelopeRenderProvider envelope={{ envelopeItems }} token={token}>
          <DocumentCertificateQrV2
            title={title}
            recipientCount={recipientCount}
            formattedDate={formattedDate}
+            token={token}
          />
        </EnvelopeRenderProvider>
      ) : (
@ -119,14 +124,27 @@ export const DocumentCertificateQRView = ({
              </div>
            </div>

-            <ShareDocumentDownloadButton
-              title={title}
-              documentData={envelopeItems[0].documentData}
+            <EnvelopeDownloadDialog
+              envelopeId={envelopeItems[0].envelopeId}
+              envelopeStatus={DocumentStatus.COMPLETED}
+              envelopeItems={envelopeItems}
+              token={token}
+              trigger={
+                <Button type="button" variant="outline" className="flex-1">
+                  <DownloadIcon className="mr-2 h-5 w-5" />
+                  <Trans>Download</Trans>
+                </Button>
+              }
            />
          </div>

          <div className="mt-12 w-full">
-            <PDFViewer key={envelopeItems[0].id} documentData={envelopeItems[0].documentData} />
+            <PDFViewer
+              key={envelopeItems[0].id}
+              envelopeItem={envelopeItems[0]}
+              token={token}
+              version="signed"
+            />
          </div>
        </>
      )}
@ -138,14 +156,16 @@ type DocumentCertificateQrV2Props = {
  title: string;
  recipientCount: number;
  formattedDate: string;
+  token: string;
 };

 const DocumentCertificateQrV2 = ({
  title,
  recipientCount,
  formattedDate,
+  token,
 }: DocumentCertificateQrV2Props) => {
-  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
+  const { currentEnvelopeItem, envelopeItems } = useCurrentEnvelopeRender();

  return (
    <div className="flex min-h-screen flex-col items-start">
@ -163,18 +183,24 @@ const DocumentCertificateQrV2 = ({
          </div>
        </div>

-        {currentEnvelopeItem && (
-          <ShareDocumentDownloadButton
-            title={title}
-            documentData={currentEnvelopeItem.documentData}
-          />
-        )}
+        <EnvelopeDownloadDialog
+          envelopeId={envelopeItems[0].envelopeId}
+          envelopeStatus={DocumentStatus.COMPLETED}
+          envelopeItems={envelopeItems}
+          token={token}
+          trigger={
+            <Button type="button" variant="outline" className="flex-1">
+              <DownloadIcon className="mr-2 h-5 w-5" />
+              <Trans>Download</Trans>
+            </Button>
+          }
+        />
      </div>

      <div className="mt-12 w-full">
        <EnvelopeRendererFileSelector className="mb-4 p-0" fields={[]} secondaryOverride={''} />

-        <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
+        <PDFViewerKonvaLazy renderer="preview" customPageRenderer={EnvelopeGenericPageRenderer} />
      </div>
    </div>
  );
--- a/apps/remix/app/components/general/document/document-drop-zone-wrapper.tsx
+++ b/apps/remix/app/components/general/document/document-drop-zone-wrapper.tsx
@ -16,9 +16,9 @@ import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT, IS_BILLING_ENABLED } from '@documenso/l
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
-import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
+import type { TCreateDocumentPayloadSchema } from '@documenso/trpc/server/document-router/create-document.types';
 import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';

@ -62,14 +62,18 @@ export const DocumentDropZoneWrapper = ({ children, className }: DocumentDropZon
    try {
      setIsLoading(true);

-      const response = await putPdfFile(file);
-
-      const { legacyDocumentId: id } = await createDocument({
+      const payload = {
        title: file.name,
-        documentDataId: response.id,
-        timezone: userTimezone, // Note: When migrating to v2 document upload remember to pass this through as a 'userTimezone' field.
+        timezone: userTimezone,
        folderId: folderId ?? undefined,
-      });
+      } satisfies TCreateDocumentPayloadSchema;
+
+      const formData = new FormData();
+
+      formData.append('payload', JSON.stringify(payload));
+      formData.append('file', file);
+
+      const { envelopeId: id } = await createDocument(formData);

      void refreshLimits();

--- a/apps/remix/app/components/general/document/document-edit-form.tsx
+++ b/apps/remix/app/components/general/document/document-edit-form.tsx
@ -441,9 +441,10 @@ export const DocumentEditForm = ({
      >
        <CardContent className="p-2">
          <PDFViewer
-            key={document.documentData.id}
-            documentData={document.documentData}
-            document={document}
+            key={document.envelopeItems[0].id}
+            envelopeItem={document.envelopeItems[0]}
+            token={undefined}
+            version="signed"
            onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
          />
        </CardContent>
--- a/apps/remix/app/components/general/document/document-page-view-button.tsx
+++ b/apps/remix/app/components/general/document/document-page-view-button.tsx
@ -1,18 +1,14 @@
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, RecipientRole, SigningStatus } from '@prisma/client';
 import { CheckCircle, Download, EyeIcon, Pencil } from 'lucide-react';
 import { Link } from 'react-router';
 import { match } from 'ts-pattern';

-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 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';

@ -23,9 +19,6 @@ export type DocumentPageViewButtonProps = {
 export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps) => {
  const { user } = useSession();

-  const { toast } = useToast();
-  const { _ } = useLingui();
-
  const recipient = envelope.recipients.find((recipient) => recipient.email === user.email);

  const isRecipient = !!recipient;
@ -37,25 +30,6 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
  const documentsPath = formatDocumentsPath(envelope.team.url);
  const formatPath = `${documentsPath}/${envelope.id}/edit`;

-  const onDownloadClick = async () => {
-    try {
-      // Todo; Envelopes - Support multiple items
-      const envelopeItem = envelope.envelopeItems[0];
-
-      if (!envelopeItem.documentData) {
-        throw new Error('No document available');
-      }
-
-      await downloadPDF({ documentData: envelopeItem.documentData, fileName: envelopeItem.title });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
  return match({
    isRecipient,
    isPending,
@ -95,7 +69,7 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
        </Link>
      </Button>
    ))
-    .with({ isComplete: true, internalVersion: 2 }, () => (
+    .with({ isComplete: true }, () => (
      <EnvelopeDownloadDialog
        envelopeId={envelope.id}
        envelopeStatus={envelope.status}
@ -109,11 +83,5 @@ export const DocumentPageViewButton = ({ envelope }: DocumentPageViewButtonProps
        }
      />
    ))
-    .with({ isComplete: true }, () => (
-      <Button className="w-full" onClick={onDownloadClick}>
-        <Download className="-ml-1 mr-2 inline h-4 w-4" />
-        <Trans>Download</Trans>
-      </Button>
-    ))
    .otherwise(() => null);
 };
--- a/apps/remix/app/components/general/document/document-page-view-dropdown.tsx
+++ b/apps/remix/app/components/general/document/document-page-view-dropdown.tsx
@ -1,6 +1,5 @@
 import { useState } from 'react';

-import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus } from '@prisma/client';
@ -16,13 +15,11 @@ import {
 } from 'lucide-react';
 import { Link, useNavigate } from 'react-router';

-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { trpc as trpcClient } from '@documenso/trpc/client';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import {
  DropdownMenu,
@ -67,64 +64,6 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP

  const documentsPath = formatDocumentsPath(team.url);

-  const onDownloadClick = async () => {
-    try {
-      const documentWithData = await trpcClient.document.get.query(
-        {
-          documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
-        },
-        {
-          context: {
-            teamId: team?.id?.toString(),
-          },
-        },
-      );
-
-      const documentData = documentWithData?.documentData;
-
-      if (!documentData) {
-        return;
-      }
-
-      await downloadPDF({ documentData, fileName: envelope.title });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
-  const onDownloadOriginalClick = async () => {
-    try {
-      const documentWithData = await trpcClient.document.get.query(
-        {
-          documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
-        },
-        {
-          context: {
-            teamId: team?.id?.toString(),
-          },
-        },
-      );
-
-      const documentData = documentWithData?.documentData;
-
-      if (!documentData) {
-        return;
-      }
-
-      await downloadPDF({ documentData, fileName: envelope.title, version: 'original' });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
  const nonSignedRecipients = envelope.recipients.filter((item) => item.signingStatus !== 'SIGNED');

  return (
@ -147,36 +86,20 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
          </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}>
+        <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>
-              </DropdownMenuItem>
-            )}
-
-            <DropdownMenuItem onClick={onDownloadOriginalClick}>
-              <Download className="mr-2 h-4 w-4" />
-              <Trans>Download Original</Trans>
+              </div>
            </DropdownMenuItem>
-          </>
-        )}
+          }
+        />

        <DropdownMenuItem asChild>
          <Link to={`${documentsPath}/${envelope.id}/logs`}>
@ -250,7 +173,8 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP

      {isDuplicateDialogOpen && (
        <DocumentDuplicateDialog
-          id={mapSecondaryIdToDocumentId(envelope.secondaryId)}
+          id={envelope.id}
+          token={recipient?.token}
          open={isDuplicateDialogOpen}
          onOpenChange={setDuplicateDialogOpen}
        />
--- a/apps/remix/app/components/general/document/document-upload-button.tsx
+++ b/apps/remix/app/components/general/document/document-upload-button.tsx
@ -13,9 +13,9 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
+import type { TCreateDocumentPayloadSchema } from '@documenso/trpc/server/document-router/create-document.types';
 import { cn } from '@documenso/ui/lib/utils';
 import { DocumentDropzone } from '@documenso/ui/primitives/document-upload';
 import {
@ -73,14 +73,18 @@ export const DocumentUploadButton = ({ className }: DocumentUploadButtonProps) =
    try {
      setIsLoading(true);

-      const response = await putPdfFile(file);
-
-      const { legacyDocumentId: id } = await createDocument({
+      const payload = {
        title: file.name,
-        documentDataId: response.id,
        timezone: userTimezone,
        folderId: folderId ?? undefined,
-      });
+      } satisfies TCreateDocumentPayloadSchema;
+
+      const formData = new FormData();
+
+      formData.append('payload', JSON.stringify(payload));
+      formData.append('file', file);
+
+      const { envelopeId: id } = await createDocument(formData);

      void refreshLimits();

--- a/apps/remix/app/components/general/document/envelope-upload-button.tsx
+++ b/apps/remix/app/components/general/document/envelope-upload-button.tsx
@ -14,9 +14,9 @@ import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
 import { trpc } from '@documenso/trpc/react';
+import type { TCreateEnvelopePayload } from '@documenso/trpc/server/envelope-router/create-envelope.types';
 import { cn } from '@documenso/ui/lib/utils';
 import { DocumentDropzone } from '@documenso/ui/primitives/document-upload';
 import {
@ -78,35 +78,24 @@ export const EnvelopeUploadButton = ({ className, type, folderId }: EnvelopeUplo
    try {
      setIsLoading(true);

-      const result = await Promise.all(
-        files.map(async (file) => {
-          try {
-            const response = await putPdfFile(file);
-
-            return {
-              title: file.name,
-              documentDataId: response.id,
-            };
-          } catch (err) {
-            console.error(err);
-            throw new Error('Failed to upload document');
-          }
-        }),
-      );
-
-      const envelopeItemsToCreate = result.filter(
-        (item): item is { title: string; documentDataId: string } => item !== undefined,
-      );
-
-      const { id } = await createEnvelope({
+      const payload = {
        folderId,
        type,
        title: files[0].name,
-        items: envelopeItemsToCreate,
        meta: {
          timezone: userTimezone,
        },
-      }).catch((error) => {
+      } satisfies TCreateEnvelopePayload;
+
+      const formData = new FormData();
+
+      formData.append('payload', JSON.stringify(payload));
+
+      for (const file of files) {
+        formData.append('files', file);
+      }
+
+      const { id } = await createEnvelope(formData).catch((error) => {
        console.error(error);

        throw error;