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

feat: make email template reusable for signed, invite and completed

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-06-21 13:20:07 +00:00
parent 590344f793
commit 02569619f9
10 changed files with 1662 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
apps/web/public/static/clock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 541 B

BIN
apps/web/public/static/completed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 553 B

BIN
apps/web/public/static/document.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
apps/web/public/static/download.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 346 B

BIN
apps/web/public/static/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
apps/web/public/static/review.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 332 B

2
apps/web/src/app/send/page.tsx
View File

@ -15,6 +15,8 @@ export default function Send() {
console.log('clicked');
await sendMail({ email: 'duncan@documenso.com' });
alert('sent');
}}
>
Send

1503
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

162
packages/lib/mail/template.tsx
View File

@ -5,7 +5,6 @@ import {
Button,
Container,
Head,
Heading,
Html,
Img,
Link,
@ -16,75 +15,157 @@ import {
render,
} from '@react-email/components';
interface DocumensoSigningInviteEmailProps {
username?: string;
userImage?: string;
invitedByUsername?: string;
invitedByEmail?: string;
teamName?: string;
teamImage?: string;
signingLink?: string;
inviteFromIp?: string;
inviteFromLocation?: string;
interface DocumensoEmailProps {
email?: string;
name?: string;
firstName?: string;
documentSigningLink?: string;
documentName?: string;
downloadLink?: string;
reviewLink?: string;
numberOfSigners?: number;
type: 'invite' | 'signed' | 'completed';
}
export const DocumensoSigningInviteEmail = ({
signingLink = 'https://documenso.com',
}: DocumensoSigningInviteEmailProps) => {
export const DocumensoEmail = ({
documentSigningLink = 'https://documenso.com',
downloadLink = 'https://documenso.com',
reviewLink = 'https://documenso.com',
email = 'duncan@documenso.com',
name = 'Ephraim Atta-Duncan',
firstName = 'Ephraim',
documentName = 'Open Source Pledge.pdf',
numberOfSigners = 2,
type = 'signed',
}: DocumensoEmailProps) => {
const previewText = type === 'completed' ? 'Completed Document' : `Sign Document`;
return (
<Html>
<Head />
<Preview>Sign Document</Preview>
<Preview>{previewText}</Preview>
<Tailwind>
<Body className="mx-auto my-auto font-sans">
<Body className="mx-auto my-auto ml-auto mr-auto font-sans">
<Section className="bg-white">
<Container className="mx-auto mb-[10px] mt-[40px] w-[600px] rounded-lg border-2 border-solid border-[#eaeaea] p-[20px] backdrop-blur-sm">
<Section>
<Container
style={{
border: '2px solid #eaeaea',
}}
className="mx-auto mb-[10px] ml-auto mr-auto mt-[40px] w-[600px] rounded-lg p-[10px] backdrop-blur-sm"
>
<Section>
<Img
src={`http://localhost:3000/static/logo.png`}
alt="Documenso Logo"
width={120}
/>
</Section>
<Section className="mt-4 flex items-center justify-center">
<Section className="flex justify-center">
<Img src={`http://localhost:3000/static/document.png`} alt="Documenso" />
</Section>
<Section className="mt-4 flex-row items-center justify-center">
<div className="my-3 flex items-center justify-center">
<Img
className="ml-[160px]" // Works on most of the email clients
src={`http://localhost:3000/static/document.png`}
alt="Documenso"
/>
</div>
<Heading className="mx-0 mb-0 text-center text-[18px] font-semibold text-[#27272A]">
Thilo Konzok has invited you to sign “Document.pdf”
</Heading>
{type === 'completed' && (
<Text className="mb-4 text-center text-[16px] font-semibold text-[#7AC455]">
<Img
src="http://localhost:3000/static/completed.png"
className="-mb-0.5 mr-1.5 inline"
/>
Completed
</Text>
)}
{type === 'signed' && (
<Text className="mb-4 text-center text-[16px] font-semibold text-[#3879C5]">
<Img
src="http://localhost:3000/static/clock.png"
className="-mb-0.5 mr-1.5 inline"
/>
Waiting for {numberOfSigners} {numberOfSigners === 1 ? 'person' : 'people'} to
sign
</Text>
)}
<Text className="mx-0 mb-0 text-center text-[18px] font-semibold text-[#27272A]">
{type === 'invite'
? `${name} has invited you to sign “${documentName}”`
: `“${documentName}” was signed by ${name}`}
</Text>
<Text className="my-1 text-center text-[16px] text-[#AFAFAF]">
Continue by signing the document.
{type === 'invite'
? 'Continue by signing the document.'
: 'Continue by downloading or reviewing the document.'}
</Text>
<Section className="mb-[24px] mt-[32px] text-center">
{type === 'invite' && (
<Button
pX={20}
pY={12}
className="rounded bg-[#A2E771] px-10 text-center text-[14px] font-medium text-black no-underline"
href={signingLink}
href={documentSigningLink}
>
Sign Document
</Button>
)}
{type !== 'invite' && (
<Section>
<Button
pX={18}
pY={10}
style={{
border: '1px solid #E9E9E9',
}}
className="mr-4 rounded-lg text-center text-[14px] font-medium text-black no-underline"
href={reviewLink}
>
<Img
src="http://localhost:3000/static/review.png"
className="-mb-0.5 mr-1 inline"
/>
Review
</Button>
<Button
pX={18}
pY={10}
style={{
border: '1px solid #E9E9E9',
}}
className="rounded-lg text-center text-[14px] font-medium text-black no-underline"
href={downloadLink}
>
<Img
src="http://localhost:3000/static/download.png"
className="-mb-0.5 mr-1 inline"
/>
Download
</Button>
</Section>
)}
</Section>
</Section>
</Section>
</Container>
<Container className="mx-auto w-[600px]">
<Container className="mx-auto ml-auto mr-auto w-[600px]">
<Section>
{type === 'invite' && (
<>
<Text className="text-[18px] leading-[24px] text-black">
Thilo Konzok{' '}
<span className="font-semibold text-[#AFAFAF]">(thilo@konzok.com)</span>
{name} <span className="font-semibold text-[#AFAFAF]">({email})</span>
</Text>
<Text className="mb-[80px] text-[16px] leading-[28px] text-[#AFAFAF]">
<Text className="mb-[40px] text-[16px] leading-[28px] text-[#AFAFAF]">
Hi,
<br />
Please sign the attached document. Magna magna adipisicing dolore minim et aliquip
ipsum esse ut nulla ad sint irure.
<br /> - Thilo
Please sign the attached document. Magna magna adipisicing dolore minim et
aliquip ipsum esse ut nulla ad sint irure.
<br /> - {firstName}
</Text>
</>
)}
<Text className="my-[40px] text-[14px] text-[#AFAFAF]">
This document was sent using{' '}
@ -107,9 +188,12 @@ export const DocumensoSigningInviteEmail = ({
);
};
export default DocumensoSigningInviteEmail;
export const emailHtml = (props: DocumensoEmailProps) =>
render(<DocumensoEmail {...props} />, {
pretty: true,
});
export const emailHtml = render(<DocumensoSigningInviteEmail />);
export const emailText = render(<DocumensoSigningInviteEmail />, {
export const emailText = (props: DocumensoEmailProps) =>
render(<DocumensoEmail {...props} />, {
plainText: true,
});
});

18
packages/lib/server-only/document/send-document.ts
View File

@ -31,11 +31,25 @@ export const sendMail = async ({ email }: { email: string }) => {
);
}
const html = emailHtml({
email: 'lucas@documenso.com',
name: 'Lucas Smith',
documentName: 'NDA.pdf',
firstName: 'Lucas',
type: 'signed',
});
await transporter.sendMail({
from: 'Documenso <hi@documenso.com>',
to: email,
subject: 'Welcome to Documenso!',
text: emailText,
html: emailHtml,
text: emailText({
email: 'lucas@documenso.com',
name: 'Lucas Smith',
documentName: 'NDA.pdf',
firstName: 'Lucas',
type: 'completed',
}),
html,
});
};