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

feat: update email templates

Browse Source 
Add SPM email attachment
This commit is contained in:
David Nguyen
2023-09-26 15:39:34 +10:00
committed by Mythie
parent a622fd402f
commit 0c607e6b39
11 changed files with 118 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/marketing/src/components/(marketing)/single-player-mode/create-single-player-document.action.ts
View File

@ -177,9 +177,7 @@ export const createSinglePlayerDocument = async (
},
);
// Todo: Handle `downloadLink`
const template = createElement(DocumentSelfSignedEmailTemplate, {
downloadLink: `${process.env.NEXT_PUBLIC_MARKETING_URL}/single-player-mode/${documentToken}`,
documentName: documentName,
assetBaseUrl: process.env.NEXT_PUBLIC_WEBAPP_URL || 'http://localhost:3000',
});
@ -197,6 +195,7 @@ export const createSinglePlayerDocument = async (
subject: 'Document signed',
html: render(template),
text: render(template, { plainText: true }),
attachments: [{ content: Buffer.from(pdfBytes), filename: documentName }],
});
return documentToken;

BIN
apps/web/public/static/user-plus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 367 B

BIN
packages/email/static/user-plus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 367 B

42
packages/email/template-components/template-document-completed.tsx
View File

@ -1,7 +1,9 @@
import { Button, Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
import { Button, Column, Img, Section, Tailwind, Text } from '@react-email/components';
import * as config from '@documenso/tailwind-config';
import TemplateDocumentImage from './template-document-image';
export interface TemplateDocumentCompletedProps {
downloadLink: string;
documentName: string;
@ -27,27 +29,20 @@ export const TemplateDocumentCompleted = ({
},
}}
>
<Section>
<Row className="table-fixed">
<Column />
<TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
<Column>
<Img
className="h-42 mx-auto"
src={getAssetUrl('/static/document.png')}
alt="Documenso"
/>
<Section>
<Section className="mb-4">
<Column align="center">
<Text className="text-base font-semibold text-[#7AC455]">
<Img
src={getAssetUrl('/static/completed.png')}
className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
/>
Completed
</Text>
</Column>
<Column />
</Row>
</Section>
<Section>
<Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-[#7AC455]">
<Img src={getAssetUrl('/static/completed.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
Completed
</Text>
</Section>
<Text className="text-primary mb-0 text-center text-lg font-semibold">
“{documentName}” was signed by all signers
@ -66,10 +61,13 @@ export const TemplateDocumentCompleted = ({
Review
</Button> */}
<Button
className="inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
className="rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
href={downloadLink}
>
<Img src={getAssetUrl('/static/download.png')} className="-mb-1 mr-2 inline h-5 w-5" />
<Img
src={getAssetUrl('/static/download.png')}
className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
/>
Download
</Button>
</Section>

28
packages/email/template-components/template-document-image.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Column, Img, Row, Section } from '@react-email/components';
export interface TemplateDocumentImageProps {
assetBaseUrl: string;
className?: string;
}
export const TemplateDocumentImage = ({ assetBaseUrl, className }: TemplateDocumentImageProps) => {
const getAssetUrl = (path: string) => {
return new URL(path, assetBaseUrl).toString();
};
return (
<Section className={className}>
<Row className="table-fixed">
<Column />
<Column>
<Img className="h-42 mx-auto" src={getAssetUrl('/static/document.png')} alt="Documenso" />
</Column>
<Column />
</Row>
</Section>
);
};
export default TemplateDocumentImage;

24
packages/email/template-components/template-document-invite.tsx
View File

@ -1,7 +1,9 @@
import { Button, Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
import { Button, Section, Tailwind, Text } from '@react-email/components';
import * as config from '@documenso/tailwind-config';
import TemplateDocumentImage from './template-document-image';
export interface TemplateDocumentInviteProps {
inviterName: string;
inviterEmail: string;
@ -16,10 +18,6 @@ export const TemplateDocumentInvite = ({
signDocumentLink,
assetBaseUrl,
}: TemplateDocumentInviteProps) => {
const getAssetUrl = (path: string) => {
return new URL(path, assetBaseUrl).toString();
};
return (
<Tailwind
config={{
@ -30,21 +28,7 @@ export const TemplateDocumentInvite = ({
},
}}
>
<Section className="mt-4">
<Row className="table-fixed">
<Column />
<Column>
<Img
className="h-42 mx-auto"
src={getAssetUrl('/static/document.png')}
alt="Documenso"
/>
</Column>
<Column />
</Row>
</Section>
<TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
<Section>
<Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">

35
packages/email/template-components/template-document-pending.tsx
View File

@ -1,7 +1,9 @@
import { Column, Img, Row, Section, Tailwind, Text } from '@react-email/components';
import { Column, Img, Section, Tailwind, Text } from '@react-email/components';
import * as config from '@documenso/tailwind-config';
import TemplateDocumentImage from './template-document-image';
export interface TemplateDocumentPendingProps {
documentName: string;
assetBaseUrl: string;
@ -25,27 +27,20 @@ export const TemplateDocumentPending = ({
},
}}
>
<Section>
<Row className="table-fixed">
<Column />
<TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
<Column>
<Img
className="h-42 mx-auto"
src={getAssetUrl('/static/document.png')}
alt="Documenso"
/>
<Section>
<Section className="mb-4">
<Column align="center">
<Text className="text-base font-semibold text-blue-500">
<Img
src={getAssetUrl('/static/clock.png')}
className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
/>
Waiting for others
</Text>
</Column>
<Column />
</Row>
</Section>
<Section>
<Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-blue-500">
<Img src={getAssetUrl('/static/clock.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
Waiting for others
</Text>
</Section>
<Text className="text-primary mb-0 text-center text-lg font-semibold">
“{documentName}” has been signed

63
packages/email/template-components/template-document-self-signed.tsx
View File

@ -1,15 +1,15 @@
import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
import { Button, Column, Img, Link, Section, Tailwind, Text } from '@react-email/components';
import * as config from '@documenso/tailwind-config';
import TemplateDocumentImage from './template-document-image';
export interface TemplateDocumentSelfSignedProps {
downloadLink: string;
documentName: string;
assetBaseUrl: string;
}
export const TemplateDocumentSelfSigned = ({
downloadLink,
documentName,
assetBaseUrl,
}: TemplateDocumentSelfSignedProps) => {
@ -27,39 +27,56 @@ export const TemplateDocumentSelfSigned = ({
},
}}
>
<TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
<Section className="flex-row items-center justify-center">
<div className="flex items-center justify-center p-4">
<Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
</div>
<Section>
<Column align="center">
<Text className="text-base font-semibold text-[#7AC455]">
<Img
src={getAssetUrl('/static/completed.png')}
className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
/>
Completed
</Text>
</Column>
</Section>
<Text className="mb-4 flex items-center justify-center text-center text-base font-semibold text-[#7AC455]">
<Img src={getAssetUrl('/static/completed.png')} className="-mb-0.5 mr-2 inline h-7 w-7" />
Completed
</Text>
<Text className="text-primary mb-0 text-center text-lg font-semibold">
<Text className="text-primary mb-0 mt-6 text-center text-lg font-semibold">
You have signed “{documentName}”
</Text>
<Text className="my-1 text-center text-base text-slate-400">
Check out our plans to access the full suite of features.
<Text className="mx-auto mb-6 mt-1 max-w-[80%] text-center text-base text-slate-400">
Create a{' '}
<Link
href={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/signup`}
target="_blank"
className="text-documenso-700 hover:text-documenso-600 whitespace-nowrap"
>
free account
</Link>{' '}
to access your signed documents at any time.
</Text>
<Section className="mb-6 mt-8 text-center">
<Button className="mr-4 rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline">
<Img
src={getAssetUrl('/static/user-plus.png')}
className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
/>
Create account
</Button>
<Button
className="mr-4 inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
className="rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
href="https://documenso.com/pricing"
>
<Img src={getAssetUrl('/static/review.png')} className="-mb-1 mr-2 inline h-5 w-5" />
<Img
src={getAssetUrl('/static/review.png')}
className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
/>
View plans
</Button>
<Button
className="inline-flex items-center justify-center rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
href={downloadLink}
>
<Img src={getAssetUrl('/static/download.png')} className="-mb-1 mr-2 inline h-5 w-5" />
Download
</Button>
</Section>
</Section>
</Tailwind>

14
packages/email/template-components/template-forgot-password.tsx
View File

@ -1,7 +1,9 @@
import { Button, Img, Section, Tailwind, Text } from '@react-email/components';
import { Button, Section, Tailwind, Text } from '@react-email/components';
import * as config from '@documenso/tailwind-config';
import TemplateDocumentImage from './template-document-image';
export type TemplateForgotPasswordProps = {
resetPasswordLink: string;
assetBaseUrl: string;
@ -11,10 +13,6 @@ export const TemplateForgotPassword = ({
resetPasswordLink,
assetBaseUrl,
}: TemplateForgotPasswordProps) => {
const getAssetUrl = (path: string) => {
return new URL(path, assetBaseUrl).toString();
};
return (
<Tailwind
config={{
@ -25,11 +23,9 @@ export const TemplateForgotPassword = ({
},
}}
>
<Section className="mt-4 flex-row items-center justify-center">
<div className="flex items-center justify-center p-4">
<Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
</div>
<TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
<Section className="flex-row items-center justify-center">
<Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
Forgot your password?
</Text>

14
packages/email/template-components/template-reset-password.tsx
View File

@ -1,7 +1,9 @@
import { Img, Section, Tailwind, Text } from '@react-email/components';
import { Section, Tailwind, Text } from '@react-email/components';
import * as config from '@documenso/tailwind-config';
import TemplateDocumentImage from './template-document-image';
export interface TemplateResetPasswordProps {
userName: string;
userEmail: string;
@ -9,10 +11,6 @@ export interface TemplateResetPasswordProps {
}
export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordProps) => {
const getAssetUrl = (path: string) => {
return new URL(path, assetBaseUrl).toString();
};
return (
<Tailwind
config={{
@ -23,11 +21,9 @@ export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordPro
},
}}
>
<Section className="mt-4 flex-row items-center justify-center">
<div className="flex items-center justify-center p-4">
<Img className="h-42" src={getAssetUrl('/static/document.png')} alt="Documenso" />
</div>
<TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
<Section className="flex-row items-center justify-center">
<Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
Password updated!
</Text>

2
packages/email/templates/document-self-signed.tsx
View File

@ -20,7 +20,6 @@ import TemplateFooter from '../template-components/template-footer';
export type DocumentSelfSignedTemplateProps = TemplateDocumentSelfSignedProps;
export const DocumentSelfSignedEmailTemplate = ({
downloadLink = 'https://documenso.com',
documentName = 'Open Source Pledge.pdf',
assetBaseUrl = 'http://localhost:3002',
}: DocumentSelfSignedTemplateProps) => {
@ -54,7 +53,6 @@ export const DocumentSelfSignedEmailTemplate = ({
/>
<TemplateDocumentSelfSigned
downloadLink={downloadLink}
documentName={documentName}
assetBaseUrl={assetBaseUrl}
/>