fix: add endpoints for getting files

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

@@ -6,7 +6,7 @@ import { type DocumentData, DocumentStatus, type EnvelopeItem } from '@prisma/cl
 import { DownloadIcon, FileTextIcon } from 'lucide-react';
 
 import { downloadFile } from '@documenso/lib/client-only/download-file';
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { trpc } from '@documenso/trpc/react';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -87,17 +87,11 @@ export const EnvelopeDownloadDialog = ({
     }));
 
     try {
-      const data = await getFile({
-        type: envelopeItem.documentData.type,
-        data:
-          version === 'signed'
-            ? envelopeItem.documentData.data
-            : envelopeItem.documentData.initialData,
-      });
+      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 = new Blob([data], {
-        type: 'application/pdf',
-      });
+      const blob = await fetch(downloadUrl).then(async (res) => await res.blob());
 
       const baseTitle = envelopeItem.title.replace(/\.pdf$/, '');
       const suffix = version === 'signed' ? '_signed.pdf' : '.pdf';

apps/remix/app/components/forms/branding-preferences-form.tsx

@@ -1,14 +1,14 @@
 import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useLingui } from '@lingui/react/macro';
-import { Trans } from '@lingui/react/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import type { TeamGlobalSettings } from '@prisma/client';
 import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import {
@@ -29,6 +29,8 @@ import {
 } from '@documenso/ui/primitives/select';
 import { Textarea } from '@documenso/ui/primitives/textarea';
 
+import { useOptionalCurrentTeam } from '~/providers/team';
+
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 const ACCEPTED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
 
@@ -68,6 +70,9 @@ export function BrandingPreferencesForm({
 }: BrandingPreferencesFormProps) {
   const { t } = useLingui();
 
+  const team = useOptionalCurrentTeam();
+  const organisation = useCurrentOrganisation();
+
   const [previewUrl, setPreviewUrl] = useState<string>('');
   const [hasLoadedPreview, setHasLoadedPreview] = useState(false);
 
@@ -88,14 +93,13 @@ export function BrandingPreferencesForm({
       const file = JSON.parse(settings.brandingLogo);
 
       if ('type' in file && 'data' in file) {
-        void getFile(file).then((binaryData) => {
-          const objectUrl = URL.createObjectURL(new Blob([binaryData]));
+        const logoUrl =
+          context === 'Team'
+            ? `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/team/${team?.id}`
+            : `${NEXT_PUBLIC_WEBAPP_URL()}/api/branding/logo/organisation/${organisation?.id}`;
 
-          setPreviewUrl(objectUrl);
-          setHasLoadedPreview(true);
-        });
-
-        return;
+        setPreviewUrl(logoUrl);
+        setHasLoadedPreview(true);
       }
     }
 

apps/remix/app/components/forms/editor/editor-field-text-form.tsx

@@ -152,6 +152,18 @@ export const EditorFieldTextForm = ({
                     className="h-auto"
                     placeholder={t`Add text to the field`}
                     {...field}
+                    onChange={(e) => {
+                      const values = form.getValues();
+                      const characterLimit = values.characterLimit || 0;
+                      let textValue = e.target.value;
+
+                      if (characterLimit > 0 && textValue.length > characterLimit) {
+                        textValue = textValue.slice(0, characterLimit);
+                      }
+
+                      e.target.value = textValue;
+                      field.onChange(e);
+                    }}
                     rows={1}
                   />
                 </FormControl>
@@ -175,6 +187,18 @@ export const EditorFieldTextForm = ({
                     className="bg-background"
                     placeholder={t`Field character limit`}
                     {...field}
+                    onChange={(e) => {
+                      field.onChange(e);
+
+                      const values = form.getValues();
+                      const characterLimit = parseInt(e.target.value, 10) || 0;
+
+                      const textValue = values.text || '';
+
+                      if (characterLimit > 0 && textValue.length > characterLimit) {
+                        form.setValue('text', textValue.slice(0, characterLimit));
+                      }
+                    }}
                   />
                 </FormControl>
                 <FormMessage />

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

@@ -205,6 +205,7 @@ export const DocumentSigningPageViewV2 = () => {
             <div className="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}

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

@@ -13,6 +13,7 @@ import { prop, sortBy } from 'remeda';
 import { isBase64Image } from '@documenso/lib/constants/signatures';
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import type { EnvelopeForSigningResponse } from '@documenso/lib/server-only/envelope/get-envelope-for-recipient-signing';
+import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import {
   isFieldUnsignedAndRequired,
   isRequiredField,
@@ -51,7 +52,11 @@ export type EnvelopeSigningContextValue = {
   setSelectedAssistantRecipientId: (_value: number | null) => void;
   selectedAssistantRecipient: EnvelopeForSigningResponse['envelope']['recipients'][number] | null;
 
-  signField: (_fieldId: number, _value: TSignEnvelopeFieldValue) => Promise<void>;
+  signField: (
+    _fieldId: number,
+    _value: TSignEnvelopeFieldValue,
+    authOptions?: TRecipientActionAuth,
+  ) => Promise<void>;
 };
 
 const EnvelopeSigningContext = createContext<EnvelopeSigningContextValue | null>(null);
@@ -284,7 +289,11 @@ export const EnvelopeSigningProvider = ({
       : null;
   }, [envelope.documentMeta?.signingOrder, envelope.recipients, recipient.id]);
 
-  const signField = async (fieldId: number, fieldValue: TSignEnvelopeFieldValue) => {
+  const signField = async (
+    fieldId: number,
+    fieldValue: TSignEnvelopeFieldValue,
+    authOptions?: TRecipientActionAuth,
+  ) => {
     // Set the field locally for direct templates.
     if (isDirectTemplate) {
       handleDirectTemplateFieldInsertion(fieldId, fieldValue);
@@ -295,7 +304,7 @@ export const EnvelopeSigningProvider = ({
       token: envelopeData.recipient.token,
       fieldId,
       fieldValue,
-      authOptions: undefined,
+      authOptions,
     });
   };
 

apps/remix/app/components/general/document/document-certificate-qr-view.tsx

@@ -174,7 +174,7 @@ const DocumentCertificateQrV2 = ({
       <div className="mt-12 w-full">
         <EnvelopeRendererFileSelector className="mb-4 p-0" fields={[]} secondaryOverride={''} />
 
-        <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
+        <PDFViewerKonvaLazy renderer="preview" customPageRenderer={EnvelopeGenericPageRenderer} />
       </div>
     </div>
   );

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

@@ -26,7 +26,7 @@ import { fieldButtonList } from './envelope-editor-fields-drag-drop';
 export default function EnvelopeEditorFieldsPageRenderer() {
   const { t, i18n } = useLingui();
   const { envelope, editorFields, getRecipientColorKey } = useCurrentEnvelopeEditor();
-  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
+  const { currentEnvelopeItem, setRenderError } = useCurrentEnvelopeRender();
 
   const interactiveTransformer = useRef<Transformer | null>(null);
 
@@ -103,7 +103,6 @@ export default function EnvelopeEditorFieldsPageRenderer() {
       fieldUpdates.height = fieldPageHeight;
     }
 
-    // Todo: envelopes Use id
     editorFields.updateFieldByFormId(fieldFormId, fieldUpdates);
 
     // Select the field if it is not already selected.
@@ -114,7 +113,7 @@ export default function EnvelopeEditorFieldsPageRenderer() {
     pageLayer.current?.batchDraw();
   };
 
-  const renderFieldOnLayer = (field: TLocalField) => {
+  const unsafeRenderFieldOnLayer = (field: TLocalField) => {
     if (!pageLayer.current) {
       return;
     }
@@ -160,6 +159,15 @@ export default function EnvelopeEditorFieldsPageRenderer() {
     fieldGroup.on('dragend', handleResizeOrMove);
   };
 
+  const renderFieldOnLayer = (field: TLocalField) => {
+    try {
+      unsafeRenderFieldOnLayer(field);
+    } catch (err) {
+      console.error(err);
+      setRenderError(true);
+    }
+  };
+
   /**
    * Initialize the Konva page canvas and all fields and interactions.
    */

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

@@ -27,7 +27,8 @@ import type {
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 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 } from '@documenso/ui/primitives/alert';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
+import { Button } from '@documenso/ui/primitives/button';
 import { RecipientSelector } from '@documenso/ui/primitives/recipient-selector';
 import { Separator } from '@documenso/ui/primitives/separator';
 
@@ -112,9 +113,34 @@ export const EnvelopeEditorFieldsPage = () => {
         <EnvelopeRendererFileSelector fields={editorFields.localFields} />
 
         {/* Document View */}
-        <div className="mt-4 flex h-full justify-center p-4">
+        <div className="mt-4 flex flex-col items-center justify-center">
+          {envelope.recipients.length === 0 && (
+            <Alert
+              variant="neutral"
+              className="border-border bg-background mb-4 flex max-w-[800px] flex-row items-center justify-between space-y-0 rounded-sm border"
+            >
+              <div className="flex flex-col gap-1">
+                <AlertTitle>
+                  <Trans>Missing Recipients</Trans>
+                </AlertTitle>
+                <AlertDescription>
+                  <Trans>You need at least one recipient to add fields</Trans>
+                </AlertDescription>
+              </div>
+
+              <Button asChild variant="outline">
+                <Link to={`${relativePath.editorPath}`}>
+                  <Trans>Add Recipients</Trans>
+                </Link>
+              </Button>
+            </Alert>
+          )}
+
           {currentEnvelopeItem !== null ? (
-            <PDFViewerKonvaLazy customPageRenderer={EnvelopeEditorFieldsPageRenderer} />
+            <PDFViewerKonvaLazy
+              renderer="editor"
+              customPageRenderer={EnvelopeEditorFieldsPageRenderer}
+            />
           ) : (
             <div className="flex flex-col items-center justify-center py-32">
               <FileTextIcon className="text-muted-foreground h-10 w-10" />
@@ -130,7 +156,7 @@ export const EnvelopeEditorFieldsPage = () => {
       </div>
 
       {/* Right Section - Form Fields Panel */}
-      {currentEnvelopeItem && (
+      {currentEnvelopeItem && envelope.recipients.length > 0 && (
         <div className="bg-background border-border sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l py-4">
           {/* Recipient selector section. */}
           <section className="px-4">
@@ -138,29 +164,15 @@ export const EnvelopeEditorFieldsPage = () => {
               <Trans>Selected Recipient</Trans>
             </h3>
 
-            {envelope.recipients.length === 0 ? (
-              <Alert variant="warning">
-                <AlertDescription className="flex flex-col gap-2">
-                  <Trans>You need at least one recipient to add fields</Trans>
-
-                  <Link to={`${relativePath.editorPath}`} className="text-sm">
-                    <p>
-                      <Trans>Click here to add a recipient</Trans>
-                    </p>
-                  </Link>
-                </AlertDescription>
-              </Alert>
-            ) : (
-              <RecipientSelector
-                selectedRecipient={editorFields.selectedRecipient}
-                onSelectedRecipientChange={(recipient) =>
-                  editorFields.setSelectedRecipient(recipient.id)
-                }
-                recipients={envelope.recipients}
-                className="w-full"
-                align="end"
-              />
-            )}
+            <RecipientSelector
+              selectedRecipient={editorFields.selectedRecipient}
+              onSelectedRecipientChange={(recipient) =>
+                editorFields.setSelectedRecipient(recipient.id)
+              }
+              recipients={envelope.recipients}
+              className="w-full"
+              align="end"
+            />
 
             {editorFields.selectedRecipient &&
               !canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields) && (

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

@@ -229,7 +229,6 @@ export const EnvelopeEditorSettingsDialog = ({
 
   const emails = emailData?.data || [];
 
-  // Todo: Envelopes this doesn't make sense (look at previous)
   const canUpdateVisibility = canAccessTeamDocument(team.currentTeamRole, envelope.visibility);
 
   const onFormSubmit = async (data: TAddSettingsFormSchema) => {
@@ -322,7 +321,7 @@ export const EnvelopeEditorSettingsDialog = ({
 
       <DialogContent className="flex w-full !max-w-5xl flex-row gap-0 p-0">
         {/* Sidebar. */}
-        <div className="flex w-80 flex-col border-r bg-gray-50">
+        <div className="bg-accent/20 flex w-80 flex-col border-r">
           <DialogHeader className="p-6 pb-4">
             <DialogTitle>Document Settings</DialogTitle>
           </DialogHeader>

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

@@ -203,7 +203,6 @@ export const EnvelopeEditorUploadPage = () => {
     debouncedUpdateEnvelopeItems(items);
   };
 
-  // Todo: Envelopes - Sync into envelopes data
   const debouncedUpdateEnvelopeItems = useDebounceFunction((files: LocalFile[]) => {
     void updateEnvelopeItems({
       envelopeId: envelope.id,

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

@@ -12,7 +12,8 @@ import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 export default function EnvelopeGenericPageRenderer() {
   const { i18n } = useLingui();
 
-  const { currentEnvelopeItem, fields, getRecipientColorKey } = useCurrentEnvelopeRender();
+  const { currentEnvelopeItem, fields, getRecipientColorKey, setRenderError } =
+    useCurrentEnvelopeRender();
 
   const {
     stage,
@@ -37,7 +38,7 @@ export default function EnvelopeGenericPageRenderer() {
     [fields, pageContext.pageNumber],
   );
 
-  const renderFieldOnLayer = (field: TEnvelope['fields'][number]) => {
+  const unsafeRenderFieldOnLayer = (field: TEnvelope['fields'][number]) => {
     if (!pageLayer.current) {
       console.error('Layer not loaded yet');
       return;
@@ -66,6 +67,15 @@ export default function EnvelopeGenericPageRenderer() {
     });
   };
 
+  const renderFieldOnLayer = (field: TEnvelope['fields'][number]) => {
+    try {
+      unsafeRenderFieldOnLayer(field);
+    } catch (err) {
+      console.error(err);
+      setRenderError(true);
+    }
+  };
+
   /**
    * Initialize the Konva page canvas and all fields and interactions.
    */

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

@@ -10,14 +10,17 @@ 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 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';
 import { renderField } from '@documenso/lib/universal/field-renderer/render-field';
 import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields-helpers';
 import { getClientSideFieldTranslations } from '@documenso/lib/utils/fields';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
+import type { TSignEnvelopeFieldValue } from '@documenso/trpc/server/envelope-router/sign-envelope-field.types';
 import { EnvelopeFieldToolTip } from '@documenso/ui/components/field/envelope-field-tooltip';
 import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
+import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { handleCheckboxFieldClick } from '~/utils/field-signing/checkbox-field';
 import { handleDropdownFieldClick } from '~/utils/field-signing/dropdown-field';
@@ -28,20 +31,24 @@ import { handleNumberFieldClick } from '~/utils/field-signing/number-field';
 import { handleSignatureFieldClick } from '~/utils/field-signing/signature-field';
 import { handleTextFieldClick } from '~/utils/field-signing/text-field';
 
+import { useRequiredDocumentSigningAuthContext } from '../document-signing/document-signing-auth-provider';
 import { useRequiredEnvelopeSigningContext } from '../document-signing/envelope-signing-provider';
 
 export default function EnvelopeSignerPageRenderer() {
-  const { i18n } = useLingui();
-  const { currentEnvelopeItem } = useCurrentEnvelopeRender();
+  const { t, i18n } = useLingui();
+  const { currentEnvelopeItem, setRenderError } = useCurrentEnvelopeRender();
   const { sessionData } = useOptionalSession();
 
+  const { executeActionAuthProcedure } = useRequiredDocumentSigningAuthContext();
+  const { toast } = useToast();
+
   const {
     envelopeData,
     recipient,
     recipientFields,
     recipientFieldsRemaining,
     showPendingFieldTooltip,
-    signField,
+    signField: signFieldInternal,
     email,
     setEmail,
     fullName,
@@ -80,7 +87,7 @@ export default function EnvelopeSignerPageRenderer() {
     );
   }, [recipientFields, selectedAssistantRecipientFields, pageContext.pageNumber]);
 
-  const renderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
+  const unsafeRenderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
     if (!pageLayer.current) {
       console.error('Layer not loaded yet');
       return;
@@ -237,7 +244,7 @@ export default function EnvelopeSignerPageRenderer() {
             .then(async (payload) => {
               if (payload) {
                 fieldGroup.add(loadingSpinnerGroup);
-                await signField(field.id, payload); // Todo: Envelopes - Handle errors
+                await signField(field.id, payload);
               }
 
               if (payload?.value) {
@@ -318,7 +325,6 @@ export default function EnvelopeSignerPageRenderer() {
          * SIGNATURE FIELD.
          */
         .with({ type: FieldType.SIGNATURE }, (field) => {
-          // Todo: Envelopes - Reauth
           handleSignatureFieldClick({
             field,
             signature,
@@ -329,11 +335,21 @@ export default function EnvelopeSignerPageRenderer() {
             .then(async (payload) => {
               if (payload) {
                 fieldGroup.add(loadingSpinnerGroup);
-                await signField(field.id, payload);
-              }
 
-              if (payload?.value) {
-                setSignature(payload.value);
+                if (payload.value) {
+                  void executeActionAuthProcedure({
+                    onReauthFormSubmit: async (authOptions) => {
+                      await signField(field.id, payload, authOptions);
+
+                      loadingSpinnerGroup.destroy();
+                    },
+                    actionTarget: field.type,
+                  });
+
+                  setSignature(payload.value);
+                } else {
+                  await signField(field.id, payload);
+                }
               }
             })
             .finally(() => {
@@ -347,13 +363,42 @@ export default function EnvelopeSignerPageRenderer() {
     fieldGroup.on('pointerdown', handleFieldGroupClick);
   };
 
+  const renderFieldOnLayer = (unparsedField: Field & { signature?: Signature | null }) => {
+    try {
+      unsafeRenderFieldOnLayer(unparsedField);
+    } catch (err) {
+      console.error(err);
+      setRenderError(true);
+    }
+  };
+
+  const signField = async (
+    fieldId: number,
+    payload: TSignEnvelopeFieldValue,
+    authOptions?: TRecipientActionAuth,
+  ) => {
+    try {
+      await signFieldInternal(fieldId, payload, authOptions);
+    } catch (err) {
+      console.error(err);
+
+      toast({
+        title: t`Error`,
+        description: t`An error occurred while signing the field.`,
+        variant: 'destructive',
+      });
+
+      throw err;
+    }
+  };
+
   /**
    * Initialize the Konva page canvas and all fields and interactions.
    */
   const createPageCanvas = (currentStage: Konva.Stage, currentPageLayer: Konva.Layer) => {
     // Render the fields.
     for (const field of localPageFields) {
-      renderFieldOnLayer(field); // Todo: Envelopes - [CRITICAL] Handle errors which prevent rendering
+      renderFieldOnLayer(field);
     }
 
     currentPageLayer.batchDraw();
@@ -369,7 +414,7 @@ export default function EnvelopeSignerPageRenderer() {
 
     localPageFields.forEach((field) => {
       console.log('Field changed/inserted, rendering on canvas');
-      renderFieldOnLayer(field); // Todo: Envelopes - [CRITICAL] Handle errors which prevent rendering
+      renderFieldOnLayer(field);
     });
 
     pageLayer.current.batchDraw();
@@ -387,7 +432,7 @@ export default function EnvelopeSignerPageRenderer() {
     pageLayer.current.destroyChildren();
 
     localPageFields.forEach((field) => {
-      renderFieldOnLayer(field); // Todo: Envelopes - [CRITICAL] Handle errors which prevent rendering
+      renderFieldOnLayer(field);
     });
 
     pageLayer.current.batchDraw();

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

@@ -156,7 +156,10 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
 
               <Card className="rounded-xl before:rounded-xl" gradient>
                 <CardContent className="p-2">
-                  <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
+                  <PDFViewerKonvaLazy
+                    renderer="preview"
+                    customPageRenderer={EnvelopeGenericPageRenderer}
+                  />
                 </CardContent>
               </Card>
             </EnvelopeRenderProvider>

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

@@ -179,7 +179,10 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
 
               <Card className="rounded-xl before:rounded-xl" gradient>
                 <CardContent className="p-2">
-                  <PDFViewerKonvaLazy customPageRenderer={EnvelopeGenericPageRenderer} />
+                  <PDFViewerKonvaLazy
+                    renderer="preview"
+                    customPageRenderer={EnvelopeGenericPageRenderer}
+                  />
                 </CardContent>
               </Card>
             </EnvelopeRenderProvider>

apps/remix/app/utils/field-signing/checkbox-field.ts

@@ -1,5 +1,6 @@
 import { FieldType } from '@prisma/client';
 
+import { validateCheckboxLength } from '@documenso/lib/advanced-fields-validation/validate-checkbox';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TFieldCheckbox } from '@documenso/lib/types/field';
 import { parseCheckboxCustomText } from '@documenso/lib/utils/fields';
@@ -44,6 +45,13 @@ export const handleCheckboxFieldClick = async (
 
   let checkedValues: number[] | null = newValues.filter((v) => v.isChecked).map((v) => v.index);
 
+  if (checkedValues.length === 0) {
+    return {
+      type: FieldType.CHECKBOX,
+      value: [],
+    };
+  }
+
   if (validationRule && validationLength) {
     const checkboxValidationRule = checkboxValidationSigns.find(
       (sign) => sign.label === validationRule,
@@ -55,12 +63,33 @@ export const handleCheckboxFieldClick = async (
       });
     }
 
-    checkedValues = await SignFieldCheckboxDialog.call({
-      fieldMeta: field.fieldMeta,
-      validationRule: checkboxValidationRule.value,
+    // Custom logic to make it flow better.
+    // If "at most" OR "exactly" 1 value then just return the new selected value if exists.
+    if (
+      (checkboxValidationRule.value === '=' || checkboxValidationRule.value === '<=') &&
+      validationLength === 1
+    ) {
+      return {
+        type: FieldType.CHECKBOX,
+        value: [clickedCheckboxIndex],
+      };
+    }
+
+    const isValid = validateCheckboxLength(
+      checkedValues.length,
+      checkboxValidationRule.value,
       validationLength,
-      preselectedIndices: currentCheckedIndices,
-    });
+    );
+
+    // Only render validation dialog if validation is invalid.
+    if (!isValid) {
+      checkedValues = await SignFieldCheckboxDialog.call({
+        fieldMeta: field.fieldMeta,
+        validationRule: checkboxValidationRule.value,
+        validationLength,
+        preselectedIndices: checkedValues,
+      });
+    }
   }
 
   if (!checkedValues) {

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

@@ -0,0 +1,82 @@
+import { type DocumentDataType, DocumentStatus } from '@prisma/client';
+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';
+
+type HandleEnvelopeItemFileRequestOptions = {
+  title: string;
+  status: DocumentStatus;
+  documentData: {
+    type: DocumentDataType;
+    data: string;
+    initialData: string;
+  };
+  version: 'signed' | 'original';
+  isDownload: boolean;
+  context: Context<HonoEnv>;
+};
+
+/**
+ * Helper function to handle envelope item file requests (both view and download)
+ */
+export const handleEnvelopeItemFileRequest = async ({
+  title,
+  status,
+  documentData,
+  version,
+  isDownload,
+  context: c,
+}: HandleEnvelopeItemFileRequestOptions) => {
+  const documentDataToUse = version === 'signed' ? documentData.data : documentData.initialData;
+
+  const etag = Buffer.from(sha256(documentDataToUse)).toString('hex');
+
+  if (c.req.header('If-None-Match') === etag) {
+    return c.body(null, 304);
+  }
+
+  const file = await getFileServerSide({
+    type: documentData.type,
+    data: documentDataToUse,
+  }).catch((error) => {
+    console.error(error);
+
+    return null;
+  });
+
+  if (!file) {
+    return c.json({ error: 'File not found' }, 404);
+  }
+
+  c.header('Content-Type', 'application/pdf');
+  c.header('Content-Length', file.length.toString());
+  c.header('ETag', etag);
+
+  if (!isDownload) {
+    if (status === DocumentStatus.COMPLETED) {
+      c.header('Cache-Control', 'public, max-age=31536000, immutable');
+    } else {
+      // Set a tiny 1 minute cache, with must-revalidate to ensure the client always checks for updates.
+      c.header('Cache-Control', 'public, max-age=60, must-revalidate');
+    }
+  }
+
+  if (isDownload) {
+    // Generate filename following the pattern from envelope-download-dialog.tsx
+    const baseTitle = title.replace(/\.pdf$/, '');
+    const suffix = version === 'signed' ? '_signed.pdf' : '.pdf';
+    const filename = `${baseTitle}${suffix}`;
+
+    c.header('Content-Disposition', `attachment; filename="${filename}"`);
+
+    // For downloads, prevent caching to ensure fresh data
+    c.header('Cache-Control', 'no-cache, no-store, must-revalidate');
+    c.header('Pragma', 'no-cache');
+    c.header('Expires', '0');
+  }
+
+  return c.body(file);
+};

apps/remix/server/api/files.ts

@@ -1,21 +1,22 @@
-import { PDFDocument } from '@cantoo/pdf-lib';
 import { sValidator } from '@hono/standard-validator';
 import { Hono } from 'hono';
 
+import { getOptionalSession } from '@documenso/auth/server/lib/utils/get-session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { createDocumentData } from '@documenso/lib/server-only/document-data/create-document-data';
-import { putFileServerSide } from '@documenso/lib/universal/upload/put-file.server';
-import {
-  getPresignGetUrl,
-  getPresignPostUrl,
-} from '@documenso/lib/universal/upload/server-actions';
+import { getTeamById } from '@documenso/lib/server-only/team/get-team';
+import { putNormalizedPdfFileServerSide } from '@documenso/lib/universal/upload/put-file.server';
+import { getPresignPostUrl } from '@documenso/lib/universal/upload/server-actions';
+import { prisma } from '@documenso/prisma';
 
 import type { HonoEnv } from '../router';
+import { handleEnvelopeItemFileRequest } from './files.helpers';
 import {
-  type TGetPresignedGetUrlResponse,
   type TGetPresignedPostUrlResponse,
-  ZGetPresignedGetUrlRequestSchema,
+  ZGetEnvelopeItemFileDownloadRequestParamsSchema,
+  ZGetEnvelopeItemFileRequestParamsSchema,
+  ZGetEnvelopeItemFileTokenDownloadRequestParamsSchema,
+  ZGetEnvelopeItemFileTokenRequestParamsSchema,
   ZGetPresignedPostUrlRequestSchema,
   ZUploadPdfRequestSchema,
 } from './files.types';
@@ -42,29 +43,7 @@ export const filesRoute = new Hono<HonoEnv>()
         return c.json({ error: 'File too large' }, 400);
       }
 
-      const arrayBuffer = await file.arrayBuffer();
-
-      const pdf = await PDFDocument.load(arrayBuffer).catch((e) => {
-        console.error(`PDF upload parse error: ${e.message}`);
-
-        throw new AppError('INVALID_DOCUMENT_FILE');
-      });
-
-      if (pdf.isEncrypted) {
-        throw new AppError('INVALID_DOCUMENT_FILE');
-      }
-
-      // Todo: (RR7) Test this.
-      if (!file.name.endsWith('.pdf')) {
-        Object.defineProperty(file, 'name', {
-          writable: true,
-          value: `${file.name}.pdf`,
-        });
-      }
-
-      const { type, data } = await putFileServerSide(file);
-
-      const result = await createDocumentData({ type, data });
+      const result = await putNormalizedPdfFileServerSide(file);
 
       return c.json(result);
     } catch (error) {
@@ -72,19 +51,6 @@ export const filesRoute = new Hono<HonoEnv>()
       return c.json({ error: 'Upload failed' }, 500);
     }
   })
-  .post('/presigned-get-url', sValidator('json', ZGetPresignedGetUrlRequestSchema), async (c) => {
-    const { key } = await c.req.json();
-
-    try {
-      const { url } = await getPresignGetUrl(key || '');
-
-      return c.json({ url } satisfies TGetPresignedGetUrlResponse);
-    } catch (err) {
-      console.error(err);
-
-      throw new AppError(AppErrorCode.UNKNOWN_ERROR);
-    }
-  })
   .post('/presigned-post-url', sValidator('json', ZGetPresignedPostUrlRequestSchema), async (c) => {
     const { fileName, contentType } = c.req.valid('json');
 
@@ -97,4 +63,222 @@ export const filesRoute = new Hono<HonoEnv>()
 
       throw new AppError(AppErrorCode.UNKNOWN_ERROR);
     }
-  });
+  })
+  .get(
+    '/envelope/:envelopeId/envelopeItem/:envelopeItemId',
+    sValidator('param', ZGetEnvelopeItemFileRequestParamsSchema),
+    async (c) => {
+      const { envelopeId, envelopeItemId } = c.req.valid('param');
+
+      const session = await getOptionalSession(c);
+
+      if (!session.user) {
+        return c.json({ error: 'Unauthorized' }, 401);
+      }
+
+      const envelope = await prisma.envelope.findFirst({
+        where: {
+          id: envelopeId,
+        },
+        include: {
+          envelopeItems: {
+            where: {
+              id: envelopeItemId,
+            },
+            include: {
+              documentData: true,
+            },
+          },
+        },
+      });
+
+      if (!envelope) {
+        return c.json({ error: 'Envelope not found' }, 404);
+      }
+
+      const [envelopeItem] = envelope.envelopeItems;
+
+      if (!envelopeItem) {
+        return c.json({ error: 'Envelope item not found' }, 404);
+      }
+
+      const team = await getTeamById({
+        userId: session.user.id,
+        teamId: envelope.teamId,
+      }).catch((error) => {
+        console.error(error);
+
+        return null;
+      });
+
+      if (!team) {
+        return c.json(
+          { error: 'User does not have access to the team that this envelope is associated with' },
+          403,
+        );
+      }
+
+      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: 'signed',
+        isDownload: false,
+        context: c,
+      });
+    },
+  )
+  .get(
+    '/envelope/:envelopeId/envelopeItem/:envelopeItemId/download/:version?',
+    sValidator('param', ZGetEnvelopeItemFileDownloadRequestParamsSchema),
+    async (c) => {
+      const { envelopeId, envelopeItemId, version } = c.req.valid('param');
+
+      const session = await getOptionalSession(c);
+
+      if (!session.user) {
+        return c.json({ error: 'Unauthorized' }, 401);
+      }
+
+      const envelope = await prisma.envelope.findFirst({
+        where: {
+          id: envelopeId,
+        },
+        include: {
+          envelopeItems: {
+            where: {
+              id: envelopeItemId,
+            },
+            include: {
+              documentData: true,
+            },
+          },
+        },
+      });
+
+      if (!envelope) {
+        return c.json({ error: 'Envelope not found' }, 404);
+      }
+
+      const [envelopeItem] = envelope.envelopeItems;
+
+      if (!envelopeItem) {
+        return c.json({ error: 'Envelope item not found' }, 404);
+      }
+
+      const team = await getTeamById({
+        userId: session.user.id,
+        teamId: envelope.teamId,
+      }).catch((error) => {
+        console.error(error);
+
+        return null;
+      });
+
+      if (!team) {
+        return c.json(
+          { error: 'User does not have access to the team that this envelope is associated with' },
+          403,
+        );
+      }
+
+      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,
+        isDownload: true,
+        context: c,
+      });
+    },
+  )
+  .get(
+    '/token/:token/envelopeItem/:envelopeItemId',
+    sValidator('param', ZGetEnvelopeItemFileTokenRequestParamsSchema),
+    async (c) => {
+      const { token, envelopeItemId } = c.req.valid('param');
+
+      const envelopeItem = await prisma.envelopeItem.findFirst({
+        where: {
+          id: envelopeItemId,
+          envelope: {
+            recipients: {
+              some: {
+                token,
+              },
+            },
+          },
+        },
+        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: 'signed',
+        isDownload: false,
+        context: c,
+      });
+    },
+  )
+  .get(
+    '/token/:token/envelopeItem/:envelopeItemId/download/:version?',
+    sValidator('param', ZGetEnvelopeItemFileTokenDownloadRequestParamsSchema),
+    async (c) => {
+      const { token, envelopeItemId, version } = c.req.valid('param');
+
+      const envelopeItem = await prisma.envelopeItem.findFirst({
+        where: {
+          id: envelopeItemId,
+          envelope: {
+            recipients: {
+              some: {
+                token,
+              },
+            },
+          },
+        },
+        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,
+        isDownload: true,
+        context: c,
+      });
+    },
+  );

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

@@ -24,15 +24,43 @@ export const ZGetPresignedPostUrlResponseSchema = z.object({
   url: z.string().min(1),
 });
 
-export const ZGetPresignedGetUrlRequestSchema = z.object({
-  key: z.string().min(1),
-});
-
-export const ZGetPresignedGetUrlResponseSchema = z.object({
-  url: z.string().min(1),
-});
-
 export type TGetPresignedPostUrlRequest = z.infer<typeof ZGetPresignedPostUrlRequestSchema>;
 export type TGetPresignedPostUrlResponse = z.infer<typeof ZGetPresignedPostUrlResponseSchema>;
-export type TGetPresignedGetUrlRequest = z.infer<typeof ZGetPresignedGetUrlRequestSchema>;
-export type TGetPresignedGetUrlResponse = z.infer<typeof ZGetPresignedGetUrlResponseSchema>;
+
+export const ZGetEnvelopeItemFileRequestParamsSchema = z.object({
+  envelopeId: z.string().min(1),
+  envelopeItemId: z.string().min(1),
+});
+
+export type TGetEnvelopeItemFileRequestParams = z.infer<
+  typeof ZGetEnvelopeItemFileRequestParamsSchema
+>;
+
+export const ZGetEnvelopeItemFileTokenRequestParamsSchema = z.object({
+  token: z.string().min(1),
+  envelopeItemId: z.string().min(1),
+});
+
+export type TGetEnvelopeItemFileTokenRequestParams = z.infer<
+  typeof ZGetEnvelopeItemFileTokenRequestParamsSchema
+>;
+
+export const ZGetEnvelopeItemFileDownloadRequestParamsSchema = z.object({
+  envelopeId: z.string().min(1),
+  envelopeItemId: z.string().min(1),
+  version: z.enum(['signed', 'original']).default('signed'),
+});
+
+export type TGetEnvelopeItemFileDownloadRequestParams = z.infer<
+  typeof ZGetEnvelopeItemFileDownloadRequestParamsSchema
+>;
+
+export const ZGetEnvelopeItemFileTokenDownloadRequestParamsSchema = z.object({
+  token: z.string().min(1),
+  envelopeItemId: z.string().min(1),
+  version: z.enum(['signed', 'original']).default('signed'),
+});
+
+export type TGetEnvelopeItemFileTokenDownloadRequestParams = z.infer<
+  typeof ZGetEnvelopeItemFileTokenDownloadRequestParamsSchema
+>;

apps/remix/server/router.ts

@@ -8,7 +8,7 @@ import type { Logger } from 'pino';
 
 import { tsRestHonoApp } from '@documenso/api/hono';
 import { auth } from '@documenso/auth/server';
-import { API_V2_BETA_URL } from '@documenso/lib/constants/app';
+import { API_V2_BETA_URL, API_V2_URL } from '@documenso/lib/constants/app';
 import { jobsClient } from '@documenso/lib/jobs/client';
 import { getIpAddress } from '@documenso/lib/universal/get-ip-address';
 import { logger } from '@documenso/lib/utils/logger';
@@ -89,9 +89,22 @@ app.route('/api/v1', tsRestHonoApp);
 app.use('/api/jobs/*', jobsClient.getApiHandler());
 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());
+app.use(`${API_V2_URL}/*`, async (c) =>
+  openApiTrpcServerHandler(c, {
+    isBeta: false,
+  }),
+);
+
 // 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());
-app.use(`${API_V2_BETA_URL}/*`, async (c) => openApiTrpcServerHandler(c));
+app.use(`${API_V2_BETA_URL}/*`, async (c) =>
+  openApiTrpcServerHandler(c, {
+    isBeta: true,
+  }),
+);
 
 export default app;

apps/remix/server/trpc/hono-trpc-open-api.ts

@@ -1,15 +1,22 @@
 import type { Context } from 'hono';
 
-import { API_V2_BETA_URL } from '@documenso/lib/constants/app';
+import { API_V2_BETA_URL, API_V2_URL } from '@documenso/lib/constants/app';
 import { AppError, genericErrorCodeToTrpcErrorCodeMap } from '@documenso/lib/errors/app-error';
 import { createTrpcContext } from '@documenso/trpc/server/context';
 import { appRouter } from '@documenso/trpc/server/router';
 import { createOpenApiFetchHandler } from '@documenso/trpc/utils/openapi-fetch-handler';
 import { handleTrpcRouterError } from '@documenso/trpc/utils/trpc-error-handler';
 
-export const openApiTrpcServerHandler = async (c: Context) => {
+type OpenApiTrpcServerHandlerOptions = {
+  isBeta: boolean;
+};
+
+export const openApiTrpcServerHandler = async (
+  c: Context,
+  { isBeta }: OpenApiTrpcServerHandlerOptions,
+) => {
   return createOpenApiFetchHandler<typeof appRouter>({
-    endpoint: API_V2_BETA_URL,
+    endpoint: isBeta ? API_V2_BETA_URL : API_V2_URL,
     router: appRouter,
     createContext: async () => createTrpcContext({ c, requestSource: 'apiV2' }),
     req: c.req.raw,

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

@@ -68,7 +68,7 @@ test.describe('API V2 Envelopes', () => {
       const formData = new FormData();
       formData.append('payload', JSON.stringify(payload));
 
-      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/create`, {
+      const res = await request.post(`${baseUrl}/envelope/create`, {
         headers: { Authorization: `Bearer ${tokenB}` },
         multipart: formData,
       });
@@ -100,7 +100,7 @@ test.describe('API V2 Envelopes', () => {
         formData.append('files', new File([file.data], file.name, { type: 'application/pdf' }));
       }
 
-      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/create`, {
+      const res = await request.post(`${baseUrl}/envelope/create`, {
         headers: { Authorization: `Bearer ${tokenB}` },
         multipart: formData,
       });
@@ -232,14 +232,14 @@ test.describe('API V2 Envelopes', () => {
       }
 
       // Should error since folder is not owned by the user.
-      const invalidRes = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/create`, {
+      const invalidRes = await request.post(`${baseUrl}/envelope/create`, {
         headers: { Authorization: `Bearer ${tokenB}` },
         multipart: formData,
       });
 
       expect(invalidRes.ok()).toBeFalsy();
 
-      const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/create`, {
+      const res = await request.post(`${baseUrl}/envelope/create`, {
         headers: { Authorization: `Bearer ${tokenA}` },
         multipart: formData,
       });
@@ -378,21 +378,24 @@ test.describe('API V2 Envelopes', () => {
       new File([alignmentPdf], 'field-font-alignment.pdf', { type: 'application/pdf' }),
     );
 
-    const res = await request.post(`${WEBAPP_BASE_URL}/api/v2-beta/envelope/create`, {
+    const createEnvelopeRequest = await request.post(`${baseUrl}/envelope/create`, {
       headers: { Authorization: `Bearer ${tokenA}` },
       multipart: formData,
     });
 
-    const response: TCreateEnvelopeResponse = await res.json();
+    expect(createEnvelopeRequest.ok()).toBeTruthy();
+    expect(createEnvelopeRequest.status()).toBe(200);
 
-    const createdEnvelope: TGetEnvelopeResponse = await request
-      .get(`${baseUrl}/envelope/${response.id}`, {
-        headers: { Authorization: `Bearer ${tokenA}` },
-      })
-      .then(async (res) => await res.json());
+    const { id: createdEnvelopeId }: TCreateEnvelopeResponse = await createEnvelopeRequest.json();
+
+    const getEnvelopeRequest = await request.get(`${baseUrl}/envelope/${createdEnvelopeId}`, {
+      headers: { Authorization: `Bearer ${tokenA}` },
+    });
+
+    const createdEnvelope: TGetEnvelopeResponse = await getEnvelopeRequest.json();
 
     // Might as well testing access control here as well.
-    const unauthRequest = await request.get(`${baseUrl}/envelope/${response.id}`, {
+    const unauthRequest = await request.get(`${baseUrl}/envelope/${createdEnvelopeId}`, {
       headers: { Authorization: `Bearer ${tokenB}` },
     });
 

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

@@ -78,7 +78,6 @@ test.describe('Signing Certificate Tests', () => {
       },
     });
 
-    // Todo: Envelopes
     const firstDocumentData = completedDocument.envelopeItems[0].documentData;
 
     const completedDocumentData = await getFile(firstDocumentData);
@@ -169,7 +168,6 @@ test.describe('Signing Certificate Tests', () => {
       },
     });
 
-    // Todo: Envelopes
     const firstDocumentData = completedDocument.envelopeItems[0].documentData;
 
     const completedDocumentData = await getFile(firstDocumentData);

packages/lib/client-only/hooks/use-editor-fields.ts

@@ -165,10 +165,7 @@ export const useEditorFields = ({
     const index = localFields.findIndex((field) => field.formId === formId);
 
     if (index !== -1) {
-      update(index, {
-        ...localFields[index],
-        id,
-      });
+      form.setValue(`fields.${index}.id`, id);
     }
   };
 

packages/lib/client-only/hooks/use-page-renderer.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import Konva from 'konva';
 import type { RenderParameters } from 'pdfjs-dist/types/src/display/api';
@@ -25,6 +25,8 @@ export function usePageRenderer(renderFunction: RenderFunction) {
   const stage = useRef<Konva.Stage | null>(null);
   const pageLayer = useRef<Konva.Layer | null>(null);
 
+  const [renderError, setRenderError] = useState<boolean>(false);
+
   /**
    * The raw viewport with no scaling. Basically the actual PDF size.
    */
@@ -122,5 +124,7 @@ export function usePageRenderer(renderFunction: RenderFunction) {
     unscaledViewport,
     scaledViewport,
     pageContext,
+    renderError,
+    setRenderError,
   };
 }

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

@@ -27,6 +27,9 @@ type EnvelopeRenderProviderValue = {
   setCurrentEnvelopeItem: (envelopeItemId: string) => void;
   fields: TEnvelope['fields'];
   getRecipientColorKey: (recipientId: number) => TRecipientColor;
+
+  renderError: boolean;
+  setRenderError: (renderError: boolean) => void;
 };
 
 interface EnvelopeRenderProviderProps {
@@ -74,6 +77,8 @@ export const EnvelopeRenderProvider = ({
 
   const [currentItem, setItem] = useState<EnvelopeRenderItem | null>(null);
 
+  const [renderError, setRenderError] = useState<boolean>(false);
+
   const envelopeItems = useMemo(
     () => envelope.envelopeItems.sort((a, b) => a.order - b.order),
     [envelope.envelopeItems],
@@ -164,6 +169,8 @@ export const EnvelopeRenderProvider = ({
         setCurrentEnvelopeItem,
         fields: fields ?? [],
         getRecipientColorKey,
+        renderError,
+        setRenderError,
       }}
     >
       {children}

packages/lib/constants/app.ts

@@ -12,6 +12,7 @@ export const NEXT_PRIVATE_INTERNAL_WEBAPP_URL =
 export const IS_BILLING_ENABLED = () => env('NEXT_PUBLIC_FEATURE_BILLING_ENABLED') === 'true';
 
 export const API_V2_BETA_URL = '/api/v2-beta';
+export const API_V2_URL = '/api/v2';
 
 export const SUPPORT_EMAIL = env('NEXT_PUBLIC_SUPPORT_EMAIL') ?? 'support@documenso.com';
 

packages/lib/server-only/document/send-document.ts

@@ -250,7 +250,7 @@ export const sendDocument = async ({
           );
         }
 
-        if (isValid) {
+        if (isValid && checkedIndices.length > 0) {
           fieldsToAutoInsert.push({
             fieldId,
             customText: toCheckboxCustomText(checkedIndices),

packages/lib/universal/crypto.ts

@@ -30,3 +30,5 @@ export const symmetricDecrypt = ({ key, data }: SymmetricDecryptOptions) => {
 
   return chacha.decrypt(dataAsBytes);
 };
+
+export { sha256 };

packages/lib/universal/field-renderer/field-generic-items.ts

@@ -153,6 +153,11 @@ export const createFieldHoverInteraction = ({
   const hoverColor = RECIPIENT_COLOR_STYLES[options.color].baseRingHover;
 
   fieldGroup.on('mouseover', () => {
+    const layer = fieldRect.getLayer();
+    if (!layer) {
+      return;
+    }
+
     new Konva.Tween({
       node: fieldRect,
       duration: 0.3,
@@ -161,6 +166,11 @@ export const createFieldHoverInteraction = ({
   });
 
   fieldGroup.on('mouseout', () => {
+    const layer = fieldRect.getLayer();
+    if (!layer) {
+      return;
+    }
+
     new Konva.Tween({
       node: fieldRect,
       duration: 0.3,
@@ -169,6 +179,11 @@ export const createFieldHoverInteraction = ({
   });
 
   fieldGroup.on('transformstart', () => {
+    const layer = fieldRect.getLayer();
+    if (!layer) {
+      return;
+    }
+
     new Konva.Tween({
       node: fieldRect,
       duration: 0.3,
@@ -177,6 +192,11 @@ export const createFieldHoverInteraction = ({
   });
 
   fieldGroup.on('transformend', () => {
+    const layer = fieldRect.getLayer();
+    if (!layer) {
+      return;
+    }
+
     new Konva.Tween({
       node: fieldRect,
       duration: 0.3,

packages/lib/universal/field-renderer/render-checkbox-field.ts

@@ -63,16 +63,15 @@ export const renderCheckboxFieldElement = (
     const rectWidth = fieldRect.width() * groupScaleX;
     const rectHeight = fieldRect.height() * groupScaleY;
 
-    // Todo: Envelopes - check sorting more than 10
-    // arr.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
-
     const squares = fieldGroup
       .find('.checkbox-square')
-      .sort((a, b) => a.id().localeCompare(b.id()));
+      .sort((a, b) => a.id().localeCompare(b.id(), undefined, { numeric: true }));
     const checkmarks = fieldGroup
       .find('.checkbox-checkmark')
-      .sort((a, b) => a.id().localeCompare(b.id()));
-    const text = fieldGroup.find('.checkbox-text').sort((a, b) => a.id().localeCompare(b.id()));
+      .sort((a, b) => a.id().localeCompare(b.id(), undefined, { numeric: true }));
+    const text = fieldGroup
+      .find('.checkbox-text')
+      .sort((a, b) => a.id().localeCompare(b.id(), undefined, { numeric: true }));
 
     const groupedItems = squares.map((square, i) => ({
       squareElement: square,

packages/lib/universal/field-renderer/render-field.ts

@@ -8,9 +8,9 @@ import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
 import type { TFieldMetaSchema } from '../../types/field-meta';
 import { renderCheckboxFieldElement } from './render-checkbox-field';
 import { renderDropdownFieldElement } from './render-dropdown-field';
+import { renderGenericTextFieldElement } from './render-generic-text-field';
 import { renderRadioFieldElement } from './render-radio-field';
 import { renderSignatureFieldElement } from './render-signature-field';
-import { renderTextFieldElement } from './render-text-field';
 
 export const MIN_FIELD_HEIGHT_PX = 12;
 export const MIN_FIELD_WIDTH_PX = 36;
@@ -43,9 +43,9 @@ type RenderFieldOptions = {
    *
    * @default 'edit'
    *
-   * - `edit` - The field is rendered in edit mode.
-   * - `sign` - The field is rendered in sign mode. No interactive elements.
-   * - `export` - The field is rendered in export mode. No backgrounds, interactive elements, etc.
+   * - `edit` - The field is rendered in editor page.
+   * - `sign` - The field is rendered for the signing page.
+   * - `export` - The field is rendered for exporting and sealing into the PDF. No backgrounds, interactive elements, etc.
    */
   mode: 'edit' | 'sign' | 'export';
 
@@ -76,10 +76,21 @@ export const renderField = ({
   };
 
   return match(field.type)
-    .with(FieldType.TEXT, () => renderTextFieldElement(field, options))
+    .with(
+      FieldType.INITIALS,
+      FieldType.NAME,
+      FieldType.EMAIL,
+      FieldType.DATE,
+      FieldType.TEXT,
+      FieldType.NUMBER,
+      () => renderGenericTextFieldElement(field, options),
+    )
     .with(FieldType.CHECKBOX, () => renderCheckboxFieldElement(field, options))
     .with(FieldType.RADIO, () => renderRadioFieldElement(field, options))
     .with(FieldType.DROPDOWN, () => renderDropdownFieldElement(field, options))
     .with(FieldType.SIGNATURE, () => renderSignatureFieldElement(field, options))
-    .otherwise(() => renderTextFieldElement(field, options)); // Todo: Envelopes
+    .with(FieldType.FREE_SIGNATURE, () => {
+      throw new Error('Free signature fields are not supported');
+    })
+    .exhaustive();
 };

packages/lib/universal/field-renderer/render-generic-text-field.ts

@@ -12,6 +12,8 @@ import {
 import type { FieldToRender, RenderFieldElementOptions } from './field-renderer';
 import { calculateFieldPosition } from './field-renderer';
 
+const DEFAULT_TEXT_ALIGN = 'left';
+
 const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOptions): Konva.Text => {
   const { pageWidth, pageHeight, mode = 'edit', pageLayer, translations } = options;
 
@@ -31,8 +33,8 @@ const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOption
   // Calculate text positioning based on alignment
   const textX = 0;
   const textY = 0;
-  let textAlign: 'left' | 'center' | 'right' = textMeta?.textAlign || 'left';
-  let textVerticalAlign: 'top' | 'middle' | 'bottom' = 'top';
+  let textAlign: 'left' | 'center' | 'right' = textMeta?.textAlign || DEFAULT_TEXT_ALIGN;
+  const textVerticalAlign: 'top' | 'middle' | 'bottom' = 'middle';
   const textFontSize = textMeta?.fontSize || DEFAULT_STANDARD_FONT_SIZE;
   const textPadding = 10;
 
@@ -40,51 +42,33 @@ const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOption
 
   // Handle edit mode.
   if (mode === 'edit') {
-    textToRender = fieldTypeName;
-    textAlign = 'center';
-    textVerticalAlign = 'middle';
-
-    if (textMeta?.label) {
-      textToRender = textMeta.label;
-    } else if (textMeta?.text) {
+    if (textMeta?.text) {
       textToRender = textMeta.text;
-      textAlign = textMeta.textAlign || 'center'; // Todo: Envelopes - What is the default
-
-      // Todo: Envelopes - Handle this on signatures
-      if (textMeta.characterLimit) {
-        textToRender = textToRender.slice(0, textMeta.characterLimit);
-      }
+    } else if (textMeta?.label) {
+      textToRender = textMeta.label;
+    } else {
+      // Show field name which is centered for the edit mode if no label/text is avaliable.
+      textToRender = fieldTypeName;
+      textAlign = 'center';
     }
   }
 
   // Handle sign mode.
   if (mode === 'sign' || mode === 'export') {
-    textToRender = fieldTypeName;
-    textAlign = 'center';
-    textVerticalAlign = 'middle';
-
-    if (textMeta?.label) {
-      textToRender = textMeta.label;
-    }
-
-    if (textMeta?.text) {
-      textToRender = textMeta.text;
-      textAlign = textMeta.textAlign || 'center'; // Todo: Envelopes - What is the default
-
-      // Todo: Envelopes - Handle this on signatures
-      if (textMeta.characterLimit) {
-        textToRender = textToRender.slice(0, textMeta.characterLimit);
+    if (!field.inserted) {
+      if (textMeta?.text) {
+        textToRender = textMeta.text;
+      } else if (textMeta?.label) {
+        textToRender = textMeta.label;
+      } else if (mode === 'sign') {
+        // Only show the field name in sign mode if no text/label is avaliable.
+        textToRender = fieldTypeName;
+        textAlign = 'center';
       }
     }
 
     if (field.inserted) {
       textToRender = field.customText;
-      textAlign = textMeta?.textAlign || 'center'; // Todo: Envelopes - What is the default
-
-      // Todo: Envelopes - Handle this on signatures
-      if (textMeta?.characterLimit) {
-        textToRender = textToRender.slice(0, textMeta.characterLimit);
-      }
     }
   }
 
@@ -106,7 +90,7 @@ const upsertFieldText = (field: FieldToRender, options: RenderFieldElementOption
   return fieldText;
 };
 
-export const renderTextFieldElement = (
+export const renderGenericTextFieldElement = (
   field: FieldToRender,
   options: RenderFieldElementOptions,
 ) => {

packages/lib/universal/upload/get-file.ts

@@ -7,7 +7,13 @@ export type GetFileOptions = {
   data: string;
 };
 
-export const getFile = async ({ type, data }: GetFileOptions) => {
+/**
+ * KEPT FOR POSTERITY, SHOULD BE REMOVED IN THE FUTURE
+ * DO NOT USE OR I WILL FIRE YOU
+ *
+ * - Lucas, 2025-11-04
+ */
+const getFile = async ({ type, data }: GetFileOptions) => {
   return await match(type)
     .with(DocumentDataType.BYTES, () => getFileFromBytes(data))
     .with(DocumentDataType.BYTES_64, () => getFileFromBytes64(data))

packages/lib/utils/envelope-signing.ts

@@ -104,7 +104,6 @@ export const extractFieldInsertionValues = ({
       const numberFieldParsedMeta = ZNumberFieldMeta.parse(field.fieldMeta);
       const errors = validateNumberField(fieldValue.value.toString(), numberFieldParsedMeta, true);
 
-      // Todo
       if (errors.length > 0) {
         throw new AppError(AppErrorCode.INVALID_BODY, {
           message: 'Invalid number',
@@ -127,7 +126,6 @@ export const extractFieldInsertionValues = ({
       const parsedTextFieldMeta = ZTextFieldMeta.parse(field.fieldMeta);
       const errors = validateTextField(fieldValue.value, parsedTextFieldMeta, true);
 
-      // Todo
       if (errors.length > 0) {
         throw new AppError(AppErrorCode.INVALID_BODY, {
           message: 'Invalid email',
@@ -189,7 +187,6 @@ export const extractFieldInsertionValues = ({
           (sign) => sign.label === validationRule,
         );
 
-        // Todo: Envelopes - Test this.
         if (checkboxValidationRule) {
           const isValid = validateCheckboxLength(
             selectedValues.length,
@@ -224,7 +221,6 @@ export const extractFieldInsertionValues = ({
       const parsedDropdownFieldMeta = ZDropdownFieldMeta.parse(field.fieldMeta);
       const errors = validateDropdownField(fieldValue.value, parsedDropdownFieldMeta, true);
 
-      // Todo: Envelopes
       if (errors.length > 0) {
         throw new AppError(AppErrorCode.INVALID_BODY, {
           message: 'Invalid dropdown value',

packages/trpc/server/envelope-router/attachment/create-attachment.ts

@@ -13,7 +13,7 @@ export const createAttachmentRoute = authenticatedProcedure
       path: '/envelope/attachment/create',
       summary: 'Create attachment',
       description: 'Create a new attachment for an envelope',
-      tags: ['Envelope Attachment'],
+      tags: ['Envelope Attachments'],
     },
   })
   .input(ZCreateAttachmentRequestSchema)

packages/trpc/server/envelope-router/attachment/delete-attachment.ts

@@ -13,7 +13,7 @@ export const deleteAttachmentRoute = authenticatedProcedure
       path: '/envelope/attachment/delete',
       summary: 'Delete attachment',
       description: 'Delete an attachment from an envelope',
-      tags: ['Envelope Attachment'],
+      tags: ['Envelope Attachments'],
     },
   })
   .input(ZDeleteAttachmentRequestSchema)

packages/trpc/server/envelope-router/attachment/find-attachments.ts

@@ -15,7 +15,7 @@ export const findAttachmentsRoute = maybeAuthenticatedProcedure
       path: '/envelope/attachment',
       summary: 'Find attachments',
       description: 'Find all attachments for an envelope',
-      tags: ['Envelope Attachment'],
+      tags: ['Envelope Attachments'],
     },
   })
   .input(ZFindAttachmentsRequestSchema)

packages/trpc/server/envelope-router/attachment/update-attachment.ts

@@ -13,7 +13,7 @@ export const updateAttachmentRoute = authenticatedProcedure
       path: '/envelope/attachment/update',
       summary: 'Update attachment',
       description: 'Update an existing attachment',
-      tags: ['Envelope Attachment'],
+      tags: ['Envelope Attachments'],
     },
   })
   .input(ZUpdateAttachmentRequestSchema)

packages/trpc/server/envelope-router/create-envelope-items.ts

@@ -20,7 +20,7 @@ export const createEnvelopeItemsRoute = authenticatedProcedure
       path: '/envelope/item/create-many',
       summary: 'Create envelope items',
       description: 'Create multiple envelope items for an envelope',
-      tags: ['Envelope Item'],
+      tags: ['Envelope Items'],
     },
   })
   .input(ZCreateEnvelopeItemsRequestSchema)

packages/trpc/server/envelope-router/delete-envelope-item.ts

@@ -18,7 +18,7 @@ export const deleteEnvelopeItemRoute = authenticatedProcedure
       path: '/envelope/item/delete',
       summary: 'Delete envelope item',
       description: 'Delete an envelope item from an envelope',
-      tags: ['Envelope Item'],
+      tags: ['Envelope Items'],
     },
   })
   .input(ZDeleteEnvelopeItemRequestSchema)

packages/trpc/server/envelope-router/envelope-fields/delete-envelope-field.ts

@@ -20,7 +20,7 @@ export const deleteEnvelopeFieldRoute = authenticatedProcedure
       path: '/envelope/field/delete',
       summary: 'Delete envelope field',
       description: 'Delete an envelope field',
-      tags: ['Envelope Field'],
+      tags: ['Envelope Fields'],
     },
   })
   .input(ZDeleteEnvelopeFieldRequestSchema)

packages/trpc/server/envelope-router/envelope-fields/get-envelope-field.ts

@@ -13,7 +13,7 @@ export const getEnvelopeFieldRoute = authenticatedProcedure
       path: '/envelope/field/{fieldId}',
       summary: 'Get envelope field',
       description: 'Returns an envelope field given an ID',
-      tags: ['Envelope Field'],
+      tags: ['Envelope Fields'],
     },
   })
   .input(ZGetEnvelopeFieldRequestSchema)

packages/trpc/server/envelope-router/envelope-fields/update-envelope-fields.ts

@@ -13,7 +13,7 @@ export const updateEnvelopeFieldsRoute = authenticatedProcedure
       path: '/envelope/field/update-many',
       summary: 'Update envelope fields',
       description: 'Update multiple envelope fields for an envelope',
-      tags: ['Envelope Field'],
+      tags: ['Envelope Fields'],
     },
   })
   .input(ZUpdateEnvelopeFieldsRequestSchema)

packages/trpc/server/envelope-router/envelope-recipients/delete-envelope-recipient.ts

@@ -13,7 +13,7 @@ export const deleteEnvelopeRecipientRoute = authenticatedProcedure
       path: '/envelope/recipient/delete',
       summary: 'Delete envelope recipient',
       description: 'Delete an envelope recipient',
-      tags: ['Envelope Recipient'],
+      tags: ['Envelope Recipients'],
     },
   })
   .input(ZDeleteEnvelopeRecipientRequestSchema)

packages/trpc/server/envelope-router/envelope-recipients/get-envelope-recipient.ts

@@ -15,7 +15,7 @@ export const getEnvelopeRecipientRoute = authenticatedProcedure
       path: '/envelope/recipient/{recipientId}',
       summary: 'Get envelope recipient',
       description: 'Returns an envelope recipient given an ID',
-      tags: ['Envelope Recipient'],
+      tags: ['Envelope Recipients'],
     },
   })
   .input(ZGetEnvelopeRecipientRequestSchema)

packages/trpc/server/envelope-router/envelope-recipients/update-envelope-recipients.ts

@@ -13,7 +13,7 @@ export const updateEnvelopeRecipientsRoute = authenticatedProcedure
       path: '/envelope/recipient/update-many',
       summary: 'Update envelope recipients',
       description: 'Update multiple recipients for an envelope',
-      tags: ['Envelope Recipient'],
+      tags: ['Envelope Recipients'],
     },
   })
   .input(ZUpdateEnvelopeRecipientsRequestSchema)

packages/trpc/server/envelope-router/set-envelope-fields.types.ts

@@ -13,6 +13,7 @@ export const ZSetEnvelopeFieldsRequestSchema = z.object({
   envelopeId: z.string(),
   envelopeType: z.nativeEnum(EnvelopeType),
   fields: z.array(
+    // Todo: Envelopes - Use strict schema for types + field meta.
     z.object({
       id: z
         .number()

packages/trpc/server/envelope-router/sign-envelope-field.ts

@@ -133,6 +133,49 @@ export const signEnvelopeFieldRoute = procedure
 
     const insertionValues = extractFieldInsertionValues({ fieldValue, field, documentMeta });
 
+    // Early return for uninserting fields.
+    if (!insertionValues.inserted) {
+      return await prisma.$transaction(async (tx) => {
+        const updatedField = await tx.field.update({
+          where: {
+            id: field.id,
+          },
+          data: {
+            customText: '',
+            inserted: false,
+          },
+        });
+
+        await tx.signature.deleteMany({
+          where: {
+            fieldId: field.id,
+          },
+        });
+
+        if (recipient.role !== RecipientRole.ASSISTANT) {
+          await tx.documentAuditLog.create({
+            data: createDocumentAuditLogData({
+              type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_UNINSERTED,
+              envelopeId: envelope.id,
+              user: {
+                name: recipient.name,
+                email: recipient.email,
+              },
+              requestMetadata: metadata.requestMetadata,
+              data: {
+                field: field.type,
+                fieldId: field.secondaryId,
+              },
+            }),
+          });
+        }
+
+        return {
+          signedField: updatedField,
+        };
+      });
+    }
+
     const derivedRecipientActionAuth = await validateFieldAuth({
       documentAuthOptions: envelope.authOptions,
       recipient,

packages/trpc/server/envelope-router/update-envelope-items.ts

@@ -16,7 +16,7 @@ export const updateEnvelopeItemsRoute = authenticatedProcedure
       path: '/envelope/item/update-many',
       summary: 'Update envelope items',
       description: 'Update multiple envelope items for an envelope',
-      tags: ['Envelope Item'],
+      tags: ['Envelope Items'],
     },
   })
   .input(ZUpdateEnvelopeItemsRequestSchema)

packages/trpc/server/open-api.ts

@@ -6,10 +6,11 @@ import { appRouter } from './router';
 
 export const openApiDocument = {
   ...generateOpenApiDocument(appRouter, {
-    title: 'Documenso v2 beta API',
-    description: 'Subject to breaking changes until v2 is fully released.',
-    version: '0.0.0',
-    baseUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/api/v2-beta`,
+    title: 'Documenso v2 API',
+    description:
+      'Welcome to the Documenso v2 API.\n\nThis API provides access to our system, which you can use to integrate applications, automate workflows, or build custom tools.',
+    version: '1.0.0',
+    baseUrl: `${NEXT_PUBLIC_WEBAPP_URL()}/api/v2`,
     securitySchemes: {
       apiKey: {
         type: 'apiKey',

packages/ui/components/pdf-viewer/pdf-viewer-konva-lazy.tsx

@@ -2,11 +2,14 @@ import React, { Suspense, lazy } from 'react';
 
 import { type PDFDocumentProxy } from 'pdfjs-dist';
 
+import type { PdfViewerRendererMode } from './pdf-viewer-konva';
+
 export type LoadedPDFDocument = PDFDocumentProxy;
 
 export type PDFViewerProps = {
   className?: string;
   onDocumentLoad?: () => void;
+  renderer: PdfViewerRendererMode;
   [key: string]: unknown;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, 'onPageClick'>;
 

packages/ui/components/pdf-viewer/pdf-viewer-konva.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { Trans } from '@lingui/react/macro';
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
+import { Trans, useLingui } from '@lingui/react/macro';
 import Konva from 'konva';
 import { Loader } from 'lucide-react';
 import { type PDFDocumentProxy } from 'pdfjs-dist';
@@ -8,6 +10,7 @@ import { Document as PDFDocument, Page as PDFPage, pdfjs } from 'react-pdf';
 
 import { useCurrentEnvelopeRender } from '@documenso/lib/client-only/providers/envelope-render-provider';
 import { cn } from '@documenso/ui/lib/utils';
+import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 
 export type LoadedPDFDocument = PDFDocumentProxy;
 
@@ -29,10 +32,31 @@ const PDFLoader = () => (
   </>
 );
 
+export type PdfViewerRendererMode = 'editor' | 'preview' | 'signing';
+
+const RendererErrorMessages: Record<
+  PdfViewerRendererMode,
+  { title: MessageDescriptor; description: MessageDescriptor }
+> = {
+  editor: {
+    title: msg`Configuration Error`,
+    description: msg`There was an issue rendering some fields, please review the fields and try again.`,
+  },
+  preview: {
+    title: msg`Configuration Error`,
+    description: msg`Something went wrong while rendering the document, some fields may be missing or corrupted.`,
+  },
+  signing: {
+    title: msg`Configuration Error`,
+    description: msg`Something went wrong while rendering the document, some fields may be missing or corrupted.`,
+  },
+};
+
 export type PdfViewerKonvaProps = {
   className?: string;
   onDocumentLoad?: () => void;
   customPageRenderer?: React.FunctionComponent;
+  renderer: PdfViewerRendererMode;
   [key: string]: unknown;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, 'onPageClick'>;
 
@@ -40,11 +64,14 @@ export const PdfViewerKonva = ({
   className,
   onDocumentLoad,
   customPageRenderer,
+  renderer,
   ...props
 }: PdfViewerKonvaProps) => {
+  const { t } = useLingui();
+
   const $el = useRef<HTMLDivElement>(null);
 
-  const { getPdfBuffer, currentEnvelopeItem } = useCurrentEnvelopeRender();
+  const { getPdfBuffer, currentEnvelopeItem, renderError } = useCurrentEnvelopeRender();
 
   const [width, setWidth] = useState(0);
   const [numPages, setNumPages] = useState(0);
@@ -92,6 +119,13 @@ export const PdfViewerKonva = ({
 
   return (
     <div ref={$el} className={cn('w-full max-w-[800px]', className)} {...props}>
+      {renderError && (
+        <Alert variant="destructive" className="mb-4 max-w-[800px]">
+          <AlertTitle>{t(RendererErrorMessages[renderer].title)}</AlertTitle>
+          <AlertDescription>{t(RendererErrorMessages[renderer].description)}</AlertDescription>
+        </Alert>
+      )}
+
       {envelopeItemFile && Konva ? (
         <PDFDocument
           file={envelopeItemFile}

packages/ui/primitives/document-upload.tsx

@@ -66,7 +66,7 @@ export const DocumentDropzone = ({
   const heading = {
     document: msg`Upload Document`,
     template: msg`Upload Template Document`,
-    envelope: msg`Envelope (beta)`,
+    envelope: msg`Upload Envelope`,
   };
 
   if (disabled && IS_BILLING_ENABLED()) {