feat: document reminder email template

This commit is contained in:
Ephraim Atta-Duncan
2025-04-15 11:09:21 +00:00
parent 8343f03bd2
commit 0ff304fca7
3 changed files with 171 additions and 5 deletions

View File

@ -0,0 +1,79 @@
import { useLingui } from '@lingui/react';
import { Trans } from '@lingui/react/macro';
import type { RecipientRole } from '@prisma/client';
import { match } from 'ts-pattern';
import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
import { Button, Section, Text } from '../components';
import { TemplateDocumentImage } from './template-document-image';
export interface TemplateDocumentReminderProps {
recipientName: string;
documentName: string;
signDocumentLink: string;
assetBaseUrl: string;
role: RecipientRole;
}
export const TemplateDocumentReminder = ({
recipientName,
documentName,
signDocumentLink,
assetBaseUrl,
role,
}: TemplateDocumentReminderProps) => {
const { _ } = useLingui();
const { actionVerb } = RECIPIENT_ROLES_DESCRIPTION[role];
return (
<>
<TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
<Section>
{/* Reminder specific text */}
<Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
<Trans>
Reminder: Please {_(actionVerb).toLowerCase()} your document
<br />"{documentName}"
</Trans>
</Text>
{/* Addressee */}
<Text className="my-1 text-center text-base text-slate-400">
<Trans>Hi {recipientName},</Trans>
</Text>
{/* Reminder Call to Action */}
<Text className="my-1 text-center text-base text-slate-400">
{match(role)
.with('SIGNER', () => <Trans>Continue by signing the document.</Trans>)
.with('VIEWER', () => <Trans>Continue by viewing the document.</Trans>)
.with('APPROVER', () => <Trans>Continue by approving the document.</Trans>)
.with('CC', () => '')
.with('ASSISTANT', () => <Trans>Continue by assisting with the document.</Trans>)
.exhaustive()}
</Text>
{/* Primary Action Button */}
<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"
href={signDocumentLink}
>
{match(role)
.with('SIGNER', () => <Trans>Sign Document</Trans>)
.with('VIEWER', () => <Trans>View Document</Trans>)
.with('APPROVER', () => <Trans>Approve Document</Trans>)
.with('CC', () => '')
.with('ASSISTANT', () => <Trans>Assist Document</Trans>)
.exhaustive()}
</Button>
</Section>
</Section>
</>
);
};
export default TemplateDocumentReminder;

View File

@ -0,0 +1,89 @@
import { useLingui } from '@lingui/react';
import type { RecipientRole } from '@prisma/client';
import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
import { Body, Container, Head, Hr, Html, Img, Preview, Section, Text } from '../components';
import { useBranding } from '../providers/branding';
import { TemplateDocumentReminder } from '../template-components/template-document-reminder';
import { TemplateFooter } from '../template-components/template-footer';
export type DocumentReminderEmailTemplateProps = {
recipientName: string;
documentName: string;
signDocumentLink: string;
assetBaseUrl?: string;
customBody?: string;
role: RecipientRole;
};
export const DocumentReminderEmailTemplate = ({
recipientName,
documentName = 'Open Source Pledge.pdf',
signDocumentLink = 'https://documenso.com',
assetBaseUrl = 'http://localhost:3002',
customBody,
role,
}: DocumentReminderEmailTemplateProps) => {
const { i18n } = useLingui();
const branding = useBranding();
const action = i18n.t(RECIPIENT_ROLES_DESCRIPTION[role].actionVerb).toLowerCase();
const previewTextString = `Reminder to ${action} ${documentName}`;
const getAssetUrl = (path: string) => {
return new URL(path, assetBaseUrl).toString();
};
return (
<Html>
<Head />
<Preview>{previewTextString}</Preview>
<Body className="mx-auto my-auto bg-white font-sans">
<Section>
<Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-4 backdrop-blur-sm">
<Section>
{branding.brandingEnabled && branding.brandingLogo ? (
<Img src={branding.brandingLogo} alt="Branding Logo" className="mb-4 h-6" />
) : (
<Img
src={getAssetUrl('/static/logo.png')}
alt="Documenso Logo"
className="mb-4 h-6"
/>
)}
<TemplateDocumentReminder
recipientName={recipientName}
documentName={documentName}
signDocumentLink={signDocumentLink}
assetBaseUrl={assetBaseUrl}
role={role}
/>
</Section>
</Container>
{customBody && (
<Container className="mx-auto mt-12 max-w-xl">
<Section>
<Text className="mt-2 text-base text-slate-400">
<pre className="font-sans text-base text-slate-400">{customBody}</pre>
</Text>
</Section>
</Container>
)}
<Hr className="mx-auto mt-12 max-w-xl" />
<Container className="mx-auto max-w-xl">
<TemplateFooter />
</Container>
</Section>
</Body>
</Html>
);
};
export default DocumentReminderEmailTemplate;

View File

@ -3,7 +3,7 @@ import { createElement } from 'react';
import { msg } from '@lingui/core/macro';
import { mailer } from '@documenso/email/mailer';
import DocumentInviteEmailTemplate from '@documenso/email/templates/document-invite';
import DocumentReminderEmailTemplate from '@documenso/email/templates/document-reminder';
import { prisma } from '@documenso/prisma';
import type { DocumentReminderInterval } from '@documenso/prisma/client';
import { DocumentStatus, RecipientRole, SendStatus, SigningStatus } from '@documenso/prisma/client';
@ -118,15 +118,13 @@ export async function run({ io, intervals }: SendReminderHandlerOptions) {
const signDocumentLink = `${NEXT_PUBLIC_WEBAPP_URL()}/sign/${recipient.token}`;
const assetBaseUrl = NEXT_PUBLIC_WEBAPP_URL() || 'http://localhost:3000';
const template = createElement(DocumentInviteEmailTemplate, {
const template = createElement(DocumentReminderEmailTemplate, {
recipientName: recipient.name,
documentName: document.title,
inviterName: document.user.name || undefined,
inviterEmail: document.user.email,
assetBaseUrl,
signDocumentLink,
customBody: emailMessage,
role: recipient.role,
selfSigner: recipient.email === document.user.email,
});
await io.runTask(`send-reminder-${recipient.id}`, async () => {