Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-17 18:21:32 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: add preview page

Browse Source
This commit is contained in:
David Nguyen
2025-11-05 17:18:15 +11:00
parent a810d20a4f
commit fc2e9af6a0
10 changed files with 383 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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';
@ -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(

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

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

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

@ -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 {
@ -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,

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

@ -16,6 +16,10 @@ type FileData =
status: 'loaded';
};
type EnvelopeRenderOverrideSettings = {
mode: 'edit' | 'sign' | 'export';
};
type EnvelopeRenderItem = TEnvelope['envelopeItems'][number];
type EnvelopeRenderProviderValue = {
@ -28,10 +32,12 @@ type EnvelopeRenderProviderValue = {
renderError: boolean;
setRenderError: (renderError: boolean) => void;
overrideSettings?: EnvelopeRenderOverrideSettings;
};
interface EnvelopeRenderProviderProps {
children: React.ReactNode;
envelope: Pick<TEnvelope, 'envelopeItems'>;
/**
@ -54,6 +60,11 @@ interface EnvelopeRenderProviderProps {
* 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);
@ -77,6 +88,7 @@ export const EnvelopeRenderProvider = ({
fields,
token,
recipientIds = [],
overrideSettings,
}: EnvelopeRenderProviderProps) => {
// Indexed by documentDataId.
const [files, setFiles] = useState<Record<string, FileData>>({});
@ -185,6 +197,7 @@ export const EnvelopeRenderProvider = ({
getRecipientColorKey,
renderError,
setRenderError,
overrideSettings,
}}
>
{children}

2
packages/ui/primitives/combobox.tsx
View File

@ -58,7 +58,7 @@ const Combobox = ({
</Button>
</PopoverTrigger>
<PopoverContent className="p-0" side="bottom" align="start">
<PopoverContent className="z-[1001] p-0" side="bottom" align="start">
<Command>
<CommandInput placeholder={value || placeholderValue} />