From e5fa2f449072a1316da6b4a965c73d56610113c9 Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Tue, 26 Sep 2023 15:39:34 +1000 Subject: [PATCH 1/3] feat: update email templates Add SPM email attachment --- .../create-single-player-document.action.ts | 3 +- apps/web/public/static/user-plus.png | Bin 0 -> 367 bytes package-lock.json | 11 ++- packages/email/static/user-plus.png | Bin 0 -> 367 bytes .../template-document-completed.tsx | 42 ++++++------ .../template-document-image.tsx | 28 ++++++++ .../template-document-invite.tsx | 24 ++----- .../template-document-pending.tsx | 35 +++++----- .../template-document-self-signed.tsx | 63 +++++++++++------- .../template-forgot-password.tsx | 14 ++-- .../template-reset-password.tsx | 14 ++-- .../email/templates/document-self-signed.tsx | 2 - 12 files changed, 127 insertions(+), 109 deletions(-) create mode 100644 apps/web/public/static/user-plus.png create mode 100644 packages/email/static/user-plus.png create mode 100644 packages/email/template-components/template-document-image.tsx diff --git a/apps/marketing/src/components/(marketing)/single-player-mode/create-single-player-document.action.ts b/apps/marketing/src/components/(marketing)/single-player-mode/create-single-player-document.action.ts index f2bc074ea..1e779fcfc 100644 --- a/apps/marketing/src/components/(marketing)/single-player-mode/create-single-player-document.action.ts +++ b/apps/marketing/src/components/(marketing)/single-player-mode/create-single-player-document.action.ts @@ -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; diff --git a/apps/web/public/static/user-plus.png b/apps/web/public/static/user-plus.png new file mode 100644 index 0000000000000000000000000000000000000000..081976f59740adb0132d35c2f63ed34195548fbe GIT binary patch literal 367 zcmV-#0g(QQP)10BH))D7H3oj~tQpH%YwJ_-2A1xo4N_xk;^m^jLb z`3p;+g7_9#h9vHI?ttr%q*4NHAlJAk!g*I{0?hmpR&Ve;0Z*U-4!{hky*tqaXu%2~ zISJ#S$Pu^!Oe7nc0JCM5i;#ItGRNQ%zH>esmVh=V0xvN0Jr3^t4bZ+WEQ{9o>)a!0 zFiu%Sa>fs*b;xqC^jqHdA#?4J-2%*_1$YOvh|83=upqSHT%EgU6pAkz$6P3334AMU z%vLeTqQtJv&n|%~cu!mUWhm@CaIG(ib>!$Gwut_w4mOo~wl9eQRki+;B5p9@>PsRZ z)u8nsOC;NuM8N7lDFIhs5&^XW9Ho?9_csBx#2h=wt{d|vtNBbW@BtJ10BH))D7H3oj~tQpH%YwJ_-2A1xo4N_xk;^m^jLb z`3p;+g7_9#h9vHI?ttr%q*4NHAlJAk!g*I{0?hmpR&Ve;0Z*U-4!{hky*tqaXu%2~ zISJ#S$Pu^!Oe7nc0JCM5i;#ItGRNQ%zH>esmVh=V0xvN0Jr3^t4bZ+WEQ{9o>)a!0 zFiu%Sa>fs*b;xqC^jqHdA#?4J-2%*_1$YOvh|83=upqSHT%EgU6pAkz$6P3334AMU z%vLeTqQtJv&n|%~cu!mUWhm@CaIG(ib>!$Gwut_w4mOo~wl9eQRki+;B5p9@>PsRZ z)u8nsOC;NuM8N7lDFIhs5&^XW9Ho?9_csBx#2h=wt{d|vtNBbW@BtJ -
- - + - - Documenso +
+
+ + + + Completed + - - - -
- -
- - - Completed - +
“{documentName}” was signed by all signers @@ -66,10 +61,13 @@ export const TemplateDocumentCompleted = ({ Review */}
diff --git a/packages/email/template-components/template-document-image.tsx b/packages/email/template-components/template-document-image.tsx new file mode 100644 index 000000000..d18140024 --- /dev/null +++ b/packages/email/template-components/template-document-image.tsx @@ -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 ( +
+ + + + + Documenso + + + + +
+ ); +}; + +export default TemplateDocumentImage; diff --git a/packages/email/template-components/template-document-invite.tsx b/packages/email/template-components/template-document-invite.tsx index fcfba406d..10c298cdd 100644 --- a/packages/email/template-components/template-document-invite.tsx +++ b/packages/email/template-components/template-document-invite.tsx @@ -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 ( -
- - - - - Documenso - - - - -
+
diff --git a/packages/email/template-components/template-document-pending.tsx b/packages/email/template-components/template-document-pending.tsx index f9fc8648a..be7735064 100644 --- a/packages/email/template-components/template-document-pending.tsx +++ b/packages/email/template-components/template-document-pending.tsx @@ -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 = ({ }, }} > -
- - + - - Documenso +
+
+ + + + Waiting for others + - - - -
- -
- - - Waiting for others - +
“{documentName}” has been signed diff --git a/packages/email/template-components/template-document-self-signed.tsx b/packages/email/template-components/template-document-self-signed.tsx index 751ea7f72..7d1668a09 100644 --- a/packages/email/template-components/template-document-self-signed.tsx +++ b/packages/email/template-components/template-document-self-signed.tsx @@ -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 = ({ }, }} > + +
-
- Documenso -
+
+ + + + Completed + + +
- - - Completed - - - + You have signed “{documentName}” - - Check out our plans to access the full suite of features. + + Create a{' '} + + free account + {' '} + to access your signed documents at any time.
+ + -
diff --git a/packages/email/template-components/template-forgot-password.tsx b/packages/email/template-components/template-forgot-password.tsx index 45560a026..128001822 100644 --- a/packages/email/template-components/template-forgot-password.tsx +++ b/packages/email/template-components/template-forgot-password.tsx @@ -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 ( -
-
- Documenso -
+ +
Forgot your password? diff --git a/packages/email/template-components/template-reset-password.tsx b/packages/email/template-components/template-reset-password.tsx index ee2e8e7b1..36bc93098 100644 --- a/packages/email/template-components/template-reset-password.tsx +++ b/packages/email/template-components/template-reset-password.tsx @@ -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 ( -
-
- Documenso -
+ +
Password updated! diff --git a/packages/email/templates/document-self-signed.tsx b/packages/email/templates/document-self-signed.tsx index 3a16f707e..fb3dda8fc 100644 --- a/packages/email/templates/document-self-signed.tsx +++ b/packages/email/templates/document-self-signed.tsx @@ -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 = ({ /> From 334671ef85a16c792be073edfb7412b133f26f7d Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Wed, 27 Sep 2023 15:34:16 +1000 Subject: [PATCH 2/3] feat: add email forgot password action Updated email template imports --- .../template-document-completed.tsx | 2 +- .../template-document-invite.tsx | 2 +- .../template-document-pending.tsx | 2 +- .../template-document-self-signed.tsx | 4 ++-- .../template-forgot-password.tsx | 2 +- .../template-components/template-reset-password.tsx | 13 +++++++++++-- packages/email/templates/document-completed.tsx | 2 +- packages/email/templates/document-invite.tsx | 2 +- packages/email/templates/document-self-signed.tsx | 2 +- packages/email/templates/forgot-password.tsx | 2 +- packages/email/templates/reset-password.tsx | 2 +- 11 files changed, 22 insertions(+), 13 deletions(-) diff --git a/packages/email/template-components/template-document-completed.tsx b/packages/email/template-components/template-document-completed.tsx index 9c9255879..c67fb4017 100644 --- a/packages/email/template-components/template-document-completed.tsx +++ b/packages/email/template-components/template-document-completed.tsx @@ -2,7 +2,7 @@ import { Button, Column, Img, Section, Tailwind, Text } from '@react-email/compo import * as config from '@documenso/tailwind-config'; -import TemplateDocumentImage from './template-document-image'; +import { TemplateDocumentImage } from './template-document-image'; export interface TemplateDocumentCompletedProps { downloadLink: string; diff --git a/packages/email/template-components/template-document-invite.tsx b/packages/email/template-components/template-document-invite.tsx index 10c298cdd..0e2837aa6 100644 --- a/packages/email/template-components/template-document-invite.tsx +++ b/packages/email/template-components/template-document-invite.tsx @@ -2,7 +2,7 @@ import { Button, Section, Tailwind, Text } from '@react-email/components'; import * as config from '@documenso/tailwind-config'; -import TemplateDocumentImage from './template-document-image'; +import { TemplateDocumentImage } from './template-document-image'; export interface TemplateDocumentInviteProps { inviterName: string; diff --git a/packages/email/template-components/template-document-pending.tsx b/packages/email/template-components/template-document-pending.tsx index be7735064..632433ae3 100644 --- a/packages/email/template-components/template-document-pending.tsx +++ b/packages/email/template-components/template-document-pending.tsx @@ -2,7 +2,7 @@ import { Column, Img, Section, Tailwind, Text } from '@react-email/components'; import * as config from '@documenso/tailwind-config'; -import TemplateDocumentImage from './template-document-image'; +import { TemplateDocumentImage } from './template-document-image'; export interface TemplateDocumentPendingProps { documentName: string; diff --git a/packages/email/template-components/template-document-self-signed.tsx b/packages/email/template-components/template-document-self-signed.tsx index 7d1668a09..6f93a7e58 100644 --- a/packages/email/template-components/template-document-self-signed.tsx +++ b/packages/email/template-components/template-document-self-signed.tsx @@ -2,7 +2,7 @@ import { Button, Column, Img, Link, Section, Tailwind, Text } from '@react-email import * as config from '@documenso/tailwind-config'; -import TemplateDocumentImage from './template-document-image'; +import { TemplateDocumentImage } from './template-document-image'; export interface TemplateDocumentSelfSignedProps { documentName: string; @@ -49,7 +49,7 @@ export const TemplateDocumentSelfSigned = ({ Create a{' '} diff --git a/packages/email/template-components/template-forgot-password.tsx b/packages/email/template-components/template-forgot-password.tsx index 128001822..1f1d0438d 100644 --- a/packages/email/template-components/template-forgot-password.tsx +++ b/packages/email/template-components/template-forgot-password.tsx @@ -2,7 +2,7 @@ import { Button, Section, Tailwind, Text } from '@react-email/components'; import * as config from '@documenso/tailwind-config'; -import TemplateDocumentImage from './template-document-image'; +import { TemplateDocumentImage } from './template-document-image'; export type TemplateForgotPasswordProps = { resetPasswordLink: string; diff --git a/packages/email/template-components/template-reset-password.tsx b/packages/email/template-components/template-reset-password.tsx index 36bc93098..45f81be06 100644 --- a/packages/email/template-components/template-reset-password.tsx +++ b/packages/email/template-components/template-reset-password.tsx @@ -1,8 +1,8 @@ -import { 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'; +import { TemplateDocumentImage } from './template-document-image'; export interface TemplateResetPasswordProps { userName: string; @@ -31,6 +31,15 @@ export const TemplateResetPassword = ({ assetBaseUrl }: TemplateResetPasswordPro Your password has been updated. + +
+ +
); diff --git a/packages/email/templates/document-completed.tsx b/packages/email/templates/document-completed.tsx index adaa5d0ed..a5a1a02ba 100644 --- a/packages/email/templates/document-completed.tsx +++ b/packages/email/templates/document-completed.tsx @@ -15,7 +15,7 @@ import { TemplateDocumentCompleted, TemplateDocumentCompletedProps, } from '../template-components/template-document-completed'; -import TemplateFooter from '../template-components/template-footer'; +import { TemplateFooter } from '../template-components/template-footer'; export type DocumentCompletedEmailTemplateProps = Partial; diff --git a/packages/email/templates/document-invite.tsx b/packages/email/templates/document-invite.tsx index 661a2fd5f..cb3a1e282 100644 --- a/packages/email/templates/document-invite.tsx +++ b/packages/email/templates/document-invite.tsx @@ -18,7 +18,7 @@ import { TemplateDocumentInvite, TemplateDocumentInviteProps, } from '../template-components/template-document-invite'; -import TemplateFooter from '../template-components/template-footer'; +import { TemplateFooter } from '../template-components/template-footer'; export type DocumentInviteEmailTemplateProps = Partial & { customBody?: string; diff --git a/packages/email/templates/document-self-signed.tsx b/packages/email/templates/document-self-signed.tsx index fb3dda8fc..91b2d29f6 100644 --- a/packages/email/templates/document-self-signed.tsx +++ b/packages/email/templates/document-self-signed.tsx @@ -15,7 +15,7 @@ import { TemplateDocumentSelfSigned, TemplateDocumentSelfSignedProps, } from '../template-components/template-document-self-signed'; -import TemplateFooter from '../template-components/template-footer'; +import { TemplateFooter } from '../template-components/template-footer'; export type DocumentSelfSignedTemplateProps = TemplateDocumentSelfSignedProps; diff --git a/packages/email/templates/forgot-password.tsx b/packages/email/templates/forgot-password.tsx index ab3db58f5..61df2ccc3 100644 --- a/packages/email/templates/forgot-password.tsx +++ b/packages/email/templates/forgot-password.tsx @@ -11,7 +11,7 @@ import { import config from '@documenso/tailwind-config'; -import TemplateFooter from '../template-components/template-footer'; +import { TemplateFooter } from '../template-components/template-footer'; import { TemplateForgotPassword, TemplateForgotPasswordProps, diff --git a/packages/email/templates/reset-password.tsx b/packages/email/templates/reset-password.tsx index 35881fe72..ed9929ec7 100644 --- a/packages/email/templates/reset-password.tsx +++ b/packages/email/templates/reset-password.tsx @@ -14,7 +14,7 @@ import { import config from '@documenso/tailwind-config'; -import TemplateFooter from '../template-components/template-footer'; +import { TemplateFooter } from '../template-components/template-footer'; import { TemplateResetPassword, TemplateResetPasswordProps, From 6e2d1fb1486ae3069384fb14c13f011e7b3cf069 Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Wed, 27 Sep 2023 17:43:43 +1000 Subject: [PATCH 3/3] fix: add missing URL to email template --- .../template-document-self-signed.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/email/template-components/template-document-self-signed.tsx b/packages/email/template-components/template-document-self-signed.tsx index 6f93a7e58..604dd5274 100644 --- a/packages/email/template-components/template-document-self-signed.tsx +++ b/packages/email/template-components/template-document-self-signed.tsx @@ -13,6 +13,8 @@ export const TemplateDocumentSelfSigned = ({ documentName, assetBaseUrl, }: TemplateDocumentSelfSignedProps) => { + const signUpUrl = `${process.env.NEXT_PUBLIC_WEBAPP_URL ?? 'http://localhost:3000'}/signup`; + const getAssetUrl = (path: string) => { return new URL(path, assetBaseUrl).toString(); }; @@ -49,7 +51,7 @@ export const TemplateDocumentSelfSigned = ({ Create a{' '} @@ -59,7 +61,10 @@ export const TemplateDocumentSelfSigned = ({
-