mirror of
https://github.com/documenso/documenso.git
synced 2025-11-15 17:21:41 +10:00
200 lines
7.1 KiB
TypeScript
200 lines
7.1 KiB
TypeScript
import * as React from 'react';
|
|
|
|
import {
|
|
Body,
|
|
Button,
|
|
Container,
|
|
Head,
|
|
Html,
|
|
Img,
|
|
Link,
|
|
Preview,
|
|
Section,
|
|
Tailwind,
|
|
Text,
|
|
render,
|
|
} from '@react-email/components';
|
|
|
|
interface DocumensoEmailProps {
|
|
email?: string;
|
|
name?: string;
|
|
firstName?: string;
|
|
documentSigningLink?: string;
|
|
documentName?: string;
|
|
downloadLink?: string;
|
|
reviewLink?: string;
|
|
numberOfSigners?: number;
|
|
type: 'invite' | 'signed' | 'completed';
|
|
}
|
|
|
|
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>{previewText}</Preview>
|
|
<Tailwind>
|
|
<Body className="mx-auto my-auto ml-auto mr-auto font-sans">
|
|
<Section className="bg-white">
|
|
<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 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>
|
|
|
|
{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]">
|
|
{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={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 ml-auto mr-auto w-[600px]">
|
|
<Section>
|
|
{type === 'invite' && (
|
|
<>
|
|
<Text className="text-[18px] leading-[24px] text-black">
|
|
{name} <span className="font-semibold text-[#AFAFAF]">({email})</span>
|
|
</Text>
|
|
<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 /> - {firstName}
|
|
</Text>
|
|
</>
|
|
)}
|
|
|
|
<Text className="my-[40px] text-[14px] text-[#AFAFAF]">
|
|
This document was sent using{' '}
|
|
<Link className="text-[#7AC455] underline" href="https://documenso.com">
|
|
Documenso.
|
|
</Link>
|
|
</Text>
|
|
|
|
<Text className="my-[40px] text-[14px] text-[#AFAFAF]">
|
|
Documenso
|
|
<br />
|
|
2261 Market Street, #5211, San Francisco, CA 94114, USA
|
|
</Text>
|
|
</Section>
|
|
</Container>
|
|
</Section>
|
|
</Body>
|
|
</Tailwind>
|
|
</Html>
|
|
);
|
|
};
|
|
|
|
export const emailHtml = (props: DocumensoEmailProps) =>
|
|
render(<DocumensoEmail {...props} />, {
|
|
pretty: true,
|
|
});
|
|
|
|
export const emailText = (props: DocumensoEmailProps) =>
|
|
render(<DocumensoEmail {...props} />, {
|
|
plainText: true,
|
|
});
|