mirror of
https://github.com/documenso/documenso.git
synced 2026-06-22 04:12:06 +10:00
fix: migrate certificate generation (#2251)
Generate certificates and audit logs using Konva instead of browserless. This should: - Reduce the changes of generations failing - Improve sealing speed
This commit is contained in:
David Nguyen
GitHub
Binary file not shown.
|
Before Width: | Height: | Size: 144 KiB After Width: | Height: | Size: 163 KiB |
@@ -113,7 +113,7 @@ export const ConfirmTeamEmailTemplate = ({
|
||||
|
||||
<Section className="mb-6 mt-8 text-center">
|
||||
<Button
|
||||
className="bg-documenso-500 inline-flex items-center justify-center rounded-lg px-6 py-3 text-center text-sm font-medium text-black no-underline"
|
||||
className="inline-flex items-center justify-center rounded-lg bg-documenso-500 px-6 py-3 text-center text-sm font-medium text-black no-underline"
|
||||
href={`${baseUrl}/team/verify/email/${token}`}
|
||||
>
|
||||
<Trans>Accept</Trans>
|
||||
|
||||
@@ -72,7 +72,7 @@ export const ResetPasswordTemplate = ({
|
||||
<Trans>
|
||||
Didn't request a password change? We are here to help you secure your account,
|
||||
just{' '}
|
||||
<Link className="text-documenso-700 font-normal" href="mailto:hi@documenso.com">
|
||||
<Link className="font-normal text-documenso-700" href="mailto:hi@documenso.com">
|
||||
contact us
|
||||
</Link>
|
||||
.
|
||||
|
||||
@@ -21,3 +21,12 @@ export const USE_INTERNAL_URL_BROWSERLESS = () =>
|
||||
|
||||
export const IS_AI_FEATURES_CONFIGURED = () =>
|
||||
!!env('GOOGLE_VERTEX_PROJECT_ID') && !!env('GOOGLE_VERTEX_API_KEY');
|
||||
|
||||
/**
|
||||
* Temporary flag to toggle between Playwright-based and Konva-based PDF generation
|
||||
* for audit logs during sealing.
|
||||
*
|
||||
* @deprecated This is a temporary flag and will be removed once Konva-based generation is stable.
|
||||
*/
|
||||
export const NEXT_PRIVATE_USE_PLAYWRIGHT_PDF = () =>
|
||||
env('NEXT_PRIVATE_USE_PLAYWRIGHT_PDF') === 'true';
|
||||
|
||||
@@ -8,3 +8,8 @@ export const MIN_STANDARD_FONT_SIZE = 8;
|
||||
export const MIN_HANDWRITING_FONT_SIZE = 20;
|
||||
|
||||
export const CAVEAT_FONT_PATH = () => `${NEXT_PUBLIC_WEBAPP_URL()}/fonts/caveat.ttf`;
|
||||
|
||||
export const PDF_SIZE_A4_72PPI = {
|
||||
width: 595,
|
||||
height: 842,
|
||||
};
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
rotateDegrees,
|
||||
translate,
|
||||
} from '@cantoo/pdf-lib';
|
||||
import type { DocumentData, DocumentMeta, Envelope, EnvelopeItem, Field } from '@prisma/client';
|
||||
import type { DocumentData, Envelope, EnvelopeItem, Field } from '@prisma/client';
|
||||
import {
|
||||
DocumentStatus,
|
||||
EnvelopeType,
|
||||
@@ -20,9 +20,13 @@ import path from 'node:path';
|
||||
import { groupBy } from 'remeda';
|
||||
import { match } from 'ts-pattern';
|
||||
|
||||
import { generateAuditLogPdf } from '@documenso/lib/server-only/pdf/generate-audit-log-pdf';
|
||||
import { generateCertificatePdf } from '@documenso/lib/server-only/pdf/generate-certificate-pdf';
|
||||
import { prisma } from '@documenso/prisma';
|
||||
import { signPdf } from '@documenso/signing';
|
||||
|
||||
import { NEXT_PRIVATE_USE_PLAYWRIGHT_PDF } from '../../../constants/app';
|
||||
import { PDF_SIZE_A4_72PPI } from '../../../constants/pdf';
|
||||
import { AppError, AppErrorCode } from '../../../errors/app-error';
|
||||
import { sendCompletedEmail } from '../../../server-only/document/send-completed-email';
|
||||
import { getAuditLogsPdf } from '../../../server-only/htmltopdf/get-audit-logs-pdf';
|
||||
@@ -48,7 +52,7 @@ import { putPdfFileServerSide } from '../../../universal/upload/put-file.server'
|
||||
import { fieldsContainUnsignedRequiredField } from '../../../utils/advanced-fields-helpers';
|
||||
import { isDocumentCompleted } from '../../../utils/document';
|
||||
import { createDocumentAuditLogData } from '../../../utils/document-audit-logs';
|
||||
import { mapDocumentIdToSecondaryId, mapSecondaryIdToDocumentId } from '../../../utils/envelope';
|
||||
import { mapDocumentIdToSecondaryId } from '../../../utils/envelope';
|
||||
import type { JobRunIO } from '../../client/_internal/job';
|
||||
import type { TSealDocumentJobDefinition } from './seal-document';
|
||||
|
||||
@@ -68,8 +72,19 @@ export const run = async ({
|
||||
secondaryId: mapDocumentIdToSecondaryId(documentId),
|
||||
},
|
||||
include: {
|
||||
user: {
|
||||
select: {
|
||||
name: true,
|
||||
email: true,
|
||||
},
|
||||
},
|
||||
documentMeta: true,
|
||||
recipients: true,
|
||||
fields: {
|
||||
include: {
|
||||
signature: true,
|
||||
},
|
||||
},
|
||||
envelopeItems: {
|
||||
include: {
|
||||
documentData: true,
|
||||
@@ -116,23 +131,20 @@ export const run = async ({
|
||||
});
|
||||
}
|
||||
|
||||
let envelopeItems = envelope.envelopeItems;
|
||||
let { envelopeItems } = envelope;
|
||||
|
||||
const fields = envelope.fields;
|
||||
|
||||
if (envelopeItems.length < 1) {
|
||||
throw new Error(`Document ${envelope.id} has no envelope items`);
|
||||
}
|
||||
|
||||
const recipients = await prisma.recipient.findMany({
|
||||
where: {
|
||||
envelopeId: envelope.id,
|
||||
role: {
|
||||
not: RecipientRole.CC,
|
||||
},
|
||||
},
|
||||
});
|
||||
const recipientsWithoutCCers = envelope.recipients.filter(
|
||||
(recipient) => recipient.role !== RecipientRole.CC,
|
||||
);
|
||||
|
||||
// Determine if the document has been rejected by checking if any recipient has rejected it
|
||||
const rejectedRecipient = recipients.find(
|
||||
const rejectedRecipient = recipientsWithoutCCers.find(
|
||||
(recipient) => recipient.signingStatus === SigningStatus.REJECTED,
|
||||
);
|
||||
|
||||
@@ -141,15 +153,6 @@ export const run = async ({
|
||||
// Get the rejection reason from the rejected recipient
|
||||
const rejectionReason = rejectedRecipient?.rejectionReason ?? '';
|
||||
|
||||
const fields = await prisma.field.findMany({
|
||||
where: {
|
||||
envelopeId: envelope.id,
|
||||
},
|
||||
include: {
|
||||
signature: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Skip the field check if the document is rejected
|
||||
if (!isRejected && fieldsContainUnsignedRequiredField(fields)) {
|
||||
throw new Error(`Document ${envelope.id} has unsigned required fields`);
|
||||
@@ -178,13 +181,52 @@ export const run = async ({
|
||||
});
|
||||
}
|
||||
|
||||
const legacyDocumentId = mapSecondaryIdToDocumentId(envelope.secondaryId);
|
||||
let certificateDoc: PDFDocument | null = null;
|
||||
let auditLogDoc: PDFDocument | null = null;
|
||||
|
||||
const { certificateData, auditLogData } = await getCertificateAndAuditLogData({
|
||||
legacyDocumentId,
|
||||
documentMeta: envelope.documentMeta,
|
||||
settings,
|
||||
});
|
||||
if (settings.includeSigningCertificate || settings.includeAuditLog) {
|
||||
const certificatePayload = {
|
||||
envelope,
|
||||
recipients: envelope.recipients, // Need to use the recipients from envelope which contains ALL recipients.
|
||||
fields,
|
||||
language: envelope.documentMeta.language,
|
||||
envelopeOwner: {
|
||||
email: envelope.user.email,
|
||||
name: envelope.user.name || '',
|
||||
},
|
||||
envelopeItems: envelopeItems.map((item) => item.title),
|
||||
pageWidth: PDF_SIZE_A4_72PPI.width,
|
||||
pageHeight: PDF_SIZE_A4_72PPI.height,
|
||||
};
|
||||
|
||||
// Use Playwright-based PDF generation if enabled, otherwise use Konva-based generation.
|
||||
// This is a temporary toggle while we validate the Konva-based approach.
|
||||
const usePlaywrightPdf = NEXT_PRIVATE_USE_PLAYWRIGHT_PDF();
|
||||
|
||||
const makeCertificatePdf = async () =>
|
||||
usePlaywrightPdf
|
||||
? getCertificatePdf({
|
||||
documentId,
|
||||
language: envelope.documentMeta.language,
|
||||
}).then(async (buffer) => PDFDocument.load(buffer))
|
||||
: generateCertificatePdf(certificatePayload);
|
||||
|
||||
const makeAuditLogPdf = async () =>
|
||||
usePlaywrightPdf
|
||||
? getAuditLogsPdf({
|
||||
documentId,
|
||||
language: envelope.documentMeta.language,
|
||||
}).then(async (buffer) => PDFDocument.load(buffer))
|
||||
: generateAuditLogPdf(certificatePayload);
|
||||
|
||||
const [createdCertificatePdf, createdAuditLogPdf] = await Promise.all([
|
||||
settings.includeSigningCertificate ? makeCertificatePdf() : null,
|
||||
settings.includeAuditLog ? makeAuditLogPdf() : null,
|
||||
]);
|
||||
|
||||
certificateDoc = createdCertificatePdf;
|
||||
auditLogDoc = createdAuditLogPdf;
|
||||
}
|
||||
|
||||
const newDocumentData: Array<{ oldDocumentDataId: string; newDocumentDataId: string }> = [];
|
||||
|
||||
@@ -203,8 +245,8 @@ export const run = async ({
|
||||
envelopeItemFields,
|
||||
isRejected,
|
||||
rejectionReason,
|
||||
certificateData,
|
||||
auditLogData,
|
||||
certificateDoc,
|
||||
auditLogDoc,
|
||||
});
|
||||
|
||||
newDocumentData.push(result);
|
||||
@@ -300,8 +342,8 @@ type DecorateAndSignPdfOptions = {
|
||||
envelopeItemFields: Field[];
|
||||
isRejected: boolean;
|
||||
rejectionReason: string;
|
||||
certificateData: Buffer | null;
|
||||
auditLogData: Buffer | null;
|
||||
certificateDoc: PDFDocument | null;
|
||||
auditLogDoc: PDFDocument | null;
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -313,8 +355,8 @@ const decorateAndSignPdf = async ({
|
||||
envelopeItemFields,
|
||||
isRejected,
|
||||
rejectionReason,
|
||||
certificateData,
|
||||
auditLogData,
|
||||
certificateDoc,
|
||||
auditLogDoc,
|
||||
}: DecorateAndSignPdfOptions) => {
|
||||
const pdfData = await getFileServerSide(envelopeItem.documentData);
|
||||
|
||||
@@ -330,9 +372,7 @@ const decorateAndSignPdf = async ({
|
||||
await addRejectionStampToPdf(pdfDoc, rejectionReason);
|
||||
}
|
||||
|
||||
if (certificateData) {
|
||||
const certificateDoc = await PDFDocument.load(certificateData);
|
||||
|
||||
if (certificateDoc) {
|
||||
const certificatePages = await pdfDoc.copyPages(
|
||||
certificateDoc,
|
||||
certificateDoc.getPageIndices(),
|
||||
@@ -343,9 +383,7 @@ const decorateAndSignPdf = async ({
|
||||
});
|
||||
}
|
||||
|
||||
if (auditLogData) {
|
||||
const auditLogDoc = await PDFDocument.load(auditLogData);
|
||||
|
||||
if (auditLogDoc) {
|
||||
const auditLogPages = await pdfDoc.copyPages(auditLogDoc, auditLogDoc.getPageIndices());
|
||||
|
||||
auditLogPages.forEach((page) => {
|
||||
@@ -470,47 +508,3 @@ const decorateAndSignPdf = async ({
|
||||
newDocumentDataId: newDocumentData.id,
|
||||
};
|
||||
};
|
||||
|
||||
export const getCertificateAndAuditLogData = async ({
|
||||
legacyDocumentId,
|
||||
documentMeta,
|
||||
settings,
|
||||
}: {
|
||||
legacyDocumentId: number;
|
||||
documentMeta: DocumentMeta;
|
||||
settings: { includeSigningCertificate: boolean; includeAuditLog: boolean };
|
||||
}) => {
|
||||
const getCertificateDataPromise = settings.includeSigningCertificate
|
||||
? getCertificatePdf({
|
||||
documentId: legacyDocumentId,
|
||||
language: documentMeta.language,
|
||||
}).catch((e) => {
|
||||
console.log('Failed to get certificate PDF');
|
||||
console.error(e);
|
||||
|
||||
return null;
|
||||
})
|
||||
: null;
|
||||
|
||||
const getAuditLogDataPromise = settings.includeAuditLog
|
||||
? getAuditLogsPdf({
|
||||
documentId: legacyDocumentId,
|
||||
language: documentMeta.language,
|
||||
}).catch((e) => {
|
||||
console.log('Failed to get audit logs PDF');
|
||||
console.error(e);
|
||||
|
||||
return null;
|
||||
})
|
||||
: null;
|
||||
|
||||
const [certificateData, auditLogData] = await Promise.all([
|
||||
getCertificateDataPromise,
|
||||
getAuditLogDataPromise,
|
||||
]);
|
||||
|
||||
return {
|
||||
certificateData,
|
||||
auditLogData,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
/**
|
||||
* @deprecated We use Konva to generate the audit logs PDF now.
|
||||
*/
|
||||
import { DateTime } from 'luxon';
|
||||
import type { Browser } from 'playwright';
|
||||
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
/**
|
||||
* @deprecated We use Konva to generate the certificate PDF now.
|
||||
*/
|
||||
import { DateTime } from 'luxon';
|
||||
import type { Browser } from 'playwright';
|
||||
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import { i18n } from '@lingui/core';
|
||||
|
||||
import { prisma } from '@documenso/prisma';
|
||||
|
||||
import { ZSupportedLanguageCodeSchema } from '../../constants/i18n';
|
||||
import { parseDocumentAuditLogData } from '../../utils/document-audit-logs';
|
||||
import { getTranslations } from '../../utils/i18n';
|
||||
import { getOrganisationClaimByTeamId } from '../organisation/get-organisation-claims';
|
||||
import type { GenerateCertificatePdfOptions } from './generate-certificate-pdf';
|
||||
import { mergeFilesIntoPdf } from './generate-certificate-pdf';
|
||||
import { renderAuditLogs } from './render-audit-logs';
|
||||
|
||||
type GenerateAuditLogPdfOptions = GenerateCertificatePdfOptions & {
|
||||
envelopeItems: string[];
|
||||
};
|
||||
|
||||
export const generateAuditLogPdf = async (options: GenerateAuditLogPdfOptions) => {
|
||||
const { envelope, envelopeOwner, envelopeItems, recipients, language, pageWidth, pageHeight } =
|
||||
options;
|
||||
|
||||
const documentLanguage = ZSupportedLanguageCodeSchema.parse(language);
|
||||
|
||||
const [organisationClaim, auditLogs, messages] = await Promise.all([
|
||||
getOrganisationClaimByTeamId({ teamId: envelope.teamId }),
|
||||
getAuditLogs(envelope.id),
|
||||
getTranslations(documentLanguage),
|
||||
]);
|
||||
|
||||
i18n.loadAndActivate({
|
||||
locale: documentLanguage,
|
||||
messages,
|
||||
});
|
||||
|
||||
const auditLogPages = await renderAuditLogs({
|
||||
envelope,
|
||||
envelopeOwner,
|
||||
envelopeItems,
|
||||
recipients,
|
||||
auditLogs,
|
||||
hidePoweredBy: organisationClaim.flags.hidePoweredBy ?? false,
|
||||
pageWidth,
|
||||
pageHeight,
|
||||
i18n,
|
||||
});
|
||||
|
||||
return await mergeFilesIntoPdf(auditLogPages);
|
||||
};
|
||||
|
||||
const getAuditLogs = async (envelopeId: string) => {
|
||||
const auditLogs = await prisma.documentAuditLog.findMany({
|
||||
where: {
|
||||
envelopeId,
|
||||
},
|
||||
orderBy: {
|
||||
createdAt: 'desc',
|
||||
},
|
||||
});
|
||||
|
||||
return auditLogs.map((auditLog) => parseDocumentAuditLogData(auditLog));
|
||||
};
|
||||
@@ -0,0 +1,160 @@
|
||||
import { PDFDocument } from '@cantoo/pdf-lib';
|
||||
import { i18n } from '@lingui/core';
|
||||
import { msg } from '@lingui/core/macro';
|
||||
import type { DocumentMeta } from '@prisma/client';
|
||||
import type { Envelope, Field, Recipient, Signature } from '@prisma/client';
|
||||
import { FieldType } from '@prisma/client';
|
||||
import { prop, sortBy } from 'remeda';
|
||||
import { match } from 'ts-pattern';
|
||||
|
||||
import { ZSupportedLanguageCodeSchema } from '../../constants/i18n';
|
||||
import type { TDocumentAuditLogBaseSchema } from '../../types/document-audit-logs';
|
||||
import { extractDocumentAuthMethods } from '../../utils/document-auth';
|
||||
import { getTranslations } from '../../utils/i18n';
|
||||
import { getDocumentCertificateAuditLogs } from '../document/get-document-certificate-audit-logs';
|
||||
import { getOrganisationClaimByTeamId } from '../organisation/get-organisation-claims';
|
||||
import { renderCertificate } from './render-certificate';
|
||||
|
||||
export type GenerateCertificatePdfOptions = {
|
||||
envelope: Envelope & {
|
||||
documentMeta: DocumentMeta;
|
||||
};
|
||||
envelopeOwner: {
|
||||
name: string;
|
||||
email: string;
|
||||
};
|
||||
recipients: Recipient[];
|
||||
fields: (Pick<Field, 'id' | 'type' | 'secondaryId' | 'recipientId'> & {
|
||||
signature?: Pick<Signature, 'signatureImageAsBase64' | 'typedSignature'> | null;
|
||||
})[];
|
||||
language?: string;
|
||||
pageWidth: number;
|
||||
pageHeight: number;
|
||||
};
|
||||
|
||||
export const generateCertificatePdf = async (options: GenerateCertificatePdfOptions) => {
|
||||
const { envelope, envelopeOwner, recipients, fields, language, pageWidth, pageHeight } = options;
|
||||
|
||||
const documentLanguage = ZSupportedLanguageCodeSchema.parse(language);
|
||||
|
||||
const [organisationClaim, auditLogs, messages] = await Promise.all([
|
||||
getOrganisationClaimByTeamId({ teamId: envelope.teamId }),
|
||||
getDocumentCertificateAuditLogs({
|
||||
envelopeId: envelope.id,
|
||||
}),
|
||||
getTranslations(documentLanguage),
|
||||
]);
|
||||
|
||||
i18n.loadAndActivate({
|
||||
locale: documentLanguage,
|
||||
messages,
|
||||
});
|
||||
|
||||
const payload = {
|
||||
recipients: recipients.map((recipient) => {
|
||||
const recipientId = recipient.id;
|
||||
|
||||
const signatureField = fields.find(
|
||||
(field) => field.recipientId === recipient.id && field.type === FieldType.SIGNATURE,
|
||||
);
|
||||
|
||||
const emailSent: TDocumentAuditLogBaseSchema | undefined = auditLogs['EMAIL_SENT'].find(
|
||||
(log) => log.type === 'EMAIL_SENT' && log.data.recipientId === recipientId,
|
||||
);
|
||||
|
||||
const documentSent: TDocumentAuditLogBaseSchema | undefined = auditLogs['DOCUMENT_SENT'].find(
|
||||
(log) => log.type === 'DOCUMENT_SENT',
|
||||
);
|
||||
|
||||
const documentOpened: TDocumentAuditLogBaseSchema | undefined = auditLogs[
|
||||
'DOCUMENT_OPENED'
|
||||
].find((log) => log.type === 'DOCUMENT_OPENED' && log.data.recipientId === recipientId);
|
||||
|
||||
const documentRecipientCompleted: TDocumentAuditLogBaseSchema | undefined = auditLogs[
|
||||
'DOCUMENT_RECIPIENT_COMPLETED'
|
||||
].find(
|
||||
(log) =>
|
||||
log.type === 'DOCUMENT_RECIPIENT_COMPLETED' && log.data.recipientId === recipientId,
|
||||
);
|
||||
|
||||
const documentRecipientRejected: TDocumentAuditLogBaseSchema | undefined = auditLogs[
|
||||
'DOCUMENT_RECIPIENT_REJECTED'
|
||||
].find(
|
||||
(log) => log.type === 'DOCUMENT_RECIPIENT_REJECTED' && log.data.recipientId === recipientId,
|
||||
);
|
||||
|
||||
const extractedAuthMethods = extractDocumentAuthMethods({
|
||||
documentAuth: envelope.authOptions,
|
||||
recipientAuth: recipient.authOptions,
|
||||
});
|
||||
|
||||
const insertedAuditLogsWithFieldAuth = sortBy(
|
||||
auditLogs.DOCUMENT_FIELD_INSERTED.filter(
|
||||
(log) => log.data.recipientId === recipient.id && log.data.fieldSecurity,
|
||||
),
|
||||
[prop('createdAt'), 'desc'],
|
||||
);
|
||||
|
||||
const actionAuthMethod = insertedAuditLogsWithFieldAuth.at(0)?.data?.fieldSecurity?.type;
|
||||
|
||||
let authLevel = match(actionAuthMethod)
|
||||
.with('ACCOUNT', () => i18n._(msg`Account Re-Authentication`))
|
||||
.with('TWO_FACTOR_AUTH', () => i18n._(msg`Two-Factor Re-Authentication`))
|
||||
.with('PASSWORD', () => i18n._(msg`Password Re-Authentication`))
|
||||
.with('PASSKEY', () => i18n._(msg`Passkey Re-Authentication`))
|
||||
.with('EXPLICIT_NONE', () => i18n._(msg`Email`))
|
||||
.with(undefined, () => null)
|
||||
.exhaustive();
|
||||
|
||||
if (!authLevel) {
|
||||
const accessAuthMethod = extractedAuthMethods.derivedRecipientAccessAuth.at(0);
|
||||
|
||||
authLevel = match(accessAuthMethod)
|
||||
.with('ACCOUNT', () => i18n._(msg`Account Authentication`))
|
||||
.with('TWO_FACTOR_AUTH', () => i18n._(msg`Two-Factor Authentication`))
|
||||
.with(undefined, () => i18n._(msg`Email`))
|
||||
.exhaustive();
|
||||
}
|
||||
|
||||
return {
|
||||
id: recipient.id,
|
||||
name: recipient.name,
|
||||
email: recipient.email,
|
||||
role: recipient.role,
|
||||
signingStatus: recipient.signingStatus,
|
||||
signatureField,
|
||||
rejectionReason: recipient.rejectionReason,
|
||||
authLevel,
|
||||
logs: {
|
||||
emailed: emailSent ?? null,
|
||||
sent: documentSent ?? null,
|
||||
opened: documentOpened ?? null,
|
||||
completed: documentRecipientCompleted ?? null,
|
||||
rejected: documentRecipientRejected ?? null,
|
||||
},
|
||||
};
|
||||
}),
|
||||
envelopeOwner,
|
||||
qrToken: envelope.qrToken,
|
||||
hidePoweredBy: organisationClaim.flags.hidePoweredBy ?? false,
|
||||
pageWidth,
|
||||
pageHeight,
|
||||
i18n,
|
||||
};
|
||||
|
||||
const certificatePages = await renderCertificate(payload);
|
||||
|
||||
return await mergeFilesIntoPdf(certificatePages);
|
||||
};
|
||||
|
||||
export async function mergeFilesIntoPdf(buffers: Uint8Array[]) {
|
||||
const mergedPdf = await PDFDocument.create();
|
||||
|
||||
for (const buffer of buffers) {
|
||||
const pdf = await PDFDocument.load(buffer);
|
||||
const pages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
|
||||
pages.forEach((p) => mergedPdf.addPage(p));
|
||||
}
|
||||
|
||||
return mergedPdf;
|
||||
}
|
||||
@@ -0,0 +1,721 @@
|
||||
import type { I18n } from '@lingui/core';
|
||||
import { msg } from '@lingui/core/macro';
|
||||
import type { DocumentMeta } from '@prisma/client';
|
||||
import type { Envelope, RecipientRole } from '@prisma/client';
|
||||
import Konva from 'konva';
|
||||
import 'konva/skia-backend';
|
||||
import type { DateTimeFormatOptions } from 'luxon';
|
||||
import { DateTime } from 'luxon';
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import type { Canvas } from 'skia-canvas';
|
||||
import { FontLibrary } from 'skia-canvas';
|
||||
import { Image as SkiaImage } from 'skia-canvas';
|
||||
import { match } from 'ts-pattern';
|
||||
import { P } from 'ts-pattern';
|
||||
import { UAParser } from 'ua-parser-js';
|
||||
|
||||
import { DOCUMENT_STATUS } from '../../constants/document';
|
||||
import { APP_I18N_OPTIONS } from '../../constants/i18n';
|
||||
import { RECIPIENT_ROLES_DESCRIPTION } from '../../constants/recipient-roles';
|
||||
import { DOCUMENT_AUDIT_LOG_TYPE } from '../../types/document-audit-logs';
|
||||
import type { TDocumentAuditLog } from '../../types/document-audit-logs';
|
||||
import { formatDocumentAuditLogAction } from '../../utils/document-audit-logs';
|
||||
|
||||
export type AuditLogRecipient = {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
role: RecipientRole;
|
||||
};
|
||||
|
||||
type GenerateAuditLogsOptions = {
|
||||
envelope: Envelope & {
|
||||
documentMeta: DocumentMeta;
|
||||
};
|
||||
envelopeItems: string[];
|
||||
recipients: AuditLogRecipient[];
|
||||
auditLogs: TDocumentAuditLog[];
|
||||
hidePoweredBy: boolean;
|
||||
pageWidth: number;
|
||||
pageHeight: number;
|
||||
i18n: I18n;
|
||||
envelopeOwner: {
|
||||
email: string;
|
||||
name: string;
|
||||
};
|
||||
};
|
||||
|
||||
const parser = new UAParser();
|
||||
|
||||
const textMutedForegroundLight = '#929DAE';
|
||||
const textForeground = '#000';
|
||||
const textMutedForeground = '#64748B';
|
||||
const textBase = 10;
|
||||
const textSm = 9;
|
||||
const textXs = 8;
|
||||
const fontMedium = '500';
|
||||
|
||||
const pageTopMargin = 60;
|
||||
const pageBottomMargin = 15;
|
||||
const contentMaxWidth = 768;
|
||||
const rowPadding = 10;
|
||||
const titleFontSize = 18;
|
||||
|
||||
type RenderOverviewCardLabelAndTextOptions = {
|
||||
label: string;
|
||||
text: string | string[];
|
||||
width: number;
|
||||
groupX?: number;
|
||||
};
|
||||
|
||||
const renderOverviewCardLabels = (options: RenderOverviewCardLabelAndTextOptions) => {
|
||||
const { width, text } = options;
|
||||
|
||||
const labelYSpacing = 4;
|
||||
|
||||
const group = new Konva.Group({
|
||||
x: options.groupX ?? 0,
|
||||
});
|
||||
|
||||
const label = new Konva.Text({
|
||||
x: 0,
|
||||
y: 0,
|
||||
text: options.label,
|
||||
fontStyle: fontMedium,
|
||||
fontFamily: 'Inter',
|
||||
fill: textForeground,
|
||||
fontSize: textSm,
|
||||
});
|
||||
|
||||
group.add(label);
|
||||
|
||||
if (typeof text === 'string') {
|
||||
const value = new Konva.Text({
|
||||
x: 0,
|
||||
y: label.height() + labelYSpacing,
|
||||
width: width - label.width(),
|
||||
fontFamily: 'Inter',
|
||||
text,
|
||||
fill: textForeground,
|
||||
wrap: 'char',
|
||||
fontSize: textSm,
|
||||
});
|
||||
|
||||
group.add(value);
|
||||
} else {
|
||||
for (const textValue of text) {
|
||||
const value = new Konva.Text({
|
||||
x: 0,
|
||||
y: group.getClientRect().height + 4,
|
||||
width: width - label.width(),
|
||||
fontFamily: 'Inter',
|
||||
text: '• ' + textValue,
|
||||
fill: textForeground,
|
||||
wrap: 'char',
|
||||
fontSize: textSm,
|
||||
});
|
||||
|
||||
group.add(value);
|
||||
}
|
||||
}
|
||||
|
||||
return group;
|
||||
};
|
||||
|
||||
type RenderVerticalLabelAndTextOptions = {
|
||||
label: string;
|
||||
text: string;
|
||||
width?: number;
|
||||
align?: 'left' | 'right';
|
||||
x?: number;
|
||||
y?: number;
|
||||
textFontFamily?: string;
|
||||
};
|
||||
|
||||
const renderVerticalLabelAndText = (options: RenderVerticalLabelAndTextOptions) => {
|
||||
const { label, text, width, align, x, y, textFontFamily } = options;
|
||||
|
||||
const group = new Konva.Group({
|
||||
x: x ?? 0,
|
||||
y: y ?? 0,
|
||||
});
|
||||
|
||||
const konvaLabel = new Konva.Text({
|
||||
align: align ?? 'left',
|
||||
fontFamily: 'Inter',
|
||||
width,
|
||||
text: label,
|
||||
fontSize: textXs,
|
||||
fill: textMutedForegroundLight,
|
||||
});
|
||||
|
||||
group.add(konvaLabel);
|
||||
|
||||
const konvaText = new Konva.Text({
|
||||
y: group.getClientRect().height + 6,
|
||||
align: align ?? 'left',
|
||||
fontFamily: textFontFamily ?? 'Inter',
|
||||
width,
|
||||
text: text,
|
||||
fontSize: textXs,
|
||||
fill: textForeground,
|
||||
});
|
||||
|
||||
group.add(konvaText);
|
||||
|
||||
return group;
|
||||
};
|
||||
|
||||
type RenderOverviewCardOptions = {
|
||||
envelope: Envelope & {
|
||||
documentMeta: DocumentMeta;
|
||||
};
|
||||
envelopeItems: string[];
|
||||
envelopeOwner: {
|
||||
email: string;
|
||||
name: string;
|
||||
};
|
||||
recipients: AuditLogRecipient[];
|
||||
width: number;
|
||||
i18n: I18n;
|
||||
};
|
||||
|
||||
const renderOverviewCard = (options: RenderOverviewCardOptions) => {
|
||||
const { envelope, envelopeItems, envelopeOwner, recipients, width, i18n } = options;
|
||||
const cardPadding = 16;
|
||||
|
||||
const overviewCard = new Konva.Group();
|
||||
|
||||
const columnSpacing = 10;
|
||||
const columnWidth = (width - columnSpacing) / 2;
|
||||
const rowVerticalSpacing = 32;
|
||||
|
||||
const rowOne = new Konva.Group({
|
||||
x: cardPadding,
|
||||
y: cardPadding,
|
||||
});
|
||||
|
||||
const envelopeIdLabel = renderOverviewCardLabels({
|
||||
label: i18n._(msg`Envelope ID`),
|
||||
text: envelope.id,
|
||||
width: columnWidth,
|
||||
});
|
||||
const ownerLabel = renderOverviewCardLabels({
|
||||
label: i18n._(msg`Owner`),
|
||||
text: `${envelopeOwner.name} (${envelopeOwner.email})`,
|
||||
width: columnWidth,
|
||||
groupX: columnWidth + columnSpacing,
|
||||
});
|
||||
|
||||
rowOne.add(envelopeIdLabel);
|
||||
rowOne.add(ownerLabel);
|
||||
overviewCard.add(rowOne);
|
||||
|
||||
const rowTwo = new Konva.Group({
|
||||
x: cardPadding,
|
||||
y: overviewCard.getClientRect().height + rowVerticalSpacing,
|
||||
});
|
||||
|
||||
const statusLabel = renderOverviewCardLabels({
|
||||
label: i18n._(msg`Status`),
|
||||
text: i18n
|
||||
._(envelope.deletedAt ? msg`Deleted` : DOCUMENT_STATUS[envelope.status].description)
|
||||
.toUpperCase(),
|
||||
width: columnWidth,
|
||||
});
|
||||
const timeZoneLabel = renderOverviewCardLabels({
|
||||
label: i18n._(msg`Time Zone`),
|
||||
text: envelope.documentMeta?.timezone || 'N/A',
|
||||
width: columnWidth,
|
||||
groupX: columnWidth + columnSpacing,
|
||||
});
|
||||
|
||||
rowTwo.add(statusLabel);
|
||||
rowTwo.add(timeZoneLabel);
|
||||
overviewCard.add(rowTwo);
|
||||
|
||||
const rowThree = new Konva.Group({
|
||||
x: cardPadding,
|
||||
y: overviewCard.getClientRect().height + rowVerticalSpacing,
|
||||
});
|
||||
|
||||
const createdAtLabel = renderOverviewCardLabels({
|
||||
label: i18n._(msg`Created At`),
|
||||
text: DateTime.fromJSDate(envelope.createdAt)
|
||||
.setLocale(APP_I18N_OPTIONS.defaultLocale)
|
||||
.toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)'),
|
||||
width: columnWidth,
|
||||
});
|
||||
const lastUpdatedLabel = renderOverviewCardLabels({
|
||||
label: i18n._(msg`Last Updated`),
|
||||
text: DateTime.fromJSDate(envelope.updatedAt)
|
||||
.setLocale(APP_I18N_OPTIONS.defaultLocale)
|
||||
.toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)'),
|
||||
width: columnWidth,
|
||||
groupX: columnWidth + columnSpacing,
|
||||
});
|
||||
|
||||
rowThree.add(createdAtLabel);
|
||||
rowThree.add(lastUpdatedLabel);
|
||||
overviewCard.add(rowThree);
|
||||
|
||||
const rowFour = new Konva.Group({
|
||||
x: cardPadding,
|
||||
y: overviewCard.getClientRect().height + rowVerticalSpacing,
|
||||
});
|
||||
|
||||
const enclosedDocumentsLabel = renderOverviewCardLabels({
|
||||
label: i18n._(msg`Enclosed Documents`),
|
||||
text: envelopeItems,
|
||||
width: columnWidth,
|
||||
});
|
||||
|
||||
const recipientsLabel = renderOverviewCardLabels({
|
||||
label: i18n._(msg`Recipients`),
|
||||
text: recipients.map(
|
||||
(recipient) =>
|
||||
`[${i18n._(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}] ${recipient.name} (${recipient.email})`,
|
||||
),
|
||||
width: columnWidth,
|
||||
groupX: columnWidth + columnSpacing,
|
||||
});
|
||||
|
||||
rowFour.add(enclosedDocumentsLabel);
|
||||
rowFour.add(recipientsLabel);
|
||||
overviewCard.add(rowFour);
|
||||
|
||||
// Create rect border around the overview card
|
||||
const cardRect = new Konva.Rect({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width,
|
||||
height: overviewCard.getClientRect().height + cardPadding * 2,
|
||||
stroke: '#e5e7eb',
|
||||
strokeWidth: 1.5,
|
||||
cornerRadius: 8,
|
||||
});
|
||||
|
||||
overviewCard.add(cardRect);
|
||||
|
||||
return overviewCard;
|
||||
};
|
||||
|
||||
type RenderRowOptions = {
|
||||
auditLog: TDocumentAuditLog;
|
||||
width: number;
|
||||
i18n: I18n;
|
||||
};
|
||||
|
||||
const renderRow = (options: RenderRowOptions) => {
|
||||
const { auditLog, width, i18n } = options;
|
||||
|
||||
const paddingWithinCard = 12;
|
||||
|
||||
const columnSpacing = 10;
|
||||
const columnWidth = (width - paddingWithinCard * 2 - columnSpacing) / 2;
|
||||
|
||||
const indicatorWidth = 3;
|
||||
const indicatorPaddingRight = 10;
|
||||
const rowGroup = new Konva.Group();
|
||||
|
||||
const rowHeaderGroup = new Konva.Group();
|
||||
|
||||
const auditLogIndicatorColor = new Konva.Circle({
|
||||
x: indicatorWidth,
|
||||
y: indicatorWidth + 3,
|
||||
radius: indicatorWidth,
|
||||
fill: getAuditLogIndicatorColor(auditLog.type),
|
||||
});
|
||||
|
||||
const auditLogTypeText = new Konva.Text({
|
||||
x: indicatorWidth + indicatorPaddingRight,
|
||||
y: 0,
|
||||
width: columnWidth - indicatorWidth - indicatorPaddingRight,
|
||||
text: auditLog.type.replace(/_/g, ' '),
|
||||
fontFamily: 'Inter',
|
||||
fontSize: textSm,
|
||||
fontStyle: fontMedium,
|
||||
fill: textMutedForeground,
|
||||
});
|
||||
|
||||
const auditLogDescriptionText = new Konva.Text({
|
||||
x: indicatorWidth + indicatorPaddingRight,
|
||||
y: auditLogTypeText.height() + 4,
|
||||
width: columnWidth - indicatorWidth - indicatorPaddingRight,
|
||||
text: formatDocumentAuditLogAction(i18n, auditLog).description,
|
||||
fontFamily: 'Inter',
|
||||
fontSize: textSm,
|
||||
fill: textForeground,
|
||||
});
|
||||
|
||||
const auditLogTimestampText = new Konva.Text({
|
||||
x: columnWidth + columnSpacing,
|
||||
width: columnWidth,
|
||||
text: DateTime.fromJSDate(auditLog.createdAt)
|
||||
.setLocale(APP_I18N_OPTIONS.defaultLocale)
|
||||
.toLocaleString(dateFormat),
|
||||
fontFamily: 'Inter',
|
||||
align: 'right',
|
||||
fontSize: textSm,
|
||||
fill: textMutedForeground,
|
||||
});
|
||||
|
||||
rowHeaderGroup.add(auditLogIndicatorColor);
|
||||
rowHeaderGroup.add(auditLogTypeText);
|
||||
rowHeaderGroup.add(auditLogDescriptionText);
|
||||
rowHeaderGroup.add(auditLogTimestampText);
|
||||
|
||||
rowHeaderGroup.setAttrs({
|
||||
x: paddingWithinCard,
|
||||
y: paddingWithinCard,
|
||||
} satisfies Partial<Konva.GroupConfig>);
|
||||
|
||||
rowGroup.add(rowHeaderGroup);
|
||||
|
||||
// Draw border line.
|
||||
const borderLine = new Konva.Line({
|
||||
points: [0, 0, width - paddingWithinCard * 2, 0],
|
||||
stroke: '#e5e7eb',
|
||||
strokeWidth: 1,
|
||||
x: paddingWithinCard,
|
||||
y: rowGroup.getClientRect().height + paddingWithinCard + 12,
|
||||
});
|
||||
|
||||
rowGroup.add(borderLine);
|
||||
|
||||
const bottomSection = new Konva.Group({
|
||||
x: paddingWithinCard,
|
||||
y: rowGroup.getClientRect().height + paddingWithinCard + 12,
|
||||
});
|
||||
|
||||
// Row 1 Column 1
|
||||
const userLabel = renderVerticalLabelAndText({
|
||||
label: i18n._(msg`User`).toUpperCase(),
|
||||
text: auditLog.email || 'N/A',
|
||||
align: 'left',
|
||||
width: columnWidth,
|
||||
textFontFamily: 'ui-monospace',
|
||||
});
|
||||
|
||||
// Row 1 Column 2
|
||||
const ipAddressLabel = renderVerticalLabelAndText({
|
||||
label: i18n._(msg`IP Address`).toUpperCase(),
|
||||
text: auditLog.ipAddress || 'N/A',
|
||||
align: 'right',
|
||||
x: columnWidth + columnSpacing,
|
||||
width: columnWidth,
|
||||
textFontFamily: 'ui-monospace',
|
||||
});
|
||||
|
||||
bottomSection.add(userLabel);
|
||||
bottomSection.add(ipAddressLabel);
|
||||
|
||||
parser.setUA(auditLog.userAgent || '');
|
||||
const userAgentInfo = parser.getResult();
|
||||
|
||||
// Row 2 Column 1
|
||||
const userAgentLabel = renderVerticalLabelAndText({
|
||||
label: i18n._(msg`User Agent`).toUpperCase(),
|
||||
text: i18n._(formatUserAgent(auditLog.userAgent, userAgentInfo)),
|
||||
align: 'left',
|
||||
width,
|
||||
y: bottomSection.getClientRect().height + 16,
|
||||
});
|
||||
|
||||
bottomSection.add(userAgentLabel);
|
||||
rowGroup.add(bottomSection);
|
||||
|
||||
const cardRect = new Konva.Rect({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: rowGroup.getClientRect().width,
|
||||
height: rowGroup.getClientRect().height + paddingWithinCard * 2,
|
||||
stroke: '#e5e7eb',
|
||||
strokeWidth: 1,
|
||||
cornerRadius: 8,
|
||||
});
|
||||
|
||||
rowGroup.add(cardRect);
|
||||
|
||||
return rowGroup;
|
||||
};
|
||||
|
||||
const renderBranding = () => {
|
||||
const branding = new Konva.Group();
|
||||
|
||||
const brandingHeight = 16;
|
||||
|
||||
const logoPath = path.join(process.cwd(), 'public/static/logo.png');
|
||||
const logo = fs.readFileSync(logoPath);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
const img = new SkiaImage(logo) as unknown as HTMLImageElement;
|
||||
|
||||
const brandingImage = new Konva.Image({
|
||||
image: img,
|
||||
height: brandingHeight,
|
||||
width: brandingHeight * (img.width / img.height),
|
||||
});
|
||||
|
||||
branding.add(brandingImage);
|
||||
return branding;
|
||||
};
|
||||
|
||||
type GroupRowsIntoPagesOptions = {
|
||||
auditLogs: TDocumentAuditLog[];
|
||||
maxHeight: number;
|
||||
contentWidth: number;
|
||||
i18n: I18n;
|
||||
overviewCard: Konva.Group;
|
||||
};
|
||||
|
||||
const groupRowsIntoPages = (options: GroupRowsIntoPagesOptions) => {
|
||||
const { auditLogs, maxHeight, contentWidth, i18n, overviewCard } = options;
|
||||
|
||||
const groupedRows: Konva.Group[][] = [[]];
|
||||
|
||||
const overviewCardHeight = overviewCard.getClientRect().height;
|
||||
|
||||
// First page has title + overview card
|
||||
let availableHeight = maxHeight - pageTopMargin - overviewCardHeight;
|
||||
let currentGroupedRowIndex = 0;
|
||||
|
||||
// Group rows into pages.
|
||||
for (const auditLog of auditLogs) {
|
||||
const row = renderRow({ auditLog, width: contentWidth, i18n });
|
||||
|
||||
const rowHeight = row.getClientRect().height;
|
||||
const requiredHeight = rowHeight + rowPadding;
|
||||
|
||||
if (requiredHeight > availableHeight) {
|
||||
currentGroupedRowIndex++;
|
||||
groupedRows[currentGroupedRowIndex] = [row];
|
||||
|
||||
// Subsequent pages only have title (no overview card)
|
||||
availableHeight = maxHeight - pageTopMargin;
|
||||
} else {
|
||||
groupedRows[currentGroupedRowIndex].push(row);
|
||||
}
|
||||
|
||||
// Reduce available height by the row height.
|
||||
availableHeight -= requiredHeight;
|
||||
}
|
||||
|
||||
return groupedRows;
|
||||
};
|
||||
|
||||
type RenderPagesOptions = {
|
||||
groupedRows: Konva.Group[][];
|
||||
margin: number;
|
||||
pageTopMargin: number;
|
||||
i18n: I18n;
|
||||
overviewCard: Konva.Group;
|
||||
};
|
||||
|
||||
const renderPages = (options: RenderPagesOptions) => {
|
||||
const { groupedRows, margin, pageTopMargin, i18n, overviewCard } = options;
|
||||
|
||||
const rowPadding = 10;
|
||||
const pages: Konva.Group[] = [];
|
||||
|
||||
// Render the rows for each page.
|
||||
for (const [pageIndex, rows] of groupedRows.entries()) {
|
||||
const pageGroup = new Konva.Group();
|
||||
|
||||
// Add title to each page
|
||||
const pageTitle = new Konva.Text({
|
||||
x: margin,
|
||||
y: 0,
|
||||
height: pageTopMargin,
|
||||
verticalAlign: 'middle',
|
||||
text: i18n._(msg`Audit Log`),
|
||||
fill: textForeground,
|
||||
fontFamily: 'Inter',
|
||||
fontSize: titleFontSize,
|
||||
fontStyle: '700',
|
||||
});
|
||||
pageGroup.add(pageTitle);
|
||||
|
||||
// Add overview card only on first page
|
||||
if (pageIndex === 0) {
|
||||
overviewCard.setAttrs({
|
||||
x: margin,
|
||||
y: pageGroup.getClientRect().height,
|
||||
});
|
||||
pageGroup.add(overviewCard);
|
||||
}
|
||||
|
||||
// Add rows to the page
|
||||
for (const row of rows) {
|
||||
const yPosition = pageGroup.getClientRect().height + rowPadding;
|
||||
|
||||
row.setAttrs({
|
||||
x: margin,
|
||||
y: yPosition,
|
||||
});
|
||||
|
||||
pageGroup.add(row);
|
||||
}
|
||||
|
||||
pages.push(pageGroup);
|
||||
}
|
||||
|
||||
return pages;
|
||||
};
|
||||
|
||||
export async function renderAuditLogs({
|
||||
envelope,
|
||||
envelopeOwner,
|
||||
envelopeItems,
|
||||
recipients,
|
||||
auditLogs,
|
||||
pageWidth,
|
||||
pageHeight,
|
||||
i18n,
|
||||
hidePoweredBy,
|
||||
}: GenerateAuditLogsOptions) {
|
||||
const fontPath = path.join(process.cwd(), 'public/fonts');
|
||||
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
FontLibrary.use({
|
||||
['Caveat']: [path.join(fontPath, 'caveat.ttf')],
|
||||
['Inter']: [path.join(fontPath, 'inter-variablefont_opsz,wght.ttf')],
|
||||
});
|
||||
|
||||
const minimumMargin = 10;
|
||||
|
||||
const contentWidth = Math.min(pageWidth - minimumMargin * 2, contentMaxWidth);
|
||||
const margin = (pageWidth - contentWidth) / 2;
|
||||
|
||||
let stage: Konva.Stage | null = new Konva.Stage({ width: pageWidth, height: pageHeight });
|
||||
|
||||
const overviewCard = renderOverviewCard({
|
||||
envelope,
|
||||
envelopeOwner,
|
||||
envelopeItems,
|
||||
recipients,
|
||||
width: contentWidth,
|
||||
i18n,
|
||||
});
|
||||
|
||||
const groupedRows = groupRowsIntoPages({
|
||||
auditLogs,
|
||||
maxHeight: pageHeight,
|
||||
contentWidth,
|
||||
i18n,
|
||||
overviewCard,
|
||||
});
|
||||
|
||||
const pageGroups = renderPages({
|
||||
groupedRows,
|
||||
margin,
|
||||
pageTopMargin,
|
||||
i18n,
|
||||
overviewCard,
|
||||
});
|
||||
|
||||
const brandingGroup = renderBranding();
|
||||
const brandingRect = brandingGroup.getClientRect();
|
||||
const brandingTopPadding = 24;
|
||||
|
||||
const pages: Uint8Array[] = [];
|
||||
|
||||
let isBrandingPlaced = false;
|
||||
|
||||
// Render each page group to PDF
|
||||
for (const [index, pageGroup] of pageGroups.entries()) {
|
||||
stage.destroyChildren();
|
||||
const page = new Konva.Layer();
|
||||
|
||||
page.add(pageGroup);
|
||||
|
||||
// Add branding on the last page if there is space.
|
||||
if (index === pageGroups.length - 1 && !hidePoweredBy) {
|
||||
const remainingHeight = pageHeight - pageGroup.getClientRect().height - pageBottomMargin;
|
||||
|
||||
if (brandingRect.height + brandingTopPadding <= remainingHeight) {
|
||||
brandingGroup.setAttrs({
|
||||
x: pageWidth - brandingRect.width - margin,
|
||||
y: pageGroup.getClientRect().height + brandingTopPadding,
|
||||
} satisfies Partial<Konva.GroupConfig>);
|
||||
|
||||
page.add(brandingGroup);
|
||||
isBrandingPlaced = true;
|
||||
}
|
||||
}
|
||||
|
||||
stage.add(page);
|
||||
|
||||
// Export the page and save it.
|
||||
const canvas = page.canvas._canvas as unknown as Canvas; // eslint-disable-line @typescript-eslint/consistent-type-assertions
|
||||
const buffer = await canvas.toBuffer('pdf');
|
||||
pages.push(new Uint8Array(buffer));
|
||||
}
|
||||
|
||||
// Need to create an empty page for the branding if it hasn't been placed yet.
|
||||
if (!hidePoweredBy && !isBrandingPlaced) {
|
||||
stage.destroyChildren();
|
||||
const page = new Konva.Layer();
|
||||
|
||||
brandingGroup.setAttrs({
|
||||
x: pageWidth - brandingRect.width - margin,
|
||||
y: pageTopMargin,
|
||||
} satisfies Partial<Konva.GroupConfig>);
|
||||
|
||||
page.add(brandingGroup);
|
||||
stage.add(page);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
const canvas = page.canvas._canvas as unknown as Canvas;
|
||||
const buffer = await canvas.toBuffer('pdf');
|
||||
|
||||
pages.push(new Uint8Array(buffer));
|
||||
}
|
||||
|
||||
stage.destroy();
|
||||
stage = null;
|
||||
|
||||
return pages;
|
||||
}
|
||||
|
||||
const dateFormat: DateTimeFormatOptions = {
|
||||
...DateTime.DATETIME_SHORT,
|
||||
hourCycle: 'h12',
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the color indicator for the audit log type
|
||||
*/
|
||||
const getAuditLogIndicatorColor = (type: string) =>
|
||||
match(type)
|
||||
.with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED, () => '#22c55e') // bg-green-500
|
||||
.with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED, () => '#ef4444') // bg-red-500
|
||||
.with(DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_SENT, () => '#f97316') // bg-orange-500
|
||||
.with(
|
||||
P.union(
|
||||
DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_INSERTED,
|
||||
DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_FIELD_UNINSERTED,
|
||||
),
|
||||
() => '#3b82f6', // bg-blue-500
|
||||
)
|
||||
.otherwise(() => '#f1f5f9'); // bg-muted
|
||||
|
||||
const formatUserAgent = (userAgent: string | null | undefined, userAgentInfo: UAParser.IResult) => {
|
||||
if (!userAgent) {
|
||||
return msg`N/A`;
|
||||
}
|
||||
|
||||
const browser = userAgentInfo.browser.name;
|
||||
const version = userAgentInfo.browser.version;
|
||||
const os = userAgentInfo.os.name;
|
||||
|
||||
// If we can parse meaningful browser info, format it nicely
|
||||
if (browser && os) {
|
||||
const browserInfo = version ? `${browser} ${version}` : browser;
|
||||
|
||||
return msg`${browserInfo} on ${os}`;
|
||||
}
|
||||
|
||||
return msg`${userAgent}`;
|
||||
};
|
||||
@@ -0,0 +1,819 @@
|
||||
import type { I18n } from '@lingui/core';
|
||||
import { msg } from '@lingui/core/macro';
|
||||
import type { Field, Signature } from '@prisma/client';
|
||||
import { SigningStatus } from '@prisma/client';
|
||||
import type { RecipientRole } from '@prisma/client';
|
||||
import Konva from 'konva';
|
||||
import 'konva/skia-backend';
|
||||
import { DateTime } from 'luxon';
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import sharp from 'sharp';
|
||||
import type { Canvas } from 'skia-canvas';
|
||||
import { FontLibrary } from 'skia-canvas';
|
||||
import { Image as SkiaImage } from 'skia-canvas';
|
||||
import { UAParser } from 'ua-parser-js';
|
||||
import { renderSVG } from 'uqr';
|
||||
|
||||
import { NEXT_PUBLIC_WEBAPP_URL } from '../../constants/app';
|
||||
import { APP_I18N_OPTIONS } from '../../constants/i18n';
|
||||
import {
|
||||
RECIPIENT_ROLES_DESCRIPTION,
|
||||
RECIPIENT_ROLE_SIGNING_REASONS,
|
||||
} from '../../constants/recipient-roles';
|
||||
import type { TDocumentAuditLogBaseSchema } from '../../types/document-audit-logs';
|
||||
|
||||
type ColumnWidths = [number, number, number];
|
||||
|
||||
type BaseAuditLog = Pick<TDocumentAuditLogBaseSchema, 'createdAt' | 'ipAddress' | 'userAgent'>;
|
||||
|
||||
export type CertificateRecipient = {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
role: RecipientRole;
|
||||
rejectionReason: string | null;
|
||||
signingStatus: SigningStatus;
|
||||
signatureField?: Pick<Field, 'id' | 'secondaryId' | 'recipientId'> & {
|
||||
signature?: Pick<Signature, 'signatureImageAsBase64' | 'typedSignature'> | null;
|
||||
};
|
||||
authLevel: string;
|
||||
logs: {
|
||||
emailed: BaseAuditLog | null;
|
||||
sent: BaseAuditLog | null;
|
||||
opened: BaseAuditLog | null;
|
||||
completed: BaseAuditLog | null;
|
||||
rejected: BaseAuditLog | null;
|
||||
};
|
||||
};
|
||||
|
||||
type GenerateCertificateOptions = {
|
||||
recipients: CertificateRecipient[];
|
||||
qrToken: string | null;
|
||||
hidePoweredBy: boolean;
|
||||
i18n: I18n;
|
||||
envelopeOwner: {
|
||||
name: string;
|
||||
email: string;
|
||||
};
|
||||
pageWidth: number;
|
||||
pageHeight: number;
|
||||
};
|
||||
|
||||
// Helper function to get device info from user agent
|
||||
const getDevice = (userAgent?: string | null): string => {
|
||||
if (!userAgent) {
|
||||
return 'Unknown';
|
||||
}
|
||||
|
||||
const parser = new UAParser(userAgent);
|
||||
|
||||
parser.setUA(userAgent);
|
||||
|
||||
const result = parser.getResult();
|
||||
|
||||
return `${result.os.name} - ${result.browser.name} ${result.browser.version}`;
|
||||
};
|
||||
|
||||
const textMutedForegroundLight = '#929DAE';
|
||||
const textForeground = '#000';
|
||||
const textMutedForeground = '#64748B';
|
||||
const textBase = 10;
|
||||
const textSm = 9;
|
||||
const textXs = 8;
|
||||
const fontMedium = '500';
|
||||
|
||||
const columnWidthPercentages = [30, 30, 40];
|
||||
const rowPadding = 12;
|
||||
const tableHeaderHeight = 38;
|
||||
const pageTopMargin = 72;
|
||||
const pageBottomMargin = 12;
|
||||
const contentMaxWidth = 768;
|
||||
|
||||
const titleFontSize = 18;
|
||||
|
||||
type RenderLabelAndTextOptions = {
|
||||
label: string;
|
||||
text: string;
|
||||
width: number;
|
||||
y?: number;
|
||||
};
|
||||
|
||||
const renderLabelAndText = (options: RenderLabelAndTextOptions) => {
|
||||
const { width, y } = options;
|
||||
|
||||
const group = new Konva.Group({
|
||||
y,
|
||||
});
|
||||
|
||||
const label = new Konva.Text({
|
||||
x: 0,
|
||||
y: 0,
|
||||
text: `${options.label}: `,
|
||||
fontStyle: fontMedium,
|
||||
fontFamily: 'Inter',
|
||||
fill: textMutedForeground,
|
||||
fontSize: textSm,
|
||||
});
|
||||
|
||||
group.add(label);
|
||||
|
||||
const value = new Konva.Text({
|
||||
x: label.width(),
|
||||
y: 0,
|
||||
width: width - label.width(),
|
||||
fontFamily: 'Inter',
|
||||
text: options.text,
|
||||
fill: textMutedForeground,
|
||||
wrap: 'char',
|
||||
fontSize: textSm,
|
||||
});
|
||||
|
||||
group.add(value);
|
||||
|
||||
return group;
|
||||
};
|
||||
|
||||
type RenderRowHeaderOptions = {
|
||||
columnWidths: number[];
|
||||
i18n: I18n;
|
||||
};
|
||||
|
||||
const renderRowHeader = (options: RenderRowHeaderOptions) => {
|
||||
const { columnWidths, i18n } = options;
|
||||
|
||||
const columnOneWidth = columnWidths[0];
|
||||
const columnTwoWidth = columnWidths[1];
|
||||
const columnThreeWidth = columnWidths[2];
|
||||
|
||||
const headerRow = new Konva.Group();
|
||||
|
||||
const headerFontStyling = {
|
||||
fontFamily: 'Inter',
|
||||
fontSize: 11,
|
||||
fontStyle: fontMedium,
|
||||
verticalAlign: 'middle',
|
||||
fill: textMutedForeground,
|
||||
height: tableHeaderHeight,
|
||||
};
|
||||
|
||||
const header1 = new Konva.Text({
|
||||
x: rowPadding,
|
||||
width: columnOneWidth,
|
||||
text: i18n._(msg`Signer Events`),
|
||||
...headerFontStyling,
|
||||
});
|
||||
headerRow.add(header1);
|
||||
|
||||
const header2 = new Konva.Text({
|
||||
x: columnOneWidth + rowPadding,
|
||||
width: columnTwoWidth,
|
||||
text: i18n._(msg`Signature`),
|
||||
...headerFontStyling,
|
||||
});
|
||||
headerRow.add(header2);
|
||||
|
||||
const header3 = new Konva.Text({
|
||||
x: columnOneWidth + columnTwoWidth + rowPadding,
|
||||
width: columnThreeWidth,
|
||||
text: i18n._(msg`Details`),
|
||||
...headerFontStyling,
|
||||
});
|
||||
headerRow.add(header3);
|
||||
|
||||
return headerRow;
|
||||
};
|
||||
|
||||
const columnPadding = 10;
|
||||
|
||||
type RenderColumnOptions = {
|
||||
recipient: CertificateRecipient;
|
||||
width: number;
|
||||
i18n: I18n;
|
||||
envelopeOwner: {
|
||||
name: string;
|
||||
email: string;
|
||||
};
|
||||
};
|
||||
|
||||
const renderColumnOne = (options: RenderColumnOptions) => {
|
||||
const { recipient, width, i18n } = options;
|
||||
|
||||
const columnGroup = new Konva.Group();
|
||||
|
||||
const textSectionPadding = 8;
|
||||
|
||||
const textFontStyling = {
|
||||
x: 0,
|
||||
fontFamily: 'Inter',
|
||||
wrap: 'char',
|
||||
lineHeight: 1.2,
|
||||
fill: textMutedForeground,
|
||||
width: width - columnPadding,
|
||||
};
|
||||
|
||||
if (recipient.name) {
|
||||
const nameText = new Konva.Text({
|
||||
y: 0,
|
||||
text: recipient.name,
|
||||
fontSize: textBase,
|
||||
...textFontStyling,
|
||||
fontStyle: fontMedium,
|
||||
});
|
||||
|
||||
columnGroup.add(nameText);
|
||||
}
|
||||
|
||||
const emailText = new Konva.Text({
|
||||
y: columnGroup.getClientRect().height,
|
||||
text: recipient.email,
|
||||
fontSize: textBase,
|
||||
...textFontStyling,
|
||||
});
|
||||
|
||||
columnGroup.add(emailText);
|
||||
|
||||
const roleText = new Konva.Text({
|
||||
y: columnGroup.getClientRect().height + textSectionPadding,
|
||||
text: i18n._(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName),
|
||||
fontSize: textSm,
|
||||
...textFontStyling,
|
||||
});
|
||||
columnGroup.add(roleText);
|
||||
|
||||
const authLabel = new Konva.Text({
|
||||
y: columnGroup.getClientRect().height + textSectionPadding,
|
||||
text: `${i18n._(msg`Authentication Level`)}:`,
|
||||
fontSize: textSm,
|
||||
fontStyle: fontMedium,
|
||||
...textFontStyling,
|
||||
});
|
||||
columnGroup.add(authLabel);
|
||||
|
||||
const authValue = new Konva.Text({
|
||||
y: columnGroup.getClientRect().height,
|
||||
text: recipient.authLevel,
|
||||
fontSize: textSm,
|
||||
...textFontStyling,
|
||||
});
|
||||
columnGroup.add(authValue);
|
||||
|
||||
return columnGroup;
|
||||
};
|
||||
|
||||
const renderColumnTwo = (options: RenderColumnOptions) => {
|
||||
const { recipient, width, i18n } = options;
|
||||
|
||||
// Column 2: Signature
|
||||
const column = new Konva.Group();
|
||||
|
||||
const columnWidth = width - columnPadding;
|
||||
|
||||
if (recipient.signatureField?.secondaryId) {
|
||||
// Signature container with green border
|
||||
const signatureContainer = new Konva.Group({ x: 0, y: 0 });
|
||||
|
||||
const minSignatureHeight = 40;
|
||||
const maxSignatureWidth = 100;
|
||||
|
||||
// Signature content
|
||||
if (recipient.signatureField?.signature?.signatureImageAsBase64) {
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
const img = new SkiaImage(
|
||||
recipient.signatureField?.signature?.signatureImageAsBase64,
|
||||
) as unknown as HTMLImageElement;
|
||||
|
||||
const signatureImage = new Konva.Image({
|
||||
image: img,
|
||||
x: 4,
|
||||
y: 4,
|
||||
width: maxSignatureWidth,
|
||||
height: maxSignatureWidth * (img.height / img.width),
|
||||
});
|
||||
|
||||
signatureContainer.add(signatureImage);
|
||||
} else if (recipient.signatureField?.signature?.typedSignature) {
|
||||
const typedSig = new Konva.Text({
|
||||
x: 2,
|
||||
text: recipient.signatureField?.signature?.typedSignature,
|
||||
padding: 4,
|
||||
fontFamily: 'Caveat',
|
||||
fontSize: 16,
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
width: maxSignatureWidth,
|
||||
});
|
||||
|
||||
if (typedSig.getClientRect().height < minSignatureHeight) {
|
||||
typedSig.setAttrs({
|
||||
height: minSignatureHeight,
|
||||
});
|
||||
}
|
||||
|
||||
signatureContainer.add(typedSig);
|
||||
}
|
||||
|
||||
column.add(signatureContainer);
|
||||
|
||||
const signatureHeight = Math.max(signatureContainer.getClientRect().height, minSignatureHeight);
|
||||
|
||||
const signatureBorder = new Konva.Rect({
|
||||
x: 2,
|
||||
y: 2,
|
||||
width: maxSignatureWidth,
|
||||
height: signatureHeight,
|
||||
stroke: 'rgba(122, 196, 85, 0.6)',
|
||||
strokeWidth: 1,
|
||||
cornerRadius: 8,
|
||||
});
|
||||
signatureContainer.add(signatureBorder);
|
||||
|
||||
const signatureShadow = new Konva.Rect({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: maxSignatureWidth + 4,
|
||||
height: signatureHeight + 4,
|
||||
stroke: 'rgba(122, 196, 85, 0.1)',
|
||||
strokeWidth: 4,
|
||||
cornerRadius: 8,
|
||||
});
|
||||
signatureContainer.add(signatureShadow);
|
||||
|
||||
// Signature ID
|
||||
const sigIdLabel = new Konva.Text({
|
||||
x: 0,
|
||||
y: signatureHeight + 10,
|
||||
text: `${i18n._(msg`Signature ID`)}:`,
|
||||
fill: textMutedForeground,
|
||||
width: columnWidth,
|
||||
fontFamily: 'Inter',
|
||||
fontSize: textSm,
|
||||
fontStyle: fontMedium,
|
||||
lineHeight: 1.4,
|
||||
});
|
||||
column.add(sigIdLabel);
|
||||
|
||||
const sigIdValue = new Konva.Text({
|
||||
x: 0,
|
||||
y: column.getClientRect().height,
|
||||
text: recipient.signatureField.secondaryId.toUpperCase(),
|
||||
fill: textMutedForeground,
|
||||
fontFamily: 'monospace',
|
||||
fontSize: textSm,
|
||||
width: columnWidth,
|
||||
wrap: 'char',
|
||||
});
|
||||
column.add(sigIdValue);
|
||||
} else {
|
||||
const naText = new Konva.Text({
|
||||
x: 0,
|
||||
y: 0,
|
||||
text: 'N/A',
|
||||
fill: textMutedForeground,
|
||||
fontFamily: 'Inter',
|
||||
fontSize: textSm,
|
||||
});
|
||||
column.add(naText);
|
||||
}
|
||||
|
||||
const ipLabelAndText = renderLabelAndText({
|
||||
label: i18n._(msg`IP Address`),
|
||||
text: recipient.logs.completed?.ipAddress ?? i18n._(msg`Unknown`),
|
||||
width,
|
||||
y: column.getClientRect().height + 6,
|
||||
});
|
||||
column.add(ipLabelAndText);
|
||||
|
||||
const deviceLabelAndText = renderLabelAndText({
|
||||
label: i18n._(msg`Device`),
|
||||
text: getDevice(recipient.logs.completed?.userAgent),
|
||||
width,
|
||||
y: column.getClientRect().height + 6,
|
||||
});
|
||||
column.add(deviceLabelAndText);
|
||||
|
||||
return column;
|
||||
};
|
||||
|
||||
const renderColumnThree = (options: RenderColumnOptions) => {
|
||||
const { recipient, width, i18n, envelopeOwner } = options;
|
||||
|
||||
const column = new Konva.Group();
|
||||
|
||||
const itemsToRender = [
|
||||
{
|
||||
label: i18n._(msg`Sent`),
|
||||
value: recipient.logs.emailed
|
||||
? DateTime.fromJSDate(recipient.logs.emailed.createdAt)
|
||||
.setLocale(APP_I18N_OPTIONS.defaultLocale)
|
||||
.toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
|
||||
: recipient.logs.sent
|
||||
? DateTime.fromJSDate(recipient.logs.sent.createdAt)
|
||||
.setLocale(APP_I18N_OPTIONS.defaultLocale)
|
||||
.toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
|
||||
: i18n._(msg`Unknown`),
|
||||
},
|
||||
{
|
||||
label: i18n._(msg`Viewed`),
|
||||
value: recipient.logs.opened
|
||||
? DateTime.fromJSDate(recipient.logs.opened.createdAt)
|
||||
.setLocale(APP_I18N_OPTIONS.defaultLocale)
|
||||
.toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
|
||||
: i18n._(msg`Unknown`),
|
||||
},
|
||||
];
|
||||
|
||||
if (recipient.logs.rejected) {
|
||||
itemsToRender.push({
|
||||
label: i18n._(msg`Rejected`),
|
||||
value: DateTime.fromJSDate(recipient.logs.rejected.createdAt)
|
||||
.setLocale(APP_I18N_OPTIONS.defaultLocale)
|
||||
.toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)'),
|
||||
});
|
||||
} else {
|
||||
itemsToRender.push({
|
||||
label: i18n._(msg`Signed`),
|
||||
value: recipient.logs.completed
|
||||
? DateTime.fromJSDate(recipient.logs.completed.createdAt)
|
||||
.setLocale(APP_I18N_OPTIONS.defaultLocale)
|
||||
.toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
|
||||
: i18n._(msg`Unknown`),
|
||||
});
|
||||
}
|
||||
|
||||
const isOwner = recipient.email.toLowerCase() === envelopeOwner.email.toLowerCase();
|
||||
|
||||
itemsToRender.push({
|
||||
label: i18n._(msg`Reason`),
|
||||
value:
|
||||
recipient.signingStatus === SigningStatus.REJECTED
|
||||
? recipient.rejectionReason || ''
|
||||
: isOwner
|
||||
? i18n._(msg`I am the owner of this document`)
|
||||
: i18n._(RECIPIENT_ROLE_SIGNING_REASONS[recipient.role]),
|
||||
});
|
||||
|
||||
for (const [index, item] of itemsToRender.entries()) {
|
||||
const labelAndText = renderLabelAndText({
|
||||
label: item.label,
|
||||
text: item.value,
|
||||
width,
|
||||
y: column.getClientRect().height + (index === 0 ? 0 : 8),
|
||||
});
|
||||
column.add(labelAndText);
|
||||
}
|
||||
|
||||
return column;
|
||||
};
|
||||
|
||||
type RenderRowOptions = {
|
||||
recipient: CertificateRecipient;
|
||||
columnWidths: ColumnWidths;
|
||||
i18n: I18n;
|
||||
envelopeOwner: {
|
||||
name: string;
|
||||
email: string;
|
||||
};
|
||||
};
|
||||
|
||||
const renderRow = (options: RenderRowOptions) => {
|
||||
const { recipient, columnWidths, i18n, envelopeOwner } = options;
|
||||
|
||||
const rowGroup = new Konva.Group();
|
||||
|
||||
const width = columnWidths[0] + columnWidths[1] + columnWidths[2];
|
||||
|
||||
// Draw top border line.
|
||||
const borderLine = new Konva.Line({
|
||||
points: [0, 0, width + rowPadding * 2, 0],
|
||||
stroke: '#e5e7eb',
|
||||
strokeWidth: 1,
|
||||
});
|
||||
|
||||
rowGroup.add(borderLine);
|
||||
|
||||
// Column 1: Signer Events
|
||||
const columnGroup = renderColumnOne({
|
||||
recipient,
|
||||
width: columnWidths[0],
|
||||
i18n,
|
||||
envelopeOwner,
|
||||
});
|
||||
columnGroup.setAttrs({
|
||||
x: rowPadding,
|
||||
y: rowPadding,
|
||||
} satisfies Partial<Konva.GroupConfig>);
|
||||
rowGroup.add(columnGroup);
|
||||
|
||||
const columnTwoGroup = renderColumnTwo({
|
||||
recipient,
|
||||
width: columnWidths[1],
|
||||
i18n,
|
||||
envelopeOwner,
|
||||
});
|
||||
columnTwoGroup.setAttrs({
|
||||
x: rowPadding + columnWidths[0],
|
||||
y: rowPadding,
|
||||
} satisfies Partial<Konva.GroupConfig>);
|
||||
rowGroup.add(columnTwoGroup);
|
||||
|
||||
// Column 3: Details
|
||||
const columnThreeGroup = renderColumnThree({
|
||||
recipient,
|
||||
width: columnWidths[2],
|
||||
i18n,
|
||||
envelopeOwner,
|
||||
});
|
||||
columnThreeGroup.setAttrs({
|
||||
x: rowPadding + columnWidths[0] + columnWidths[1],
|
||||
y: rowPadding,
|
||||
} satisfies Partial<Konva.GroupConfig>);
|
||||
rowGroup.add(columnThreeGroup);
|
||||
|
||||
const rowBottomPadding = new Konva.Rect({
|
||||
x: 0,
|
||||
y: rowGroup.getClientRect().height,
|
||||
width: rowGroup.getClientRect().width,
|
||||
height: rowPadding,
|
||||
});
|
||||
rowGroup.add(rowBottomPadding);
|
||||
|
||||
return rowGroup;
|
||||
};
|
||||
|
||||
const renderBranding = async ({ qrToken, i18n }: { qrToken: string | null; i18n: I18n }) => {
|
||||
const branding = new Konva.Group();
|
||||
|
||||
const brandingHeight = 12;
|
||||
|
||||
const text = new Konva.Text({
|
||||
x: 0,
|
||||
verticalAlign: 'middle',
|
||||
text: i18n._(msg`Signing certificate provided by`) + ':',
|
||||
fontStyle: fontMedium,
|
||||
fontFamily: 'Inter',
|
||||
fontSize: textSm,
|
||||
height: brandingHeight,
|
||||
});
|
||||
|
||||
const logoPath = path.join(process.cwd(), 'public/static/logo.png');
|
||||
const logo = fs.readFileSync(logoPath);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
const img = new SkiaImage(logo) as unknown as HTMLImageElement;
|
||||
|
||||
const documensoImage = new Konva.Image({
|
||||
image: img,
|
||||
height: brandingHeight,
|
||||
width: brandingHeight * (img.width / img.height),
|
||||
x: text.width() + 16,
|
||||
});
|
||||
|
||||
const qrSize = qrToken ? 72 : 0;
|
||||
|
||||
const logoGroup = new Konva.Group({
|
||||
y: qrSize + 16,
|
||||
});
|
||||
logoGroup.add(text);
|
||||
logoGroup.add(documensoImage);
|
||||
|
||||
branding.add(logoGroup);
|
||||
|
||||
if (qrToken) {
|
||||
const qrSvg = renderSVG(`${NEXT_PUBLIC_WEBAPP_URL()}/share/${qrToken}`, {
|
||||
ecc: 'Q',
|
||||
});
|
||||
|
||||
const svgImage = await sharp(Buffer.from(qrSvg)).toFormat('png').toBuffer();
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
const qrSkiaImage = new SkiaImage(svgImage) as unknown as HTMLImageElement;
|
||||
const qrImage = new Konva.Image({
|
||||
image: qrSkiaImage,
|
||||
height: qrSize,
|
||||
width: qrSize,
|
||||
x: branding.getClientRect().width - qrSize,
|
||||
y: 0,
|
||||
});
|
||||
|
||||
branding.add(qrImage);
|
||||
}
|
||||
|
||||
return branding;
|
||||
};
|
||||
|
||||
type GroupRowsIntoPagesOptions = {
|
||||
recipients: CertificateRecipient[];
|
||||
maxHeight: number;
|
||||
i18n: I18n;
|
||||
columnWidths: ColumnWidths;
|
||||
envelopeOwner: {
|
||||
name: string;
|
||||
email: string;
|
||||
};
|
||||
};
|
||||
|
||||
const groupRowsIntoPages = (options: GroupRowsIntoPagesOptions) => {
|
||||
const { recipients, maxHeight, i18n, columnWidths, envelopeOwner } = options;
|
||||
|
||||
const rowHeader = renderRowHeader({ columnWidths, i18n });
|
||||
const rowHeaderHeight = rowHeader.getClientRect().height;
|
||||
|
||||
const groupedRows: Konva.Group[][] = [[]];
|
||||
|
||||
let availablePageHeight = maxHeight - rowHeaderHeight;
|
||||
let currentGroupedRowIndex = 0;
|
||||
|
||||
// Group rows into pages.
|
||||
for (const recipient of recipients) {
|
||||
const row = renderRow({ recipient, columnWidths, i18n, envelopeOwner });
|
||||
|
||||
const rowHeight = row.getClientRect().height;
|
||||
|
||||
if (rowHeight > availablePageHeight) {
|
||||
currentGroupedRowIndex++;
|
||||
groupedRows[currentGroupedRowIndex] = [row];
|
||||
availablePageHeight = maxHeight - rowHeaderHeight;
|
||||
} else {
|
||||
groupedRows[currentGroupedRowIndex].push(row);
|
||||
}
|
||||
|
||||
// Reduce available height by the row height.
|
||||
availablePageHeight -= rowHeight;
|
||||
}
|
||||
|
||||
return groupedRows;
|
||||
};
|
||||
|
||||
type RenderTablesOptions = {
|
||||
groupedRows: Konva.Group[][];
|
||||
columnWidths: ColumnWidths;
|
||||
i18n: I18n;
|
||||
};
|
||||
|
||||
const renderTables = (options: RenderTablesOptions) => {
|
||||
const { groupedRows, columnWidths, i18n } = options;
|
||||
|
||||
const tables: Konva.Group[] = [];
|
||||
|
||||
// Render the rows for each page.
|
||||
for (const rows of groupedRows) {
|
||||
const table = new Konva.Group();
|
||||
const tableHeader = renderRowHeader({ columnWidths, i18n });
|
||||
|
||||
table.add(tableHeader);
|
||||
|
||||
for (const row of rows) {
|
||||
row.setAttrs({
|
||||
x: 0,
|
||||
y: table.getClientRect().height,
|
||||
} satisfies Partial<Konva.GroupConfig>);
|
||||
|
||||
table.add(row);
|
||||
}
|
||||
|
||||
// Add table background and border.
|
||||
const tableClientRect = table.getClientRect();
|
||||
const cardRect = new Konva.Rect({
|
||||
x: tableClientRect.x,
|
||||
y: tableClientRect.y,
|
||||
width: tableClientRect.width,
|
||||
height: tableClientRect.height,
|
||||
stroke: '#e5e7eb',
|
||||
strokeWidth: 1.5,
|
||||
cornerRadius: 8,
|
||||
});
|
||||
table.add(cardRect);
|
||||
|
||||
tables.push(table);
|
||||
}
|
||||
|
||||
return tables;
|
||||
};
|
||||
|
||||
export async function renderCertificate({
|
||||
recipients,
|
||||
qrToken,
|
||||
hidePoweredBy,
|
||||
i18n,
|
||||
envelopeOwner,
|
||||
pageWidth,
|
||||
pageHeight,
|
||||
}: GenerateCertificateOptions) {
|
||||
const fontPath = path.join(process.cwd(), 'public/fonts');
|
||||
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
FontLibrary.use({
|
||||
['Caveat']: [path.join(fontPath, 'caveat.ttf')],
|
||||
['Inter']: [path.join(fontPath, 'inter-variablefont_opsz,wght.ttf')],
|
||||
});
|
||||
|
||||
const minimumMargin = 10;
|
||||
|
||||
const tableWidth = Math.min(pageWidth - minimumMargin * 2, contentMaxWidth);
|
||||
const tableContentWidth = tableWidth - rowPadding * 2;
|
||||
const margin = (pageWidth - tableWidth) / 2;
|
||||
|
||||
const columnOneWidth = (tableContentWidth * columnWidthPercentages[0]) / 100;
|
||||
const columnTwoWidth = (tableContentWidth * columnWidthPercentages[1]) / 100;
|
||||
const columnThreeWidth = (tableContentWidth * columnWidthPercentages[2]) / 100;
|
||||
|
||||
const columnWidths: ColumnWidths = [columnOneWidth, columnTwoWidth, columnThreeWidth];
|
||||
|
||||
// Helper to render a Konva stage to a PNG buffer
|
||||
let stage: Konva.Stage | null = new Konva.Stage({ width: pageWidth, height: pageHeight });
|
||||
|
||||
const maxTableHeight = pageHeight - pageTopMargin - pageBottomMargin;
|
||||
|
||||
const groupedRows = groupRowsIntoPages({
|
||||
recipients,
|
||||
maxHeight: maxTableHeight,
|
||||
columnWidths,
|
||||
i18n,
|
||||
envelopeOwner,
|
||||
});
|
||||
|
||||
const tables = renderTables({ groupedRows, columnWidths, i18n });
|
||||
|
||||
const brandingGroup = await renderBranding({ qrToken, i18n });
|
||||
const brandingRect = brandingGroup.getClientRect();
|
||||
const brandingTopPadding = 24;
|
||||
|
||||
const pages: Uint8Array[] = [];
|
||||
|
||||
let isQrPlaced = false;
|
||||
|
||||
// Add a table to each page.
|
||||
for (const [index, table] of tables.entries()) {
|
||||
stage.destroyChildren();
|
||||
const page = new Konva.Layer();
|
||||
|
||||
const group = new Konva.Group();
|
||||
|
||||
const titleText = new Konva.Text({
|
||||
x: margin,
|
||||
y: 0,
|
||||
height: pageTopMargin,
|
||||
verticalAlign: 'middle',
|
||||
text: i18n._(msg`Signing Certificate`),
|
||||
fontFamily: 'Inter',
|
||||
fontSize: titleFontSize,
|
||||
fontStyle: '700',
|
||||
});
|
||||
|
||||
table.setAttrs({
|
||||
x: margin,
|
||||
y: pageTopMargin,
|
||||
} satisfies Partial<Konva.GroupConfig>);
|
||||
|
||||
group.add(titleText);
|
||||
group.add(table);
|
||||
|
||||
// Add QR code and branding on the last page if there is space.
|
||||
if (index === tables.length - 1 && !hidePoweredBy) {
|
||||
const remainingHeight = pageHeight - group.getClientRect().height - pageBottomMargin;
|
||||
|
||||
if (brandingRect.height + brandingTopPadding <= remainingHeight) {
|
||||
brandingGroup.setAttrs({
|
||||
x: pageWidth - brandingRect.width - margin,
|
||||
y: group.getClientRect().height + brandingTopPadding,
|
||||
} satisfies Partial<Konva.GroupConfig>);
|
||||
|
||||
page.add(brandingGroup);
|
||||
isQrPlaced = true;
|
||||
}
|
||||
}
|
||||
|
||||
page.add(group);
|
||||
stage.add(page);
|
||||
|
||||
// Export the page and save it.
|
||||
const canvas = page.canvas._canvas as unknown as Canvas; // eslint-disable-line @typescript-eslint/consistent-type-assertions
|
||||
const buffer = await canvas.toBuffer('pdf');
|
||||
pages.push(new Uint8Array(buffer));
|
||||
}
|
||||
|
||||
// Need to create an empty page for the QR code if it hasn't been placed yet.
|
||||
if (!hidePoweredBy && !isQrPlaced) {
|
||||
const page = new Konva.Layer();
|
||||
|
||||
brandingGroup.setAttrs({
|
||||
x: pageWidth - brandingRect.width - margin,
|
||||
y: pageTopMargin / 2, // Less padding since there's nothing else on this page.
|
||||
} satisfies Partial<Konva.GroupConfig>);
|
||||
|
||||
page.add(brandingGroup);
|
||||
stage.add(page);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
const canvas = page.canvas._canvas as unknown as Canvas;
|
||||
const buffer = await canvas.toBuffer('pdf');
|
||||
|
||||
pages.push(new Uint8Array(buffer));
|
||||
}
|
||||
|
||||
stage.destroy();
|
||||
stage = null;
|
||||
|
||||
return pages;
|
||||
}
|
||||
@@ -759,3 +759,5 @@ export type DocumentAuditLogByType<T = TDocumentAuditLog['type']> = Extract<
|
||||
TDocumentAuditLog,
|
||||
{ type: T }
|
||||
>;
|
||||
|
||||
export type TDocumentAuditLogBaseSchema = z.infer<typeof ZDocumentAuditLogBaseSchema>;
|
||||
|
||||
@@ -290,11 +290,12 @@ export const diffDocumentMetaChanges = (
|
||||
* Provide a userId to prefix the action with the user, example 'X did Y'.
|
||||
*/
|
||||
export const formatDocumentAuditLogAction = (
|
||||
_: I18n['_'],
|
||||
i18n: I18n,
|
||||
auditLog: TDocumentAuditLog,
|
||||
userId?: number,
|
||||
) => {
|
||||
const prefix = userId === auditLog.userId ? _(msg`You`) : auditLog.name || auditLog.email || '';
|
||||
const prefix =
|
||||
userId === auditLog.userId ? i18n._(msg`You`) : auditLog.name || auditLog.email || '';
|
||||
|
||||
const description = match(auditLog)
|
||||
.with({ type: DOCUMENT_AUDIT_LOG_TYPE.FIELD_CREATED }, () => ({
|
||||
@@ -452,7 +453,7 @@ export const formatDocumentAuditLogAction = (
|
||||
identified: msg`${prefix} moved the document to team`,
|
||||
}))
|
||||
.with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_COMPLETED }, ({ data }) => {
|
||||
const userName = prefix || _(msg`Recipient`);
|
||||
const userName = prefix || i18n._(msg`Recipient`);
|
||||
|
||||
const result = match(data.recipientRole)
|
||||
.with(RecipientRole.SIGNER, () => msg`${userName} signed the document`)
|
||||
@@ -467,7 +468,7 @@ export const formatDocumentAuditLogAction = (
|
||||
};
|
||||
})
|
||||
.with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_RECIPIENT_REJECTED }, ({ data }) => {
|
||||
const userName = prefix || _(msg`Recipient`);
|
||||
const userName = prefix || i18n._(msg`Recipient`);
|
||||
|
||||
const result = msg`${userName} rejected the document`;
|
||||
|
||||
@@ -477,7 +478,7 @@ export const formatDocumentAuditLogAction = (
|
||||
};
|
||||
})
|
||||
.with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_ACCESS_AUTH_2FA_REQUESTED }, ({ data }) => {
|
||||
const userName = prefix || _(msg`Recipient`);
|
||||
const userName = prefix || i18n._(msg`Recipient`);
|
||||
|
||||
const result = msg`${userName} requested a 2FA token for the document`;
|
||||
|
||||
@@ -487,7 +488,7 @@ export const formatDocumentAuditLogAction = (
|
||||
};
|
||||
})
|
||||
.with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_ACCESS_AUTH_2FA_VALIDATED }, ({ data }) => {
|
||||
const userName = prefix || _(msg`Recipient`);
|
||||
const userName = prefix || i18n._(msg`Recipient`);
|
||||
|
||||
const result = msg`${userName} validated a 2FA token for the document`;
|
||||
|
||||
@@ -497,7 +498,7 @@ export const formatDocumentAuditLogAction = (
|
||||
};
|
||||
})
|
||||
.with({ type: DOCUMENT_AUDIT_LOG_TYPE.DOCUMENT_ACCESS_AUTH_2FA_FAILED }, ({ data }) => {
|
||||
const userName = prefix || _(msg`Recipient`);
|
||||
const userName = prefix || i18n._(msg`Recipient`);
|
||||
|
||||
const result = msg`${userName} failed to validate a 2FA token for the document`;
|
||||
|
||||
@@ -541,6 +542,6 @@ export const formatDocumentAuditLogAction = (
|
||||
|
||||
return {
|
||||
prefix,
|
||||
description: _(prefix ? description.identified : description.anonymous),
|
||||
description: i18n._(prefix ? description.identified : description.anonymous),
|
||||
};
|
||||
};
|
||||
|
||||
@@ -67,7 +67,7 @@ export const seedBlankDocument = async (
|
||||
teamId: number,
|
||||
options: CreateDocumentOptions = {},
|
||||
) => {
|
||||
const { key, createDocumentOptions = {} } = options;
|
||||
const { key, createDocumentOptions = {}, internalVersion = 1 } = options;
|
||||
|
||||
const documentData = await prisma.documentData.create({
|
||||
data: {
|
||||
@@ -87,7 +87,7 @@ export const seedBlankDocument = async (
|
||||
data: {
|
||||
id: prefixedId('envelope'),
|
||||
secondaryId: documentId.formattedDocumentId,
|
||||
internalVersion: 1,
|
||||
internalVersion,
|
||||
type: EnvelopeType.DOCUMENT,
|
||||
documentMetaId: documentMeta.id,
|
||||
source: DocumentSource.DOCUMENT,
|
||||
@@ -287,7 +287,7 @@ export const seedDraftDocument = async (
|
||||
recipients: (User | string)[],
|
||||
options: CreateDocumentOptions = {},
|
||||
) => {
|
||||
const { key, createDocumentOptions = {} } = options;
|
||||
const { key, createDocumentOptions = {}, internalVersion = 1 } = options;
|
||||
|
||||
const documentData = await prisma.documentData.create({
|
||||
data: {
|
||||
@@ -307,7 +307,7 @@ export const seedDraftDocument = async (
|
||||
data: {
|
||||
id: prefixedId('envelope'),
|
||||
secondaryId: documentId.formattedDocumentId,
|
||||
internalVersion: 1,
|
||||
internalVersion,
|
||||
type: EnvelopeType.DOCUMENT,
|
||||
documentMetaId: documentMeta.id,
|
||||
source: DocumentSource.DOCUMENT,
|
||||
@@ -372,6 +372,7 @@ export const seedDraftDocument = async (
|
||||
type CreateDocumentOptions = {
|
||||
key?: string | number;
|
||||
createDocumentOptions?: Partial<Prisma.EnvelopeUncheckedCreateInput>;
|
||||
internalVersion?: number;
|
||||
};
|
||||
|
||||
export const seedPendingDocument = async (
|
||||
@@ -380,7 +381,7 @@ export const seedPendingDocument = async (
|
||||
recipients: (User | string)[],
|
||||
options: CreateDocumentOptions = {},
|
||||
) => {
|
||||
const { key, createDocumentOptions = {} } = options;
|
||||
const { key, createDocumentOptions = {}, internalVersion = 1 } = options;
|
||||
|
||||
const documentData = await prisma.documentData.create({
|
||||
data: {
|
||||
@@ -400,7 +401,7 @@ export const seedPendingDocument = async (
|
||||
data: {
|
||||
id: prefixedId('envelope'),
|
||||
secondaryId: documentId.formattedDocumentId,
|
||||
internalVersion: 1,
|
||||
internalVersion,
|
||||
type: EnvelopeType.DOCUMENT,
|
||||
documentMetaId: documentMeta.id,
|
||||
source: DocumentSource.DOCUMENT,
|
||||
@@ -620,7 +621,7 @@ export const seedCompletedDocument = async (
|
||||
recipients: (User | string)[],
|
||||
options: CreateDocumentOptions = {},
|
||||
) => {
|
||||
const { key, createDocumentOptions = {} } = options;
|
||||
const { key, createDocumentOptions = {}, internalVersion = 1 } = options;
|
||||
|
||||
const documentData = await prisma.documentData.create({
|
||||
data: {
|
||||
@@ -640,7 +641,7 @@ export const seedCompletedDocument = async (
|
||||
data: {
|
||||
id: prefixedId('envelope'),
|
||||
secondaryId: documentId.formattedDocumentId,
|
||||
internalVersion: 1,
|
||||
internalVersion,
|
||||
type: EnvelopeType.DOCUMENT,
|
||||
documentMetaId: documentMeta.id,
|
||||
source: DocumentSource.DOCUMENT,
|
||||
|
||||
@@ -18,8 +18,8 @@ import { createEnvelopeRecipientsRoute } from './envelope-recipients/create-enve
|
||||
import { deleteEnvelopeRecipientRoute } from './envelope-recipients/delete-envelope-recipient';
|
||||
import { getEnvelopeRecipientRoute } from './envelope-recipients/get-envelope-recipient';
|
||||
import { updateEnvelopeRecipientsRoute } from './envelope-recipients/update-envelope-recipients';
|
||||
import { findEnvelopesRoute } from './find-envelopes';
|
||||
import { findEnvelopeAuditLogsRoute } from './find-envelope-audit-logs';
|
||||
import { findEnvelopesRoute } from './find-envelopes';
|
||||
import { getEnvelopeRoute } from './get-envelope';
|
||||
import { getEnvelopeItemsRoute } from './get-envelope-items';
|
||||
import { getEnvelopeItemsByTokenRoute } from './get-envelope-items-by-token';
|
||||
|
||||
@@ -23,7 +23,7 @@ export function DataTablePagination<TData>({
|
||||
}: DataTablePaginationProps<TData>) {
|
||||
return (
|
||||
<div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-4 px-2">
|
||||
<div className="text-muted-foreground flex-1 text-sm">
|
||||
<div className="flex-1 text-sm text-muted-foreground">
|
||||
{match(additionalInformation)
|
||||
.with('SelectedCount', () => (
|
||||
<span>
|
||||
|
||||
@@ -39,7 +39,7 @@ const DialogOverlay = React.forwardRef<
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'bg-background/80 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 backdrop-blur-sm transition-all duration-100',
|
||||
'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -66,7 +66,7 @@ const DialogContent = React.forwardRef<
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'bg-background animate-in data-[state=open]:fade-in-90 sm:zoom-in-90 data-[state=open]:slide-in-from-bottom-10 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid w-full gap-4 border p-6 shadow-lg sm:max-w-lg sm:rounded-lg',
|
||||
'fixed z-50 grid w-full gap-4 border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0',
|
||||
{
|
||||
'rounded-b-xl': position === 'start',
|
||||
'rounded-t-xl': position === 'end',
|
||||
@@ -79,7 +79,7 @@ const DialogContent = React.forwardRef<
|
||||
{!hideClose && (
|
||||
<DialogPrimitive.Close
|
||||
data-testid="btn-dialog-close"
|
||||
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
|
||||
className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">
|
||||
@@ -131,7 +131,7 @@ const DialogDescription = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn('text-muted-foreground text-sm', className)}
|
||||
className={cn('text-sm text-muted-foreground', className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
|
||||
@@ -323,7 +323,7 @@ export const AddSubjectFormPartial = ({
|
||||
<TooltipTrigger>
|
||||
<InfoIcon className="mx-2 h-4 w-4" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="text-muted-foreground p-4">
|
||||
<TooltipContent className="p-4 text-muted-foreground">
|
||||
<DocumentSendEmailMessageHelper />
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
@@ -331,7 +331,7 @@ export const AddSubjectFormPartial = ({
|
||||
|
||||
<FormControl>
|
||||
<Textarea
|
||||
className="bg-background mt-2 h-16 resize-none"
|
||||
className="mt-2 h-16 resize-none bg-background"
|
||||
{...field}
|
||||
maxLength={5000}
|
||||
/>
|
||||
@@ -360,7 +360,7 @@ export const AddSubjectFormPartial = ({
|
||||
className="rounded-lg border"
|
||||
>
|
||||
{document.status === DocumentStatus.DRAFT ? (
|
||||
<div className="text-muted-foreground py-16 text-center text-sm">
|
||||
<div className="py-16 text-center text-sm text-muted-foreground">
|
||||
<p>
|
||||
<Trans>We won't send anything to notify recipients.</Trans>
|
||||
</p>
|
||||
@@ -373,7 +373,7 @@ export const AddSubjectFormPartial = ({
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="text-muted-foreground divide-y">
|
||||
<ul className="divide-y text-muted-foreground">
|
||||
{recipients.length === 0 && (
|
||||
<li className="flex flex-col items-center justify-center py-6 text-sm">
|
||||
<Trans>No recipients</Trans>
|
||||
@@ -388,10 +388,10 @@ export const AddSubjectFormPartial = ({
|
||||
<AvatarWithText
|
||||
avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
|
||||
primaryText={
|
||||
<p className="text-muted-foreground text-sm">{recipient.email}</p>
|
||||
<p className="text-sm text-muted-foreground">{recipient.email}</p>
|
||||
}
|
||||
secondaryText={
|
||||
<p className="text-muted-foreground/70 text-xs">
|
||||
<p className="text-xs text-muted-foreground/70">
|
||||
{_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
|
||||
</p>
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@ export const DocumentFlowFormContainer = ({
|
||||
<form
|
||||
id={id}
|
||||
className={cn(
|
||||
'dark:bg-background border-border bg-widget sticky top-20 flex h-full max-h-[64rem] flex-col overflow-auto rounded-xl border px-4 py-6',
|
||||
'sticky top-20 flex h-full max-h-[64rem] flex-col overflow-auto rounded-xl border border-border bg-widget px-4 py-6 dark:bg-background',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -47,11 +47,11 @@ export const DocumentFlowFormContainerHeader = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<h3 className="text-foreground text-2xl font-semibold">{_(title)}</h3>
|
||||
<h3 className="text-2xl font-semibold text-foreground">{_(title)}</h3>
|
||||
|
||||
<p className="text-muted-foreground mt-2 text-sm">{_(description)}</p>
|
||||
<p className="mt-2 text-sm text-muted-foreground">{_(description)}</p>
|
||||
|
||||
<hr className="border-border mb-8 mt-4" />
|
||||
<hr className="mb-8 mt-4 border-border" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -66,10 +66,7 @@ export const DocumentFlowFormContainerContent = ({
|
||||
...props
|
||||
}: DocumentFlowFormContainerContentProps) => {
|
||||
return (
|
||||
<div
|
||||
className={cn('custom-scrollbar -mx-2 flex flex-1 flex-col px-2', className)}
|
||||
{...props}
|
||||
>
|
||||
<div className={cn('custom-scrollbar -mx-2 flex flex-1 flex-col px-2', className)} {...props}>
|
||||
<div className="flex flex-1 flex-col">{children}</div>
|
||||
</div>
|
||||
);
|
||||
@@ -102,17 +99,17 @@ export const DocumentFlowFormContainerStep = ({
|
||||
}: DocumentFlowFormContainerStepProps) => {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<Trans>
|
||||
Step <span>{`${step} of ${maxStep}`}</span>
|
||||
</Trans>
|
||||
</p>
|
||||
|
||||
<div className="bg-muted relative mt-4 h-[2px] rounded-md">
|
||||
<div className="relative mt-4 h-[2px] rounded-md bg-muted">
|
||||
<motion.div
|
||||
layout="size"
|
||||
layoutId="document-flow-container-step"
|
||||
className="bg-primary absolute inset-y-0 left-0"
|
||||
className="absolute inset-y-0 left-0 bg-primary"
|
||||
style={{
|
||||
width: `${(100 / maxStep) * step}%`,
|
||||
}}
|
||||
@@ -150,7 +147,7 @@ export const DocumentFlowFormContainerActions = ({
|
||||
<div className="mt-4 flex gap-x-4">
|
||||
<Button
|
||||
type="button"
|
||||
className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
|
||||
className="flex-1 bg-black/5 hover:bg-black/10 dark:bg-muted dark:hover:bg-muted/80"
|
||||
size="lg"
|
||||
variant="secondary"
|
||||
disabled={disabled || loading || !canGoBack || !onGoBackClick}
|
||||
@@ -161,7 +158,7 @@ export const DocumentFlowFormContainerActions = ({
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
className="bg-primary flex-1"
|
||||
className="flex-1 bg-primary"
|
||||
size="lg"
|
||||
disabled={disabled || disableNextStep || loading || !canGoNext}
|
||||
loading={loading}
|
||||
|
||||
@@ -62,7 +62,7 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Checkbox className="h-3 w-3" disabled />
|
||||
<Label className="text-foreground ml-1.5 text-xs font-normal opacity-50">
|
||||
<Label className="ml-1.5 text-xs font-normal text-foreground opacity-50">
|
||||
<Trans>Checkbox option</Trans>
|
||||
</Label>
|
||||
</div>
|
||||
@@ -90,7 +90,7 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
|
||||
{item.value && (
|
||||
<Label
|
||||
htmlFor={`checkbox-${index}`}
|
||||
className="text-foreground ml-1.5 text-xs font-normal"
|
||||
className="ml-1.5 text-xs font-normal text-foreground"
|
||||
>
|
||||
{item.value}
|
||||
</Label>
|
||||
@@ -122,7 +122,7 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
|
||||
{item.value && (
|
||||
<Label
|
||||
htmlFor={`option-${index}`}
|
||||
className="text-foreground ml-1.5 text-xs font-normal"
|
||||
className="ml-1.5 text-xs font-normal text-foreground"
|
||||
>
|
||||
{item.value}
|
||||
</Label>
|
||||
@@ -140,7 +140,7 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
|
||||
!field.inserted
|
||||
) {
|
||||
return (
|
||||
<div className="text-field-card-foreground flex flex-row items-center py-0.5 text-[clamp(0.07rem,25cqw,0.825rem)] text-sm">
|
||||
<div className="flex flex-row items-center py-0.5 text-[clamp(0.07rem,25cqw,0.825rem)] text-sm text-field-card-foreground">
|
||||
<p>
|
||||
<Trans>Select</Trans>
|
||||
</p>
|
||||
@@ -196,7 +196,7 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
|
||||
<div className="flex h-full w-full items-center overflow-hidden">
|
||||
<p
|
||||
className={cn(
|
||||
'text-foreground w-full whitespace-pre-wrap text-left text-[clamp(0.07rem,25cqw,0.825rem)] duration-200',
|
||||
'w-full whitespace-pre-wrap text-left text-[clamp(0.07rem,25cqw,0.825rem)] text-foreground duration-200',
|
||||
{
|
||||
'!text-center': textAlign === 'center' || !textToDisplay,
|
||||
'!text-right': textAlign === 'right',
|
||||
|
||||
@@ -42,7 +42,7 @@ const SheetOverlay = React.forwardRef<
|
||||
>(({ className, children: _children, ...props }, ref) => (
|
||||
<SheetPrimitive.Overlay
|
||||
className={cn(
|
||||
'bg-background/80 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-[61] backdrop-blur-sm transition-all duration-100',
|
||||
'fixed inset-0 z-[61] bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -159,7 +159,7 @@ const SheetContent = React.forwardRef<
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
|
||||
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">
|
||||
<Trans>Close</Trans>
|
||||
@@ -192,7 +192,7 @@ const SheetTitle = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn('text-foreground text-lg font-semibold', className)}
|
||||
className={cn('text-lg font-semibold text-foreground', className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
@@ -205,7 +205,7 @@ const SheetDescription = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn('text-muted-foreground text-sm', className)}
|
||||
className={cn('text-sm text-muted-foreground', className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
|
||||
@@ -294,7 +294,7 @@ export const SignaturePadDraw = ({
|
||||
<div className="absolute bottom-3 right-3 flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="focus-visible:ring-ring ring-offset-background text-muted-foreground/60 hover:text-muted-foreground rounded-full p-0 text-[0.688rem] focus-visible:outline-none focus-visible:ring-2"
|
||||
className="rounded-full p-0 text-[0.688rem] text-muted-foreground/60 ring-offset-background hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
onClick={() => onClearClick()}
|
||||
>
|
||||
<Trans>Clear Signature</Trans>
|
||||
@@ -303,7 +303,7 @@ export const SignaturePadDraw = ({
|
||||
|
||||
{isSignatureValid === false && (
|
||||
<div className="absolute bottom-4 left-4 flex gap-2">
|
||||
<span className="text-destructive text-xs">
|
||||
<span className="text-xs text-destructive">
|
||||
<Trans>Signature is too small</Trans>
|
||||
</span>
|
||||
</div>
|
||||
@@ -314,7 +314,7 @@ export const SignaturePadDraw = ({
|
||||
<button
|
||||
type="button"
|
||||
title="undo"
|
||||
className="focus-visible:ring-ring ring-offset-background text-muted-foreground/60 hover:text-muted-foreground rounded-full p-0 text-[0.688rem] focus-visible:outline-none focus-visible:ring-2"
|
||||
className="rounded-full p-0 text-[0.688rem] text-muted-foreground/60 ring-offset-background hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||
onClick={onUndoClick}
|
||||
>
|
||||
<Undo2 className="h-4 w-4" />
|
||||
|
||||
@@ -239,7 +239,7 @@ export const AddTemplateSettingsFormPartial = ({
|
||||
<InfoIcon className="mx-2 h-4 w-4" />
|
||||
</TooltipTrigger>
|
||||
|
||||
<TooltipContent className="text-foreground max-w-md space-y-2 p-4">
|
||||
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
|
||||
Controls the language for the document, including the language to be used
|
||||
for email notifications, and the final certificate that is generated and
|
||||
attached to the document.
|
||||
@@ -337,7 +337,7 @@ export const AddTemplateSettingsFormPartial = ({
|
||||
<InfoIcon className="mx-2 h-4 w-4" />
|
||||
</TooltipTrigger>
|
||||
|
||||
<TooltipContent className="text-foreground max-w-md space-y-2 p-4">
|
||||
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
|
||||
<h2>
|
||||
<strong>
|
||||
<Trans>Document Distribution Method</Trans>
|
||||
@@ -423,7 +423,7 @@ export const AddTemplateSettingsFormPartial = ({
|
||||
field.onChange(value);
|
||||
void handleAutoSave();
|
||||
}}
|
||||
className="bg-background w-full"
|
||||
className="w-full bg-background"
|
||||
emptySelectionPlaceholder={t`Select signature types`}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -463,11 +463,11 @@ export const AddTemplateSettingsFormPartial = ({
|
||||
{distributionMethod === DocumentDistributionMethod.EMAIL && (
|
||||
<Accordion type="multiple">
|
||||
<AccordionItem value="email-options" className="border-none">
|
||||
<AccordionTrigger className="text-foreground rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
|
||||
<AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
|
||||
<Trans>Email Options</Trans>
|
||||
</AccordionTrigger>
|
||||
|
||||
<AccordionContent className="text-muted-foreground -mx-1 px-1 pt-4 text-sm leading-relaxed [&>div]:pb-0">
|
||||
<AccordionContent className="-mx-1 px-1 pt-4 text-sm leading-relaxed text-muted-foreground [&>div]:pb-0">
|
||||
<div className="flex flex-col space-y-6">
|
||||
{organisation.organisationClaim.flags.emailDomains && (
|
||||
<FormField
|
||||
@@ -566,7 +566,7 @@ export const AddTemplateSettingsFormPartial = ({
|
||||
<TooltipTrigger>
|
||||
<InfoIcon className="mx-2 h-4 w-4" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="text-muted-foreground p-4">
|
||||
<TooltipContent className="p-4 text-muted-foreground">
|
||||
<DocumentSendEmailMessageHelper />
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
@@ -574,7 +574,7 @@ export const AddTemplateSettingsFormPartial = ({
|
||||
|
||||
<FormControl>
|
||||
<Textarea
|
||||
className="bg-background h-16 resize-none"
|
||||
className="h-16 resize-none bg-background"
|
||||
{...field}
|
||||
maxLength={5000}
|
||||
onBlur={handleAutoSave}
|
||||
@@ -603,11 +603,11 @@ export const AddTemplateSettingsFormPartial = ({
|
||||
|
||||
<Accordion type="multiple">
|
||||
<AccordionItem value="advanced-options" className="border-none">
|
||||
<AccordionTrigger className="text-foreground rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
|
||||
<AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
|
||||
<Trans>Advanced Options</Trans>
|
||||
</AccordionTrigger>
|
||||
|
||||
<AccordionContent className="text-muted-foreground -mx-1 px-1 pt-4 text-sm leading-relaxed">
|
||||
<AccordionContent className="-mx-1 px-1 pt-4 text-sm leading-relaxed text-muted-foreground">
|
||||
<div className="flex flex-col space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
@@ -621,7 +621,7 @@ export const AddTemplateSettingsFormPartial = ({
|
||||
<InfoIcon className="mx-2 h-4 w-4" />
|
||||
</TooltipTrigger>
|
||||
|
||||
<TooltipContent className="text-muted-foreground max-w-xs">
|
||||
<TooltipContent className="max-w-xs text-muted-foreground">
|
||||
<Trans>
|
||||
Add an external ID to the template. This can be used to identify
|
||||
in external systems.
|
||||
@@ -691,7 +691,7 @@ export const AddTemplateSettingsFormPartial = ({
|
||||
|
||||
<FormControl>
|
||||
<Combobox
|
||||
className="bg-background time-zone-field"
|
||||
className="time-zone-field bg-background"
|
||||
options={TIME_ZONES}
|
||||
{...field}
|
||||
onChange={(value) => {
|
||||
@@ -718,7 +718,7 @@ export const AddTemplateSettingsFormPartial = ({
|
||||
<InfoIcon className="mx-2 h-4 w-4" />
|
||||
</TooltipTrigger>
|
||||
|
||||
<TooltipContent className="text-muted-foreground max-w-xs">
|
||||
<TooltipContent className="max-w-xs text-muted-foreground">
|
||||
<Trans>
|
||||
Add a URL to redirect the user to once the document is signed
|
||||
</Trans>
|
||||
|
||||
Reference in New Issue
Block a user