v2.0.0

Co-authored-by: Crowdin Bot <support+bot@crowdin.com>

apps/remix/app/components/dialogs/document-duplicate-dialog.tsx

@@ -19,13 +19,15 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { useCurrentTeam } from '~/providers/team';
 
 type DocumentDuplicateDialogProps = {
-  id: number;
+  id: string;
+  token?: string;
   open: boolean;
   onOpenChange: (_open: boolean) => void;
 };
 
 export const DocumentDuplicateDialog = ({
   id,
+  token,
   open,
   onOpenChange,
 }: DocumentDuplicateDialogProps) => {
@@ -36,27 +38,23 @@ export const DocumentDuplicateDialog = ({
 
   const team = useCurrentTeam();
 
-  const { data: document, isLoading } = trpcReact.document.get.useQuery(
+  const { data: envelopeItemsPayload, isLoading: isLoadingEnvelopeItems } =
+    trpcReact.envelope.item.getManyByToken.useQuery(
       {
-      documentId: id,
+        envelopeId: id,
+        access: token ? { type: 'recipient', token } : { type: 'user' },
       },
       {
-      queryHash: `document-duplicate-dialog-${id}`,
-      enabled: open === true,
+        enabled: open,
       },
     );
 
-  const documentData = document?.documentData
-    ? {
-        ...document.documentData,
-        data: document.documentData.initialData,
-      }
-    : undefined;
+  const envelopeItems = envelopeItemsPayload?.data || [];
 
   const documentsPath = formatDocumentsPath(team.url);
 
-  const { mutateAsync: duplicateDocument, isPending: isDuplicateLoading } =
-    trpcReact.document.duplicate.useMutation({
+  const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
+    trpcReact.envelope.duplicate.useMutation({
       onSuccess: async ({ id }) => {
         toast({
           title: _(msg`Document Duplicated`),
@@ -71,7 +69,7 @@ export const DocumentDuplicateDialog = ({
 
   const onDuplicate = async () => {
     try {
-      await duplicateDocument({ documentId: id });
+      await duplicateEnvelope({ envelopeId: id });
     } catch {
       toast({
         title: _(msg`Something went wrong`),
@@ -83,14 +81,14 @@ export const DocumentDuplicateDialog = ({
   };
 
   return (
-    <Dialog open={open} onOpenChange={(value) => !isLoading && onOpenChange(value)}>
+    <Dialog open={open} onOpenChange={(value) => !isDuplicating && onOpenChange(value)}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
             <Trans>Duplicate</Trans>
           </DialogTitle>
         </DialogHeader>
-        {!documentData || isLoading ? (
+        {isLoadingEnvelopeItems || !envelopeItems || envelopeItems.length === 0 ? (
           <div className="mx-auto -mt-4 flex w-full max-w-screen-xl flex-col px-4 md:px-8">
             <h1 className="mt-4 grow-0 truncate text-2xl font-semibold md:text-3xl">
               <Trans>Loading Document...</Trans>
@@ -98,7 +96,12 @@ export const DocumentDuplicateDialog = ({
           </div>
         ) : (
           <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll">
-            <PDFViewer key={document?.id} documentData={documentData} />
+            <PDFViewer
+              key={envelopeItems[0].id}
+              envelopeItem={envelopeItems[0]}
+              token={undefined}
+              version="original"
+            />
           </div>
         )}
 
@@ -115,8 +118,8 @@ export const DocumentDuplicateDialog = ({
 
             <Button
               type="button"
-              disabled={isDuplicateLoading || isLoading}
-              loading={isDuplicateLoading}
+              disabled={isDuplicating}
+              loading={isDuplicating}
               onClick={onDuplicate}
               className="flex-1"
             >

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

@@ -2,11 +2,10 @@ import { useState } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 import { Trans } from '@lingui/react/macro';
-import { type DocumentData, DocumentStatus, type EnvelopeItem } from '@prisma/client';
+import { DocumentStatus, type EnvelopeItem } from '@prisma/client';
 import { DownloadIcon, FileTextIcon } from 'lucide-react';
 
-import { downloadFile } from '@documenso/lib/client-only/download-file';
-import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -20,9 +19,7 @@ import {
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-type EnvelopeItemToDownload = Pick<EnvelopeItem, 'id' | 'title' | 'order'> & {
-  documentData: DocumentData;
-};
+type EnvelopeItemToDownload = Pick<EnvelopeItem, 'id' | 'envelopeId' | 'title' | 'order'>;
 
 type EnvelopeDownloadDialogProps = {
   envelopeId: string;
@@ -64,12 +61,12 @@ export const EnvelopeDownloadDialog = ({
         access: token ? { type: 'recipient', token } : { type: 'user' },
       },
       {
-        initialData: initialEnvelopeItems ? { envelopeItems: initialEnvelopeItems } : undefined,
+        initialData: initialEnvelopeItems ? { data: initialEnvelopeItems } : undefined,
         enabled: open,
       },
     );
 
-  const envelopeItems = envelopeItemsPayload?.envelopeItems || [];
+  const envelopeItems = envelopeItemsPayload?.data || [];
 
   const onDownload = async (
     envelopeItem: EnvelopeItemToDownload,
@@ -87,19 +84,11 @@ export const EnvelopeDownloadDialog = ({
     }));
 
     try {
-      const downloadUrl = token
-        ? `${NEXT_PUBLIC_WEBAPP_URL()}/api/files/token/${token}/envelopeItem/${envelopeItemId}/download/${version}`
-        : `${NEXT_PUBLIC_WEBAPP_URL()}/api/files/envelope/${envelopeId}/envelopeItem/${envelopeItemId}/download/${version}`;
-
-      const blob = await fetch(downloadUrl).then(async (res) => await res.blob());
-
-      const baseTitle = envelopeItem.title.replace(/\.pdf$/, '');
-      const suffix = version === 'signed' ? '_signed.pdf' : '.pdf';
-      const filename = `${baseTitle}${suffix}`;
-
-      downloadFile({
-        filename,
-        data: blob,
+      await downloadPDF({
+        envelopeItem,
+        token,
+        fileName: envelopeItem.title,
+        version,
       });
 
       setIsDownloadingState((prev) => ({
@@ -140,7 +129,7 @@ export const EnvelopeDownloadDialog = ({
         <div className="flex flex-col gap-4">
           {isLoadingEnvelopeItems ? (
             <>
-              {Array.from({ length: 2 }).map((_, index) => (
+              {Array.from({ length: 1 }).map((_, index) => (
                 <div
                   key={index}
                   className="border-border bg-card flex items-center gap-2 rounded-lg border p-4"
@@ -169,6 +158,7 @@ export const EnvelopeDownloadDialog = ({
                 </div>
 
                 <div className="min-w-0 flex-1">
+                  {/* Todo: Envelopes - Fix overflow */}
                   <h4 className="text-foreground truncate text-sm font-medium">{item.title}</h4>
                   <p className="text-muted-foreground mt-0.5 text-xs">
                     <Trans>PDF Document</Trans>

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

@@ -43,7 +43,7 @@ export const EnvelopeDuplicateDialog = ({
 
   const { mutateAsync: duplicateEnvelope, isPending: isDuplicating } =
     trpc.envelope.duplicate.useMutation({
-      onSuccess: async ({ duplicatedEnvelopeId }) => {
+      onSuccess: async ({ id }) => {
         toast({
           title: t`Envelope Duplicated`,
           description: t`Your envelope has been successfully duplicated.`,
@@ -55,7 +55,7 @@ export const EnvelopeDuplicateDialog = ({
             ? formatDocumentsPath(team.url)
             : formatTemplatesPath(team.url);
 
-        await navigate(`${path}/${duplicatedEnvelopeId}/edit`);
+        await navigate(`${path}/${id}/edit`);
         setOpen(false);
       },
     });

apps/remix/app/components/dialogs/organisation-member-invite-dialog.tsx

@@ -185,6 +185,10 @@ export const OrganisationMemberInviteDialog = ({
       return 'form';
     }
 
+    if (fullOrganisation.members.length < fullOrganisation.organisationClaim.memberCount) {
+      return 'form';
+    }
+
     // This is probably going to screw us over in the future.
     if (fullOrganisation.organisationClaim.originalSubscriptionClaimId !== INTERNAL_CLAIM_ID.TEAM) {
       return 'alert';

apps/remix/app/components/dialogs/template-use-dialog.tsx

@@ -143,7 +143,7 @@ export function TemplateUseDialog({
     },
   );
 
-  const envelopeItems = response?.envelopeItems ?? [];
+  const envelopeItems = response?.data ?? [];
 
   const { mutateAsync: createDocumentFromTemplate } =
     trpc.template.createDocumentFromTemplate.useMutation();

apps/remix/app/components/embed/authoring/configure-fields-view.tsx

@@ -4,6 +4,7 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import type { DocumentData, FieldType } from '@prisma/client';
 import { ReadStatus, type Recipient, SendStatus, SigningStatus } from '@prisma/client';
+import { base64 } from '@scure/base';
 import { ChevronsUpDown } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -12,7 +13,6 @@ import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-c
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { type TFieldMetaSchema, ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
-import { base64 } from '@documenso/lib/universal/base64';
 import { nanoid } from '@documenso/lib/universal/id';
 import { ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING } from '@documenso/lib/utils/advanced-fields-helpers';
 import { useRecipientColors } from '@documenso/ui/lib/recipient-colors';
@@ -83,21 +83,14 @@ export const ConfigureFieldsView = ({
 
   const normalizedDocumentData = useMemo(() => {
     if (documentData) {
-      return documentData;
+      return documentData.data;
     }
 
     if (!configData.documentData) {
       return null;
     }
 
-    const data = base64.encode(configData.documentData?.data);
-
-    return {
-      id: 'preview',
-      type: 'BYTES_64',
-      data,
-      initialData: data,
-    } satisfies DocumentData;
+    return base64.encode(configData.documentData.data);
   }, [configData.documentData]);
 
   const recipients = useMemo(() => {
@@ -541,7 +534,15 @@ export const ConfigureFieldsView = ({
             <Form {...form}>
               {normalizedDocumentData && (
                 <div>
-                  <PDFViewer documentData={normalizedDocumentData} />
+                  <PDFViewer
+                    overrideData={normalizedDocumentData}
+                    envelopeItem={{
+                      id: '',
+                      envelopeId: '',
+                    }}
+                    token={undefined}
+                    version="signed"
+                  />
 
                   <ElementVisible
                     target={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${highestPageNumber}"]`}

apps/remix/app/components/embed/embed-authentication-required.tsx

@@ -9,6 +9,7 @@ export type EmbedAuthenticationRequiredProps = {
   email?: string;
   returnTo: string;
   isGoogleSSOEnabled?: boolean;
+  isMicrosoftSSOEnabled?: boolean;
   isOIDCSSOEnabled?: boolean;
   oidcProviderLabel?: string;
 };
@@ -17,6 +18,7 @@ export const EmbedAuthenticationRequired = ({
   email,
   returnTo,
   // isGoogleSSOEnabled,
+  // isMicrosoftSSOEnabled,
   // isOIDCSSOEnabled,
   // oidcProviderLabel,
 }: EmbedAuthenticationRequiredProps) => {
@@ -37,6 +39,7 @@ export const EmbedAuthenticationRequired = ({
         <SignInForm
           // Embed currently not supported.
           // isGoogleSSOEnabled={isGoogleSSOEnabled}
+          // isMicrosoftSSOEnabled={isMicrosoftSSOEnabled}
           // isOIDCSSOEnabled={isOIDCSSOEnabled}
           // oidcProviderLabel={oidcProviderLabel}
           className="mt-4"

apps/remix/app/components/embed/embed-direct-template-client-page.tsx

@@ -3,8 +3,8 @@ import { useEffect, useLayoutEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { DocumentMeta, Recipient, Signature } from '@prisma/client';
-import { type DocumentData, type Field, FieldType } from '@prisma/client';
+import type { DocumentMeta, EnvelopeItem, Recipient, Signature } from '@prisma/client';
+import { type Field, FieldType } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { useSearchParams } from 'react-router';
@@ -47,7 +47,7 @@ export type EmbedDirectTemplateClientPageProps = {
   token: string;
   envelopeId: string;
   updatedAt: Date;
-  documentData: DocumentData;
+  envelopeItems: Pick<EnvelopeItem, 'id' | 'envelopeId'>[];
   recipient: Recipient;
   fields: Field[];
   metadata?: DocumentMeta | null;
@@ -59,7 +59,7 @@ export const EmbedDirectTemplateClientPage = ({
   token,
   envelopeId,
   updatedAt,
-  documentData,
+  envelopeItems,
   recipient,
   fields,
   metadata,
@@ -335,7 +335,9 @@ export const EmbedDirectTemplateClientPage = ({
         {/* Viewer */}
         <div className="flex-1">
           <PDFViewer
-            documentData={documentData}
+            envelopeItem={envelopeItems[0]}
+            token={token}
+            version="signed"
             onDocumentLoad={() => setHasDocumentLoaded(true)}
           />
         </div>

apps/remix/app/components/embed/embed-document-signing-page-v1.tsx

@@ -3,14 +3,8 @@ import { useEffect, useId, useLayoutEffect, useMemo, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import type { DocumentMeta } from '@prisma/client';
-import {
-  type DocumentData,
-  type Field,
-  FieldType,
-  RecipientRole,
-  SigningStatus,
-} from '@prisma/client';
+import type { DocumentMeta, EnvelopeItem } from '@prisma/client';
+import { type Field, FieldType, RecipientRole, SigningStatus } from '@prisma/client';
 import { LucideChevronDown, LucideChevronUp } from 'lucide-react';
 
 import { useThrottleFn } from '@documenso/lib/client-only/hooks/use-throttle-fn';
@@ -46,11 +40,11 @@ import { EmbedDocumentCompleted } from './embed-document-completed';
 import { EmbedDocumentFields } from './embed-document-fields';
 import { EmbedDocumentRejected } from './embed-document-rejected';
 
-export type EmbedSignDocumentClientPageProps = {
+export type EmbedSignDocumentV1ClientPageProps = {
   token: string;
   documentId: number;
   envelopeId: string;
-  documentData: DocumentData;
+  envelopeItems: Pick<EnvelopeItem, 'id' | 'envelopeId'>[];
   recipient: RecipientWithFields;
   fields: Field[];
   completedFields: DocumentField[];
@@ -61,11 +55,11 @@ export type EmbedSignDocumentClientPageProps = {
   allRecipients?: RecipientWithFields[];
 };
 
-export const EmbedSignDocumentClientPage = ({
+export const EmbedSignDocumentV1ClientPage = ({
   token,
   documentId,
   envelopeId,
-  documentData,
+  envelopeItems,
   recipient,
   fields,
   completedFields,
@@ -74,7 +68,7 @@ export const EmbedSignDocumentClientPage = ({
   hidePoweredBy = false,
   allowWhitelabelling = false,
   allRecipients = [],
-}: EmbedSignDocumentClientPageProps) => {
+}: EmbedSignDocumentV1ClientPageProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
 
@@ -293,7 +287,9 @@ export const EmbedSignDocumentClientPage = ({
           {/* Viewer */}
           <div className="embed--DocumentViewer flex-1">
             <PDFViewer
-              documentData={documentData}
+              envelopeItem={envelopeItems[0]}
+              token={token}
+              version="signed"
               onDocumentLoad={() => setHasDocumentLoaded(true)}
             />
           </div>

apps/remix/app/components/embed/embed-document-signing-page-v2.tsx

@@ -0,0 +1,232 @@
+import { useEffect, useLayoutEffect, useState } from 'react';
+
+import { useLingui } from '@lingui/react';
+
+import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
+
+import { ZSignDocumentEmbedDataSchema } from '~/types/embed-document-sign-schema';
+import { injectCss } from '~/utils/css-vars';
+
+import { DocumentSigningPageViewV2 } from '../general/document-signing/document-signing-page-view-v2';
+import { useRequiredEnvelopeSigningContext } from '../general/document-signing/envelope-signing-provider';
+import { EmbedClientLoading } from './embed-client-loading';
+import { EmbedDocumentCompleted } from './embed-document-completed';
+import { EmbedDocumentRejected } from './embed-document-rejected';
+import { EmbedSigningProvider } from './embed-signing-context';
+
+export type EmbedSignDocumentV2ClientPageProps = {
+  hidePoweredBy?: boolean;
+  allowWhitelabelling?: boolean;
+};
+
+export const EmbedSignDocumentV2ClientPage = ({
+  hidePoweredBy = false,
+  allowWhitelabelling = false,
+}: EmbedSignDocumentV2ClientPageProps) => {
+  const { _ } = useLingui();
+
+  const { envelope, recipient, envelopeData, setFullName, fullName } =
+    useRequiredEnvelopeSigningContext();
+
+  const { isCompleted, isRejected, recipientSignature } = envelopeData;
+
+  // !: Not used at the moment, may be removed in the future.
+  // const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
+  const [hasFinishedInit, setHasFinishedInit] = useState(false);
+  const [allowDocumentRejection, setAllowDocumentRejection] = useState(false);
+  const [isNameLocked, setIsNameLocked] = useState(false);
+
+  const onDocumentCompleted = (data: {
+    token: string;
+    documentId: number;
+    envelopeId: string;
+    recipientId: number;
+  }) => {
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'document-completed',
+          data,
+        },
+        '*',
+      );
+    }
+  };
+
+  const onDocumentError = () => {
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'document-error',
+          data: null,
+        },
+        '*',
+      );
+    }
+  };
+
+  const onDocumentReady = () => {
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'document-ready',
+          data: null,
+        },
+        '*',
+      );
+    }
+  };
+
+  const onFieldSigned = (data: { fieldId?: number; value?: string; isBase64?: boolean }) => {
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'field-signed',
+          data,
+        },
+        '*',
+      );
+    }
+  };
+
+  const onFieldUnsigned = (data: { fieldId?: number }) => {
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'field-unsigned',
+          data,
+        },
+        '*',
+      );
+    }
+  };
+
+  const onDocumentRejected = (data: {
+    token: string;
+    documentId: number;
+    envelopeId: string;
+    recipientId: number;
+    reason?: string;
+  }) => {
+    if (window.parent) {
+      window.parent.postMessage(
+        {
+          action: 'document-rejected',
+          data,
+        },
+        '*',
+      );
+    }
+  };
+
+  useLayoutEffect(() => {
+    const hash = window.location.hash.slice(1);
+
+    try {
+      const data = ZSignDocumentEmbedDataSchema.parse(JSON.parse(decodeURIComponent(atob(hash))));
+
+      if (!isCompleted && data.name) {
+        setFullName(data.name);
+      }
+
+      // Since a recipient can be provided a name we can lock it without requiring
+      // a to be provided by the parent application, unlike direct templates.
+      setIsNameLocked(!!data.lockName);
+      setAllowDocumentRejection(!!data.allowDocumentRejection);
+
+      if (data.darkModeDisabled) {
+        document.documentElement.classList.add('dark-mode-disabled');
+      }
+
+      if (allowWhitelabelling) {
+        injectCss({
+          css: data.css,
+          cssVars: data.cssVars,
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+
+    setHasFinishedInit(true);
+
+    // !: While the setters are stable we still want to ensure we're avoiding
+    // !: re-renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allowWhitelabelling]);
+
+  useEffect(() => {
+    if (hasFinishedInit) {
+      onDocumentReady();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasFinishedInit]);
+
+  // Listen for document completion events from the envelope signing context
+  useEffect(() => {
+    if (isCompleted) {
+      onDocumentCompleted({
+        token: recipient.token,
+        envelopeId: envelope.id,
+        documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
+        recipientId: recipient.id,
+      });
+    }
+  }, [isCompleted, envelope.id, recipient.id, recipient.token]);
+
+  // Listen for document rejection events
+  useEffect(() => {
+    if (isRejected) {
+      onDocumentRejected({
+        token: recipient.token,
+        envelopeId: envelope.id,
+        documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
+        recipientId: recipient.id,
+      });
+    }
+  }, [isRejected, envelope.id, recipient.id, recipient.token]);
+
+  if (isRejected) {
+    return <EmbedDocumentRejected />;
+  }
+
+  if (isCompleted) {
+    return (
+      <EmbedDocumentCompleted
+        name={fullName}
+        signature={
+          recipientSignature
+            ? {
+                id: 1,
+                fieldId: 1,
+                recipientId: recipient.id,
+                created: new Date(),
+                signatureImageAsBase64: recipientSignature.signatureImageAsBase64,
+                typedSignature: recipientSignature.typedSignature,
+              }
+            : undefined
+        }
+      />
+    );
+  }
+
+  return (
+    <EmbedSigningProvider
+      isNameLocked={isNameLocked}
+      hidePoweredBy={hidePoweredBy}
+      allowDocumentRejection={allowDocumentRejection}
+      onDocumentCompleted={onDocumentCompleted}
+      onDocumentError={onDocumentError}
+      onDocumentRejected={onDocumentRejected}
+      onDocumentReady={onDocumentReady}
+      onFieldSigned={onFieldSigned}
+      onFieldUnsigned={onFieldUnsigned}
+    >
+      <div className="embed--Root relative">
+        {!hasFinishedInit && <EmbedClientLoading />}
+
+        <DocumentSigningPageViewV2 />
+      </div>
+    </EmbedSigningProvider>
+  );
+};

apps/remix/app/components/embed/embed-signing-context.tsx

@@ -0,0 +1,101 @@
+import { createContext, useContext } from 'react';
+
+export type EmbedSigningContextValue = {
+  isEmbed: true;
+  allowDocumentRejection: boolean;
+  isNameLocked: boolean;
+  isEmailLocked: boolean;
+  hidePoweredBy: boolean;
+  onDocumentCompleted: (data: {
+    token: string;
+    documentId: number;
+    envelopeId: string;
+    recipientId: number;
+  }) => void;
+  onDocumentError: () => void;
+  onDocumentRejected: (data: {
+    token: string;
+    documentId: number;
+    envelopeId: string;
+    recipientId: number;
+    reason?: string;
+  }) => void;
+  onDocumentReady: () => void;
+  onFieldSigned: (data: { fieldId?: number; value?: string; isBase64?: boolean }) => void;
+  onFieldUnsigned: (data: { fieldId?: number }) => void;
+};
+
+const EmbedSigningContext = createContext<EmbedSigningContextValue | null>(null);
+
+export const useEmbedSigningContext = () => {
+  return useContext(EmbedSigningContext);
+};
+
+export const useRequiredEmbedSigningContext = () => {
+  const context = useEmbedSigningContext();
+
+  if (!context) {
+    throw new Error('useRequiredEmbedSigningContext must be used within EmbedSigningProvider');
+  }
+
+  return context;
+};
+
+export type EmbedSigningProviderProps = {
+  allowDocumentRejection?: boolean;
+  isNameLocked?: boolean;
+  isEmailLocked?: boolean;
+  hidePoweredBy?: boolean;
+  onDocumentCompleted: (data: {
+    token: string;
+    documentId: number;
+    envelopeId: string;
+    recipientId: number;
+  }) => void;
+  onDocumentError: () => void;
+  onDocumentRejected: (data: {
+    token: string;
+    documentId: number;
+    envelopeId: string;
+    recipientId: number;
+    reason?: string;
+  }) => void;
+  onDocumentReady: () => void;
+  onFieldSigned: (data: { fieldId?: number; value?: string; isBase64?: boolean }) => void;
+  onFieldUnsigned: (data: { fieldId?: number }) => void;
+  children: React.ReactNode;
+};
+
+export const EmbedSigningProvider = ({
+  allowDocumentRejection = false,
+  isNameLocked = false,
+  isEmailLocked = true,
+  hidePoweredBy = false,
+  onDocumentCompleted,
+  onDocumentError,
+  onDocumentRejected,
+  onDocumentReady,
+  onFieldSigned,
+  onFieldUnsigned,
+  children,
+}: EmbedSigningProviderProps) => {
+  return (
+    <EmbedSigningContext.Provider
+      value={{
+        isEmbed: true,
+        allowDocumentRejection,
+        isNameLocked,
+        isEmailLocked,
+        hidePoweredBy,
+        onDocumentCompleted,
+        onDocumentError,
+        onDocumentRejected,
+        onDocumentReady,
+        onFieldSigned,
+        onFieldUnsigned,
+      }}
+    >
+      {children}
+    </EmbedSigningContext.Provider>
+  );
+};

apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx

@@ -226,7 +226,9 @@ export const MultiSignDocumentSigningView = ({
                   })}
                 >
                   <PDFViewer
-                    documentData={document.documentData}
+                    envelopeItem={document.envelopeItems[0]}
+                    token={token}
+                    version="signed"
                     onDocumentLoad={() => {
                       setHasDocumentLoaded(true);
                       onDocumentReady?.();

apps/remix/app/components/forms/signin.tsx

@@ -92,6 +92,7 @@ export const SignInForm = ({
 
   const [isTwoFactorAuthenticationDialogOpen, setIsTwoFactorAuthenticationDialogOpen] =
     useState(false);
+  const [isEmbeddedRedirect, setIsEmbeddedRedirect] = useState(false);
 
   const [twoFactorAuthenticationMethod, setTwoFactorAuthenticationMethod] = useState<
     'totp' | 'backup'
@@ -317,6 +318,8 @@ export const SignInForm = ({
     if (email) {
       form.setValue('email', email);
     }
+
+    setIsEmbeddedRedirect(params.get('embedded') === 'true');
   }, [form]);
 
   return (
@@ -383,6 +386,8 @@ export const SignInForm = ({
             {isSubmitting ? <Trans>Signing in...</Trans> : <Trans>Sign In</Trans>}
           </Button>
 
+          {!isEmbeddedRedirect && (
+            <>
               {hasSocialAuthEnabled && (
                 <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
                   <div className="bg-border h-px flex-1" />
@@ -416,7 +421,11 @@ export const SignInForm = ({
                   disabled={isSubmitting}
                   onClick={onSignInWithMicrosoftClick}
                 >
-              <img className="mr-2 h-4 w-4" alt="Microsoft Logo" src={'/static/microsoft.svg'} />
+                  <img
+                    className="mr-2 h-4 w-4"
+                    alt="Microsoft Logo"
+                    src={'/static/microsoft.svg'}
+                  />
                   Microsoft
                 </Button>
               )}
@@ -434,6 +443,8 @@ export const SignInForm = ({
                   {oidcProviderLabel || 'OIDC'}
                 </Button>
               )}
+            </>
+          )}
 
           <Button
             type="button"

apps/remix/app/components/forms/signup.tsx

@@ -68,6 +68,7 @@ export type SignUpFormProps = {
   isGoogleSSOEnabled?: boolean;
   isMicrosoftSSOEnabled?: boolean;
   isOIDCSSOEnabled?: boolean;
+  returnTo?: string;
 };
 
 export const SignUpForm = ({
@@ -76,6 +77,7 @@ export const SignUpForm = ({
   isGoogleSSOEnabled,
   isMicrosoftSSOEnabled,
   isOIDCSSOEnabled,
+  returnTo,
 }: SignUpFormProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
@@ -110,7 +112,7 @@ export const SignUpForm = ({
         signature,
       });
 
-      await navigate(`/unverified-account`);
+      await navigate(returnTo ? returnTo : '/unverified-account');
 
       toast({
         title: _(msg`Registration Successful`),

apps/remix/app/components/general/app-command-menu.tsx

@@ -9,6 +9,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { useNavigate } from 'react-router';
 import { Theme, useTheme } from 'remix-themes';
 
+import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounced-value';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { SUPPORTED_LANGUAGES } from '@documenso/lib/constants/i18n';
 import {
@@ -63,10 +64,12 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
   const [search, setSearch] = useState('');
   const [pages, setPages] = useState<string[]>([]);
 
+  const debouncedSearch = useDebouncedValue(search, 200);
+
   const { data: searchDocumentsData, isPending: isSearchingDocuments } =
     trpcReact.document.search.useQuery(
       {
-        query: search,
+        query: debouncedSearch,
       },
       {
         placeholderData: (previousData) => previousData,
@@ -232,6 +235,7 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
             <Trans>No results found.</Trans>
           </CommandEmpty>
         )}
+
         {!currentPage && (
           <>
             {documentPageLinks.length > 0 && (
@@ -239,14 +243,17 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
                 <Commands push={push} pages={documentPageLinks} />
               </CommandGroup>
             )}
+
             {templatePageLinks.length > 0 && (
               <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Templates`)}>
                 <Commands push={push} pages={templatePageLinks} />
               </CommandGroup>
             )}
+
             <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Settings`)}>
               <Commands push={push} pages={SETTINGS_PAGES} />
             </CommandGroup>
+
             <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Preferences`)}>
               <CommandItem className="-mx-2 -my-1 rounded-lg" onSelect={() => addPage('language')}>
                 Change language
@@ -255,6 +262,7 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
                 Change theme
               </CommandItem>
             </CommandGroup>
+
             {searchResults.length > 0 && (
               <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Your documents`)}>
                 <Commands push={push} pages={searchResults} />

apps/remix/app/components/general/direct-template/direct-template-page.tsx

@@ -153,7 +153,9 @@ export const DirectTemplatePageView = ({
         <CardContent className="p-2">
           <PDFViewer
             key={template.id}
-            documentData={template.templateDocumentData}
+            envelopeItem={template.envelopeItems[0]}
+            token={directTemplateRecipient.token}
+            version="signed"
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

apps/remix/app/components/general/document-signing/document-signing-auth-account.tsx

@@ -22,7 +22,7 @@ export const DocumentSigningAuthAccount = ({
   actionVerb = 'sign',
   onOpenChange,
 }: DocumentSigningAuthAccountProps) => {
-  const { recipient } = useRequiredDocumentSigningAuthContext();
+  const { recipient, isDirectTemplate } = useRequiredDocumentSigningAuthContext();
 
   const { t } = useLingui();
 
@@ -34,8 +34,10 @@ export const DocumentSigningAuthAccount = ({
     try {
       setIsSigningOut(true);
 
+      const currentPath = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+
       await authClient.signOut({
-        redirectPath: `/signin#email=${email}`,
+        redirectPath: `/signin?returnTo=${encodeURIComponent(currentPath)}#embedded=true&email=${isDirectTemplate ? '' : email}`,
       });
     } catch {
       setIsSigningOut(false);
@@ -55,16 +57,28 @@ export const DocumentSigningAuthAccount = ({
         <AlertDescription>
           {actionTarget === 'DOCUMENT' && recipient.role === RecipientRole.VIEWER ? (
             <span>
+              {isDirectTemplate ? (
+                <Trans>To mark this document as viewed, you need to be logged in.</Trans>
+              ) : (
                 <Trans>
                   To mark this document as viewed, you need to be logged in as{' '}
                   <strong>{recipient.email}</strong>
                 </Trans>
+              )}
             </span>
           ) : (
             <span>
-              {/* Todo: Translate */}
-              To {actionVerb.toLowerCase()} this {actionTarget.toLowerCase()}, you need to be logged
-              in as <strong>{recipient.email}</strong>
+              {isDirectTemplate ? (
+                <Trans>
+                  To {actionVerb.toLowerCase()} this {actionTarget.toLowerCase()}, you need to be
+                  logged in.
+                </Trans>
+              ) : (
+                <Trans>
+                  To {actionVerb.toLowerCase()} this {actionTarget.toLowerCase()}, you need to be
+                  logged in as <strong>{recipient.email}</strong>
+                </Trans>
+              )}
             </span>
           )}
         </AlertDescription>

apps/remix/app/components/general/document-signing/document-signing-auth-dialog.tsx

@@ -47,7 +47,8 @@ export const DocumentSigningAuthDialog = ({
   onOpenChange,
   onReauthFormSubmit,
 }: DocumentSigningAuthDialogProps) => {
-  const { recipient, user, isCurrentlyAuthenticating } = useRequiredDocumentSigningAuthContext();
+  const { recipient, user, isCurrentlyAuthenticating, isDirectTemplate } =
+    useRequiredDocumentSigningAuthContext();
 
   // Filter out EXPLICIT_NONE from available auth types for the chooser
   const validAuthTypes = availableAuthTypes.filter(
@@ -168,7 +169,11 @@ export const DocumentSigningAuthDialog = ({
           match({ documentAuthType: selectedAuthType, user })
             .with(
               { documentAuthType: DocumentAuth.ACCOUNT },
-              { user: P.when((user) => !user || user.email !== recipient.email) }, // Assume all current auth methods requires them to be logged in.
+              {
+                user: P.when(
+                  (user) => !user || (user.email !== recipient.email && !isDirectTemplate),
+                ),
+              }, // Assume all current auth methods requires them to be logged in.
               () => <DocumentSigningAuthAccount onOpenChange={onOpenChange} />,
             )
             .with({ documentAuthType: DocumentAuth.PASSKEY }, () => (

apps/remix/app/components/general/document-signing/document-signing-auth-provider.tsx

@@ -40,6 +40,7 @@ export type DocumentSigningAuthContextValue = {
   derivedRecipientAccessAuth: TRecipientAccessAuthTypes[];
   derivedRecipientActionAuth: TRecipientActionAuthTypes[];
   isAuthRedirectRequired: boolean;
+  isDirectTemplate?: boolean;
   isCurrentlyAuthenticating: boolean;
   setIsCurrentlyAuthenticating: (_value: boolean) => void;
   passkeyData: PasskeyData;
@@ -68,6 +69,7 @@ export const useRequiredDocumentSigningAuthContext = () => {
 export interface DocumentSigningAuthProviderProps {
   documentAuthOptions: Envelope['authOptions'];
   recipient: SigningAuthRecipient;
+  isDirectTemplate?: boolean;
   user?: SessionUser | null;
   children: React.ReactNode;
 }
@@ -75,6 +77,7 @@ export interface DocumentSigningAuthProviderProps {
 export const DocumentSigningAuthProvider = ({
   documentAuthOptions: initialDocumentAuthOptions,
   recipient: initialRecipient,
+  isDirectTemplate = false,
   user,
   children,
 }: DocumentSigningAuthProviderProps) => {
@@ -204,6 +207,7 @@ export const DocumentSigningAuthProvider = ({
         derivedRecipientAccessAuth,
         derivedRecipientActionAuth,
         isAuthRedirectRequired,
+        isDirectTemplate,
         isCurrentlyAuthenticating,
         setIsCurrentlyAuthenticating,
         passkeyData,

apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx

@@ -34,6 +34,7 @@ import {
 } from '@documenso/ui/primitives/form/form';
 import { Input } from '@documenso/ui/primitives/input';
 
+import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
 import { AccessAuth2FAForm } from '~/components/general/document-signing/access-auth-2fa-form';
 import { DocumentSigningDisclosure } from '~/components/general/document-signing/document-signing-disclosure';
 
@@ -102,6 +103,8 @@ export const DocumentSigningCompleteDialog = ({
 
   const { derivedRecipientAccessAuth } = useRequiredDocumentSigningAuthContext();
 
+  const { isNameLocked, isEmailLocked } = useEmbedSigningContext() || {};
+
   const form = useForm<TNextSignerFormSchema>({
     resolver: allowDictateNextSigner ? zodResolver(ZNextSignerFormSchema) : undefined,
     defaultValues: {
@@ -267,7 +270,12 @@ export const DocumentSigningCompleteDialog = ({
                               <Trans>Your Name</Trans>
                             </FormLabel>
                             <FormControl>
-                              <Input {...field} className="mt-2" placeholder={t`Enter your name`} />
+                              <Input
+                                {...field}
+                                className="mt-2"
+                                placeholder={t`Enter your name`}
+                                disabled={isNameLocked}
+                              />
                             </FormControl>
 
                             <FormMessage />
@@ -289,6 +297,7 @@ export const DocumentSigningCompleteDialog = ({
                                 type="email"
                                 className="mt-2"
                                 placeholder={t`Enter your email`}
+                                disabled={!!field.value && isEmailLocked}
                               />
                             </FormControl>
                             <FormMessage />

apps/remix/app/components/general/document-signing/document-signing-mobile-widget.tsx

@@ -8,6 +8,9 @@ import { match } from 'ts-pattern';
 
 import { Button } from '@documenso/ui/primitives/button';
 
+import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
+
+import { BrandingLogo } from '../branding-logo';
 import EnvelopeSignerForm from '../envelope-signing/envelope-signer-form';
 import { EnvelopeSignerCompleteDialog } from '../envelope-signing/envelope-signing-complete-dialog';
 import { useRequiredEnvelopeSigningContext } from './envelope-signing-provider';
@@ -15,6 +18,8 @@ import { useRequiredEnvelopeSigningContext } from './envelope-signing-provider';
 export const DocumentSigningMobileWidget = () => {
   const [isExpanded, setIsExpanded] = useState(false);
 
+  const { hidePoweredBy = true } = useEmbedSigningContext() || {};
+
   const { recipientFieldsRemaining, recipient, requiredRecipientFields } =
     useRequiredEnvelopeSigningContext();
 
@@ -29,7 +34,7 @@ export const DocumentSigningMobileWidget = () => {
 
   return (
     <div className="pointer-events-none fixed bottom-0 left-0 right-0 z-50 flex justify-center px-2 pb-2 sm:px-4 sm:pb-6">
-      <div className="pointer-events-auto w-full max-w-2xl">
+      <div className="pointer-events-auto w-full max-w-[760px]">
         <div className="bg-card border-border overflow-hidden rounded-xl border shadow-2xl">
           {/* Main Header Bar */}
           <div className="flex items-center justify-between gap-4 p-4">
@@ -114,6 +119,13 @@ export const DocumentSigningMobileWidget = () => {
           {isExpanded && (
             <div className="border-border animate-in slide-in-from-bottom-2 border-t p-4 duration-200">
               <EnvelopeSignerForm />
+
+              {!hidePoweredBy && (
+                <div className="bg-primary text-primary-foreground mt-2 inline-block rounded px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100 lg:hidden">
+                  <span>Powered by</span>
+                  <BrandingLogo className="ml-2 inline-block h-[14px]" />
+                </div>
+              )}
             </div>
           )}
         </div>

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

@@ -245,7 +245,12 @@ export const DocumentSigningPageViewV1 = ({
           <div className="flex-1">
             <Card className="rounded-xl before:rounded-xl" gradient>
               <CardContent className="p-2">
-                <PDFViewer key={documentData.id} documentData={documentData} document={document} />
+                <PDFViewer
+                  key={document.envelopeItems[0].id}
+                  envelopeItem={document.envelopeItems[0]}
+                  token={recipient.token}
+                  version="signed"
+                />
               </CardContent>
             </Card>
           </div>

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

@@ -22,7 +22,9 @@ import { SignFieldNameDialog } from '~/components/dialogs/sign-field-name-dialog
 import { SignFieldNumberDialog } from '~/components/dialogs/sign-field-number-dialog';
 import { SignFieldSignatureDialog } from '~/components/dialogs/sign-field-signature-dialog';
 import { SignFieldTextDialog } from '~/components/dialogs/sign-field-text-dialog';
+import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
 
+import { BrandingLogo } from '../branding-logo';
 import { DocumentSigningAttachmentsPopover } from '../document-signing/document-signing-attachments-popover';
 import { EnvelopeItemSelector } from '../envelope-editor/envelope-file-selector';
 import EnvelopeSignerForm from '../envelope-signing/envelope-signer-form';
@@ -48,6 +50,13 @@ export const DocumentSigningPageViewV2 = () => {
     selectedAssistantRecipientFields,
   } = useRequiredEnvelopeSigningContext();
 
+  const {
+    isEmbed = false,
+    allowDocumentRejection = true,
+    hidePoweredBy = true,
+    onDocumentRejected,
+  } = useEmbedSigningContext() || {};
+
   /**
    * The total remaining fields remaining for the current recipient or selected assistant recipient.
    *
@@ -77,7 +86,7 @@ export const DocumentSigningPageViewV2 = () => {
       {/* Main Content Area */}
       <div className="flex h-[calc(100vh-4rem)] w-screen">
         {/* Left Section - Step Navigation */}
-        <div className="bg-background border-border hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-r py-4 lg:flex">
+        <div className="embed--DocumentWidgetContainer bg-background border-border hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-r py-4 lg:flex">
           <div className="px-4">
             <h3 className="text-foreground flex items-end justify-between text-sm font-semibold">
               {match(recipient.role)
@@ -107,7 +116,7 @@ export const DocumentSigningPageViewV2 = () => {
               />
             </div>
 
-            <div className="mt-6 space-y-3">
+            <div className="embed--DocumentWidgetContent mt-6 space-y-3">
               <EnvelopeSignerForm />
             </div>
           </div>
@@ -116,7 +125,7 @@ export const DocumentSigningPageViewV2 = () => {
 
           {/* Quick Actions. */}
           {!isDirectTemplate && (
-            <div className="space-y-3 px-4">
+            <div className="embed--Actions space-y-3 px-4">
               <h4 className="text-foreground text-sm font-semibold">
                 <Trans>Actions</Trans>
               </h4>
@@ -145,10 +154,21 @@ export const DocumentSigningPageViewV2 = () => {
                 }
               />
 
-              {envelope.type === EnvelopeType.DOCUMENT && (
+              {envelope.type === EnvelopeType.DOCUMENT && allowDocumentRejection && (
                 <DocumentSigningRejectDialog
                   documentId={mapSecondaryIdToDocumentId(envelope.secondaryId)}
                   token={recipient.token}
+                  onRejected={
+                    onDocumentRejected &&
+                    ((reason) =>
+                      onDocumentRejected({
+                        token: recipient.token,
+                        documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
+                        envelopeId: envelope.id,
+                        recipientId: recipient.id,
+                        reason,
+                      }))
+                  }
                   trigger={
                     <Button
                       variant="ghost"
@@ -164,7 +184,9 @@ export const DocumentSigningPageViewV2 = () => {
             </div>
           )}
 
+          <div className="embed--DocumentWidgetFooter">
             {/* Footer of left sidebar. */}
+            {!isEmbed && (
               <div className="mt-auto px-4">
                 <Button asChild variant="ghost" className="w-full justify-start">
                   <Link to="/">
@@ -173,9 +195,11 @@ export const DocumentSigningPageViewV2 = () => {
                   </Link>
                 </Button>
               </div>
+            )}
+          </div>
         </div>
 
-        <div className="flex-1 overflow-y-auto">
+        <div className="embed--DocumentContainer flex-1 overflow-y-auto">
           <div className="flex flex-col">
             {/* Horizontal envelope item selector */}
             {envelopeItems.length > 1 && (
@@ -202,12 +226,11 @@ export const DocumentSigningPageViewV2 = () => {
             )}
 
             {/* Document View */}
-            <div className="flex flex-col items-center justify-center p-2 sm:mt-4 sm:p-4">
+            <div className="embed--DocumentViewer flex flex-col items-center justify-center p-2 sm:mt-4 sm:p-4">
               {currentEnvelopeItem ? (
                 <PDFViewerKonvaLazy
                   renderer="signing"
                   key={currentEnvelopeItem.id}
-                  documentDataId={currentEnvelopeItem.documentDataId}
                   customPageRenderer={EnvelopeSignerPageRenderer}
                 />
               ) : (
@@ -219,9 +242,20 @@ export const DocumentSigningPageViewV2 = () => {
               )}
 
               {/* Mobile widget - Additional padding to allow users to scroll */}
-              <div className="block pb-16 md:hidden">
+              <div className="block pb-28 lg:hidden">
                 <DocumentSigningMobileWidget />
               </div>
+
+              {!hidePoweredBy && (
+                <a
+                  href="https://documenso.com"
+                  target="_blank"
+                  className="bg-primary text-primary-foreground fixed bottom-0 right-0 z-40 hidden cursor-pointer rounded-tl px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100 lg:block"
+                >
+                  <span>Powered by</span>
+                  <BrandingLogo className="ml-2 inline-block h-[14px]" />
+                </a>
+              )}
             </div>
           </div>
         </div>

apps/remix/app/components/general/document-signing/envelope-signing-provider.tsx

@@ -56,7 +56,7 @@ export type EnvelopeSigningContextValue = {
     _fieldId: number,
     _value: TSignEnvelopeFieldValue,
     authOptions?: TRecipientActionAuth,
-  ) => Promise<void>;
+  ) => Promise<Pick<Field, 'id' | 'inserted'>>;
 };
 
 const EnvelopeSigningContext = createContext<EnvelopeSigningContextValue | null>(null);
@@ -296,16 +296,19 @@ export const EnvelopeSigningProvider = ({
   ) => {
     // Set the field locally for direct templates.
     if (isDirectTemplate) {
-      handleDirectTemplateFieldInsertion(fieldId, fieldValue);
-      return;
+      const signedField = handleDirectTemplateFieldInsertion(fieldId, fieldValue);
+
+      return signedField;
     }
 
-    await signEnvelopeField({
+    const { signedField } = await signEnvelopeField({
       token: envelopeData.recipient.token,
       fieldId,
       fieldValue,
       authOptions,
     });
+
+    return signedField;
   };
 
   const handleDirectTemplateFieldInsertion = (
@@ -363,6 +366,8 @@ export const EnvelopeSigningProvider = ({
         fields: prev.recipient.fields.map((field) => (field.id === fieldId ? updatedField : field)),
       },
     }));
+
+    return updatedField;
   };
 
   return (

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,12 +183,18 @@ 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">

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>

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);
 };

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,7 +86,6 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
           </DropdownMenuItem>
         )}
 
-        {envelope.internalVersion === 2 ? (
         <EnvelopeDownloadDialog
           envelopeId={envelope.id}
           envelopeStatus={envelope.status}
@@ -162,21 +100,6 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
             </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 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}
         />

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

@@ -1,10 +1,20 @@
-import { lazy, useEffect, useState } from 'react';
+import { lazy, useEffect, useMemo, useState } from 'react';
 
+import { faker } from '@faker-js/faker/locale/en';
 import { Trans } from '@lingui/react/macro';
-import { ConstructionIcon, FileTextIcon } from 'lucide-react';
+import { FieldType } from '@prisma/client';
+import { FileTextIcon } from 'lucide-react';
+import { match } from 'ts-pattern';
 
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
-import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import {
+  EnvelopeRenderProvider,
+  useCurrentEnvelopeRender,
+} from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { ZFieldAndMetaSchema } from '@documenso/lib/types/field-meta';
+import { extractFieldInsertionValues } from '@documenso/lib/utils/envelope-signing';
+import { toCheckboxCustomText } from '@documenso/lib/utils/fields';
+import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import PDFViewerKonvaLazy from '@documenso/ui/components/pdf-viewer/pdf-viewer-konva-lazy';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
@@ -15,15 +25,169 @@ import { EnvelopeRendererFileSelector } from './envelope-file-selector';
 
 const EnvelopeGenericPageRenderer = lazy(async () => import('./envelope-generic-page-renderer'));
 
+// Todo: Envelopes - Dynamically import faker
 export const EnvelopeEditorPreviewPage = () => {
   const { envelope, editorFields } = useCurrentEnvelopeEditor();
 
-  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
+  const { currentEnvelopeItem, fields } = useCurrentEnvelopeRender();
 
   const [selectedPreviewMode, setSelectedPreviewMode] = useState<'recipient' | 'signed'>(
     'recipient',
   );
 
+  const fieldsWithPlaceholders = useMemo(() => {
+    return fields.map((field) => {
+      const fieldMeta = ZFieldAndMetaSchema.parse(field);
+
+      const recipient = envelope.recipients.find((recipient) => recipient.id === field.recipientId);
+
+      if (!recipient) {
+        throw new Error('Recipient not found');
+      }
+
+      faker.seed(recipient.id);
+
+      const recipientName = recipient.name || faker.person.fullName();
+      const recipientEmail = recipient.email || faker.internet.email();
+
+      faker.seed(recipient.id + field.id);
+
+      return {
+        ...field,
+        inserted: true,
+        ...match(fieldMeta)
+          .with({ type: FieldType.TEXT }, ({ fieldMeta }) => {
+            let text = fieldMeta?.text || faker.lorem.words(5);
+
+            if (fieldMeta?.characterLimit) {
+              text = text.slice(0, fieldMeta?.characterLimit);
+            }
+
+            return {
+              customText: text,
+            };
+          })
+          .with({ type: FieldType.NUMBER }, ({ fieldMeta }) => {
+            let number = fieldMeta?.value ?? '';
+
+            if (number === '') {
+              number = faker.number
+                .int({
+                  min: fieldMeta?.minValue ?? 0,
+                  max: fieldMeta?.maxValue ?? 1000,
+                })
+                .toString();
+            }
+
+            return {
+              customText: number,
+            };
+          })
+          .with({ type: FieldType.DATE }, () => {
+            const date = extractFieldInsertionValues({
+              fieldValue: {
+                type: FieldType.DATE,
+                value: true,
+              },
+              field,
+              documentMeta: envelope.documentMeta,
+            });
+
+            return {
+              customText: date.customText,
+            };
+          })
+          .with({ type: FieldType.EMAIL }, () => {
+            return {
+              customText: recipientEmail,
+            };
+          })
+          .with({ type: FieldType.NAME }, () => {
+            return {
+              customText: recipientName,
+            };
+          })
+          .with({ type: FieldType.INITIALS }, () => {
+            return {
+              customText: extractInitials(recipientName),
+            };
+          })
+          .with({ type: FieldType.RADIO }, ({ fieldMeta }) => {
+            const values = fieldMeta?.values ?? [];
+
+            if (values.length === 0) {
+              return '';
+            }
+
+            let customText = '';
+
+            const preselectedValue = values.findIndex((value) => value.checked);
+
+            if (preselectedValue !== -1) {
+              customText = preselectedValue.toString();
+            } else {
+              const randomIndex = faker.number.int({ min: 0, max: values.length - 1 });
+              customText = randomIndex.toString();
+            }
+
+            return {
+              customText,
+            };
+          })
+          .with({ type: FieldType.CHECKBOX }, ({ fieldMeta }) => {
+            let checkedValues: number[] = [];
+
+            const values = fieldMeta?.values ?? [];
+
+            values.forEach((value, index) => {
+              if (value.checked) {
+                checkedValues.push(index);
+              }
+            });
+
+            if (checkedValues.length === 0 && values.length > 0) {
+              const numberOfValues = fieldMeta?.validationLength || 1;
+
+              checkedValues = Array.from({ length: numberOfValues }, (_, index) => index);
+            }
+
+            return {
+              customText: toCheckboxCustomText(checkedValues),
+            };
+          })
+          .with({ type: FieldType.DROPDOWN }, ({ fieldMeta }) => {
+            const values = fieldMeta?.values ?? [];
+
+            let customText = fieldMeta?.defaultValue || '';
+
+            if (!customText && values.length > 0) {
+              const randomIndex = faker.number.int({ min: 0, max: values.length - 1 });
+              customText = values[randomIndex].value;
+            }
+
+            return {
+              customText,
+            };
+          })
+          .with({ type: FieldType.SIGNATURE }, () => {
+            return {
+              customText: '',
+              signature: {
+                signatureImageAsBase64: '',
+                typedSignature: recipientName,
+              },
+            };
+          })
+          .with({ type: FieldType.FREE_SIGNATURE }, () => {
+            return {
+              customText: '',
+            };
+          })
+          .exhaustive(),
+      };
+    });
+  }, [fields, envelope, envelope.recipients, envelope.documentMeta]);
+
   /**
    * Set the selected recipient to the first recipient in the envelope.
    */
@@ -31,7 +195,17 @@ export const EnvelopeEditorPreviewPage = () => {
     editorFields.setSelectedRecipient(envelope.recipients[0]?.id ?? null);
   }, []);
 
+  // Override the parent renderer provider so we can inject custom fields.
   return (
+    <EnvelopeRenderProvider
+      envelope={envelope}
+      token={undefined}
+      fields={fieldsWithPlaceholders}
+      recipients={envelope.recipients}
+      overrideSettings={{
+        mode: 'export',
+      }}
+    >
       <div className="relative flex h-full">
         <div className="flex w-full flex-col overflow-y-auto">
           {/* Horizontal envelope item selector */}
@@ -48,23 +222,11 @@ export const EnvelopeEditorPreviewPage = () => {
               </AlertDescription>
             </Alert>
 
-          {/* Coming soon section */}
-          <div className="border-border bg-card hover:bg-accent/10 flex w-full max-w-[800px] items-center gap-4 rounded-lg border p-4 transition-colors">
-            <div className="flex w-full flex-col items-center justify-center gap-2 py-32">
-              <ConstructionIcon className="text-muted-foreground h-10 w-10" />
-              <h3 className="text-foreground text-sm font-semibold">
-                <Trans>Coming soon</Trans>
-              </h3>
-              <p className="text-muted-foreground text-sm">
-                <Trans>This feature is coming soon</Trans>
-              </p>
-            </div>
-          </div>
-
-          {/* Todo: Envelopes - Remove div after preview mode is implemented */}
-          <div className="hidden">
             {currentEnvelopeItem !== null ? (
-              <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
+              <PDFViewerKonvaLazy
+                renderer="editor"
+                customPageRenderer={EnvelopeGenericPageRenderer}
+              />
             ) : (
               <div className="flex flex-col items-center justify-center py-32">
                 <FileTextIcon className="text-muted-foreground h-10 w-10" />
@@ -78,7 +240,6 @@ export const EnvelopeEditorPreviewPage = () => {
             )}
           </div>
         </div>
-      </div>
 
         {/* Right Section - Form Fields Panel */}
         {currentEnvelopeItem && false && (
@@ -94,7 +255,9 @@ export const EnvelopeEditorPreviewPage = () => {
                   <Trans>Preview Mode</Trans>
                 </AlertTitle>
                 <AlertDescription>
-                <Trans>Preview what the signed document will look like with placeholder data</Trans>
+                  <Trans>
+                    Preview what the signed document will look like with placeholder data
+                  </Trans>
                 </AlertDescription>
               </Alert>
 
@@ -168,5 +331,6 @@ export const EnvelopeEditorPreviewPage = () => {
           </div>
         )}
       </div>
+    </EnvelopeRenderProvider>
   );
 };

apps/remix/app/components/general/envelope-editor/envelope-editor-recipient-form.tsx

@@ -482,30 +482,46 @@ export const EnvelopeEditorRecipientForm = () => {
 
     const { data } = validatedFormValues;
 
+    // Weird edge case where the whole envelope is created via API
+    // with no signing order. If they come to this page it will show an error
+    // since they aren't equal and the recipient is no longer editable.
+    const envelopeRecipients = data.signers.map((recipient) => {
+      if (!canRecipientBeModified(recipient.id)) {
+        return {
+          ...recipient,
+          signingOrder: recipient.signingOrder,
+        };
+      }
+      return recipient;
+    });
+
     const hasSigningOrderChanged = envelope.documentMeta.signingOrder !== data.signingOrder;
     const hasAllowDictateNextSignerChanged =
       envelope.documentMeta.allowDictateNextSigner !== data.allowDictateNextSigner;
 
     const hasSignersChanged =
-      data.signers.length !== recipients.length ||
-      data.signers.some((signer) => {
+      envelopeRecipients.length !== recipients.length ||
+      envelopeRecipients.some((signer) => {
         const recipient = recipients.find((recipient) => recipient.id === signer.id);
 
         if (!recipient) {
           return true;
         }
 
+        const signerActionAuth = signer.actionAuth;
+        const recipientActionAuth = recipient.authOptions?.actionAuth || [];
+
         return (
           signer.email !== recipient.email ||
           signer.name !== recipient.name ||
           signer.role !== recipient.role ||
           signer.signingOrder !== recipient.signingOrder ||
-          !isDeepEqual(signer.actionAuth, recipient.authOptions?.actionAuth)
+          !isDeepEqual(signerActionAuth, recipientActionAuth)
         );
       });
 
     if (hasSignersChanged) {
-      setRecipientsDebounced(validatedFormValues.data.signers);
+      setRecipientsDebounced(envelopeRecipients);
     }
 
     if (hasSigningOrderChanged || hasAllowDictateNextSignerChanged) {

apps/remix/app/components/general/envelope-editor/envelope-editor-settings-dialog.tsx

@@ -174,7 +174,7 @@ export const EnvelopeEditorSettingsDialog = ({
   const { t, i18n } = useLingui();
   const { toast } = useToast();
 
-  const { envelope } = useCurrentEnvelopeEditor();
+  const { envelope, updateEnvelopeAsync } = useCurrentEnvelopeEditor();
 
   const team = useCurrentTeam();
   const organisation = useCurrentOrganisation();
@@ -186,14 +186,12 @@ export const EnvelopeEditorSettingsDialog = ({
     documentAuth: envelope.authOptions,
   });
 
-  const form = useForm<TAddSettingsFormSchema>({
-    resolver: zodResolver(ZAddSettingsFormSchema),
-    defaultValues: {
-      externalId: envelope.externalId || '', // Todo: String or undefined?
+  const createDefaultValues = () => {
+    return {
+      externalId: envelope.externalId || '',
       visibility: envelope.visibility || '',
       globalAccessAuth: documentAuthOption?.globalAccessAuth || [],
       globalActionAuth: documentAuthOption?.globalActionAuth || [],
-
       meta: {
         subject: envelope.documentMeta.subject ?? '',
         message: envelope.documentMeta.message ?? '',
@@ -210,10 +208,13 @@ export const EnvelopeEditorSettingsDialog = ({
         emailSettings: ZDocumentEmailSettingsSchema.parse(envelope.documentMeta.emailSettings),
         signatureTypes: extractTeamSignatureSettings(envelope.documentMeta),
       },
-    },
-  });
+    };
+  };
 
-  const { mutateAsync: updateEnvelope } = trpc.envelope.update.useMutation();
+  const form = useForm<TAddSettingsFormSchema>({
+    resolver: zodResolver(ZAddSettingsFormSchema),
+    defaultValues: createDefaultValues(),
+  });
 
   const envelopeHasBeenSent =
     envelope.type === EnvelopeType.DOCUMENT &&
@@ -239,8 +240,7 @@ export const EnvelopeEditorSettingsDialog = ({
       .safeParse(data.globalAccessAuth);
 
     try {
-      await updateEnvelope({
-        envelopeId: envelope.id,
+      await updateEnvelopeAsync({
         data: {
           externalId: data.externalId || null,
           visibility: data.visibility,
@@ -295,7 +295,7 @@ export const EnvelopeEditorSettingsDialog = ({
   ]);
 
   useEffect(() => {
-    form.reset();
+    form.reset(createDefaultValues());
     setActiveTab('general');
   }, [open, form]);
 

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

@@ -18,9 +18,9 @@ import {
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { nanoid } from '@documenso/lib/universal/id';
-import { putPdfFile } from '@documenso/lib/universal/upload/put-file';
 import { canEnvelopeItemsBeModified } 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 { Button } from '@documenso/ui/primitives/button';
 import {
   Card,
@@ -67,8 +67,8 @@ export const EnvelopeEditorUploadPage = () => {
 
   const { mutateAsync: createEnvelopeItems, isPending: isCreatingEnvelopeItems } =
     trpc.envelope.item.createMany.useMutation({
-      onSuccess: (data) => {
-        const createdEnvelopes = data.createdEnvelopeItems.filter(
+      onSuccess: ({ data }) => {
+        const createdEnvelopes = data.filter(
           (item) => !envelope.envelopeItems.find((envelopeItem) => envelopeItem.id === item.id),
         );
 
@@ -79,10 +79,10 @@ export const EnvelopeEditorUploadPage = () => {
     });
 
   const { mutateAsync: updateEnvelopeItems } = trpc.envelope.item.updateMany.useMutation({
-    onSuccess: (data) => {
+    onSuccess: ({ data }) => {
       setLocalEnvelope({
         envelopeItems: envelope.envelopeItems.map((originalItem) => {
-          const updatedItem = data.updatedEnvelopeItems.find((item) => item.id === originalItem.id);
+          const updatedItem = data.find((item) => item.id === originalItem.id);
 
           if (updatedItem) {
             return {
@@ -114,36 +114,19 @@ export const EnvelopeEditorUploadPage = () => {
 
     setLocalFiles((prev) => [...prev, ...newUploadingFiles]);
 
-    const result = await Promise.all(
-      files.map(async (file, index) => {
-        try {
-          const response = await putPdfFile(file);
-
-          // Mark as uploaded (remove from uploading state)
-          return {
-            title: file.name,
-            documentDataId: response.id,
-          };
-        } catch (_error) {
-          setLocalFiles((prev) =>
-            prev.map((uploadingFile) =>
-              uploadingFile.id === newUploadingFiles[index].id
-                ? { ...uploadingFile, isError: true, isUploading: false }
-                : uploadingFile,
-            ),
-          );
-        }
-      }),
-    );
-
-    const envelopeItemsToCreate = result.filter(
-      (item): item is { title: string; documentDataId: string } => item !== undefined,
-    );
-
-    const { createdEnvelopeItems } = await createEnvelopeItems({
+    const payload = {
       envelopeId: envelope.id,
-      data: envelopeItemsToCreate,
-    }).catch((error) => {
+    } satisfies TCreateEnvelopeItemsPayload;
+
+    const formData = new FormData();
+
+    formData.append('payload', JSON.stringify(payload));
+
+    for (const file of files) {
+      formData.append('files', file);
+    }
+
+    const { data } = await createEnvelopeItems(formData).catch((error) => {
       console.error(error);
 
       // Set error state on files in batch upload.
@@ -165,7 +148,7 @@ export const EnvelopeEditorUploadPage = () => {
       );
 
       return filteredFiles.concat(
-        createdEnvelopeItems.map((item) => ({
+        data.map((item) => ({
           id: item.id,
           envelopeItemId: item.id,
           title: item.title,

apps/remix/app/components/general/envelope-editor/envelope-file-selector.tsx

@@ -29,7 +29,7 @@ export const EnvelopeItemSelector = ({
       {...buttonProps}
     >
       <div
-        className={`flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium ${
+        className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full text-xs font-medium ${
           isSelected ? 'bg-green-100 text-green-600' : 'bg-gray-200 text-gray-600'
         }`}
       >

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

@@ -1,6 +1,7 @@
 import { useEffect, useMemo } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
+import { type Recipient, SigningStatus } from '@prisma/client';
 import type Konva from 'konva';
 
 import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-renderer';
@@ -8,12 +9,23 @@ import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/e
 import type { TEnvelope } from '@documenso/lib/types/envelope';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
+import { EnvelopeRecipientFieldTooltip } from '@documenso/ui/components/document/envelope-recipient-field-tooltip';
+
+type GenericLocalField = TEnvelope['fields'][number] & {
+  recipient: Pick<Recipient, 'id' | 'name' | 'email' | 'signingStatus'>;
+};
 
 export default function EnvelopeGenericPageRenderer() {
   const { i18n } = useLingui();
 
-  const { currentEnvelopeItem, fields, getRecipientColorKey, setRenderError } =
-    useCurrentEnvelopeRender();
+  const {
+    currentEnvelopeItem,
+    fields,
+    recipients,
+    getRecipientColorKey,
+    setRenderError,
+    overrideSettings,
+  } = useCurrentEnvelopeRender();
 
   const {
     stage,
@@ -29,45 +41,65 @@ export default function EnvelopeGenericPageRenderer() {
 
   const { _className, scale } = pageContext;
 
-  const localPageFields = useMemo(
-    () =>
-      fields.filter(
+  const localPageFields = useMemo((): GenericLocalField[] => {
+    return fields
+      .filter(
         (field) =>
           field.page === pageContext.pageNumber && field.envelopeItemId === currentEnvelopeItem?.id,
-      ),
-    [fields, pageContext.pageNumber],
-  );
+      )
+      .map((field) => {
+        const recipient = recipients.find((recipient) => recipient.id === field.recipientId);
 
-  const unsafeRenderFieldOnLayer = (field: TEnvelope['fields'][number]) => {
+        if (!recipient) {
+          throw new Error(`Recipient not found for field ${field.id}`);
+        }
+
+        return {
+          ...field,
+          recipient,
+        };
+      });
+  }, [fields, pageContext.pageNumber, currentEnvelopeItem?.id, recipients]);
+
+  const unsafeRenderFieldOnLayer = (field: GenericLocalField) => {
     if (!pageLayer.current) {
       console.error('Layer not loaded yet');
       return;
     }
 
+    const { recipient } = field;
+
+    const fieldTranslations = getClientSideFieldTranslations(i18n);
+
+    const isInserted = recipient.signingStatus === SigningStatus.SIGNED && field.inserted;
+
     renderField({
       scale,
       pageLayer: pageLayer.current,
       field: {
         renderId: field.id.toString(),
         ...field,
-        customText: '',
         width: Number(field.width),
         height: Number(field.height),
         positionX: Number(field.positionX),
         positionY: Number(field.positionY),
-        inserted: false,
+        customText: isInserted ? field.customText : '',
         fieldMeta: field.fieldMeta,
+        signature: {
+          signatureImageAsBase64: '',
+          typedSignature: fieldTranslations.SIGNATURE,
         },
-      translations: getClientSideFieldTranslations(i18n),
+      },
+      translations: fieldTranslations,
       pageWidth: unscaledViewport.width,
       pageHeight: unscaledViewport.height,
       color: getRecipientColorKey(field.recipientId),
       editable: false,
-      mode: 'sign',
+      mode: overrideSettings?.mode ?? 'sign',
     });
   };
 
-  const renderFieldOnLayer = (field: TEnvelope['fields'][number]) => {
+  const renderFieldOnLayer = (field: GenericLocalField) => {
     try {
       unsafeRenderFieldOnLayer(field);
     } catch (err) {
@@ -123,6 +155,16 @@ export default function EnvelopeGenericPageRenderer() {
       className="relative w-full"
       key={`${currentEnvelopeItem.id}-renderer-${pageContext.pageNumber}`}
     >
+      {overrideSettings?.showRecipientTooltip &&
+        localPageFields.map((field) => (
+          <EnvelopeRecipientFieldTooltip
+            key={field.id}
+            field={field}
+            showFieldStatus={overrideSettings?.showRecipientSigningStatus}
+            showRecipientTooltip={overrideSettings?.showRecipientTooltip}
+          />
+        ))}
+
       {/* The element Konva will inject it's canvas into. */}
       <div className="konva-container absolute inset-0 z-10 w-full" ref={konvaContainer}></div>
 

apps/remix/app/components/general/envelope-signing/envelope-signer-form.tsx

@@ -8,6 +8,8 @@ import { Label } from '@documenso/ui/primitives/label';
 import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
 import { SignaturePadDialog } from '@documenso/ui/primitives/signature-pad/signature-pad-dialog';
 
+import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
+
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
 
 export default function EnvelopeSignerForm() {
@@ -25,6 +27,8 @@ export default function EnvelopeSignerForm() {
     setSelectedAssistantRecipientId,
   } = useRequiredEnvelopeSigningContext();
 
+  const { isNameLocked, isEmailLocked } = useEmbedSigningContext() || {};
+
   const hasSignatureField = useMemo(() => {
     return recipientFields.some((field) => field.type === FieldType.SIGNATURE);
   }, [recipientFields]);
@@ -37,7 +41,7 @@ export default function EnvelopeSignerForm() {
 
   if (recipient.role === RecipientRole.ASSISTANT) {
     return (
-      <fieldset className="dark:bg-background border-border rounded-2xl sm:border sm:p-3">
+      <fieldset className="embed--DocumentWidgetForm dark:bg-background border-border rounded-2xl sm:border sm:p-3">
         <RadioGroup
           className="gap-0 space-y-2 shadow-none sm:space-y-3"
           value={selectedAssistantRecipient?.id?.toString()}
@@ -101,7 +105,8 @@ export default function EnvelopeSignerForm() {
             id="full-name"
             className="bg-background mt-2"
             value={fullName}
-            onChange={(e) => setFullName(e.target.value.trimStart())}
+            disabled={isNameLocked}
+            onChange={(e) => !isNameLocked && setFullName(e.target.value.trimStart())}
           />
         </div>
 

apps/remix/app/components/general/envelope-signing/envelope-signer-header.tsx

@@ -16,6 +16,7 @@ import {
 import { Separator } from '@documenso/ui/primitives/separator';
 
 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
+import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
 import { BrandingLogo } from '~/components/general/branding-logo';
 
 import { BrandingLogoIcon } from '../branding-logo-icon';
@@ -28,7 +29,7 @@ export const EnvelopeSignerHeader = () => {
     useRequiredEnvelopeSigningContext();
 
   return (
-    <nav className="bg-background border-border max-w-screen flex flex-row justify-between border-b px-4 py-3 md:px-6">
+    <nav className="embed--DocumentWidgetHeader bg-background border-border max-w-screen flex flex-row justify-between border-b px-4 py-3 md:px-6">
       {/* Left side - Logo and title */}
       <div className="flex min-w-0 flex-1 items-center space-x-2 md:w-auto md:flex-none">
         <Link to="/" className="flex-shrink-0">
@@ -72,7 +73,7 @@ export const EnvelopeSignerHeader = () => {
       </div>
 
       {/* Right side - Desktop content */}
-      <div className="hidden items-center space-x-2 md:flex">
+      <div className="hidden items-center space-x-2 lg:flex">
         <p className="text-muted-foreground mr-2 flex-shrink-0 text-sm">
           <Plural
             one="1 Field Remaining"
@@ -85,7 +86,7 @@ export const EnvelopeSignerHeader = () => {
       </div>
 
       {/* Mobile Actions button */}
-      <div className="flex-shrink-0 md:hidden">
+      <div className="flex-shrink-0 lg:hidden">
         <MobileDropdownMenu />
       </div>
     </nav>
@@ -95,6 +96,8 @@ export const EnvelopeSignerHeader = () => {
 const MobileDropdownMenu = () => {
   const { envelope, recipient } = useRequiredEnvelopeSigningContext();
 
+  const { allowDocumentRejection } = useEmbedSigningContext() || {};
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -119,7 +122,7 @@ const MobileDropdownMenu = () => {
           }
         />
 
-        {envelope.type === EnvelopeType.DOCUMENT && (
+        {envelope.type === EnvelopeType.DOCUMENT && allowDocumentRejection !== false && (
           <DocumentSigningRejectDialog
             documentId={mapSecondaryIdToDocumentId(envelope.secondaryId)}
             token={recipient.token}

apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx

@@ -10,6 +10,7 @@ import { usePageRenderer } from '@documenso/lib/client-only/hooks/use-page-rende
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import { DIRECT_TEMPLATE_RECIPIENT_EMAIL } from '@documenso/lib/constants/direct-templates';
+import { isBase64Image } from '@documenso/lib/constants/signatures';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { ZFullFieldSchema } from '@documenso/lib/types/field';
 import { createSpinner } from '@documenso/lib/universal/field-renderer/field-generic-items';
@@ -22,6 +23,7 @@ import { EnvelopeFieldToolTip } from '@documenso/ui/components/field/envelope-fi
 import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
 import { handleCheckboxFieldClick } from '~/utils/field-signing/checkbox-field';
 import { handleDropdownFieldClick } from '~/utils/field-signing/dropdown-field';
 import { handleEmailFieldClick } from '~/utils/field-signing/email-field';
@@ -60,6 +62,8 @@ export default function EnvelopeSignerPageRenderer() {
     isDirectTemplate,
   } = useRequiredEnvelopeSigningContext();
 
+  const { onFieldSigned, onFieldUnsigned } = useEmbedSigningContext() || {};
+
   const {
     stage,
     pageLayer,
@@ -378,7 +382,19 @@ export default function EnvelopeSignerPageRenderer() {
     authOptions?: TRecipientActionAuth,
   ) => {
     try {
-      await signFieldInternal(fieldId, payload, authOptions);
+      const { inserted } = await signFieldInternal(fieldId, payload, authOptions);
+
+      // ?: The two callbacks below are used within the embedding context
+      if (inserted && onFieldSigned) {
+        const value = payload.value ? JSON.stringify(payload.value) : undefined;
+        const isBase64 = value ? isBase64Image(value) : undefined;
+
+        onFieldSigned({ fieldId, value, isBase64 });
+      }
+
+      if (!inserted && onFieldUnsigned) {
+        onFieldUnsigned({ fieldId });
+      }
     } catch (err) {
       console.error(err);
 
@@ -413,7 +429,6 @@ export default function EnvelopeSignerPageRenderer() {
     }
 
     localPageFields.forEach((field) => {
-      console.log('Field changed/inserted, rendering on canvas');
       renderFieldOnLayer(field);
     });
 

apps/remix/app/components/general/envelope-signing/envelope-signing-complete-dialog.tsx

@@ -2,16 +2,19 @@ import { useMemo } from 'react';
 
 import { useLingui } from '@lingui/react/macro';
 import { FieldType } from '@prisma/client';
-import { useNavigate, useSearchParams } from 'react-router';
+import { useNavigate, useRevalidator, useSearchParams } from 'react-router';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { isBase64Image } from '@documenso/lib/constants/signatures';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientAccessAuth } from '@documenso/lib/types/document-auth';
 import { mapSecondaryIdToDocumentId } from '@documenso/lib/utils/envelope';
 import { trpc } from '@documenso/trpc/react';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
+
 import { DocumentSigningCompleteDialog } from '../document-signing/document-signing-complete-dialog';
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
 
@@ -19,8 +22,9 @@ export const EnvelopeSignerCompleteDialog = () => {
   const navigate = useNavigate();
   const analytics = useAnalytics();
 
-  const { toast } = useToast();
   const { t } = useLingui();
+  const { toast } = useToast();
+  const { revalidate } = useRevalidator();
 
   const [searchParams] = useSearchParams();
 
@@ -37,6 +41,8 @@ export const EnvelopeSignerCompleteDialog = () => {
 
   const { currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
 
+  const { onDocumentCompleted, onDocumentError } = useEmbedSigningContext() || {};
+
   const { mutateAsync: completeDocument, isPending } =
     trpc.recipient.completeDocumentWithToken.useMutation();
 
@@ -68,6 +74,7 @@ export const EnvelopeSignerCompleteDialog = () => {
     nextSigner?: { name: string; email: string },
     accessAuthOptions?: TRecipientAccessAuth,
   ) => {
+    try {
       const payload = {
         token: recipient.token,
         documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
@@ -83,11 +90,39 @@ export const EnvelopeSignerCompleteDialog = () => {
         timestamp: new Date().toISOString(),
       });
 
+      if (onDocumentCompleted) {
+        onDocumentCompleted({
+          token: recipient.token,
+          documentId: mapSecondaryIdToDocumentId(envelope.secondaryId),
+          recipientId: recipient.id,
+          envelopeId: envelope.id,
+        });
+
+        await revalidate();
+
+        return;
+      }
+
       if (envelope.documentMeta.redirectUrl) {
         window.location.href = envelope.documentMeta.redirectUrl;
       } else {
         await navigate(`/sign/${recipient.token}/complete`);
       }
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      if (error.code !== AppErrorCode.TWO_FACTOR_AUTH_FAILED) {
+        toast({
+          title: t`Something went wrong`,
+          description: t`We were unable to submit this document at this time. Please try again later.`,
+          variant: 'destructive',
+        });
+
+        onDocumentError?.();
+      }
+
+      throw err;
+    }
   };
 
   /**
@@ -105,8 +140,12 @@ export const EnvelopeSignerCompleteDialog = () => {
         directTemplateExternalId = decodeURIComponent(directTemplateExternalId);
       }
 
+      if (!recipient.directToken) {
+        throw new Error('Recipient direct token is required');
+      }
+
       const { token } = await createDocumentFromDirectTemplate({
-        directTemplateToken: recipient.token, // The direct template token is inserted into the recipient token for ease of use.
+        directTemplateToken: recipient.directToken, // The direct template token is inserted into the recipient token for ease of use.
         directTemplateExternalId,
         directRecipientName: recipientDetails?.name || fullName,
         directRecipientEmail: recipientDetails?.email || email,
@@ -132,18 +171,31 @@ export const EnvelopeSignerCompleteDialog = () => {
 
       const redirectUrl = envelope.documentMeta.redirectUrl;
 
+      if (onDocumentCompleted) {
+        await navigate({
+          pathname: `/embed/sign/${token}`,
+          search: window.location.search,
+          hash: window.location.hash,
+        });
+
+        return;
+      }
+
       if (redirectUrl) {
         window.location.href = redirectUrl;
       } else {
         await navigate(`/sign/${token}/complete`);
       }
     } catch (err) {
+      console.log('err', err);
       toast({
         title: t`Something went wrong`,
         description: t`We were unable to submit this document at this time. Please try again later.`,
         variant: 'destructive',
       });
 
+      onDocumentError?.();
+
       throw err;
     }
   };

apps/remix/app/components/general/share-document-download-button.tsx

@@ -1,49 +0,0 @@
-import { useState } from 'react';
-
-import { msg } from '@lingui/core/macro';
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import { Download } from 'lucide-react';
-
-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
-import type { DocumentData } from '@documenso/prisma/client';
-import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
-
-export type ShareDocumentDownloadButtonProps = {
-  title: string;
-  documentData: DocumentData;
-};
-
-export const ShareDocumentDownloadButton = ({
-  title,
-  documentData,
-}: ShareDocumentDownloadButtonProps) => {
-  const { _ } = useLingui();
-  const { toast } = useToast();
-
-  const [isDownloading, setIsDownloading] = useState(false);
-
-  const onDownloadClick = async () => {
-    try {
-      setIsDownloading(true);
-
-      await downloadPDF({ documentData, fileName: title });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
-        variant: 'destructive',
-      });
-    } finally {
-      setIsDownloading(false);
-    }
-  };
-
-  return (
-    <Button loading={isDownloading} onClick={onDownloadClick}>
-      {!isDownloading && <Download className="mr-2 h-4 w-4" />}
-      <Trans>Download</Trans>
-    </Button>
-  );
-};

apps/remix/app/components/general/template/template-edit-form.tsx

@@ -313,8 +313,10 @@ export const TemplateEditForm = ({
       >
         <CardContent className="p-2">
           <PDFViewer
-            key={templateDocumentData.id}
-            documentData={templateDocumentData}
+            key={template.envelopeItems[0].id}
+            envelopeItem={template.envelopeItems[0]}
+            token={undefined}
+            version="signed"
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

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

@@ -1,19 +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, Edit, 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 { TDocumentMany as TDocumentRow } from '@documenso/lib/types/document';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
-import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useCurrentTeam } from '~/providers/team';
 
@@ -25,8 +20,6 @@ export type DocumentsTableActionButtonProps = {
 
 export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonProps) => {
   const { user } = useSession();
-  const { toast } = useToast();
-  const { _ } = useLingui();
 
   const team = useCurrentTeam();
 
@@ -44,39 +37,6 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
   const documentsPath = formatDocumentsPath(team.url);
   const formatPath = `${documentsPath}/${row.envelopeId}/edit`;
 
-  const onDownloadClick = async () => {
-    try {
-      const document = !recipient
-        ? await trpcClient.document.get.query(
-            {
-              documentId: row.id,
-            },
-            {
-              context: {
-                teamId: team?.id?.toString(),
-              },
-            },
-          )
-        : await trpcClient.document.getDocumentByToken.query({
-            token: recipient.token,
-          });
-
-      const documentData = document?.documentData;
-
-      if (!documentData) {
-        throw Error('No document available');
-      }
-
-      await downloadPDF({ documentData, fileName: row.title });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
   // TODO: Consider if want to keep this logic for hiding viewing for CC'ers
   if (recipient?.role === RecipientRole.CC && isComplete === false) {
     return null;
@@ -134,7 +94,7 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
         <Trans>View</Trans>
       </Button>
     ))
-    .with({ isComplete: true, internalVersion: 2 }, () => (
+    .with({ isComplete: true }, () => (
       <EnvelopeDownloadDialog
         envelopeId={row.envelopeId}
         envelopeStatus={row.status}
@@ -147,11 +107,5 @@ export const DocumentsTableActionButton = ({ row }: DocumentsTableActionButtonPr
         }
       />
     ))
-    .with({ isComplete: true }, () => (
-      <Button className="w-32" onClick={onDownloadClick}>
-        <Download className="-ml-1 mr-2 inline h-4 w-4" />
-        <Trans>Download</Trans>
-      </Button>
-    ))
     .otherwise(() => <div></div>);
 };

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

@@ -10,7 +10,6 @@ import {
   Download,
   Edit,
   EyeIcon,
-  FileDown,
   FolderInput,
   Loader,
   MoreHorizontal,
@@ -20,12 +19,10 @@ import {
 } from 'lucide-react';
 import { Link } from 'react-router';
 
-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import type { TDocumentMany as TDocumentRow } from '@documenso/lib/types/document';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 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,
@@ -34,7 +31,6 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@documenso/ui/primitives/dropdown-menu';
-import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { DocumentDeleteDialog } from '~/components/dialogs/document-delete-dialog';
 import { DocumentDuplicateDialog } from '~/components/dialogs/document-duplicate-dialog';
@@ -56,7 +52,6 @@ export const DocumentsTableActionDropdown = ({
   const { user } = useSession();
   const team = useCurrentTeam();
 
-  const { toast } = useToast();
   const { _ } = useLingui();
 
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -76,58 +71,6 @@ export const DocumentsTableActionDropdown = ({
   const documentsPath = formatDocumentsPath(team.url);
   const formatPath = `${documentsPath}/${row.envelopeId}/edit`;
 
-  const onDownloadClick = async () => {
-    try {
-      const document = !recipient
-        ? await trpcClient.document.get.query({
-            documentId: row.id,
-          })
-        : await trpcClient.document.getDocumentByToken.query({
-            token: recipient.token,
-          });
-
-      const documentData = document?.documentData;
-
-      if (!documentData) {
-        return;
-      }
-
-      await downloadPDF({ documentData, fileName: row.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 document = !recipient
-        ? await trpcClient.document.get.query({
-            documentId: row.id,
-          })
-        : await trpcClient.document.getDocumentByToken.query({
-            token: recipient.token,
-          });
-
-      const documentData = document?.documentData;
-
-      if (!documentData) {
-        return;
-      }
-
-      await downloadPDF({ documentData, fileName: row.title, version: 'original' });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
   const nonSignedRecipients = row.recipients.filter((item) => item.signingStatus !== 'SIGNED');
 
   return (
@@ -178,7 +121,6 @@ export const DocumentsTableActionDropdown = ({
           </Link>
         </DropdownMenuItem>
 
-        {row.internalVersion === 2 ? (
         <EnvelopeDownloadDialog
           envelopeId={row.envelopeId}
           envelopeStatus={row.status}
@@ -192,19 +134,6 @@ export const DocumentsTableActionDropdown = ({
             </DropdownMenuItem>
           }
         />
-        ) : (
-          <>
-            <DropdownMenuItem disabled={!isComplete} onClick={onDownloadClick}>
-              <Download className="mr-2 h-4 w-4" />
-              <Trans>Download</Trans>
-            </DropdownMenuItem>
-
-            <DropdownMenuItem onClick={onDownloadOriginalClick}>
-              <FileDown className="mr-2 h-4 w-4" />
-              <Trans>Download Original</Trans>
-            </DropdownMenuItem>
-          </>
-        )}
 
         <DropdownMenuItem onClick={() => setDuplicateDialogOpen(true)}>
           <Copy className="mr-2 h-4 w-4" />
@@ -273,7 +202,8 @@ export const DocumentsTableActionDropdown = ({
       />
 
       <DocumentDuplicateDialog
-        id={row.id}
+        id={row.envelopeId}
+        token={recipient?.token}
         open={isDuplicateDialogOpen}
         onOpenChange={setDuplicateDialogOpen}
       />

apps/remix/app/components/tables/inbox-table.tsx

@@ -10,11 +10,9 @@ import { DateTime } from 'luxon';
 import { Link, useSearchParams } from 'react-router';
 import { match } from 'ts-pattern';
 
-import { downloadPDF } from '@documenso/lib/client-only/download-pdf';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { useSession } from '@documenso/lib/client-only/providers/session';
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
-import { trpc as trpcClient } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import type { TFindInboxResponse } from '@documenso/trpc/server/document-router/find-inbox.types';
 import { Button } from '@documenso/ui/primitives/button';
@@ -28,6 +26,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 import { DocumentStatus } from '~/components/general/document/document-status';
 import { useOptionalCurrentTeam } from '~/providers/team';
 
+import { EnvelopeDownloadDialog } from '../dialogs/envelope-download-dialog';
 import { StackAvatarsWithTooltip } from '../general/stack-avatars-with-tooltip';
 
 export type DocumentsTableProps = {
@@ -199,28 +198,6 @@ export const InboxTableActionButton = ({ row }: InboxTableActionButtonProps) =>
     return null;
   }
 
-  const onDownloadClick = async () => {
-    try {
-      const document = await trpcClient.document.getDocumentByToken.query({
-        token: recipient.token,
-      });
-
-      const documentData = document?.documentData;
-
-      if (!documentData) {
-        throw Error('No document available');
-      }
-
-      await downloadPDF({ documentData, fileName: row.title });
-    } catch (err) {
-      toast({
-        title: _(msg`Something went wrong`),
-        description: _(msg`An error occurred while downloading your document.`),
-        variant: 'destructive',
-      });
-    }
-  };
-
   // TODO: Consider if want to keep this logic for hiding viewing for CC'ers
   if (recipient?.role === RecipientRole.CC && isComplete === false) {
     return null;
@@ -230,6 +207,7 @@ export const InboxTableActionButton = ({ row }: InboxTableActionButtonProps) =>
     isPending,
     isComplete,
     isSigned,
+    internalVersion: row.internalVersion,
   })
     .with({ isPending: true, isSigned: false }, () => (
       <Button className="w-32" asChild>
@@ -263,10 +241,17 @@ export const InboxTableActionButton = ({ row }: InboxTableActionButtonProps) =>
       </Button>
     ))
     .with({ isComplete: true }, () => (
-      <Button className="w-32" onClick={onDownloadClick}>
+      <EnvelopeDownloadDialog
+        envelopeId={row.envelopeId}
+        envelopeStatus={row.status}
+        token={recipient?.token}
+        trigger={
+          <Button className="w-32">
             <DownloadIcon className="-ml-1 mr-2 inline h-4 w-4" />
             <Trans>Download</Trans>
           </Button>
+        }
+      />
     ))
     .otherwise(() => <div></div>);
 };

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id._index.tsx

@@ -147,8 +147,13 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
           <div className="relative col-span-12 lg:col-span-6 xl:col-span-7">
             <EnvelopeRenderProvider
               envelope={envelope}
-              fields={envelope.status == DocumentStatus.COMPLETED ? [] : envelope.fields}
-              recipientIds={envelope.recipients.map((recipient) => recipient.id)}
+              token={undefined}
+              fields={envelope.fields}
+              recipients={envelope.recipients}
+              overrideSettings={{
+                showRecipientSigningStatus: true,
+                showRecipientTooltip: true,
+              }}
             >
               {isMultiEnvelopeItem && (
                 <EnvelopeRendererFileSelector fields={envelope.fields} className="mb-4 p-0" />
@@ -181,9 +186,10 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
               )}
 
               <PDFViewer
-                document={envelope}
+                envelopeItem={envelope.envelopeItems[0]}
+                token={undefined}
                 key={envelope.envelopeItems[0].id}
-                documentData={envelope.envelopeItems[0].documentData}
+                version="signed"
               />
             </CardContent>
           </Card>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id.edit.tsx

@@ -101,8 +101,9 @@ export default function EnvelopeEditorPage({ params }: Route.ComponentProps) {
     <EnvelopeEditorProvider initialEnvelope={envelope}>
       <EnvelopeRenderProvider
         envelope={envelope}
+        token={undefined}
         fields={envelope.fields}
-        recipientIds={envelope.recipients.map((recipient) => recipient.id)}
+        recipients={envelope.recipients}
       >
         <EnvelopeEditor />
       </EnvelopeRenderProvider>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id._index.tsx

@@ -170,8 +170,12 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
           <div className="relative col-span-12 lg:col-span-6 xl:col-span-7">
             <EnvelopeRenderProvider
               envelope={envelope}
+              token={undefined}
               fields={envelope.fields}
-              recipientIds={envelope.recipients.map((recipient) => recipient.id)}
+              recipients={envelope.recipients}
+              overrideSettings={{
+                showRecipientTooltip: true,
+              }}
             >
               {isMultiEnvelopeItem && (
                 <EnvelopeRendererFileSelector fields={envelope.fields} className="mb-4 p-0" />
@@ -203,9 +207,10 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
               />
 
               <PDFViewer
-                document={envelope}
+                envelopeItem={envelope.envelopeItems[0]}
+                token={undefined}
+                version="signed"
                 key={envelope.envelopeItems[0].id}
-                documentData={envelope.envelopeItems[0].documentData}
               />
             </CardContent>
           </Card>

apps/remix/app/routes/_recipient+/d.$token+/_index.tsx

@@ -184,6 +184,7 @@ const DirectSigningPageV1 = ({ data }: { data: Awaited<ReturnType<typeof handleV
       <DocumentSigningAuthProvider
         documentAuthOptions={template.authOptions}
         recipient={directTemplateRecipient}
+        isDirectTemplate={true}
         user={user}
       >
         <>
@@ -245,7 +246,7 @@ const DirectSigningPageV2 = ({ data }: { data: Awaited<ReturnType<typeof handleV
         recipient={recipient}
         user={user}
       >
-        <EnvelopeRenderProvider envelope={envelope}>
+        <EnvelopeRenderProvider envelope={envelope} token={recipient.token}>
           <DocumentSigningPageViewV2 />
         </EnvelopeRenderProvider>
       </DocumentSigningAuthProvider>

apps/remix/app/routes/_recipient+/sign.$token+/_index.tsx

@@ -492,7 +492,7 @@ const SigningPageV2 = ({ data }: { data: Awaited<ReturnType<typeof handleV2Loade
         recipient={recipient}
         user={user}
       >
-        <EnvelopeRenderProvider envelope={envelope}>
+        <EnvelopeRenderProvider envelope={envelope} token={recipient.token}>
           <DocumentSigningPageViewV2 />
         </EnvelopeRenderProvider>
       </DocumentSigningAuthProvider>

apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx

@@ -1,10 +1,9 @@
 import { useEffect } from 'react';
 
-import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { DocumentStatus, FieldType, RecipientRole } from '@prisma/client';
-import { CheckCircle2, Clock8, FileSearch } from 'lucide-react';
+import { CheckCircle2, Clock8, DownloadIcon } from 'lucide-react';
 import { Link, useRevalidator } from 'react-router';
 import { match } from 'ts-pattern';
 
@@ -20,14 +19,13 @@ import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-emai
 import { isDocumentCompleted } from '@documenso/lib/utils/document';
 import { env } from '@documenso/lib/utils/env';
 import type { Document } from '@documenso/prisma/types/document-legacy-schema';
-import DocumentDialog from '@documenso/ui/components/document/document-dialog';
-import { DocumentDownloadButton } from '@documenso/ui/components/document/document-download-button';
 import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
 import { SigningCard3D } from '@documenso/ui/components/signing-card';
 import { cn } from '@documenso/ui/lib/utils';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 
+import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 import { ClaimAccount } from '~/components/general/claim-account';
 import { DocumentSigningAuthPageView } from '~/components/general/document-signing/document-signing-auth-page';
 
@@ -207,24 +205,16 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
           <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
             <DocumentShareButton documentId={document.id} token={recipient.token} />
 
-            {isDocumentCompleted(document.status) ? (
-              <DocumentDownloadButton
-                className="flex-1"
-                fileName={document.title}
-                documentData={document.documentData}
-                disabled={!isDocumentCompleted(document.status)}
-              />
-            ) : (
-              <DocumentDialog
-                documentData={document.documentData}
+            {isDocumentCompleted(document.status) && (
+              <EnvelopeDownloadDialog
+                envelopeId={document.envelopeId}
+                envelopeStatus={document.status}
+                envelopeItems={document.envelopeItems}
+                token={recipient?.token}
                 trigger={
-                  <Button
-                    className="text-[11px]"
-                    title={_(msg`Signatures will appear once the document has been completed`)}
-                    variant="outline"
-                  >
-                    <FileSearch className="mr-2 h-5 w-5" strokeWidth={1.7} />
-                    <Trans>View Original Document</Trans>
+                  <Button type="button" variant="outline" className="flex-1">
+                    <DownloadIcon className="mr-2 h-5 w-5" />
+                    <Trans>Download</Trans>
                   </Button>
                 }
               />

apps/remix/app/routes/_share+/share.$slug.tsx

@@ -60,6 +60,7 @@ export const loader = async ({ request, params: { slug } }: Route.LoaderArgs) =>
 
     return {
       document,
+      token: slug,
     };
   }
 
@@ -74,7 +75,7 @@ export const loader = async ({ request, params: { slug } }: Route.LoaderArgs) =>
 };
 
 export default function SharePage() {
-  const { document } = useLoaderData<typeof loader>();
+  const { document, token } = useLoaderData<typeof loader>();
 
   if (document) {
     return (
@@ -86,6 +87,7 @@ export default function SharePage() {
         envelopeItems={document.envelopeItems}
         recipientCount={document.recipientCount}
         completedDate={document.completedAt ?? undefined}
+        token={token}
       />
     );
   }

apps/remix/app/routes/_unauthenticated+/signin.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from 'react';
+
 import { Trans } from '@lingui/react/macro';
 import { Link, redirect } from 'react-router';
 
@@ -9,6 +11,7 @@ import {
   OIDC_PROVIDER_LABEL,
 } from '@documenso/lib/constants/auth';
 import { env } from '@documenso/lib/utils/env';
+import { isValidReturnTo, normalizeReturnTo } from '@documenso/lib/utils/is-valid-return-to';
 
 import { SignInForm } from '~/components/forms/signin';
 import { appMetaTags } from '~/utils/meta';
@@ -28,8 +31,12 @@ export async function loader({ request }: Route.LoaderArgs) {
   const isOIDCSSOEnabled = IS_OIDC_SSO_ENABLED;
   const oidcProviderLabel = OIDC_PROVIDER_LABEL;
 
+  let returnTo = new URL(request.url).searchParams.get('returnTo') ?? undefined;
+
+  returnTo = isValidReturnTo(returnTo) ? normalizeReturnTo(returnTo) : undefined;
+
   if (isAuthenticated) {
-    throw redirect('/');
+    throw redirect(returnTo || '/');
   }
 
   return {
@@ -37,12 +44,28 @@ export async function loader({ request }: Route.LoaderArgs) {
     isMicrosoftSSOEnabled,
     isOIDCSSOEnabled,
     oidcProviderLabel,
+    returnTo,
   };
 }
 
 export default function SignIn({ loaderData }: Route.ComponentProps) {
-  const { isGoogleSSOEnabled, isMicrosoftSSOEnabled, isOIDCSSOEnabled, oidcProviderLabel } =
-    loaderData;
+  const {
+    isGoogleSSOEnabled,
+    isMicrosoftSSOEnabled,
+    isOIDCSSOEnabled,
+    oidcProviderLabel,
+    returnTo,
+  } = loaderData;
+
+  const [isEmbeddedRedirect, setIsEmbeddedRedirect] = useState(false);
+
+  useEffect(() => {
+    const hash = window.location.hash.slice(1);
+
+    const params = new URLSearchParams(hash);
+
+    setIsEmbeddedRedirect(params.get('embedded') === 'true');
+  }, []);
 
   return (
     <div className="w-screen max-w-lg px-4">
@@ -61,13 +84,17 @@ export default function SignIn({ loaderData }: Route.ComponentProps) {
           isMicrosoftSSOEnabled={isMicrosoftSSOEnabled}
           isOIDCSSOEnabled={isOIDCSSOEnabled}
           oidcProviderLabel={oidcProviderLabel}
+          returnTo={returnTo}
         />
 
-        {env('NEXT_PUBLIC_DISABLE_SIGNUP') !== 'true' && (
+        {!isEmbeddedRedirect && env('NEXT_PUBLIC_DISABLE_SIGNUP') !== 'true' && (
           <p className="text-muted-foreground mt-6 text-center text-sm">
             <Trans>
               Don't have an account?{' '}
-              <Link to="/signup" className="text-documenso-700 duration-200 hover:opacity-70">
+              <Link
+                to={returnTo ? `/signup?returnTo=${encodeURIComponent(returnTo)}` : '/signup'}
+                className="text-documenso-700 duration-200 hover:opacity-70"
+              >
                 Sign up
               </Link>
             </Trans>

apps/remix/app/routes/_unauthenticated+/signup.tsx

@@ -6,6 +6,7 @@ import {
   IS_OIDC_SSO_ENABLED,
 } from '@documenso/lib/constants/auth';
 import { env } from '@documenso/lib/utils/env';
+import { isValidReturnTo, normalizeReturnTo } from '@documenso/lib/utils/is-valid-return-to';
 
 import { SignUpForm } from '~/components/forms/signup';
 import { appMetaTags } from '~/utils/meta';
@@ -16,7 +17,7 @@ export function meta() {
   return appMetaTags('Sign Up');
 }
 
-export function loader() {
+export function loader({ request }: Route.LoaderArgs) {
   const NEXT_PUBLIC_DISABLE_SIGNUP = env('NEXT_PUBLIC_DISABLE_SIGNUP');
 
   // SSR env variables.
@@ -28,15 +29,20 @@ export function loader() {
     throw redirect('/signin');
   }
 
+  let returnTo = new URL(request.url).searchParams.get('returnTo') ?? undefined;
+
+  returnTo = isValidReturnTo(returnTo) ? normalizeReturnTo(returnTo) : undefined;
+
   return {
     isGoogleSSOEnabled,
     isMicrosoftSSOEnabled,
     isOIDCSSOEnabled,
+    returnTo,
   };
 }
 
 export default function SignUp({ loaderData }: Route.ComponentProps) {
-  const { isGoogleSSOEnabled, isMicrosoftSSOEnabled, isOIDCSSOEnabled } = loaderData;
+  const { isGoogleSSOEnabled, isMicrosoftSSOEnabled, isOIDCSSOEnabled, returnTo } = loaderData;
 
   return (
     <SignUpForm
@@ -44,6 +50,7 @@ export default function SignUp({ loaderData }: Route.ComponentProps) {
       isGoogleSSOEnabled={isGoogleSSOEnabled}
       isMicrosoftSSOEnabled={isMicrosoftSSOEnabled}
       isOIDCSSOEnabled={isOIDCSSOEnabled}
+      returnTo={returnTo}
     />
   );
 }

apps/remix/app/routes/embed+/_v0+/_layout.tsx

@@ -2,11 +2,14 @@ import { Outlet, isRouteErrorResponse, useRouteError } from 'react-router';
 
 import {
   IS_GOOGLE_SSO_ENABLED,
+  IS_MICROSOFT_SSO_ENABLED,
   IS_OIDC_SSO_ENABLED,
   OIDC_PROVIDER_LABEL,
 } from '@documenso/lib/constants/auth';
 
 import { EmbedAuthenticationRequired } from '~/components/embed/embed-authentication-required';
+import { EmbedDocumentCompleted } from '~/components/embed/embed-document-completed';
+import { EmbedDocumentRejected } from '~/components/embed/embed-document-rejected';
 import { EmbedDocumentWaitingForTurn } from '~/components/embed/embed-document-waiting-for-turn';
 import { EmbedPaywall } from '~/components/embed/embed-paywall';
 
@@ -29,11 +32,13 @@ export function headers({ loaderHeaders }: Route.HeadersArgs) {
 export function loader() {
   // SSR env variables.
   const isGoogleSSOEnabled = IS_GOOGLE_SSO_ENABLED;
+  const isMicrosoftSSOEnabled = IS_MICROSOFT_SSO_ENABLED;
   const isOIDCSSOEnabled = IS_OIDC_SSO_ENABLED;
   const oidcProviderLabel = OIDC_PROVIDER_LABEL;
 
   return {
     isGoogleSSOEnabled,
+    isMicrosoftSSOEnabled,
     isOIDCSSOEnabled,
     oidcProviderLabel,
   };
@@ -44,15 +49,19 @@ export default function Layout() {
 }
 
 export function ErrorBoundary({ loaderData }: Route.ErrorBoundaryProps) {
-  const { isGoogleSSOEnabled, isOIDCSSOEnabled, oidcProviderLabel } = loaderData || {};
+  const { isGoogleSSOEnabled, isMicrosoftSSOEnabled, isOIDCSSOEnabled, oidcProviderLabel } =
+    loaderData || {};
 
   const error = useRouteError();
 
+  console.log({ routeError: error });
+
   if (isRouteErrorResponse(error)) {
     if (error.status === 401 && error.data.type === 'embed-authentication-required') {
       return (
         <EmbedAuthenticationRequired
           isGoogleSSOEnabled={isGoogleSSOEnabled}
+          isMicrosoftSSOEnabled={isMicrosoftSSOEnabled}
           isOIDCSSOEnabled={isOIDCSSOEnabled}
           oidcProviderLabel={oidcProviderLabel}
           email={error.data.email}
@@ -68,6 +77,16 @@ export function ErrorBoundary({ loaderData }: Route.ErrorBoundaryProps) {
     if (error.status === 403 && error.data.type === 'embed-waiting-for-turn') {
       return <EmbedDocumentWaitingForTurn />;
     }
+
+    // !: Not used at the moment, may be removed in the future.
+    if (error.status === 403 && error.data.type === 'embed-document-rejected') {
+      return <EmbedDocumentRejected />;
+    }
+
+    // !: Not used at the moment, may be removed in the future.
+    if (error.status === 403 && error.data.type === 'embed-document-completed') {
+      return <EmbedDocumentCompleted name={error.data.name} signature={error.data.signature} />;
+    }
   }
 
   return <div>Not Found</div>;

apps/remix/app/routes/embed+/_v0+/direct.$token.tsx

@@ -0,0 +1,332 @@
+import { data } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { getEnvelopeForDirectTemplateSigning } from '@documenso/lib/server-only/envelope/get-envelope-for-direct-template-signing';
+import { getEnvelopeRequiredAccessData } from '@documenso/lib/server-only/envelope/get-envelope-required-access-data';
+import { getOrganisationClaimByTeamId } from '@documenso/lib/server-only/organisation/get-organisation-claims';
+import { getTemplateByDirectLinkToken } from '@documenso/lib/server-only/template/get-template-by-direct-link-token';
+import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { prisma } from '@documenso/prisma';
+
+import { EmbedDirectTemplateClientPage } from '~/components/embed/embed-direct-template-client-page';
+import { EmbedSignDocumentV2ClientPage } from '~/components/embed/embed-document-signing-page-v2';
+import { DocumentSigningAuthProvider } from '~/components/general/document-signing/document-signing-auth-provider';
+import { DocumentSigningProvider } from '~/components/general/document-signing/document-signing-provider';
+import { DocumentSigningRecipientProvider } from '~/components/general/document-signing/document-signing-recipient-provider';
+import { EnvelopeSigningProvider } from '~/components/general/document-signing/envelope-signing-provider';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import type { Route } from './+types/direct.$token';
+
+async function handleV1Loader({ params, request }: Route.LoaderArgs) {
+  if (!params.token) {
+    throw new Response('Not found', { status: 404 });
+  }
+
+  const token = params.token;
+
+  const template = await getTemplateByDirectLinkToken({
+    token,
+  }).catch(() => null);
+
+  // `template.directLink` is always available but we're doing this to
+  // satisfy the type checker.
+  if (!template || !template.directLink) {
+    throw new Response('Not found', { status: 404 });
+  }
+
+  const organisationClaim = await getOrganisationClaimByTeamId({ teamId: template.teamId });
+
+  const allowEmbedSigningWhitelabel = organisationClaim.flags.embedSigningWhiteLabel;
+  const hidePoweredBy = organisationClaim.flags.hidePoweredBy;
+
+  // TODO: Make this more robust, we need to ensure the owner is either
+  // TODO: the member of a team that has an active subscription, is an early
+  // TODO: adopter or is an enterprise user.
+  if (IS_BILLING_ENABLED() && !organisationClaim.flags.embedSigning) {
+    throw data(
+      {
+        type: 'embed-paywall',
+      },
+      {
+        status: 403,
+      },
+    );
+  }
+
+  const { user } = await getOptionalSession(request);
+
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: template.authOptions,
+  });
+
+  const isAccessAuthValid = derivedRecipientAccessAuth.every((auth) =>
+    match(auth)
+      .with(DocumentAccessAuth.ACCOUNT, () => !!user)
+      .with(DocumentAccessAuth.TWO_FACTOR_AUTH, () => false) // Not supported for direct links
+      .exhaustive(),
+  );
+
+  if (!isAccessAuthValid) {
+    throw data(
+      {
+        type: 'embed-authentication-required',
+        returnTo: `/embed/direct/${token}`,
+      },
+      {
+        status: 401,
+      },
+    );
+  }
+
+  const { directTemplateRecipientId } = template.directLink;
+
+  const recipient = template.recipients.find(
+    (recipient) => recipient.id === directTemplateRecipientId,
+  );
+
+  if (!recipient) {
+    throw new Response('Not found', { status: 404 });
+  }
+
+  const fields = template.fields.filter((field) => field.recipientId === directTemplateRecipientId);
+
+  return {
+    token,
+    user,
+    template,
+    recipient,
+    fields,
+    hidePoweredBy,
+    allowEmbedSigningWhitelabel,
+  };
+}
+
+async function handleV2Loader({ params, request }: Route.LoaderArgs) {
+  if (!params.token) {
+    throw new Response('Not found', { status: 404 });
+  }
+
+  const token = params.token;
+
+  const { user } = await getOptionalSession(request);
+
+  const envelopeForSigning = await getEnvelopeForDirectTemplateSigning({
+    token,
+    userId: user?.id,
+  })
+    .then((envelopeForSigning) => {
+      return {
+        isDocumentAccessValid: true,
+        ...envelopeForSigning,
+      } as const;
+    })
+    .catch(async (e) => {
+      const error = AppError.parseError(e);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        const requiredAccessData = await getEnvelopeRequiredAccessData({ token });
+
+        return {
+          isDocumentAccessValid: false,
+          ...requiredAccessData,
+        } as const;
+      }
+
+      throw new Response('Not Found', { status: 404 });
+    });
+
+  if (!envelopeForSigning.isDocumentAccessValid) {
+    throw data(
+      {
+        type: 'embed-authentication-required',
+        email: envelopeForSigning.recipientEmail,
+        returnTo: `/embed/direct/${token}`,
+      },
+      {
+        status: 401,
+      },
+    );
+  }
+
+  const { envelope, recipient } = envelopeForSigning;
+
+  const organisationClaim = await getOrganisationClaimByTeamId({ teamId: envelope.teamId });
+
+  const allowEmbedSigningWhitelabel = organisationClaim.flags.embedSigningWhiteLabel;
+  const hidePoweredBy = organisationClaim.flags.hidePoweredBy;
+
+  if (IS_BILLING_ENABLED() && !organisationClaim.flags.embedSigning) {
+    throw data(
+      {
+        type: 'embed-paywall',
+      },
+      {
+        status: 403,
+      },
+    );
+  }
+
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: envelope.authOptions,
+    recipientAuth: recipient.authOptions,
+  });
+
+  const isAccessAuthValid = derivedRecipientAccessAuth.every((accesssAuth) =>
+    match(accesssAuth)
+      .with(DocumentAccessAuth.ACCOUNT, () => user && user.email === recipient.email)
+      .with(DocumentAccessAuth.TWO_FACTOR_AUTH, () => false) // Not supported for direct links
+      .exhaustive(),
+  );
+
+  if (!isAccessAuthValid) {
+    throw data(
+      {
+        type: 'embed-authentication-required',
+        email: user?.email || recipient.email,
+        returnTo: `/embed/direct/${token}`,
+      },
+      {
+        status: 401,
+      },
+    );
+  }
+
+  return {
+    token,
+    user,
+    envelopeForSigning,
+    hidePoweredBy,
+    allowEmbedSigningWhitelabel,
+  };
+}
+
+export async function loader(loaderArgs: Route.LoaderArgs) {
+  const { token } = loaderArgs.params;
+
+  if (!token) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  // Not efficient but works for now until we remove v1.
+  const foundDirectLink = await prisma.templateDirectLink.findFirst({
+    where: {
+      token,
+    },
+    select: {
+      envelope: {
+        select: {
+          internalVersion: true,
+        },
+      },
+    },
+  });
+
+  if (!foundDirectLink) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  if (foundDirectLink.envelope.internalVersion === 2) {
+    const payloadV2 = await handleV2Loader(loaderArgs);
+
+    return superLoaderJson({
+      version: 2,
+      payload: payloadV2,
+    } as const);
+  }
+
+  const payloadV1 = await handleV1Loader(loaderArgs);
+
+  return superLoaderJson({
+    version: 1,
+    payload: payloadV1,
+  } as const);
+}
+
+export default function EmbedDirectTemplatePage() {
+  const { version, payload } = useSuperLoaderData<typeof loader>();
+
+  if (version === 1) {
+    return <EmbedDirectTemplatePageV1 data={payload} />;
+  }
+
+  return <EmbedDirectTemplatePageV2 data={payload} />;
+}
+
+const EmbedDirectTemplatePageV1 = ({
+  data,
+}: {
+  data: Awaited<ReturnType<typeof handleV1Loader>>;
+}) => {
+  const { token, user, template, recipient, fields, hidePoweredBy, allowEmbedSigningWhitelabel } =
+    data;
+
+  return (
+    <DocumentSigningProvider
+      email={user?.email}
+      fullName={user?.name}
+      signature={user?.signature}
+      typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
+      uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
+      drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
+    >
+      <DocumentSigningAuthProvider
+        documentAuthOptions={template.authOptions}
+        recipient={recipient}
+        user={user}
+      >
+        <DocumentSigningRecipientProvider recipient={recipient}>
+          <EmbedDirectTemplateClientPage
+            token={token}
+            envelopeId={template.envelopeId}
+            updatedAt={template.updatedAt}
+            envelopeItems={template.envelopeItems}
+            recipient={recipient}
+            fields={fields}
+            metadata={template.templateMeta}
+            hidePoweredBy={hidePoweredBy}
+            allowWhiteLabelling={allowEmbedSigningWhitelabel}
+          />
+        </DocumentSigningRecipientProvider>
+      </DocumentSigningAuthProvider>
+    </DocumentSigningProvider>
+  );
+};
+
+const EmbedDirectTemplatePageV2 = ({
+  data,
+}: {
+  data: Awaited<ReturnType<typeof handleV2Loader>>;
+}) => {
+  const { token, user, envelopeForSigning, hidePoweredBy, allowEmbedSigningWhitelabel } = data;
+
+  const { envelope, recipient } = envelopeForSigning;
+
+  return (
+    <EnvelopeSigningProvider
+      envelopeData={envelopeForSigning}
+      email={user?.email}
+      fullName={user?.name}
+      signature={user?.signature}
+    >
+      <DocumentSigningAuthProvider
+        documentAuthOptions={envelope.authOptions}
+        recipient={recipient}
+        user={user}
+        isDirectTemplate={true}
+      >
+        <EnvelopeRenderProvider envelope={envelope} token={recipient.token}>
+          <EmbedSignDocumentV2ClientPage
+            hidePoweredBy={hidePoweredBy}
+            allowWhitelabelling={allowEmbedSigningWhitelabel}
+          />
+        </EnvelopeRenderProvider>
+      </DocumentSigningAuthProvider>
+    </EnvelopeSigningProvider>
+  );
+};

apps/remix/app/routes/embed+/_v0+/direct.$url.tsx

@@ -1,138 +0,0 @@
-import { data } from 'react-router';
-import { match } from 'ts-pattern';
-
-import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
-import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
-import { getOrganisationClaimByTeamId } from '@documenso/lib/server-only/organisation/get-organisation-claims';
-import { getTemplateByDirectLinkToken } from '@documenso/lib/server-only/template/get-template-by-direct-link-token';
-import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
-import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
-
-import { EmbedDirectTemplateClientPage } from '~/components/embed/embed-direct-template-client-page';
-import { DocumentSigningAuthProvider } from '~/components/general/document-signing/document-signing-auth-provider';
-import { DocumentSigningProvider } from '~/components/general/document-signing/document-signing-provider';
-import { DocumentSigningRecipientProvider } from '~/components/general/document-signing/document-signing-recipient-provider';
-import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
-
-import type { Route } from './+types/direct.$url';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  if (!params.url) {
-    throw new Response('Not found', { status: 404 });
-  }
-
-  const token = params.url;
-
-  const template = await getTemplateByDirectLinkToken({
-    token,
-  }).catch(() => null);
-
-  // `template.directLink` is always available but we're doing this to
-  // satisfy the type checker.
-  if (!template || !template.directLink) {
-    throw new Response('Not found', { status: 404 });
-  }
-
-  const organisationClaim = await getOrganisationClaimByTeamId({ teamId: template.teamId });
-
-  const allowEmbedSigningWhitelabel = organisationClaim.flags.embedSigningWhiteLabel;
-  const hidePoweredBy = organisationClaim.flags.hidePoweredBy;
-
-  // TODO: Make this more robust, we need to ensure the owner is either
-  // TODO: the member of a team that has an active subscription, is an early
-  // TODO: adopter or is an enterprise user.
-  if (IS_BILLING_ENABLED() && !organisationClaim.flags.embedSigning) {
-    throw data(
-      {
-        type: 'embed-paywall',
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
-  const { user } = await getOptionalSession(request);
-
-  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
-    documentAuth: template.authOptions,
-  });
-
-  const isAccessAuthValid = derivedRecipientAccessAuth.every((auth) =>
-    match(auth)
-      .with(DocumentAccessAuth.ACCOUNT, () => !!user)
-      .with(DocumentAccessAuth.TWO_FACTOR_AUTH, () => false) // Not supported for direct links
-      .exhaustive(),
-  );
-
-  if (!isAccessAuthValid) {
-    throw data(
-      {
-        type: 'embed-authentication-required',
-        email: user?.email,
-        returnTo: `/embed/direct/${token}`,
-      },
-      {
-        status: 401,
-      },
-    );
-  }
-
-  const { directTemplateRecipientId } = template.directLink;
-
-  const recipient = template.recipients.find(
-    (recipient) => recipient.id === directTemplateRecipientId,
-  );
-
-  if (!recipient) {
-    throw new Response('Not found', { status: 404 });
-  }
-
-  const fields = template.fields.filter((field) => field.recipientId === directTemplateRecipientId);
-
-  return superLoaderJson({
-    token,
-    user,
-    template,
-    recipient,
-    fields,
-    hidePoweredBy,
-    allowEmbedSigningWhitelabel,
-  });
-}
-
-export default function EmbedDirectTemplatePage() {
-  const { token, user, template, recipient, fields, hidePoweredBy, allowEmbedSigningWhitelabel } =
-    useSuperLoaderData<typeof loader>();
-
-  return (
-    <DocumentSigningProvider
-      email={user?.email}
-      fullName={user?.name}
-      signature={user?.signature}
-      typedSignatureEnabled={template.templateMeta?.typedSignatureEnabled}
-      uploadSignatureEnabled={template.templateMeta?.uploadSignatureEnabled}
-      drawSignatureEnabled={template.templateMeta?.drawSignatureEnabled}
-    >
-      <DocumentSigningAuthProvider
-        documentAuthOptions={template.authOptions}
-        recipient={recipient}
-        user={user}
-      >
-        <DocumentSigningRecipientProvider recipient={recipient}>
-          <EmbedDirectTemplateClientPage
-            token={token}
-            envelopeId={template.envelopeId}
-            updatedAt={template.updatedAt}
-            documentData={template.templateDocumentData}
-            recipient={recipient}
-            fields={fields}
-            metadata={template.templateMeta}
-            hidePoweredBy={hidePoweredBy}
-            allowWhiteLabelling={allowEmbedSigningWhitelabel}
-          />
-        </DocumentSigningRecipientProvider>
-      </DocumentSigningAuthProvider>
-    </DocumentSigningProvider>
-  );
-}

apps/remix/app/routes/embed+/_v0+/sign.$token.tsx

@@ -0,0 +1,394 @@
+import { RecipientRole } from '@prisma/client';
+import { data } from 'react-router';
+import { match } from 'ts-pattern';
+
+import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
+import { EnvelopeRenderProvider } from '@documenso/lib/client-only/providers/envelope-render-provider';
+import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
+import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
+import { getEnvelopeForRecipientSigning } from '@documenso/lib/server-only/envelope/get-envelope-for-recipient-signing';
+import { getEnvelopeRequiredAccessData } from '@documenso/lib/server-only/envelope/get-envelope-required-access-data';
+import { getCompletedFieldsForToken } from '@documenso/lib/server-only/field/get-completed-fields-for-token';
+import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
+import { getOrganisationClaimByTeamId } from '@documenso/lib/server-only/organisation/get-organisation-claims';
+import { getIsRecipientsTurnToSign } from '@documenso/lib/server-only/recipient/get-is-recipient-turn';
+import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
+import { getRecipientsForAssistant } from '@documenso/lib/server-only/recipient/get-recipients-for-assistant';
+import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
+import { isDocumentCompleted } from '@documenso/lib/utils/document';
+import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import { prisma } from '@documenso/prisma';
+
+import { EmbedSignDocumentV1ClientPage } from '~/components/embed/embed-document-signing-page-v1';
+import { EmbedSignDocumentV2ClientPage } from '~/components/embed/embed-document-signing-page-v2';
+import { DocumentSigningAuthProvider } from '~/components/general/document-signing/document-signing-auth-provider';
+import { DocumentSigningProvider } from '~/components/general/document-signing/document-signing-provider';
+import { EnvelopeSigningProvider } from '~/components/general/document-signing/envelope-signing-provider';
+import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
+
+import { getOptionalLoaderContext } from '../../../../server/utils/get-loader-session';
+import type { Route } from './+types/sign.$token';
+
+async function handleV1Loader({ params, request }: Route.LoaderArgs) {
+  const { requestMetadata } = getOptionalLoaderContext();
+
+  if (!params.token) {
+    throw new Response('Not found', { status: 404 });
+  }
+
+  const token = params.token;
+
+  const { user } = await getOptionalSession(request);
+
+  const [document, fields, recipient, completedFields] = await Promise.all([
+    getDocumentAndSenderByToken({
+      token,
+      userId: user?.id,
+      requireAccessAuth: false,
+    }).catch(() => null),
+    getFieldsForToken({ token }),
+    getRecipientByToken({ token }).catch(() => null),
+    getCompletedFieldsForToken({ token }).catch(() => []),
+  ]);
+
+  // `document.directLink` is always available but we're doing this to
+  // satisfy the type checker.
+  if (!document || !recipient) {
+    throw new Response('Not found', { status: 404 });
+  }
+
+  const organisationClaim = await getOrganisationClaimByTeamId({ teamId: document.teamId });
+
+  const allowEmbedSigningWhitelabel = organisationClaim.flags.embedSigningWhiteLabel;
+  const hidePoweredBy = organisationClaim.flags.hidePoweredBy;
+
+  // TODO: Make this more robust, we need to ensure the owner is either
+  // TODO: the member of a team that has an active subscription, is an early
+  // TODO: adopter or is an enterprise user.
+  if (IS_BILLING_ENABLED() && !organisationClaim.flags.embedSigning) {
+    throw data(
+      {
+        type: 'embed-paywall',
+      },
+      {
+        status: 403,
+      },
+    );
+  }
+
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: document.authOptions,
+  });
+
+  const isAccessAuthValid = derivedRecipientAccessAuth.every((accesssAuth) =>
+    match(accesssAuth)
+      .with(DocumentAccessAuth.ACCOUNT, () => user && user.email === recipient.email)
+      .with(DocumentAccessAuth.TWO_FACTOR_AUTH, () => true) // Allow without account requirement
+      .exhaustive(),
+  );
+
+  if (!isAccessAuthValid) {
+    throw data(
+      {
+        type: 'embed-authentication-required',
+        email: user?.email || recipient.email,
+        returnTo: `/embed/sign/${token}`,
+      },
+      {
+        status: 401,
+      },
+    );
+  }
+
+  const isRecipientsTurnToSign = await getIsRecipientsTurnToSign({ token });
+
+  if (!isRecipientsTurnToSign) {
+    throw data(
+      {
+        type: 'embed-waiting-for-turn',
+      },
+      {
+        status: 403,
+      },
+    );
+  }
+
+  await viewedDocument({
+    token,
+    requestMetadata,
+    recipientAccessAuth: derivedRecipientAccessAuth,
+  });
+
+  const allRecipients =
+    recipient.role === RecipientRole.ASSISTANT
+      ? await getRecipientsForAssistant({
+          token,
+        })
+      : [];
+
+  return {
+    token,
+    user,
+    document,
+    allRecipients,
+    recipient,
+    fields,
+    completedFields,
+    hidePoweredBy,
+    allowEmbedSigningWhitelabel,
+  };
+}
+
+async function handleV2Loader({ params, request }: Route.LoaderArgs) {
+  const { requestMetadata } = getOptionalLoaderContext();
+
+  if (!params.token) {
+    throw new Response('Not found', { status: 404 });
+  }
+
+  const token = params.token;
+
+  const { user } = await getOptionalSession(request);
+
+  const envelopeForSigning = await getEnvelopeForRecipientSigning({
+    token,
+    userId: user?.id,
+  })
+    .then((envelopeForSigning) => {
+      return {
+        isDocumentAccessValid: true,
+        ...envelopeForSigning,
+      } as const;
+    })
+    .catch(async (e) => {
+      const error = AppError.parseError(e);
+
+      if (error.code === AppErrorCode.UNAUTHORIZED) {
+        const requiredAccessData = await getEnvelopeRequiredAccessData({ token });
+
+        return {
+          isDocumentAccessValid: false,
+          ...requiredAccessData,
+        } as const;
+      }
+
+      throw new Response('Not Found', { status: 404 });
+    });
+
+  if (!envelopeForSigning.isDocumentAccessValid) {
+    throw data(
+      {
+        type: 'embed-authentication-required',
+        email: envelopeForSigning.recipientEmail,
+        returnTo: `/embed/sign/${token}`,
+      },
+      {
+        status: 401,
+      },
+    );
+  }
+
+  const { envelope, recipient, isRecipientsTurn } = envelopeForSigning;
+
+  const organisationClaim = await getOrganisationClaimByTeamId({ teamId: envelope.teamId });
+
+  const allowEmbedSigningWhitelabel = organisationClaim.flags.embedSigningWhiteLabel;
+  const hidePoweredBy = organisationClaim.flags.hidePoweredBy;
+
+  if (IS_BILLING_ENABLED() && !organisationClaim.flags.embedSigning) {
+    throw data(
+      {
+        type: 'embed-paywall',
+      },
+      {
+        status: 403,
+      },
+    );
+  }
+
+  if (!isRecipientsTurn) {
+    throw data(
+      {
+        type: 'embed-waiting-for-turn',
+      },
+      {
+        status: 403,
+      },
+    );
+  }
+
+  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
+    documentAuth: envelope.authOptions,
+    recipientAuth: recipient.authOptions,
+  });
+
+  const isAccessAuthValid = derivedRecipientAccessAuth.every((accesssAuth) =>
+    match(accesssAuth)
+      .with(DocumentAccessAuth.ACCOUNT, () => user && user.email === recipient.email)
+      .with(DocumentAccessAuth.TWO_FACTOR_AUTH, () => true)
+      .exhaustive(),
+  );
+
+  if (!isAccessAuthValid) {
+    throw data(
+      {
+        type: 'embed-authentication-required',
+        email: user?.email || recipient.email,
+        returnTo: `/embed/sign/${token}`,
+      },
+      {
+        status: 401,
+      },
+    );
+  }
+
+  await viewedDocument({
+    token,
+    requestMetadata,
+    recipientAccessAuth: derivedRecipientAccessAuth,
+  }).catch(() => null);
+
+  return {
+    token,
+    user,
+    envelopeForSigning,
+    hidePoweredBy,
+    allowEmbedSigningWhitelabel,
+  };
+}
+
+export async function loader(loaderArgs: Route.LoaderArgs) {
+  const { token } = loaderArgs.params;
+
+  if (!token) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  // Not efficient but works for now until we remove v1.
+  const foundRecipient = await prisma.recipient.findFirst({
+    where: {
+      token,
+    },
+    select: {
+      envelope: {
+        select: {
+          internalVersion: true,
+        },
+      },
+    },
+  });
+
+  if (!foundRecipient) {
+    throw new Response('Not Found', { status: 404 });
+  }
+
+  if (foundRecipient.envelope.internalVersion === 2) {
+    const payloadV2 = await handleV2Loader(loaderArgs);
+
+    return superLoaderJson({
+      version: 2,
+      payload: payloadV2,
+    } as const);
+  }
+
+  const payloadV1 = await handleV1Loader(loaderArgs);
+
+  return superLoaderJson({
+    version: 1,
+    payload: payloadV1,
+  } as const);
+}
+
+export default function EmbedSignDocumentPage() {
+  const { version, payload } = useSuperLoaderData<typeof loader>();
+
+  if (version === 1) {
+    return <EmbedSignDocumentPageV1 data={payload} />;
+  }
+
+  return <EmbedSignDocumentPageV2 data={payload} />;
+}
+
+const EmbedSignDocumentPageV1 = ({
+  data,
+}: {
+  data: Awaited<ReturnType<typeof handleV1Loader>>;
+}) => {
+  const {
+    token,
+    user,
+    document,
+    allRecipients,
+    recipient,
+    fields,
+    completedFields,
+    hidePoweredBy,
+    allowEmbedSigningWhitelabel,
+  } = data;
+
+  return (
+    <DocumentSigningProvider
+      email={recipient.email}
+      fullName={user?.email === recipient.email ? user?.name : recipient.name}
+      signature={user?.email === recipient.email ? user?.signature : undefined}
+      typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
+      uploadSignatureEnabled={document.documentMeta?.uploadSignatureEnabled}
+      drawSignatureEnabled={document.documentMeta?.drawSignatureEnabled}
+    >
+      <DocumentSigningAuthProvider
+        documentAuthOptions={document.authOptions}
+        recipient={recipient}
+        user={user}
+      >
+        <EmbedSignDocumentV1ClientPage
+          token={token}
+          documentId={document.id}
+          envelopeId={document.envelopeId}
+          envelopeItems={document.envelopeItems}
+          recipient={recipient}
+          fields={fields}
+          completedFields={completedFields}
+          metadata={document.documentMeta}
+          isCompleted={isDocumentCompleted(document.status)}
+          hidePoweredBy={hidePoweredBy}
+          allowWhitelabelling={allowEmbedSigningWhitelabel}
+          allRecipients={allRecipients}
+        />
+      </DocumentSigningAuthProvider>
+    </DocumentSigningProvider>
+  );
+};
+
+const EmbedSignDocumentPageV2 = ({
+  data,
+}: {
+  data: Awaited<ReturnType<typeof handleV2Loader>>;
+}) => {
+  const { token, user, envelopeForSigning, hidePoweredBy, allowEmbedSigningWhitelabel } = data;
+
+  const { envelope, recipient } = envelopeForSigning;
+
+  return (
+    <EnvelopeSigningProvider
+      envelopeData={envelopeForSigning}
+      email={recipient.email}
+      fullName={user?.email === recipient.email ? user?.name : recipient.name}
+      signature={user?.email === recipient.email ? user?.signature : undefined}
+    >
+      <DocumentSigningAuthProvider
+        documentAuthOptions={envelope.authOptions}
+        recipient={recipient}
+        user={user}
+      >
+        <EnvelopeRenderProvider envelope={envelope} token={token}>
+          <EmbedSignDocumentV2ClientPage
+            hidePoweredBy={hidePoweredBy}
+            allowWhitelabelling={allowEmbedSigningWhitelabel}
+          />
+        </EnvelopeRenderProvider>
+      </DocumentSigningAuthProvider>
+    </EnvelopeSigningProvider>
+  );
+};

apps/remix/app/routes/embed+/_v0+/sign.$url.tsx

@@ -1,181 +0,0 @@
-import { RecipientRole } from '@prisma/client';
-import { data } from 'react-router';
-import { getOptionalLoaderContext } from 'server/utils/get-loader-session';
-import { match } from 'ts-pattern';
-
-import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
-import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
-import { getDocumentAndSenderByToken } from '@documenso/lib/server-only/document/get-document-by-token';
-import { viewedDocument } from '@documenso/lib/server-only/document/viewed-document';
-import { getCompletedFieldsForToken } from '@documenso/lib/server-only/field/get-completed-fields-for-token';
-import { getFieldsForToken } from '@documenso/lib/server-only/field/get-fields-for-token';
-import { getOrganisationClaimByTeamId } from '@documenso/lib/server-only/organisation/get-organisation-claims';
-import { getIsRecipientsTurnToSign } from '@documenso/lib/server-only/recipient/get-is-recipient-turn';
-import { getRecipientByToken } from '@documenso/lib/server-only/recipient/get-recipient-by-token';
-import { getRecipientsForAssistant } from '@documenso/lib/server-only/recipient/get-recipients-for-assistant';
-import { DocumentAccessAuth } from '@documenso/lib/types/document-auth';
-import { isDocumentCompleted } from '@documenso/lib/utils/document';
-import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
-
-import { EmbedSignDocumentClientPage } from '~/components/embed/embed-document-signing-page';
-import { DocumentSigningAuthProvider } from '~/components/general/document-signing/document-signing-auth-provider';
-import { DocumentSigningProvider } from '~/components/general/document-signing/document-signing-provider';
-import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
-
-import type { Route } from './+types/sign.$url';
-
-export async function loader({ params, request }: Route.LoaderArgs) {
-  const { requestMetadata } = getOptionalLoaderContext();
-
-  if (!params.url) {
-    throw new Response('Not found', { status: 404 });
-  }
-
-  const token = params.url;
-
-  const { user } = await getOptionalSession(request);
-
-  const [document, fields, recipient, completedFields] = await Promise.all([
-    getDocumentAndSenderByToken({
-      token,
-      userId: user?.id,
-      requireAccessAuth: false,
-    }).catch(() => null),
-    getFieldsForToken({ token }),
-    getRecipientByToken({ token }).catch(() => null),
-    getCompletedFieldsForToken({ token }).catch(() => []),
-  ]);
-
-  // `document.directLink` is always available but we're doing this to
-  // satisfy the type checker.
-  if (!document || !recipient) {
-    throw new Response('Not found', { status: 404 });
-  }
-
-  const organisationClaim = await getOrganisationClaimByTeamId({ teamId: document.teamId });
-
-  const allowEmbedSigningWhitelabel = organisationClaim.flags.embedSigningWhiteLabel;
-  const hidePoweredBy = organisationClaim.flags.hidePoweredBy;
-
-  // TODO: Make this more robust, we need to ensure the owner is either
-  // TODO: the member of a team that has an active subscription, is an early
-  // TODO: adopter or is an enterprise user.
-  if (IS_BILLING_ENABLED() && !organisationClaim.flags.embedSigning) {
-    throw data(
-      {
-        type: 'embed-paywall',
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
-  const { derivedRecipientAccessAuth } = extractDocumentAuthMethods({
-    documentAuth: document.authOptions,
-  });
-
-  const isAccessAuthValid = derivedRecipientAccessAuth.every((accesssAuth) =>
-    match(accesssAuth)
-      .with(DocumentAccessAuth.ACCOUNT, () => user && user.email === recipient.email)
-      .with(DocumentAccessAuth.TWO_FACTOR_AUTH, () => true) // Allow without account requirement
-      .exhaustive(),
-  );
-
-  if (!isAccessAuthValid) {
-    throw data(
-      {
-        type: 'embed-authentication-required',
-        email: user?.email || recipient.email,
-        returnTo: `/embed/sign/${token}`,
-      },
-      {
-        status: 401,
-      },
-    );
-  }
-
-  const isRecipientsTurnToSign = await getIsRecipientsTurnToSign({ token });
-
-  if (!isRecipientsTurnToSign) {
-    throw data(
-      {
-        type: 'embed-waiting-for-turn',
-      },
-      {
-        status: 403,
-      },
-    );
-  }
-
-  await viewedDocument({
-    token,
-    requestMetadata,
-    recipientAccessAuth: derivedRecipientAccessAuth,
-  });
-
-  const allRecipients =
-    recipient.role === RecipientRole.ASSISTANT
-      ? await getRecipientsForAssistant({
-          token,
-        })
-      : [];
-
-  return superLoaderJson({
-    token,
-    user,
-    document,
-    allRecipients,
-    recipient,
-    fields,
-    completedFields,
-    hidePoweredBy,
-    allowEmbedSigningWhitelabel,
-  });
-}
-
-export default function EmbedSignDocumentPage() {
-  const {
-    token,
-    user,
-    document,
-    allRecipients,
-    recipient,
-    fields,
-    completedFields,
-    hidePoweredBy,
-    allowEmbedSigningWhitelabel,
-  } = useSuperLoaderData<typeof loader>();
-
-  return (
-    <DocumentSigningProvider
-      email={recipient.email}
-      fullName={user?.email === recipient.email ? user?.name : recipient.name}
-      signature={user?.email === recipient.email ? user?.signature : undefined}
-      typedSignatureEnabled={document.documentMeta?.typedSignatureEnabled}
-      uploadSignatureEnabled={document.documentMeta?.uploadSignatureEnabled}
-      drawSignatureEnabled={document.documentMeta?.drawSignatureEnabled}
-    >
-      <DocumentSigningAuthProvider
-        documentAuthOptions={document.authOptions}
-        recipient={recipient}
-        user={user}
-      >
-        <EmbedSignDocumentClientPage
-          token={token}
-          documentId={document.id}
-          envelopeId={document.envelopeId}
-          documentData={document.documentData}
-          recipient={recipient}
-          fields={fields}
-          completedFields={completedFields}
-          metadata={document.documentMeta}
-          isCompleted={isDocumentCompleted(document.status)}
-          hidePoweredBy={hidePoweredBy}
-          allowWhitelabelling={allowEmbedSigningWhitelabel}
-          allRecipients={allRecipients}
-        />
-      </DocumentSigningAuthProvider>
-    </DocumentSigningProvider>
-  );
-}

apps/remix/app/routes/embed+/v1+/multisign+/_index.tsx

@@ -67,6 +67,7 @@ export async function loader({ request }: Route.LoaderArgs) {
 export default function MultisignPage() {
   const { envelopes, user, hidePoweredBy, allowWhitelabelling } =
     useSuperLoaderData<typeof loader>();
+
   const revalidator = useRevalidator();
 
   const [selectedDocument, setSelectedDocument] = useState<

apps/remix/package.json

@@ -25,6 +25,7 @@
     "@documenso/trpc": "*",
     "@documenso/ui": "*",
     "@epic-web/remember": "^1.1.0",
+    "@faker-js/faker": "^10.1.0",
     "@hono/node-server": "^1.13.7",
     "@hono/trpc-server": "^0.3.4",
     "@hookform/resolvers": "^3.1.0",
@@ -103,5 +104,5 @@
     "vite-plugin-babel-macros": "^1.0.6",
     "vite-tsconfig-paths": "^5.1.4"
   },
-  "version": "1.13.1"
+  "version": "2.0.0"
 }

apps/remix/server/api/download/download.ts

@@ -0,0 +1,192 @@
+import { sValidator } from '@hono/standard-validator';
+import { EnvelopeType } from '@prisma/client';
+import { Hono } from 'hono';
+
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { getEnvelopeById } from '@documenso/lib/server-only/envelope/get-envelope-by-id';
+import { getApiTokenByToken } from '@documenso/lib/server-only/public-api/get-api-token-by-token';
+import { buildTeamWhereQuery } from '@documenso/lib/utils/teams';
+import { prisma } from '@documenso/prisma';
+
+import type { HonoEnv } from '../../router';
+import { handleEnvelopeItemFileRequest } from '../files/files.helpers';
+import {
+  ZDownloadDocumentRequestParamsSchema,
+  ZDownloadEnvelopeItemRequestParamsSchema,
+} from './download.types';
+
+export const downloadRoute = new Hono<HonoEnv>()
+  /**
+   * Download an envelope item by its ID.
+   * Requires API key authentication via Authorization header.
+   */
+  .get(
+    '/envelopeItem/:envelopeItemId/download',
+    sValidator('param', ZDownloadEnvelopeItemRequestParamsSchema),
+    async (c) => {
+      const logger = c.get('logger');
+
+      try {
+        const { envelopeItemId, version } = c.req.valid('param');
+        const authorizationHeader = c.req.header('authorization');
+
+        // Support for both "Authorization: Bearer api_xxx" and "Authorization: api_xxx"
+        const [token] = (authorizationHeader || '').split('Bearer ').filter((s) => s.length > 0);
+
+        if (!token) {
+          throw new AppError(AppErrorCode.UNAUTHORIZED, {
+            message: 'API token was not provided',
+          });
+        }
+
+        const apiToken = await getApiTokenByToken({ token });
+
+        if (apiToken.user.disabled) {
+          throw new AppError(AppErrorCode.UNAUTHORIZED, {
+            message: 'User is disabled',
+          });
+        }
+
+        logger.info({
+          auth: 'api',
+          source: 'apiV2',
+          path: c.req.path,
+          userId: apiToken.user.id,
+          apiTokenId: apiToken.id,
+          envelopeItemId,
+          version,
+        });
+
+        const envelopeItem = await prisma.envelopeItem.findFirst({
+          where: {
+            id: envelopeItemId,
+            envelope: {
+              team: buildTeamWhereQuery({ teamId: apiToken.teamId, userId: apiToken.user.id }),
+            },
+          },
+          include: {
+            envelope: true,
+            documentData: true,
+          },
+        });
+
+        if (!envelopeItem) {
+          return c.json({ error: 'Envelope item not found' }, 404);
+        }
+
+        if (!envelopeItem.documentData) {
+          return c.json({ error: 'Document data not found' }, 404);
+        }
+
+        return await handleEnvelopeItemFileRequest({
+          title: envelopeItem.title,
+          status: envelopeItem.envelope.status,
+          documentData: envelopeItem.documentData,
+          version: version || 'signed',
+          isDownload: true,
+          context: c,
+        });
+      } catch (error) {
+        logger.error(error);
+
+        if (error instanceof AppError) {
+          if (error.code === AppErrorCode.UNAUTHORIZED) {
+            return c.json({ error: error.message }, 401);
+          }
+
+          return c.json({ error: error.message }, 400);
+        }
+
+        return c.json({ error: 'Internal server error' }, 500);
+      }
+    },
+  )
+  /**
+   * Download a document by its ID.
+   * Requires API key authentication via Authorization header.
+   */
+  .get(
+    '/document/:documentId/download',
+    sValidator('param', ZDownloadDocumentRequestParamsSchema),
+    async (c) => {
+      const logger = c.get('logger');
+
+      try {
+        const { documentId, version } = c.req.valid('param');
+        const authorizationHeader = c.req.header('authorization');
+
+        // Support for both "Authorization: Bearer api_xxx" and "Authorization: api_xxx"
+        const [token] = (authorizationHeader || '').split('Bearer ').filter((s) => s.length > 0);
+
+        if (!token) {
+          throw new AppError(AppErrorCode.UNAUTHORIZED, {
+            message: 'API token was not provided',
+          });
+        }
+
+        const apiToken = await getApiTokenByToken({ token });
+
+        if (apiToken.user.disabled) {
+          throw new AppError(AppErrorCode.UNAUTHORIZED, {
+            message: 'User is disabled',
+          });
+        }
+
+        logger.info({
+          auth: 'api',
+          source: 'apiV2',
+          path: c.req.path,
+          userId: apiToken.user.id,
+          apiTokenId: apiToken.id,
+          documentId,
+          version,
+        });
+
+        const envelope = await getEnvelopeById({
+          id: {
+            type: 'documentId',
+            id: documentId,
+          },
+          type: EnvelopeType.DOCUMENT,
+          userId: apiToken.user.id,
+          teamId: apiToken.teamId,
+        }).catch(() => null);
+
+        if (!envelope) {
+          return c.json({ error: 'Document not found' }, 404);
+        }
+
+        // Get the first envelope item (documents have exactly one)
+        const [envelopeItem] = envelope.envelopeItems;
+
+        if (!envelopeItem) {
+          return c.json({ error: 'Document item not found' }, 404);
+        }
+
+        if (!envelopeItem.documentData) {
+          return c.json({ error: 'Document data not found' }, 404);
+        }
+
+        return await handleEnvelopeItemFileRequest({
+          title: envelopeItem.title,
+          status: envelope.status,
+          documentData: envelopeItem.documentData,
+          version: version || 'signed',
+          isDownload: true,
+          context: c,
+        });
+      } catch (error) {
+        logger.error(error);
+
+        if (error instanceof AppError) {
+          if (error.code === AppErrorCode.UNAUTHORIZED) {
+            return c.json({ error: error.message }, 401);
+          }
+
+          return c.json({ error: error.message }, 400);
+        }
+
+        return c.json({ error: 'Internal server error' }, 500);
+      }
+    },
+  );

apps/remix/server/api/download/download.types.ts

@@ -0,0 +1,29 @@
+import { z } from 'zod';
+
+export const ZDownloadEnvelopeItemRequestParamsSchema = z.object({
+  envelopeItemId: z.string().describe('The ID of the envelope item to download.'),
+  version: z
+    .enum(['original', 'signed'])
+    .optional()
+    .default('signed')
+    .describe(
+      'The version of the envelope item to download. "signed" returns the completed document with signatures, "original" returns the original uploaded document.',
+    ),
+});
+
+export type TDownloadEnvelopeItemRequestParams = z.infer<
+  typeof ZDownloadEnvelopeItemRequestParamsSchema
+>;
+
+export const ZDownloadDocumentRequestParamsSchema = z.object({
+  documentId: z.coerce.number().describe('The ID of the document to download.'),
+  version: z
+    .enum(['original', 'signed'])
+    .optional()
+    .default('signed')
+    .describe(
+      'The version of the document to download. "signed" returns the completed document with signatures, "original" returns the original uploaded document.',
+    ),
+});
+
+export type TDownloadDocumentRequestParams = z.infer<typeof ZDownloadDocumentRequestParamsSchema>;

apps/remix/server/api/files/files.helpers.ts

@@ -4,7 +4,7 @@ import { type Context } from 'hono';
 import { sha256 } from '@documenso/lib/universal/crypto';
 import { getFileServerSide } from '@documenso/lib/universal/upload/get-file.server';
 
-import type { HonoEnv } from '../router';
+import type { HonoEnv } from '../../router';
 
 type HandleEnvelopeItemFileRequestOptions = {
   title: string;
@@ -52,7 +52,6 @@ export const handleEnvelopeItemFileRequest = async ({
   }
 
   c.header('Content-Type', 'application/pdf');
-  c.header('Content-Length', file.length.toString());
   c.header('ETag', etag);
 
   if (!isDownload) {

apps/remix/server/api/files/files.ts

@@ -1,4 +1,5 @@
 import { sValidator } from '@hono/standard-validator';
+import type { Prisma } from '@prisma/client';
 import { Hono } from 'hono';
 
 import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
@@ -9,7 +10,7 @@ import { putNormalizedPdfFileServerSide } from '@documenso/lib/universal/upload/
 import { getPresignPostUrl } from '@documenso/lib/universal/upload/server-actions';
 import { prisma } from '@documenso/prisma';
 
-import type { HonoEnv } from '../router';
+import type { HonoEnv } from '../../router';
 import { handleEnvelopeItemFileRequest } from './files.helpers';
 import {
   type TGetPresignedPostUrlResponse,
@@ -206,8 +207,7 @@ export const filesRoute = new Hono<HonoEnv>()
     async (c) => {
       const { token, envelopeItemId } = c.req.valid('param');
 
-      const envelopeItem = await prisma.envelopeItem.findFirst({
-        where: {
+      let envelopeWhereQuery: Prisma.EnvelopeItemWhereUniqueInput = {
         id: envelopeItemId,
         envelope: {
           recipients: {
@@ -216,7 +216,19 @@ export const filesRoute = new Hono<HonoEnv>()
             },
           },
         },
+      };
+
+      if (token.startsWith('qr_')) {
+        envelopeWhereQuery = {
+          id: envelopeItemId,
+          envelope: {
+            qrToken: token,
           },
+        };
+      }
+
+      const envelopeItem = await prisma.envelopeItem.findUnique({
+        where: envelopeWhereQuery,
         include: {
           envelope: true,
           documentData: true,
@@ -247,8 +259,7 @@ export const filesRoute = new Hono<HonoEnv>()
     async (c) => {
       const { token, envelopeItemId, version } = c.req.valid('param');
 
-      const envelopeItem = await prisma.envelopeItem.findFirst({
-        where: {
+      let envelopeWhereQuery: Prisma.EnvelopeItemWhereUniqueInput = {
         id: envelopeItemId,
         envelope: {
           recipients: {
@@ -257,7 +268,19 @@ export const filesRoute = new Hono<HonoEnv>()
             },
           },
         },
+      };
+
+      if (token.startsWith('qr_')) {
+        envelopeWhereQuery = {
+          id: envelopeItemId,
+          envelope: {
+            qrToken: token,
           },
+        };
+      }
+
+      const envelopeItem = await prisma.envelopeItem.findUnique({
+        where: envelopeWhereQuery,
         include: {
           envelope: true,
           documentData: true,

apps/remix/server/router.ts

@@ -14,7 +14,8 @@ import { getIpAddress } from '@documenso/lib/universal/get-ip-address';
 import { logger } from '@documenso/lib/utils/logger';
 import { openApiDocument } from '@documenso/trpc/server/open-api';
 
-import { filesRoute } from './api/files';
+import { downloadRoute } from './api/download/download';
+import { filesRoute } from './api/files/files';
 import { type AppContext, appContext } from './context';
 import { appMiddleware } from './middleware';
 import { openApiTrpcServerHandler } from './trpc/hono-trpc-open-api';
@@ -92,6 +93,8 @@ app.use('/api/trpc/*', reactRouterTrpcServer);
 // Unstable API server routes. Order matters for these two.
 app.get(`${API_V2_URL}/openapi.json`, (c) => c.json(openApiDocument));
 app.use(`${API_V2_URL}/*`, cors());
+// Shadows the download routes that tRPC defines since tRPC-to-openapi doesn't support their return types.
+app.route(`${API_V2_URL}`, downloadRoute);
 app.use(`${API_V2_URL}/*`, async (c) =>
   openApiTrpcServerHandler(c, {
     isBeta: false,
@@ -101,6 +104,8 @@ app.use(`${API_V2_URL}/*`, async (c) =>
 // Unstable API server routes. Order matters for these two.
 app.get(`${API_V2_BETA_URL}/openapi.json`, (c) => c.json(openApiDocument));
 app.use(`${API_V2_BETA_URL}/*`, cors());
+// Shadows the download routes that tRPC defines since tRPC-to-openapi doesn't support their return types.
+app.route(`${API_V2_BETA_URL}`, downloadRoute);
 app.use(`${API_V2_BETA_URL}/*`, async (c) =>
   openApiTrpcServerHandler(c, {
     isBeta: true,

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@documenso/root",
-  "version": "1.13.1",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@documenso/root",
-      "version": "1.13.1",
+      "version": "2.0.0",
       "workspaces": [
         "apps/*",
         "packages/*"
@@ -45,6 +45,7 @@
         "prettier": "^3.3.3",
         "prisma": "^6.18.0",
         "prisma-extension-kysely": "^3.0.0",
+        "prisma-json-types-generator": "^3.6.2",
         "prisma-kysely": "^1.8.0",
         "rimraf": "^5.0.1",
         "superjson": "^2.2.5",
@@ -99,7 +100,7 @@
     },
     "apps/remix": {
       "name": "@documenso/remix",
-      "version": "1.13.1",
+      "version": "2.0.0",
       "dependencies": {
         "@cantoo/pdf-lib": "^2.5.2",
         "@documenso/api": "*",
@@ -112,6 +113,7 @@
         "@documenso/trpc": "*",
         "@documenso/ui": "*",
         "@epic-web/remember": "^1.1.0",
+        "@faker-js/faker": "^10.1.0",
         "@hono/node-server": "^1.13.7",
         "@hono/trpc-server": "^0.3.4",
         "@hookform/resolvers": "^3.1.0",
@@ -3511,6 +3513,22 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@faker-js/faker": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-10.1.0.tgz",
+      "integrity": "sha512-C3mrr3b5dRVlKPJdfrAXS8+dq+rq8Qm5SNRazca0JKgw1HQERFmrVb0towvMmw5uu8hHKNiQasMaR/tydf3Zsg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fakerjs"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || ^23.5.0 || >=24.0.0",
+        "npm": ">=10"
+      }
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.0.tgz",
@@ -7599,6 +7617,18 @@
         "empathic": "2.0.0"
       }
     },
+    "node_modules/@prisma/debug": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-6.18.0.tgz",
+      "integrity": "sha512-PMVPMmxPj0ps1VY75DIrT430MoOyQx9hmm174k6cmLZpcI95rAPXOQ+pp8ANQkJtNyLVDxnxVJ0QLbrm/ViBcg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@prisma/dmmf": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/@prisma/dmmf/-/dmmf-6.18.0.tgz",
+      "integrity": "sha512-x0ItbLDxAnciEMFnGUm90Bkpzx2ja5Lp8Lz+9UkepIClZOMC4WvtMUHaMMfCFqfoBb+KUbxa/xV+FJ6EAaw4wQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@prisma/engines": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-6.18.0.tgz",
@@ -7618,12 +7648,6 @@
       "integrity": "sha512-T7Af4QsJQnSgWN1zBbX+Cha5t4qjHRxoeoWpK4JugJzG/ipmmDMY5S+O0N1ET6sCBNVkf6lz+Y+ZNO9+wFU8pQ==",
       "license": "Apache-2.0"
     },
-    "node_modules/@prisma/engines/node_modules/@prisma/debug": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-6.18.0.tgz",
-      "integrity": "sha512-PMVPMmxPj0ps1VY75DIrT430MoOyQx9hmm174k6cmLZpcI95rAPXOQ+pp8ANQkJtNyLVDxnxVJ0QLbrm/ViBcg==",
-      "license": "Apache-2.0"
-    },
     "node_modules/@prisma/fetch-engine": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-6.18.0.tgz",
@@ -7635,10 +7659,10 @@
         "@prisma/get-platform": "6.18.0"
       }
     },
-    "node_modules/@prisma/fetch-engine/node_modules/@prisma/debug": {
+    "node_modules/@prisma/generator": {
       "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-6.18.0.tgz",
-      "integrity": "sha512-PMVPMmxPj0ps1VY75DIrT430MoOyQx9hmm174k6cmLZpcI95rAPXOQ+pp8ANQkJtNyLVDxnxVJ0QLbrm/ViBcg==",
+      "resolved": "https://registry.npmjs.org/@prisma/generator/-/generator-6.18.0.tgz",
+      "integrity": "sha512-8Sz9z8d/X/42uL07qYF4no2hnSSMPk8g6+w0zpINCN7lvnILby5b56xA0uPKRFfR3Wfn3NtFLnyEpMQE9fXeeg==",
       "license": "Apache-2.0"
     },
     "node_modules/@prisma/generator-helper": {
@@ -7719,12 +7743,6 @@
         "@prisma/debug": "6.18.0"
       }
     },
-    "node_modules/@prisma/get-platform/node_modules/@prisma/debug": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-6.18.0.tgz",
-      "integrity": "sha512-PMVPMmxPj0ps1VY75DIrT430MoOyQx9hmm174k6cmLZpcI95rAPXOQ+pp8ANQkJtNyLVDxnxVJ0QLbrm/ViBcg==",
-      "license": "Apache-2.0"
-    },
     "node_modules/@prisma/internals": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@prisma/internals/-/internals-5.3.1.tgz",
@@ -28646,6 +28664,54 @@
         "@prisma/client": "latest"
       }
     },
+    "node_modules/prisma-json-types-generator": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prisma-json-types-generator/-/prisma-json-types-generator-3.6.2.tgz",
+      "integrity": "sha512-WX/oENQ0S74r/Wgd2uuHT5i3KbnwLFCP2Fq5ISzrXkus/htOC4uCaQPYuGP2m/wSeKZZCw1RxptTlD+ib7Ht/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@prisma/generator-helper": "^6.16.1",
+        "semver": "^7.7.2",
+        "tslib": "^2.8.1"
+      },
+      "bin": {
+        "prisma-json-types-generator": "index.js"
+      },
+      "engines": {
+        "node": ">=14.0"
+      },
+      "funding": {
+        "url": "https://github.com/arthurfiorette/prisma-json-types-generator?sponsor=1"
+      },
+      "peerDependencies": {
+        "@prisma/client": "^6.14",
+        "prisma": "^6.14",
+        "typescript": "^5.9.2"
+      }
+    },
+    "node_modules/prisma-json-types-generator/node_modules/@prisma/generator-helper": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/@prisma/generator-helper/-/generator-helper-6.18.0.tgz",
+      "integrity": "sha512-kmlCDRRewLwBkHpkAjzyuNHD5ISlDLzUTcTsZbwmjDilQVt/S72xvvCAa+hxY16APTkqbtDYn3p7zL/XFO+C0A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "6.18.0",
+        "@prisma/dmmf": "6.18.0",
+        "@prisma/generator": "6.18.0"
+      }
+    },
+    "node_modules/prisma-json-types-generator/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/prisma-kysely": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/prisma-kysely/-/prisma-kysely-1.8.0.tgz",
@@ -36456,24 +36522,6 @@
         "zod": "^3.25.0 || ^4.0.0"
       }
     },
-    "node_modules/zod-prisma-types/node_modules/@prisma/debug": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-6.18.0.tgz",
-      "integrity": "sha512-PMVPMmxPj0ps1VY75DIrT430MoOyQx9hmm174k6cmLZpcI95rAPXOQ+pp8ANQkJtNyLVDxnxVJ0QLbrm/ViBcg==",
-      "license": "Apache-2.0"
-    },
-    "node_modules/zod-prisma-types/node_modules/@prisma/dmmf": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/@prisma/dmmf/-/dmmf-6.18.0.tgz",
-      "integrity": "sha512-x0ItbLDxAnciEMFnGUm90Bkpzx2ja5Lp8Lz+9UkepIClZOMC4WvtMUHaMMfCFqfoBb+KUbxa/xV+FJ6EAaw4wQ==",
-      "license": "Apache-2.0"
-    },
-    "node_modules/zod-prisma-types/node_modules/@prisma/generator": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/@prisma/generator/-/generator-6.18.0.tgz",
-      "integrity": "sha512-8Sz9z8d/X/42uL07qYF4no2hnSSMPk8g6+w0zpINCN7lvnILby5b56xA0uPKRFfR3Wfn3NtFLnyEpMQE9fXeeg==",
-      "license": "Apache-2.0"
-    },
     "node_modules/zod-prisma-types/node_modules/@prisma/generator-helper": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/@prisma/generator-helper/-/generator-helper-6.18.0.tgz",
@@ -37130,72 +37178,6 @@
         "typescript": "5.6.2"
       }
     },
-    "packages/prisma/node_modules/@prisma/debug": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-6.18.0.tgz",
-      "integrity": "sha512-PMVPMmxPj0ps1VY75DIrT430MoOyQx9hmm174k6cmLZpcI95rAPXOQ+pp8ANQkJtNyLVDxnxVJ0QLbrm/ViBcg==",
-      "license": "Apache-2.0"
-    },
-    "packages/prisma/node_modules/@prisma/dmmf": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/@prisma/dmmf/-/dmmf-6.18.0.tgz",
-      "integrity": "sha512-x0ItbLDxAnciEMFnGUm90Bkpzx2ja5Lp8Lz+9UkepIClZOMC4WvtMUHaMMfCFqfoBb+KUbxa/xV+FJ6EAaw4wQ==",
-      "license": "Apache-2.0"
-    },
-    "packages/prisma/node_modules/@prisma/generator": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/@prisma/generator/-/generator-6.18.0.tgz",
-      "integrity": "sha512-8Sz9z8d/X/42uL07qYF4no2hnSSMPk8g6+w0zpINCN7lvnILby5b56xA0uPKRFfR3Wfn3NtFLnyEpMQE9fXeeg==",
-      "license": "Apache-2.0"
-    },
-    "packages/prisma/node_modules/@prisma/generator-helper": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/@prisma/generator-helper/-/generator-helper-6.18.0.tgz",
-      "integrity": "sha512-kmlCDRRewLwBkHpkAjzyuNHD5ISlDLzUTcTsZbwmjDilQVt/S72xvvCAa+hxY16APTkqbtDYn3p7zL/XFO+C0A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@prisma/debug": "6.18.0",
-        "@prisma/dmmf": "6.18.0",
-        "@prisma/generator": "6.18.0"
-      }
-    },
-    "packages/prisma/node_modules/prisma-json-types-generator": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/prisma-json-types-generator/-/prisma-json-types-generator-3.6.2.tgz",
-      "integrity": "sha512-WX/oENQ0S74r/Wgd2uuHT5i3KbnwLFCP2Fq5ISzrXkus/htOC4uCaQPYuGP2m/wSeKZZCw1RxptTlD+ib7Ht/A==",
-      "license": "MIT",
-      "dependencies": {
-        "@prisma/generator-helper": "^6.16.1",
-        "semver": "^7.7.2",
-        "tslib": "^2.8.1"
-      },
-      "bin": {
-        "prisma-json-types-generator": "index.js"
-      },
-      "engines": {
-        "node": ">=14.0"
-      },
-      "funding": {
-        "url": "https://github.com/arthurfiorette/prisma-json-types-generator?sponsor=1"
-      },
-      "peerDependencies": {
-        "@prisma/client": "^6.14",
-        "prisma": "^6.14",
-        "typescript": "^5.9.2"
-      }
-    },
-    "packages/prisma/node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "packages/prisma/node_modules/ts-pattern": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.7.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.13.1",
+  "version": "2.0.0",
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev --filter=@documenso/remix",
@@ -56,6 +56,7 @@
     "prettier": "^3.3.3",
     "prisma": "^6.18.0",
     "prisma-extension-kysely": "^3.0.0",
+    "prisma-json-types-generator": "^3.6.2",
     "prisma-kysely": "^1.8.0",
     "rimraf": "^5.0.1",
     "turbo": "^1.9.3",

packages/app-tests/e2e/api/v2/envelopes-api.spec.ts

@@ -18,7 +18,7 @@ import {
   RecipientRole,
 } from '@documenso/prisma/client';
 import { seedUser } from '@documenso/prisma/seed/users';
-import type { TCreateEnvelopeItemsRequest } from '@documenso/trpc/server/envelope-router/create-envelope-items.types';
+import type { TCreateEnvelopeItemsPayload } from '@documenso/trpc/server/envelope-router/create-envelope-items.types';
 import type {
   TCreateEnvelopePayload,
   TCreateEnvelopeResponse,
@@ -403,28 +403,20 @@ test.describe('API V2 Envelopes', () => {
     expect(unauthRequest.status()).toBe(404);
 
     // Step 2: Create second envelope item via API
-    // Todo: Envelopes - Use API Route
-    const fieldMetaDocumentData = await prisma.documentData.create({
-      data: {
-        type: 'BYTES_64',
-        data: fieldMetaPdf.toString('base64'),
-        initialData: fieldMetaPdf.toString('base64'),
-      },
-    });
-
-    const createEnvelopeItemsRequest: TCreateEnvelopeItemsRequest = {
+    const createEnvelopeItemsPayload: TCreateEnvelopeItemsPayload = {
       envelopeId: createdEnvelope.id,
-      data: [
-        {
-          title: 'Field Meta Test',
-          documentDataId: fieldMetaDocumentData.id,
-        },
-      ],
     };
 
+    const createEnvelopeItemFormData = new FormData();
+    createEnvelopeItemFormData.append('payload', JSON.stringify(createEnvelopeItemsPayload));
+    createEnvelopeItemFormData.append(
+      'files',
+      new File([fieldMetaPdf], 'field-meta.pdf', { type: 'application/pdf' }),
+    );
+
     const createItemsRes = await request.post(`${baseUrl}/envelope/item/create-many`, {
       headers: { Authorization: `Bearer ${tokenA}` },
-      data: createEnvelopeItemsRequest,
+      multipart: createEnvelopeItemFormData,
     });
 
     expect(createItemsRes.ok()).toBeTruthy();
@@ -559,5 +551,10 @@ test.describe('API V2 Envelopes', () => {
     );
     expect(finalEnvelope.title).toBe('Envelope Full Field Test');
     expect(finalEnvelope.type).toBe(EnvelopeType.DOCUMENT);
+
+    console.log({
+      createdEnvelopeId: finalEnvelope.id,
+      userEmail: userA.email,
+    });
   });
 });

packages/app-tests/e2e/api/v2/test-unauthorized-api-access.spec.ts

@@ -30,6 +30,7 @@ import {
 import { seedBlankFolder } from '@documenso/prisma/seed/folders';
 import { seedBlankTemplate } from '@documenso/prisma/seed/templates';
 import { seedUser } from '@documenso/prisma/seed/users';
+import type { TCreateEnvelopeItemsPayload } from '@documenso/trpc/server/envelope-router/create-envelope-items.types';
 
 const WEBAPP_BASE_URL = NEXT_PUBLIC_WEBAPP_URL();
 
@@ -3855,25 +3856,24 @@ test.describe('Document API V2', () => {
       }) => {
         const doc = await seedBlankDocument(userA, teamA.id);
 
-        const documentData = await prisma.documentData.create({
-          data: {
-            type: 'BYTES_64',
-            data: Buffer.from('test pdf content').toString('base64'),
-            initialData: Buffer.from('test pdf content').toString('base64'),
-          },
-        });
+        const fieldMetaPdf = fs.readFileSync(
+          path.join(__dirname, '../../../../../assets/field-meta.pdf'),
+        );
+
+        const createEnvelopeItemsPayload: TCreateEnvelopeItemsPayload = {
+          envelopeId: doc.id,
+        };
+
+        const formData = new FormData();
+        formData.append('payload', JSON.stringify(createEnvelopeItemsPayload));
+        formData.append(
+          'files',
+          new File([fieldMetaPdf], 'field-meta.pdf', { type: 'application/pdf' }),
+        );
 
         const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/item/create-many`, {
           headers: { Authorization: `Bearer ${tokenB}` },
-          data: {
-            envelopeId: doc.id,
-            data: [
-              {
-                title: 'New Item',
-                documentDataId: documentData.id,
-              },
-            ],
-          },
+          multipart: formData,
         });
 
         expect(res.ok()).toBeFalsy();
@@ -3885,29 +3885,48 @@ test.describe('Document API V2', () => {
       }) => {
         const doc = await seedBlankDocument(userA, teamA.id);
 
-        const documentData = await prisma.documentData.create({
-          data: {
-            type: 'BYTES_64',
-            data: Buffer.from('test pdf content').toString('base64'),
-            initialData: Buffer.from('test pdf content').toString('base64'),
-          },
-        });
+        const fieldMetaPdf = fs.readFileSync(
+          path.join(__dirname, '../../../../../assets/field-meta.pdf'),
+        );
+
+        const createEnvelopeItemsPayload: TCreateEnvelopeItemsPayload = {
+          envelopeId: doc.id,
+        };
+
+        const formData = new FormData();
+        formData.append('payload', JSON.stringify(createEnvelopeItemsPayload));
+        formData.append(
+          'files',
+          new File([fieldMetaPdf], 'field-meta-1.pdf', { type: 'application/pdf' }),
+        );
+        formData.append(
+          'files',
+          new File([fieldMetaPdf], 'field-meta-2.pdf', { type: 'application/pdf' }),
+        );
 
         const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/item/create-many`, {
           headers: { Authorization: `Bearer ${tokenA}` },
-          data: {
-            envelopeId: doc.id,
-            data: [
-              {
-                title: 'New Item',
-                documentDataId: documentData.id,
+          multipart: formData,
+        });
+
+        const envelope = await prisma.envelope.findFirstOrThrow({
+          where: {
+            id: doc.id,
           },
-            ],
+          include: {
+            envelopeItems: true,
           },
         });
 
         expect(res.ok()).toBeTruthy();
         expect(res.status()).toBe(200);
+
+        const envelopeItems = envelope.envelopeItems;
+
+        // 3 Files because seed creates one automatically.
+        expect(envelopeItems.length).toBe(3);
+        expect(envelopeItems[1].title).toBe('field-meta-1.pdf');
+        expect(envelopeItems[2].title).toBe('field-meta-2.pdf');
       });
     });
 

packages/app-tests/e2e/envelopes/envelope-alignment.spec.ts

@@ -25,8 +25,7 @@ import { DocumentStatus } from '@prisma/client';
 import fs from 'node:fs';
 import path from 'node:path';
 import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf.js';
-
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { getEnvelopeDownloadUrl } from '@documenso/lib/utils/envelope-download';
 import { prisma } from '@documenso/prisma';
 import { seedAlignmentTestDocument } from '@documenso/prisma/seed/initial-seed';
 import { seedUser } from '@documenso/prisma/seed/users';
@@ -35,7 +34,7 @@ import { apiSignin } from '../fixtures/authentication';
 
 test.describe.configure({ mode: 'parallel', timeout: 60000 });
 
-test('field placement visual regression', async ({ page }, testInfo) => {
+test.skip('field placement visual regression', async ({ page }, testInfo) => {
   const { user, team } = await seedUser();
 
   const envelope = await seedAlignmentTestDocument({
@@ -95,7 +94,13 @@ test('field placement visual regression', async ({ page }, testInfo) => {
 
   await Promise.all(
     completedDocument.envelopeItems.map(async (item) => {
-      const pdfData = await getFile(item.documentData);
+      const documentUrl = getEnvelopeDownloadUrl({
+        envelopeItem: item,
+        token,
+        version: 'signed',
+      });
+
+      const pdfData = await fetch(documentUrl).then(async (res) => await res.arrayBuffer());
 
       const loadedImages = storedImages
         .filter((image) => image.includes(item.title))
@@ -103,7 +108,7 @@ test('field placement visual regression', async ({ page }, testInfo) => {
 
       await compareSignedPdfWithImages({
         id: item.title.replaceAll(' ', '-').toLowerCase(),
-        pdfData,
+        pdfData: new Uint8Array(pdfData),
         images: loadedImages,
         testInfo,
       });
@@ -174,9 +179,15 @@ test.skip('download envelope images', async ({ page }) => {
 
   await Promise.all(
     completedDocument.envelopeItems.map(async (item) => {
-      const pdfData = await getFile(item.documentData);
+      const documentUrl = getEnvelopeDownloadUrl({
+        envelopeItem: item,
+        token,
+        version: 'signed',
+      });
 
-      const pdfImages = await renderPdfToImage(pdfData);
+      const pdfData = await fetch(documentUrl).then(async (res) => await res.arrayBuffer());
+
+      const pdfImages = await renderPdfToImage(new Uint8Array(pdfData));
 
       for (const [index, { image }] of pdfImages.entries()) {
         fs.writeFileSync(

packages/app-tests/e2e/features/include-document-certificate.spec.ts

@@ -3,7 +3,7 @@ import { expect, test } from '@playwright/test';
 import { DocumentStatus, FieldType } from '@prisma/client';
 
 import { getDocumentByToken } from '@documenso/lib/server-only/document/get-document-by-token';
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { getEnvelopeDownloadUrl } from '@documenso/lib/utils/envelope-download';
 import { prisma } from '@documenso/prisma';
 import { seedPendingDocumentWithFullFields } from '@documenso/prisma/seed/documents';
 import { seedTeam } from '@documenso/prisma/seed/teams';
@@ -25,20 +25,25 @@ test.describe('Signing Certificate Tests', () => {
       teamId: team.id,
     });
 
-    const documentData = await prisma.documentData
+    const recipient = recipients[0];
+
+    const documentData = await prisma.envelopeItem
       .findFirstOrThrow({
         where: {
-          envelopeItem: {
           envelopeId: document.id,
         },
-        },
       })
-      .then(async (data) => getFile(data));
+      .then(async (data) => {
+        const documentUrl = getEnvelopeDownloadUrl({
+          envelopeItem: data,
+          token: recipient.token,
+          version: 'signed',
+        });
+        return fetch(documentUrl).then(async (res) => await res.arrayBuffer());
+      });
 
     const originalPdf = await PDFDocument.load(documentData);
 
-    const recipient = recipients[0];
-
     // Sign the document
     await page.goto(`/sign/${recipient.token}`);
 
@@ -78,9 +83,17 @@ test.describe('Signing Certificate Tests', () => {
       },
     });
 
-    const firstDocumentData = completedDocument.envelopeItems[0].documentData;
+    const firstDocumentData = completedDocument.envelopeItems[0];
 
-    const completedDocumentData = await getFile(firstDocumentData);
+    const documentUrl = getEnvelopeDownloadUrl({
+      envelopeItem: firstDocumentData,
+      token: recipient.token,
+      version: 'signed',
+    });
+
+    const pdfData = await fetch(documentUrl).then(async (res) => await res.arrayBuffer());
+
+    const completedDocumentData = new Uint8Array(pdfData);
 
     // Load the PDF and check number of pages
     const pdfDoc = await PDFDocument.load(completedDocumentData);
@@ -117,20 +130,25 @@ test.describe('Signing Certificate Tests', () => {
       },
     });
 
-    const documentData = await prisma.documentData
+    const recipient = recipients[0];
+
+    const documentData = await prisma.envelopeItem
       .findFirstOrThrow({
         where: {
-          envelopeItem: {
           envelopeId: document.id,
         },
-        },
       })
-      .then(async (data) => getFile(data));
+      .then(async (data) => {
+        const documentUrl = getEnvelopeDownloadUrl({
+          envelopeItem: data,
+          token: recipient.token,
+          version: 'signed',
+        });
+        return fetch(documentUrl).then(async (res) => await res.arrayBuffer());
+      });
 
     const originalPdf = await PDFDocument.load(documentData);
 
-    const recipient = recipients[0];
-
     // Sign the document
     await page.goto(`/sign/${recipient.token}`);
 
@@ -168,9 +186,17 @@ test.describe('Signing Certificate Tests', () => {
       },
     });
 
-    const firstDocumentData = completedDocument.envelopeItems[0].documentData;
+    const firstDocumentData = completedDocument.envelopeItems[0];
 
-    const completedDocumentData = await getFile(firstDocumentData);
+    const documentUrl = getEnvelopeDownloadUrl({
+      envelopeItem: firstDocumentData,
+      token: recipient.token,
+      version: 'signed',
+    });
+
+    const pdfData = await fetch(documentUrl).then(async (res) => await res.arrayBuffer());
+
+    const completedDocumentData = new Uint8Array(pdfData);
 
     // Load the PDF and check number of pages
     const completedPdf = await PDFDocument.load(completedDocumentData);
@@ -207,19 +233,24 @@ test.describe('Signing Certificate Tests', () => {
       },
     });
 
-    const documentData = await prisma.documentData
+    const recipient = recipients[0];
+
+    const documentData = await prisma.envelopeItem
       .findFirstOrThrow({
         where: {
-          envelopeItem: {
           envelopeId: document.id,
         },
-        },
       })
-      .then(async (data) => getFile(data));
+      .then(async (data) => {
+        const documentUrl = getEnvelopeDownloadUrl({
+          envelopeItem: data,
+          token: recipient.token,
+          version: 'signed',
+        });
+        return fetch(documentUrl).then(async (res) => await res.arrayBuffer());
+      });
 
-    const originalPdf = await PDFDocument.load(documentData);
-
-    const recipient = recipients[0];
+    const originalPdf = await PDFDocument.load(new Uint8Array(documentData));
 
     // Sign the document
     await page.goto(`/sign/${recipient.token}`);
@@ -258,7 +289,15 @@ test.describe('Signing Certificate Tests', () => {
       },
     });
 
-    const completedDocumentData = await getFile(completedDocument.envelopeItems[0].documentData);
+    const documentUrl = getEnvelopeDownloadUrl({
+      envelopeItem: completedDocument.envelopeItems[0],
+      token: recipient.token,
+      version: 'signed',
+    });
+
+    const completedDocumentData = await fetch(documentUrl).then(
+      async (res) => await res.arrayBuffer(),
+    );
 
     // Load the PDF and check number of pages
     const completedPdf = await PDFDocument.load(completedDocumentData);

packages/app-tests/e2e/templates/create-document-from-template.spec.ts

@@ -1,6 +1,5 @@
 import { expect, test } from '@playwright/test';
 import { DocumentDataType, TeamMemberRole } from '@prisma/client';
-import fs from 'fs';
 import path from 'path';
 
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
@@ -12,6 +11,10 @@ import { seedUser } from '@documenso/prisma/seed/users';
 import { apiSignin } from '../fixtures/authentication';
 
 const EXAMPLE_PDF_PATH = path.join(__dirname, '../../../../assets/example.pdf');
+const FIELD_ALIGNMENT_TEST_PDF_PATH = path.join(
+  __dirname,
+  '../../../../assets/field-font-alignment.pdf',
+);
 
 /**
  * 1. Create a template with all settings filled out
@@ -233,10 +236,6 @@ test('[TEMPLATE]: should create a document from a template with custom document'
   const { user, team } = await seedUser();
   const template = await seedBlankTemplate(user, team.id);
 
-  // Create a temporary PDF file for upload
-
-  const pdfContent = fs.readFileSync(EXAMPLE_PDF_PATH).toString('base64');
-
   await apiSignin({
     page,
     email: user.email,
@@ -277,7 +276,7 @@ test('[TEMPLATE]: should create a document from a template with custom document'
       }),
   ]);
 
-  await fileChooser.setFiles(EXAMPLE_PDF_PATH);
+  await fileChooser.setFiles(FIELD_ALIGNMENT_TEST_PDF_PATH);
 
   // Wait for upload to complete
   await expect(page.getByText('Remove')).toBeVisible();
@@ -314,8 +313,12 @@ test('[TEMPLATE]: should create a document from a template with custom document'
   expect(firstDocumentData.type).toEqual(expectedDocumentDataType);
 
   if (expectedDocumentDataType === DocumentDataType.BYTES_64) {
-    expect(firstDocumentData.data).toEqual(pdfContent);
-    expect(firstDocumentData.initialData).toEqual(pdfContent);
+    // Todo: Doesn't really work due to normalization of the PDF which won't let us directly compare the data.
+    // Probably need to do a pixel match
+    expect(firstDocumentData.data).not.toEqual(template.envelopeItems[0].documentData.data);
+    expect(firstDocumentData.initialData).not.toEqual(
+      template.envelopeItems[0].documentData.initialData,
+    );
   } else {
     // For S3, we expect the data/initialData to be the S3 path (non-empty string)
     expect(firstDocumentData.data).toBeTruthy();
@@ -336,8 +339,6 @@ test('[TEMPLATE]: should create a team document from a template with custom docu
 
   const template = await seedBlankTemplate(owner, team.id);
 
-  const pdfContent = fs.readFileSync(EXAMPLE_PDF_PATH).toString('base64');
-
   await apiSignin({
     page,
     email: owner.email,
@@ -378,7 +379,7 @@ test('[TEMPLATE]: should create a team document from a template with custom docu
       }),
   ]);
 
-  await fileChooser.setFiles(EXAMPLE_PDF_PATH);
+  await fileChooser.setFiles(FIELD_ALIGNMENT_TEST_PDF_PATH);
 
   // Wait for upload to complete
   await expect(page.getByText('Remove')).toBeVisible();
@@ -416,8 +417,12 @@ test('[TEMPLATE]: should create a team document from a template with custom docu
   expect(firstDocumentData.type).toEqual(expectedDocumentDataType);
 
   if (expectedDocumentDataType === DocumentDataType.BYTES_64) {
-    expect(firstDocumentData.data).toEqual(pdfContent);
-    expect(firstDocumentData.initialData).toEqual(pdfContent);
+    // Todo: Doesn't really work due to normalization of the PDF which won't let us directly compare the data.
+    // Probably need to do a pixel match
+    expect(firstDocumentData.data).not.toEqual(template.envelopeItems[0].documentData.data);
+    expect(firstDocumentData.initialData).not.toEqual(
+      template.envelopeItems[0].documentData.initialData,
+    );
   } else {
     // For S3, we expect the data/initialData to be the S3 path (non-empty string)
     expect(firstDocumentData.data).toBeTruthy();

packages/auth/server/lib/utils/handle-oauth-callback-url.ts

@@ -5,6 +5,7 @@ import { deleteCookie } from 'hono/cookie';
 
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { onCreateUserHook } from '@documenso/lib/server-only/user/create-user';
+import { isValidReturnTo, normalizeReturnTo } from '@documenso/lib/utils/is-valid-return-to';
 import { prisma } from '@documenso/prisma';
 
 import type { OAuthClientOptions } from '../../config';
@@ -177,6 +178,12 @@ export const validateOauth = async (options: HandleOAuthCallbackUrlOptions) => {
     redirectPath = '/';
   }
 
+  if (!isValidReturnTo(redirectPath)) {
+    redirectPath = '/';
+  }
+
+  redirectPath = normalizeReturnTo(redirectPath) || '/';
+
   const tokens = await oAuthClient.validateAuthorizationCode(
     token_endpoint,
     code,

packages/lib/client-only/download-pdf.ts

@@ -1,12 +1,14 @@
-import type { DocumentData } from '@prisma/client';
+import type { EnvelopeItem } from '@prisma/client';
 
-import { getFile } from '../universal/upload/get-file';
+import { getEnvelopeDownloadUrl } from '../utils/envelope-download';
 import { downloadFile } from './download-file';
 
 type DocumentVersion = 'original' | 'signed';
 
 type DownloadPDFProps = {
-  documentData: DocumentData;
+  envelopeItem: Pick<EnvelopeItem, 'id' | 'envelopeId'>;
+  token: string | undefined;
+
   fileName?: string;
   /**
    * Specifies which version of the document to download.
@@ -17,18 +19,18 @@ type DownloadPDFProps = {
 };
 
 export const downloadPDF = async ({
-  documentData,
+  envelopeItem,
+  token,
   fileName,
   version = 'signed',
 }: DownloadPDFProps) => {
-  const bytes = await getFile({
-    type: documentData.type,
-    data: version === 'signed' ? documentData.data : documentData.initialData,
+  const downloadUrl = getEnvelopeDownloadUrl({
+    envelopeItem: envelopeItem,
+    token,
+    version,
   });
 
-  const blob = new Blob([bytes], {
-    type: 'application/pdf',
-  });
+  const blob = await fetch(downloadUrl).then(async (res) => await res.blob());
 
   const baseTitle = (fileName ?? 'document').replace(/\.pdf$/, '');
   const suffix = version === 'signed' ? '_signed.pdf' : '.pdf';

packages/lib/client-only/providers/envelope-editor-provider.tsx

@@ -46,6 +46,7 @@ type EnvelopeEditorProviderValue = {
   setLocalEnvelope: (localEnvelope: Partial<TEnvelope>) => void;
 
   updateEnvelope: (envelopeUpdates: UpdateEnvelopePayload) => void;
+  updateEnvelopeAsync: (envelopeUpdates: UpdateEnvelopePayload) => Promise<void>;
   setRecipientsDebounced: (recipients: TSetEnvelopeRecipientsRequest['recipients']) => void;
   setRecipientsAsync: (recipients: TSetEnvelopeRecipientsRequest['recipients']) => Promise<void>;
 
@@ -66,8 +67,6 @@ type EnvelopeEditorProviderValue = {
   };
 
   syncEnvelope: () => Promise<void>;
-  // refetchEnvelope: () => Promise<void>;
-  // updateEnvelope: (envelope: TEnvelope) => Promise<void>;
 };
 
 interface EnvelopeEditorProviderProps {
@@ -151,7 +150,7 @@ export const EnvelopeEditorProvider = ({
   });
 
   const envelopeRecipientSetMutationQuery = trpc.envelope.recipient.set.useMutation({
-    onSuccess: ({ recipients }) => {
+    onSuccess: ({ data: recipients }) => {
       setEnvelope((prev) => ({
         ...prev,
         recipients,
@@ -197,7 +196,7 @@ export const EnvelopeEditorProvider = ({
     });
 
     // Insert the IDs into the local fields.
-    envelopeFields.fields.forEach((field) => {
+    envelopeFields.data.forEach((field) => {
       const localField = localFields.find((localField) => localField.formId === field.formId);
 
       if (localField && !localField.id) {
@@ -236,6 +235,13 @@ export const EnvelopeEditorProvider = ({
     setEnvelopeDebounced(envelopeUpdates);
   };
 
+  const updateEnvelopeAsync = async (envelopeUpdates: UpdateEnvelopePayload) => {
+    await envelopeUpdateMutationQuery.mutateAsync({
+      envelopeId: envelope.id,
+      ...envelopeUpdates,
+    });
+  };
+
   const getRecipientColorKey = useCallback(
     (recipientId: number) => {
       const recipientIndex = envelope.recipients.findIndex(
@@ -323,6 +329,7 @@ export const EnvelopeEditorProvider = ({
         setLocalEnvelope,
         getRecipientColorKey,
         updateEnvelope,
+        updateEnvelopeAsync,
         setRecipientsDebounced,
         setRecipientsAsync,
         editorFields,

packages/lib/client-only/providers/envelope-render-provider.tsx

@@ -1,13 +1,14 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import React from 'react';
 
-import type { DocumentData } from '@prisma/client';
+import type { Field, Recipient } from '@prisma/client';
 
 import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
 import { AVAILABLE_RECIPIENT_COLORS } from '@documenso/ui/lib/recipient-colors';
 
 import type { TEnvelope } from '../../types/envelope';
-import { getFile } from '../../universal/upload/get-file';
+import type { FieldRenderMode } from '../../universal/field-renderer/render-field';
+import { getEnvelopeDownloadUrl } from '../../utils/envelope-download';
 
 type FileData =
   | {
@@ -18,22 +19,31 @@ type FileData =
       status: 'loaded';
     };
 
+type EnvelopeRenderOverrideSettings = {
+  mode?: FieldRenderMode;
+  showRecipientTooltip?: boolean;
+  showRecipientSigningStatus?: boolean;
+};
+
 type EnvelopeRenderItem = TEnvelope['envelopeItems'][number];
 
 type EnvelopeRenderProviderValue = {
-  getPdfBuffer: (documentDataId: string) => FileData | null;
+  getPdfBuffer: (envelopeItemId: string) => FileData | null;
   envelopeItems: EnvelopeRenderItem[];
   currentEnvelopeItem: EnvelopeRenderItem | null;
   setCurrentEnvelopeItem: (envelopeItemId: string) => void;
-  fields: TEnvelope['fields'];
+  fields: Field[];
+  recipients: Pick<Recipient, 'id' | 'name' | 'email' | 'signingStatus'>[];
   getRecipientColorKey: (recipientId: number) => TRecipientColor;
 
   renderError: boolean;
   setRenderError: (renderError: boolean) => void;
+  overrideSettings?: EnvelopeRenderOverrideSettings;
 };
 
 interface EnvelopeRenderProviderProps {
   children: React.ReactNode;
+
   envelope: Pick<TEnvelope, 'envelopeItems'>;
 
   /**
@@ -41,14 +51,27 @@ interface EnvelopeRenderProviderProps {
    *
    * Only pass if the CustomRenderer you are passing in wants fields.
    */
-  fields?: TEnvelope['fields'];
+  fields?: Field[];
 
   /**
-   * Optional recipient IDs used to determine the color of the fields.
+   * Optional recipient used to determine the color of the fields and hover
+   * previews.
    *
    * Only required for generic page renderers.
    */
-  recipientIds?: number[];
+  recipients?: Pick<Recipient, 'id' | 'name' | 'email' | 'signingStatus'>[];
+
+  /**
+   * The token to access the envelope.
+   *
+   * If not provided, it will be assumed that the current user can access the document.
+   */
+  token: string | undefined;
+
+  /**
+   * Custom override settings for generic page renderers.
+   */
+  overrideSettings?: EnvelopeRenderOverrideSettings;
 }
 
 const EnvelopeRenderContext = createContext<EnvelopeRenderProviderValue | null>(null);
@@ -70,7 +93,9 @@ export const EnvelopeRenderProvider = ({
   children,
   envelope,
   fields,
-  recipientIds = [],
+  token,
+  recipients = [],
+  overrideSettings,
 }: EnvelopeRenderProviderProps) => {
   // Indexed by documentDataId.
   const [files, setFiles] = useState<Record<string, FileData>>({});
@@ -84,27 +109,35 @@ export const EnvelopeRenderProvider = ({
     [envelope.envelopeItems],
   );
 
-  const loadEnvelopeItemPdfFile = async (documentData: DocumentData) => {
-    if (files[documentData.id]?.status === 'loading') {
+  const loadEnvelopeItemPdfFile = async (envelopeItem: EnvelopeRenderItem) => {
+    if (files[envelopeItem.id]?.status === 'loading') {
       return;
     }
 
-    if (!files[documentData.id]) {
+    if (!files[envelopeItem.id]) {
       setFiles((prev) => ({
         ...prev,
-        [documentData.id]: {
+        [envelopeItem.id]: {
           status: 'loading',
         },
       }));
     }
 
     try {
-      const file = await getFile(documentData);
+      const downloadUrl = getEnvelopeDownloadUrl({
+        envelopeItem: envelopeItem,
+        token,
+        version: 'signed',
+      });
+
+      const blob = await fetch(downloadUrl).then(async (res) => await res.blob());
+
+      const file = await blob.arrayBuffer();
 
       setFiles((prev) => ({
         ...prev,
-        [documentData.id]: {
-          file,
+        [envelopeItem.id]: {
+          file: new Uint8Array(file),
           status: 'loaded',
         },
       }));
@@ -113,7 +146,7 @@ export const EnvelopeRenderProvider = ({
 
       setFiles((prev) => ({
         ...prev,
-        [documentData.id]: {
+        [envelopeItem.id]: {
           status: 'error',
         },
       }));
@@ -121,8 +154,8 @@ export const EnvelopeRenderProvider = ({
   };
 
   const getPdfBuffer = useCallback(
-    (documentDataId: string) => {
-      return files[documentDataId] || null;
+    (envelopeItemId: string) => {
+      return files[envelopeItemId] || null;
     },
     [files],
   );
@@ -142,13 +175,18 @@ export const EnvelopeRenderProvider = ({
 
   // Look for any missing pdf files and load them.
   useEffect(() => {
-    const missingFiles = envelope.envelopeItems.filter((item) => !files[item.documentDataId]);
+    const missingFiles = envelope.envelopeItems.filter((item) => !files[item.id]);
 
     for (const item of missingFiles) {
-      void loadEnvelopeItemPdfFile(item.documentData);
+      void loadEnvelopeItemPdfFile(item);
     }
   }, [envelope.envelopeItems]);
 
+  const recipientIds = useMemo(
+    () => recipients.map((recipient) => recipient.id).sort(),
+    [recipients],
+  );
+
   const getRecipientColorKey = useCallback(
     (recipientId: number) => {
       const recipientIndex = recipientIds.findIndex((id) => id === recipientId);
@@ -168,9 +206,11 @@ export const EnvelopeRenderProvider = ({
         currentEnvelopeItem: currentItem,
         setCurrentEnvelopeItem,
         fields: fields ?? [],
+        recipients,
         getRecipientColorKey,
         renderError,
         setRenderError,
+        overrideSettings,
       }}
     >
       {children}

packages/lib/server-only/admin/admin-find-documents.ts

@@ -78,6 +78,14 @@ export const adminFindDocuments = async ({
             url: true,
           },
         },
+        envelopeItems: {
+          select: {
+            id: true,
+            envelopeId: true,
+            title: true,
+            order: true,
+          },
+        },
       },
     }),
     prisma.envelope.count({

packages/lib/server-only/document/find-documents.ts

@@ -248,6 +248,14 @@ export const findDocuments = async ({
             url: true,
           },
         },
+        envelopeItems: {
+          select: {
+            id: true,
+            envelopeId: true,
+            title: true,
+            order: true,
+          },
+        },
       },
     }),
     prisma.envelope.count({

packages/lib/server-only/document/get-document-by-token.ts

@@ -92,6 +92,10 @@ export const getDocumentAndSenderByToken = async ({
       },
       envelopeItems: {
         select: {
+          id: true,
+          title: true,
+          order: true,
+          envelopeId: true,
           documentData: true,
         },
       },

packages/lib/server-only/document/get-document-with-details-by-id.ts

@@ -63,5 +63,8 @@ export const getDocumentWithDetailsById = async ({
       documentId: legacyDocumentId,
       password: null,
     },
+    envelopeItems: envelope.envelopeItems.map((envelopeItem) => ({
+      ...envelopeItem,
+    })),
   };
 };

packages/lib/server-only/envelope/get-envelope-for-direct-template-signing.ts

@@ -143,7 +143,7 @@ export const getEnvelopeForDirectTemplateSigning = async ({
     envelope,
     recipient: {
       ...recipient,
-      token: envelope.directLink?.token || '',
+      directToken: envelope.directLink?.token || '',
     },
     recipientSignature: null,
     isRecipientsTurn: true,

packages/lib/server-only/envelope/get-envelope-for-recipient-signing.ts

@@ -2,7 +2,6 @@ import { DocumentSigningOrder, DocumentStatus, EnvelopeType, SigningStatus } fro
 import { z } from 'zod';
 
 import { prisma } from '@documenso/prisma';
-import DocumentDataSchema from '@documenso/prisma/generated/zod/modelSchema/DocumentDataSchema';
 import DocumentMetaSchema from '@documenso/prisma/generated/zod/modelSchema/DocumentMetaSchema';
 import EnvelopeItemSchema from '@documenso/prisma/generated/zod/modelSchema/EnvelopeItemSchema';
 import EnvelopeSchema from '@documenso/prisma/generated/zod/modelSchema/EnvelopeSchema';
@@ -72,20 +71,11 @@ export const ZEnvelopeForSigningResponse = z.object({
       .array(),
 
     envelopeItems: EnvelopeItemSchema.pick({
+      envelopeId: true,
       id: true,
       title: true,
-      documentDataId: true,
       order: true,
-    })
-      .extend({
-        documentData: DocumentDataSchema.pick({
-          type: true,
-          id: true,
-          data: true,
-          initialData: true,
-        }),
-      })
-      .array(),
+    }).array(),
 
     team: TeamSchema.pick({
       id: true,
@@ -117,6 +107,7 @@ export const ZEnvelopeForSigningResponse = z.object({
     signingOrder: true,
     rejectionReason: true,
   }).extend({
+    directToken: z.string().nullish(),
     fields: ZFieldSchema.omit({
       documentId: true,
       templateId: true,
@@ -199,11 +190,7 @@ export const getEnvelopeForRecipientSigning = async ({
           signingOrder: 'asc',
         },
       },
-      envelopeItems: {
-        include: {
-          documentData: true,
-        },
-      },
+      envelopeItems: true,
       team: {
         select: {
           id: true,

packages/lib/server-only/template/create-document-from-direct-template.ts

@@ -82,6 +82,7 @@ type CreatedDirectRecipientField = {
 
 export const ZCreateDocumentFromDirectTemplateResponseSchema = z.object({
   token: z.string(),
+  envelopeId: z.string(),
   documentId: z.number(),
   recipientId: z.number(),
 });
@@ -815,6 +816,7 @@ export const createDocumentFromDirectTemplate = async ({
 
   return {
     token,
+    envelopeId: createdEnvelope.id,
     documentId: incrementedDocumentId.documentId,
     recipientId,
   };

packages/lib/server-only/template/get-template-by-direct-link-token.ts

@@ -87,5 +87,9 @@ export const getTemplateByDirectLinkToken = async ({
     },
     recipients: recipientsWithMappedFields,
     fields: recipientsWithMappedFields.flatMap((recipient) => recipient.fields),
+    envelopeItems: envelope.envelopeItems.map((item) => ({
+      id: item.id,
+      envelopeId: item.envelopeId,
+    })),
   };
 };

packages/lib/server-only/template/get-template-by-id.ts

@@ -29,6 +29,7 @@ export const getTemplateById = async ({ id, userId, teamId }: GetTemplateByIdOpt
       envelopeItems: {
         select: {
           id: true,
+          envelopeId: true,
           documentData: true,
         },
       },
@@ -94,5 +95,9 @@ export const getTemplateById = async ({ id, userId, teamId }: GetTemplateByIdOpt
         }
       : null,
     id: mapSecondaryIdToTemplateId(envelope.secondaryId),
+    envelopeItems: envelope.envelopeItems.map((envelopeItem) => ({
+      id: envelopeItem.id,
+      envelopeId: envelopeItem.envelopeId,
+    })),
   };
 };

packages/lib/translations/en/web.po

@@ -53,7 +53,7 @@ msgstr "\"Team Name\" has invited you to sign \"example document\"."
 
 #: apps/remix/app/components/general/envelope-signing/envelope-signer-form.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-form.tsx
-#: apps/remix/app/components/embed/embed-document-signing-page.tsx
+#: apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
 msgid "(You)"
 msgstr "(You)"
 
@@ -1076,6 +1076,10 @@ msgstr "Add Placeholder Recipient"
 msgid "Add Placeholders"
 msgstr "Add Placeholders"
 
+#: apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
+msgid "Add Recipients"
+msgstr "Add Recipients"
+
 #: apps/remix/app/components/general/envelope-editor/envelope-editor-recipient-form.tsx
 #: apps/remix/app/components/embed/authoring/configure-document-recipients.tsx
 #: packages/ui/primitives/document-flow/add-signers.tsx
@@ -1124,6 +1128,8 @@ msgstr "Add this URL to your provider's allowed redirect URIs"
 msgid "Additional brand information to display at the bottom of emails"
 msgstr "Additional brand information to display at the bottom of emails"
 
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
 #: packages/lib/constants/teams-translations.ts
 #: packages/lib/constants/organisations-translations.ts
 msgid "Admin"
@@ -1363,17 +1369,6 @@ msgstr "An error occurred while disabling direct link signing."
 msgid "An error occurred while disabling the user."
 msgstr "An error occurred while disabling the user."
 
-#: apps/remix/app/components/tables/inbox-table.tsx
-#: apps/remix/app/components/tables/documents-table-action-dropdown.tsx
-#: apps/remix/app/components/tables/documents-table-action-dropdown.tsx
-#: apps/remix/app/components/tables/documents-table-action-button.tsx
-#: apps/remix/app/components/general/share-document-download-button.tsx
-#: apps/remix/app/components/general/document/document-page-view-dropdown.tsx
-#: apps/remix/app/components/general/document/document-page-view-dropdown.tsx
-#: apps/remix/app/components/general/document/document-page-view-button.tsx
-msgid "An error occurred while downloading your document."
-msgstr "An error occurred while downloading your document."
-
 #: apps/remix/app/components/dialogs/template-duplicate-dialog.tsx
 msgid "An error occurred while duplicating template."
 msgstr "An error occurred while duplicating template."
@@ -1455,6 +1450,10 @@ msgstr "An error occurred while signing as assistant."
 msgid "An error occurred while signing the document."
 msgstr "An error occurred while signing the document."
 
+#: apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx
+msgid "An error occurred while signing the field."
+msgstr "An error occurred while signing the field."
+
 #: apps/remix/app/components/general/billing-plans.tsx
 #: apps/remix/app/components/general/billing-plans.tsx
 msgid "An error occurred while trying to create a checkout session."
@@ -1538,6 +1537,7 @@ msgstr "An unexpected error occurred."
 #: apps/remix/app/components/dialogs/organisation-delete-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-create-dialog.tsx
 #: apps/remix/app/components/dialogs/envelope-item-delete-dialog.tsx
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
 #: apps/remix/app/components/dialogs/admin-organisation-create-dialog.tsx
 #: apps/remix/app/components/dialogs/admin-document-delete-dialog.tsx
 #: apps/remix/app/components/dialogs/account-delete-dialog.tsx
@@ -1694,7 +1694,7 @@ msgstr "Assist"
 msgid "Assist Document"
 msgstr "Assist Document"
 
-#: apps/remix/app/components/embed/embed-document-signing-page.tsx
+#: apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
 msgid "Assist with signing"
 msgstr "Assist with signing"
 
@@ -2038,6 +2038,7 @@ msgstr "Can prepare"
 #: apps/remix/app/components/dialogs/claim-delete-dialog.tsx
 #: apps/remix/app/components/dialogs/claim-create-dialog.tsx
 #: apps/remix/app/components/dialogs/assistant-confirmation-dialog.tsx
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
 #: apps/remix/app/components/dialogs/admin-organisation-create-dialog.tsx
 #: packages/ui/primitives/signature-pad/signature-pad-dialog.tsx
 #: packages/ui/primitives/document-flow/send-document-action-dialog.tsx
@@ -2165,10 +2166,6 @@ msgstr "Clear filters"
 msgid "Clear Signature"
 msgstr "Clear Signature"
 
-#: apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
-msgid "Click here to add a recipient"
-msgstr "Click here to add a recipient"
-
 #: apps/remix/app/components/tables/settings-public-profile-templates-table.tsx
 msgid "Click here to get started"
 msgstr "Click here to get started"
@@ -2191,7 +2188,7 @@ msgstr "Click to copy signing link for sending to recipient"
 #: apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-form.tsx
 #: apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx
-#: apps/remix/app/components/embed/embed-document-signing-page.tsx
+#: apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
 #: apps/remix/app/components/embed/embed-direct-template-client-page.tsx
 #: apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx
 msgid "Click to insert field"
@@ -2234,10 +2231,6 @@ msgstr "Client secret is required"
 msgid "Close"
 msgstr "Close"
 
-#: apps/remix/app/components/general/envelope-editor/envelope-editor-preview-page.tsx
-msgid "Coming soon"
-msgstr "Coming soon"
-
 #: apps/remix/app/components/embed/authoring/configure-document-advanced-settings.tsx
 msgid "Communication"
 msgstr "Communication"
@@ -2249,8 +2242,8 @@ msgstr "Compare all plans and features in detail"
 #: apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx
 #: apps/remix/app/components/forms/signup.tsx
-#: apps/remix/app/components/embed/embed-document-signing-page.tsx
-#: apps/remix/app/components/embed/embed-document-signing-page.tsx
+#: apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
+#: apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
 #: apps/remix/app/components/embed/embed-direct-template-client-page.tsx
 #: apps/remix/app/components/embed/embed-direct-template-client-page.tsx
 #: apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx
@@ -2296,6 +2289,12 @@ msgstr "Completed Documents"
 msgid "Completed on {formattedDate}"
 msgstr "Completed on {formattedDate}"
 
+#: packages/ui/components/pdf-viewer/pdf-viewer-konva.tsx
+#: packages/ui/components/pdf-viewer/pdf-viewer-konva.tsx
+#: packages/ui/components/pdf-viewer/pdf-viewer-konva.tsx
+msgid "Configuration Error"
+msgstr "Configuration Error"
+
 #. placeholder {0}: parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[currentField.type])
 #: apps/remix/app/components/embed/authoring/field-advanced-settings-drawer.tsx
 msgid "Configure {0} Field"
@@ -3567,20 +3566,17 @@ msgstr "Domain Name"
 msgid "Don't have an account? <0>Sign up</0>"
 msgstr "Don't have an account? <0>Sign up</0>"
 
+#: apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx
 #: apps/remix/app/components/tables/organisation-billing-invoices-table.tsx
 #: apps/remix/app/components/tables/inbox-table.tsx
 #: apps/remix/app/components/tables/documents-table-action-dropdown.tsx
-#: apps/remix/app/components/tables/documents-table-action-dropdown.tsx
 #: apps/remix/app/components/tables/documents-table-action-button.tsx
-#: apps/remix/app/components/tables/documents-table-action-button.tsx
-#: apps/remix/app/components/general/share-document-download-button.tsx
-#: apps/remix/app/components/general/document/document-page-view-dropdown.tsx
 #: apps/remix/app/components/general/document/document-page-view-dropdown.tsx
 #: apps/remix/app/components/general/document/document-page-view-button.tsx
-#: apps/remix/app/components/general/document/document-page-view-button.tsx
+#: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
+#: apps/remix/app/components/general/document/document-certificate-qr-view.tsx
 #: apps/remix/app/components/forms/2fa/view-recovery-codes-dialog.tsx
 #: apps/remix/app/components/forms/2fa/enable-authenticator-app-dialog.tsx
-#: packages/ui/components/document/document-download-button.tsx
 #: packages/email/template-components/template-document-completed.tsx
 msgid "Download"
 msgstr "Download"
@@ -3597,11 +3593,6 @@ msgstr "Download Certificate"
 msgid "Download Files"
 msgstr "Download Files"
 
-#: apps/remix/app/components/tables/documents-table-action-dropdown.tsx
-#: apps/remix/app/components/general/document/document-page-view-dropdown.tsx
-msgid "Download Original"
-msgstr "Download Original"
-
 #: apps/remix/app/components/general/envelope-signing/envelope-signer-header.tsx
 #: apps/remix/app/components/general/envelope-editor/envelope-editor.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx
@@ -3752,7 +3743,7 @@ msgstr "Electronic Signature Disclosure"
 #: apps/remix/app/components/forms/signin.tsx
 #: apps/remix/app/components/forms/profile.tsx
 #: apps/remix/app/components/forms/forgot-password.tsx
-#: apps/remix/app/components/embed/embed-document-signing-page.tsx
+#: apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
 #: apps/remix/app/components/embed/embed-direct-template-client-page.tsx
 #: apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx
 #: apps/remix/app/components/embed/authoring/configure-document-recipients.tsx
@@ -4023,10 +4014,6 @@ msgstr "Enter your text here"
 msgid "Enterprise"
 msgstr "Enterprise"
 
-#: packages/ui/primitives/document-upload.tsx
-msgid "Envelope (beta)"
-msgstr "Envelope (beta)"
-
 #: apps/remix/app/components/dialogs/envelope-distribute-dialog.tsx
 msgid "Envelope distributed"
 msgstr "Envelope distributed"
@@ -4072,7 +4059,6 @@ msgstr "Envelope updated"
 #: apps/remix/app/routes/_authenticated+/settings+/security.linked-accounts.tsx
 #: apps/remix/app/routes/_authenticated+/admin+/users.$id.tsx
 #: apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx
-#: apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx
 #: apps/remix/app/routes/_authenticated+/admin+/documents.$id.tsx
 #: apps/remix/app/components/general/verify-email-banner.tsx
 #: apps/remix/app/components/general/template/template-edit-form.tsx
@@ -4081,6 +4067,7 @@ msgstr "Envelope updated"
 #: apps/remix/app/components/general/template/template-edit-form.tsx
 #: apps/remix/app/components/general/template/template-edit-form.tsx
 #: apps/remix/app/components/general/template/template-edit-form.tsx
+#: apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-text-field.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-text-field.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx
@@ -4429,7 +4416,7 @@ msgstr "Free Signature Settings"
 #: apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx
 #: apps/remix/app/components/forms/signup.tsx
 #: apps/remix/app/components/forms/profile.tsx
-#: apps/remix/app/components/embed/embed-document-signing-page.tsx
+#: apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
 #: apps/remix/app/components/embed/embed-direct-template-client-page.tsx
 #: apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx
 msgid "Full Name"
@@ -4574,7 +4561,7 @@ msgstr "has invited you to view this document"
 msgid "Having an assistant as the last signer means they will be unable to take any action as there are no subsequent signers to assist."
 msgstr "Having an assistant as the last signer means they will be unable to take any action as there are no subsequent signers to assist."
 
-#: apps/remix/app/components/embed/embed-document-signing-page.tsx
+#: apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
 msgid "Help complete the document for other signers."
 msgstr "Help complete the document for other signers."
 
@@ -5252,6 +5239,8 @@ msgstr "Manage your passkeys."
 msgid "Manage your site settings here"
 msgstr "Manage your site settings here"
 
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
 #: packages/lib/constants/teams-translations.ts
 #: packages/lib/constants/organisations-translations.ts
 msgid "Manager"
@@ -5300,6 +5289,8 @@ msgstr "Maximum number of uploaded files per envelope allowed"
 #: apps/remix/app/components/tables/team-members-table.tsx
 #: apps/remix/app/components/tables/admin-organisations-table.tsx
 #: apps/remix/app/components/dialogs/team-member-create-dialog.tsx
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
 #: packages/lib/constants/teams-translations.ts
 #: packages/lib/constants/organisations-translations.ts
 msgid "Member"
@@ -5310,10 +5301,6 @@ msgstr "Member"
 msgid "Member Count"
 msgstr "Member Count"
 
-#: apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx
-msgid "Member promoted to owner successfully"
-msgstr "Member promoted to owner successfully"
-
 #: apps/remix/app/components/tables/organisation-members-table.tsx
 msgid "Member Since"
 msgstr "Member Since"
@@ -5346,6 +5333,10 @@ msgstr "Message <0>(Optional)</0>"
 msgid "Min"
 msgstr "Min"
 
+#: apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx
+msgid "Missing Recipients"
+msgstr "Missing Recipients"
+
 #: apps/remix/app/components/general/template/template-page-view-recipients.tsx
 #: apps/remix/app/components/general/document/document-page-view-recipients.tsx
 msgid "Modify recipients"
@@ -5484,7 +5475,7 @@ msgstr "New Password"
 msgid "New Template"
 msgstr "New Template"
 
-#: apps/remix/app/components/embed/embed-document-signing-page.tsx
+#: apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
 #: apps/remix/app/components/embed/embed-direct-template-client-page.tsx
 #: apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx
 #: apps/remix/app/components/dialogs/team-member-create-dialog.tsx
@@ -5932,9 +5923,15 @@ msgstr "Override organisation settings"
 #: apps/remix/app/components/tables/organisation-members-table.tsx
 #: apps/remix/app/components/tables/admin-organisations-table.tsx
 #: apps/remix/app/components/tables/admin-organisations-table.tsx
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
 msgid "Owner"
 msgstr "Owner"
 
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
+msgid "Ownership transferred to {organisationMemberName}."
+msgstr "Ownership transferred to {organisationMemberName}."
+
 #. placeholder {0}: table.getState().pagination.pageIndex + 1
 #. placeholder {1}: table.getPageCount() || 1
 #: packages/ui/primitives/data-table-pagination.tsx
@@ -6039,6 +6036,7 @@ msgstr "PDF Document"
 #: apps/remix/app/components/general/envelope-editor/envelope-editor-header.tsx
 #: apps/remix/app/components/general/document/document-status.tsx
 #: apps/remix/app/components/general/document/document-page-view-recipients.tsx
+#: packages/ui/components/document/envelope-recipient-field-tooltip.tsx
 #: packages/ui/components/document/document-read-only-fields.tsx
 #: packages/lib/constants/document.ts
 msgid "Pending"
@@ -6376,10 +6374,6 @@ msgstr "Profile updated"
 msgid "Progress"
 msgstr "Progress"
 
-#: apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx
-msgid "Promote to owner"
-msgstr "Promote to owner"
-
 #: apps/remix/app/routes/_authenticated+/settings+/security.linked-accounts.tsx
 msgid "Provider"
 msgstr "Provider"
@@ -6880,6 +6874,7 @@ msgstr "Right"
 #: apps/remix/app/components/dialogs/team-member-update-dialog.tsx
 #: apps/remix/app/components/dialogs/team-group-update-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-member-update-dialog.tsx
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
 msgid "Role"
 msgstr "Role"
 
@@ -7339,7 +7334,7 @@ msgstr "Sign as<0>{0} <1>({1})</1></0>"
 msgid "Sign Checkbox Field"
 msgstr "Sign Checkbox Field"
 
-#: apps/remix/app/components/embed/embed-document-signing-page.tsx
+#: apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
 #: apps/remix/app/components/embed/embed-direct-template-client-page.tsx
 #: apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx
 msgid "Sign document"
@@ -7407,7 +7402,7 @@ msgstr "Sign Signature Field"
 msgid "Sign Text Field"
 msgstr "Sign Text Field"
 
-#: apps/remix/app/components/embed/embed-document-signing-page.tsx
+#: apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
 #: apps/remix/app/components/embed/embed-direct-template-client-page.tsx
 #: apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx
 msgid "Sign the document to complete the process."
@@ -7449,7 +7444,7 @@ msgstr "Sign your initials into the field"
 #: apps/remix/app/components/general/document-signing/document-signing-form.tsx
 #: apps/remix/app/components/general/direct-template/direct-template-signing-form.tsx
 #: apps/remix/app/components/forms/profile.tsx
-#: apps/remix/app/components/embed/embed-document-signing-page.tsx
+#: apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
 #: apps/remix/app/components/embed/embed-direct-template-client-page.tsx
 #: apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx
 #: packages/ui/primitives/template-flow/add-template-fields.tsx
@@ -7483,13 +7478,10 @@ msgstr "Signature types"
 msgid "Signatures Collected"
 msgstr "Signatures Collected"
 
-#: apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx
-msgid "Signatures will appear once the document has been completed"
-msgstr "Signatures will appear once the document has been completed"
-
 #: apps/remix/app/routes/_internal+/[__htmltopdf]+/certificate.tsx
 #: apps/remix/app/components/general/document/document-page-view-recipients.tsx
 #: apps/remix/app/components/dialogs/envelope-download-dialog.tsx
+#: packages/ui/components/document/envelope-recipient-field-tooltip.tsx
 #: packages/ui/components/document/document-read-only-fields.tsx
 msgid "Signed"
 msgstr "Signed"
@@ -7535,7 +7527,7 @@ msgstr "Signing certificate provided by"
 msgid "Signing Complete!"
 msgstr "Signing Complete!"
 
-#: apps/remix/app/components/embed/embed-document-signing-page.tsx
+#: apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
 msgid "Signing for"
 msgstr "Signing for"
 
@@ -7595,11 +7587,6 @@ msgstr "Some signers have not been assigned a signature field. Please assign at
 #: apps/remix/app/components/tables/settings-security-passkey-table-actions.tsx
 #: apps/remix/app/components/tables/organisation-member-invites-table.tsx
 #: apps/remix/app/components/tables/organisation-member-invites-table.tsx
-#: apps/remix/app/components/tables/inbox-table.tsx
-#: apps/remix/app/components/tables/documents-table-action-dropdown.tsx
-#: apps/remix/app/components/tables/documents-table-action-dropdown.tsx
-#: apps/remix/app/components/tables/documents-table-action-button.tsx
-#: apps/remix/app/components/general/share-document-download-button.tsx
 #: apps/remix/app/components/general/billing-plans.tsx
 #: apps/remix/app/components/general/billing-plans.tsx
 #: apps/remix/app/components/general/template/template-drop-zone-wrapper.tsx
@@ -7610,16 +7597,14 @@ msgstr "Some signers have not been assigned a signature field. Please assign at
 #: apps/remix/app/components/general/organisations/organisation-billing-portal-button.tsx
 #: apps/remix/app/components/general/organisations/organisation-billing-banner.tsx
 #: apps/remix/app/components/general/envelope-signing/envelope-signing-complete-dialog.tsx
+#: apps/remix/app/components/general/envelope-signing/envelope-signing-complete-dialog.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-auth-page.tsx
 #: apps/remix/app/components/general/document-signing/document-signing-auth-account.tsx
-#: apps/remix/app/components/general/document/document-page-view-dropdown.tsx
-#: apps/remix/app/components/general/document/document-page-view-dropdown.tsx
-#: apps/remix/app/components/general/document/document-page-view-button.tsx
 #: apps/remix/app/components/general/document/document-certificate-download-button.tsx
 #: apps/remix/app/components/general/document/document-audit-log-download-button.tsx
 #: apps/remix/app/components/general/direct-template/direct-template-signing-auth-page.tsx
 #: apps/remix/app/components/general/direct-template/direct-template-page.tsx
-#: apps/remix/app/components/embed/embed-document-signing-page.tsx
+#: apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
 #: apps/remix/app/components/embed/embed-direct-template-client-page.tsx
 #: apps/remix/app/components/dialogs/template-direct-link-dialog.tsx
 #: apps/remix/app/components/dialogs/template-direct-link-dialog.tsx
@@ -7658,6 +7643,11 @@ msgstr "Something went wrong while loading the document."
 msgid "Something went wrong while loading your passkeys."
 msgstr "Something went wrong while loading your passkeys."
 
+#: packages/ui/components/pdf-viewer/pdf-viewer-konva.tsx
+#: packages/ui/components/pdf-viewer/pdf-viewer-konva.tsx
+msgid "Something went wrong while rendering the document, some fields may be missing or corrupted."
+msgstr "Something went wrong while rendering the document, some fields may be missing or corrupted."
+
 #: apps/remix/app/components/general/verify-email-banner.tsx
 msgid "Something went wrong while sending the confirmation email."
 msgstr "Something went wrong while sending the confirmation email."
@@ -7808,7 +7798,6 @@ msgstr "Subscription invalid"
 #: apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx
 #: apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx
 #: apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx
-#: apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx
 #: apps/remix/app/components/tables/settings-security-passkey-table-actions.tsx
 #: apps/remix/app/components/tables/settings-security-passkey-table-actions.tsx
 #: apps/remix/app/components/tables/organisation-member-invites-table.tsx
@@ -7853,6 +7842,7 @@ msgstr "Subscription invalid"
 #: apps/remix/app/components/dialogs/organisation-delete-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-create-dialog.tsx
 #: apps/remix/app/components/dialogs/envelope-item-delete-dialog.tsx
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
 #: apps/remix/app/components/dialogs/admin-organisation-create-dialog.tsx
 msgid "Success"
 msgstr "Success"
@@ -8523,6 +8513,10 @@ msgstr "The token you have used to reset your password is either expired or it n
 msgid "The two-factor authentication code provided is incorrect"
 msgstr "The two-factor authentication code provided is incorrect"
 
+#: apps/remix/app/components/forms/editor/editor-field-signature-form.tsx
+msgid "The typed signature font size"
+msgstr "The typed signature font size"
+
 #: packages/ui/components/document/document-signature-settings-tooltip.tsx
 msgid "The types of signatures that recipients are allowed to use when signing the document."
 msgstr "The types of signatures that recipients are allowed to use when signing the document."
@@ -8576,6 +8570,10 @@ msgstr "There are no completed documents yet. Documents that you have created or
 msgid "There was an error uploading your file. Please try again."
 msgstr "There was an error uploading your file. Please try again."
 
+#: packages/ui/components/pdf-viewer/pdf-viewer-konva.tsx
+msgid "There was an issue rendering some fields, please review the fields and try again."
+msgstr "There was an issue rendering some fields, please review the fields and try again."
+
 #: packages/ui/components/document/document-global-auth-action-select.tsx
 msgid "These can be overriden by setting the authentication requirements directly on each recipient in the next step. Multiple methods can be selected."
 msgstr "These can be overriden by setting the authentication requirements directly on each recipient in the next step. Multiple methods can be selected."
@@ -8724,10 +8722,6 @@ msgstr "This envelope could not be distributed at this time. Please try again."
 msgid "This envelope could not be resent at this time. Please try again."
 msgstr "This envelope could not be resent at this time. Please try again."
 
-#: apps/remix/app/components/general/envelope-editor/envelope-editor-preview-page.tsx
-msgid "This feature is coming soon"
-msgstr "This feature is coming soon"
-
 #: packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
 msgid "This field cannot be modified or deleted. When you share this template's direct link or add it to your public profile, anyone who accesses it can input their name and email, and fill in the fields assigned to them."
 msgstr "This field cannot be modified or deleted. When you share this template's direct link or add it to your public profile, anyone who accesses it can input their name and email, and fill in the fields assigned to them."
@@ -9199,6 +9193,7 @@ msgstr "Untitled Group"
 #: apps/remix/app/components/dialogs/organisation-member-update-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-email-update-dialog.tsx
 #: apps/remix/app/components/dialogs/folder-update-dialog.tsx
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 #: packages/ui/primitives/document-flow/add-subject.tsx
 msgid "Update"
@@ -9235,6 +9230,7 @@ msgstr "Update organisation"
 
 #: apps/remix/app/components/dialogs/organisation-member-update-dialog.tsx
 #: apps/remix/app/components/dialogs/organisation-member-update-dialog.tsx
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
 msgid "Update organisation member"
 msgstr "Update organisation member"
 
@@ -9255,9 +9251,11 @@ msgstr "Update profile"
 msgid "Update Recipient"
 msgstr "Update Recipient"
 
+#: apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx
 #: apps/remix/app/components/tables/team-members-table.tsx
 #: apps/remix/app/components/tables/team-groups-table.tsx
 #: apps/remix/app/components/tables/organisation-members-table.tsx
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
 msgid "Update role"
 msgstr "Update role"
 
@@ -9296,6 +9294,10 @@ msgstr "Update user"
 msgid "Update webhook"
 msgstr "Update webhook"
 
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
+msgid "Updated {organisationMemberName} to {roleLabel}."
+msgstr "Updated {organisationMemberName} to {roleLabel}."
+
 #: apps/remix/app/components/forms/password.tsx
 msgid "Updating password..."
 msgstr "Updating password..."
@@ -9366,6 +9368,10 @@ msgstr "Upload Document"
 msgid "Upload documents and add recipients"
 msgstr "Upload documents and add recipients"
 
+#: packages/ui/primitives/document-upload.tsx
+msgid "Upload Envelope"
+msgstr "Upload Envelope"
+
 #: apps/remix/app/components/general/template/template-drop-zone-wrapper.tsx
 #: apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx
 #: apps/remix/app/components/general/document/envelope-upload-button.tsx
@@ -9662,10 +9668,6 @@ msgstr "View more"
 msgid "View next document"
 msgstr "View next document"
 
-#: apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx
-msgid "View Original Document"
-msgstr "View Original Document"
-
 #: apps/remix/app/components/tables/admin-organisations-table.tsx
 msgid "View owner"
 msgstr "View owner"
@@ -9780,10 +9782,6 @@ msgstr "We are unable to update this passkey at the moment. Please try again lat
 msgid "We couldn't create a Stripe customer. Please try again."
 msgstr "We couldn't create a Stripe customer. Please try again."
 
-#: apps/remix/app/routes/_authenticated+/admin+/organisations.$id.tsx
-msgid "We couldn't promote the member to owner. Please try again."
-msgstr "We couldn't promote the member to owner. Please try again."
-
 #: apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.groups.$id.tsx
 msgid "We couldn't update the group. Please try again."
 msgstr "We couldn't update the group. Please try again."
@@ -9946,6 +9944,7 @@ msgid "We encountered an unknown error while attempting to update the template.
 msgstr "We encountered an unknown error while attempting to update the template. Please try again later."
 
 #: apps/remix/app/components/dialogs/organisation-member-update-dialog.tsx
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
 msgid "We encountered an unknown error while attempting to update this organisation member. Please try again later."
 msgstr "We encountered an unknown error while attempting to update this organisation member. Please try again later."
 
@@ -10018,9 +10017,10 @@ msgstr "We were unable to set your public profile to public. Please try again."
 msgid "We were unable to setup two-factor authentication for your account. Please ensure that you have entered your code correctly and try again."
 msgstr "We were unable to setup two-factor authentication for your account. Please ensure that you have entered your code correctly and try again."
 
+#: apps/remix/app/components/general/envelope-signing/envelope-signing-complete-dialog.tsx
 #: apps/remix/app/components/general/envelope-signing/envelope-signing-complete-dialog.tsx
 #: apps/remix/app/components/general/direct-template/direct-template-page.tsx
-#: apps/remix/app/components/embed/embed-document-signing-page.tsx
+#: apps/remix/app/components/embed/embed-document-signing-page-v1.tsx
 #: apps/remix/app/components/embed/embed-direct-template-client-page.tsx
 msgid "We were unable to submit this document at this time. Please try again later."
 msgstr "We were unable to submit this document at this time. Please try again later."
@@ -10322,6 +10322,7 @@ msgid "You are currently updating <0>{memberName}.</0>"
 msgstr "You are currently updating <0>{memberName}.</0>"
 
 #: apps/remix/app/components/dialogs/organisation-member-update-dialog.tsx
+#: apps/remix/app/components/dialogs/admin-organisation-member-update-dialog.tsx
 msgid "You are currently updating <0>{organisationMemberName}.</0>"
 msgstr "You are currently updating <0>{organisationMemberName}.</0>"
 
@@ -10495,7 +10496,7 @@ msgid "You have been invited to join the following organisation"
 msgstr "You have been invited to join the following organisation"
 
 #: packages/lib/server-only/recipient/set-document-recipients.ts
-#: packages/lib/server-only/recipient/delete-document-recipient.ts
+#: packages/lib/server-only/recipient/delete-envelope-recipient.ts
 msgid "You have been removed from a document"
 msgstr "You have been removed from a document"
 
@@ -10664,6 +10665,7 @@ msgstr "You need to be an admin to manage API tokens."
 msgid "You need to be logged in as <0>{email}</0> to view this page."
 msgstr "You need to be logged in as <0>{email}</0> to view this page."
 
+#: apps/remix/app/components/general/document-signing/document-signing-auth-page.tsx
 #: apps/remix/app/components/general/direct-template/direct-template-signing-auth-page.tsx
 msgid "You need to be logged in to view this page."
 msgstr "You need to be logged in to view this page."