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

Merge branch "main"

Browse Source
This commit is contained in:
Mythie
2024-11-08 22:56:22 +11:00
parent 3ca5e47ed4
commit 80c0468df2
121 changed files with 5668 additions and 1393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/email/providers/branding.tsx Normal file
View File

@ -0,0 +1,44 @@
'use client';
import { createContext, useContext } from 'react';
type BrandingContextValue = {
brandingEnabled: boolean;
brandingUrl: string;
brandingLogo: string;
brandingCompanyDetails: string;
brandingHidePoweredBy: boolean;
};
const BrandingContext = createContext<BrandingContextValue | undefined>(undefined);
const defaultBrandingContextValue: BrandingContextValue = {
brandingEnabled: false,
brandingUrl: '',
brandingLogo: '',
brandingCompanyDetails: '',
brandingHidePoweredBy: false,
};
export const BrandingProvider = (props: {
branding?: BrandingContextValue;
children: React.ReactNode;
}) => {
return (
<BrandingContext.Provider value={props.branding ?? defaultBrandingContextValue}>
{props.children}
</BrandingContext.Provider>
);
};
export const useBranding = () => {
const ctx = useContext(BrandingContext);
if (!ctx) {
throw new Error('Branding context not found');
}
return ctx;
};
export type BrandingSettings = BrandingContextValue;

27
packages/email/render.tsx
View File

@ -1,11 +1,18 @@
import * as reactEmail from '@react-email/render';
import * as ReactEmail from '@react-email/render';
import config from '@documenso/tailwind-config';
import { Tailwind } from './components';
import { BrandingProvider, type BrandingSettings } from './providers/branding';
export const render: typeof reactEmail.render = (element, options) => {
return reactEmail.render(
export type RenderOptions = ReactEmail.Options & {
branding?: BrandingSettings;
};
export const render = (element: React.ReactNode, options?: RenderOptions) => {
const { branding, ...otherOptions } = options ?? {};
return ReactEmail.render(
<Tailwind
config={{
theme: {
@ -15,14 +22,16 @@ export const render: typeof reactEmail.render = (element, options) => {
},
}}
>
{element}
<BrandingProvider branding={branding}>{element}</BrandingProvider>
</Tailwind>,
options,
otherOptions,
);
};
export const renderAsync: typeof reactEmail.renderAsync = async (element, options) => {
return reactEmail.renderAsync(
export const renderAsync = async (element: React.ReactNode, options?: RenderOptions) => {
const { branding, ...otherOptions } = options ?? {};
return await ReactEmail.renderAsync(
<Tailwind
config={{
theme: {
@ -32,8 +41,8 @@ export const renderAsync: typeof reactEmail.renderAsync = async (element, option
},
}}
>
{element}
<BrandingProvider branding={branding}>{element}</BrandingProvider>
</Tailwind>,
options,
otherOptions,
);
};

3
packages/email/template-components/template-confirmation-email.tsx
View File

@ -1,5 +1,4 @@
import { Trans } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { Button, Section, Text } from '../components';
import { TemplateDocumentImage } from './template-document-image';
@ -13,8 +12,6 @@ export const TemplateConfirmationEmail = ({
confirmationLink,
assetBaseUrl,
}: TemplateConfirmationEmailProps) => {
const { _ } = useLingui();
return (
<>
<TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />

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

@ -38,7 +38,7 @@ export const TemplateDocumentCompleted = ({
</Section>
<Text className="text-primary mb-0 text-center text-lg font-semibold">
<Trans>{customBody ?? `“${documentName}” was signed by all signers`}</Trans>
{customBody || <Trans>“{documentName}” was signed by all signers</Trans>}
</Text>
<Text className="my-1 text-center text-base text-slate-400">
@ -46,13 +46,6 @@ export const TemplateDocumentCompleted = ({
</Text>
<Section className="mb-6 mt-8 text-center">
{/* <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"
href={reviewLink}
>
<Img src={getAssetUrl('/static/review.png')} className="-mb-1 mr-2 inline h-5 w-5" />
Review
</Button> */}
<Button
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}

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

@ -1,8 +1,9 @@
import { Trans } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { match } from 'ts-pattern';
import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '@documenso/lib/constants/recipient-roles';
import type { RecipientRole } from '@documenso/prisma/client';
import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
import { RecipientRole } from '@documenso/prisma/client';
import { Button, Section, Text } from '../components';
import { TemplateDocumentImage } from './template-document-image';
@ -17,6 +18,7 @@ export interface TemplateDocumentInviteProps {
selfSigner: boolean;
isTeamInvite: boolean;
teamName?: string;
includeSenderDetails?: boolean;
}
export const TemplateDocumentInvite = ({
@ -28,10 +30,11 @@ export const TemplateDocumentInvite = ({
selfSigner,
isTeamInvite,
teamName,
includeSenderDetails,
}: TemplateDocumentInviteProps) => {
const { _ } = useLingui();
const { actionVerb, progressiveVerb } = RECIPIENT_ROLES_DESCRIPTION_ENG[role];
const { actionVerb } = RECIPIENT_ROLES_DESCRIPTION[role];
return (
<>
@ -41,29 +44,38 @@ export const TemplateDocumentInvite = ({
<Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
{selfSigner ? (
<Trans>
{`Please ${_(actionVerb).toLowerCase()} your document`}
<br />
{`"${documentName}"`}
Please {_(actionVerb).toLowerCase()} your document
<br />"{documentName}"
</Trans>
) : isTeamInvite ? (
<Trans>
{`${inviterName} on behalf of ${teamName} has invited you to ${_(
actionVerb,
).toLowerCase()}`}
<br />
{`"${documentName}"`}
</Trans>
<>
{includeSenderDetails ? (
<Trans>
{inviterName} on behalf of {teamName} has invited you to{' '}
{_(actionVerb).toLowerCase()}
</Trans>
) : (
<Trans>
{teamName} has invited you to {_(actionVerb).toLowerCase()}
</Trans>
)}
<br />"{documentName}"
</>
) : (
<Trans>
{`${inviterName} has invited you to ${_(actionVerb).toLowerCase()}`}
<br />
{`"${documentName}"`}
{inviterName} has invited you to {_(actionVerb).toLowerCase()}
<br />"{documentName}"
</Trans>
)}
</Text>
<Text className="my-1 text-center text-base text-slate-400">
<Trans>Continue by {_(progressiveVerb).toLowerCase()} the document.</Trans>
{match(role)
.with(RecipientRole.SIGNER, () => <Trans>Continue by signing the document.</Trans>)
.with(RecipientRole.VIEWER, () => <Trans>Continue by viewing the document.</Trans>)
.with(RecipientRole.APPROVER, () => <Trans>Continue by approving the document.</Trans>)
.with(RecipientRole.CC, () => '')
.exhaustive()}
</Text>
<Section className="mb-6 mt-8 text-center">
@ -71,7 +83,12 @@ export const TemplateDocumentInvite = ({
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}
>
<Trans>{_(actionVerb)} Document</Trans>
{match(role)
.with(RecipientRole.SIGNER, () => <Trans>Sign Document</Trans>)
.with(RecipientRole.VIEWER, () => <Trans>View Document</Trans>)
.with(RecipientRole.APPROVER, () => <Trans>Approve Document</Trans>)
.with(RecipientRole.CC, () => '')
.exhaustive()}
</Button>
</Section>
</Section>

28
packages/email/template-components/template-footer.tsx
View File

@ -1,15 +1,18 @@
import { Trans } from '@lingui/macro';
import { Link, Section, Text } from '../components';
import { useBranding } from '../providers/branding';
export type TemplateFooterProps = {
isDocument?: boolean;
};
export const TemplateFooter = ({ isDocument = true }: TemplateFooterProps) => {
const branding = useBranding();
return (
<Section>
{isDocument && (
{isDocument && !branding.brandingHidePoweredBy && (
<Text className="my-4 text-base text-slate-400">
<Trans>
This document was sent using{' '}
@ -20,11 +23,24 @@ export const TemplateFooter = ({ isDocument = true }: TemplateFooterProps) => {
</Text>
)}
<Text className="my-8 text-sm text-slate-400">
Documenso, Inc.
<br />
2261 Market Street, #5211, San Francisco, CA 94114, USA
</Text>
{branding.brandingCompanyDetails ? (
<Text className="my-8 text-sm text-slate-400">
{branding.brandingCompanyDetails.split('\n').map((line, idx) => {
return (
<>
{idx > 0 && <br />}
{line}
</>
);
})}
</Text>
) : (
<Text className="my-8 text-sm text-slate-400">
Documenso, Inc.
<br />
2261 Market Street, #5211, San Francisco, CA 94114, USA
</Text>
)}
</Section>
);
};

16
packages/email/templates/confirm-email.tsx
View File

@ -2,6 +2,7 @@ import { msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { Body, Container, Head, Html, Img, Preview, Section } from '../components';
import { useBranding } from '../providers/branding';
import type { TemplateConfirmationEmailProps } from '../template-components/template-confirmation-email';
import { TemplateConfirmationEmail } from '../template-components/template-confirmation-email';
import { TemplateFooter } from '../template-components/template-footer';
@ -11,6 +12,7 @@ export const ConfirmEmailTemplate = ({
assetBaseUrl = 'http://localhost:3002',
}: TemplateConfirmationEmailProps) => {
const { _ } = useLingui();
const branding = useBranding();
const previewText = msg`Please confirm your email address`;
@ -26,11 +28,15 @@ export const ConfirmEmailTemplate = ({
<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>
<Img
src={getAssetUrl('/static/logo.png')}
alt="Documenso Logo"
className="mb-4 h-6"
/>
{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"
/>
)}
<TemplateConfirmationEmail
confirmationLink={confirmationLink}

51
packages/email/templates/confirm-team-email.tsx
View File

@ -1,4 +1,4 @@
import { msg } from '@lingui/macro';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { formatTeamUrl } from '@documenso/lib/utils/teams';
@ -10,11 +10,13 @@ import {
Head,
Hr,
Html,
Img,
Link,
Preview,
Section,
Text,
} from '../components';
import { useBranding } from '../providers/branding';
import { TemplateFooter } from '../template-components/template-footer';
import TemplateImage from '../template-components/template-image';
@ -34,6 +36,7 @@ export const ConfirmTeamEmailTemplate = ({
token = '',
}: ConfirmTeamEmailProps) => {
const { _ } = useLingui();
const branding = useBranding();
const previewText = msg`Accept team email request for ${teamName} on Documenso`;
@ -45,11 +48,15 @@ export const ConfirmTeamEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-white">
<Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 px-2 pt-2 backdrop-blur-sm">
<TemplateImage
assetBaseUrl={assetBaseUrl}
className="mb-4 h-6 p-2"
staticAsset="logo.png"
/>
{branding.brandingEnabled && branding.brandingLogo ? (
<Img src={branding.brandingLogo} alt="Branding Logo" className="mb-4 h-6 p-2" />
) : (
<TemplateImage
assetBaseUrl={assetBaseUrl}
className="mb-4 h-6 p-2"
staticAsset="logo.png"
/>
)}
<Section>
<TemplateImage
@ -61,12 +68,14 @@ export const ConfirmTeamEmailTemplate = ({
<Section className="p-2 text-slate-500">
<Text className="text-center text-lg font-medium text-black">
Verify your team email address
<Trans>Verify your team email address</Trans>
</Text>
<Text className="text-center text-base">
<span className="font-bold">{teamName}</span> has requested to use your email
address for their team on Documenso.
<Trans>
<span className="font-bold">{teamName}</span> has requested to use your email
address for their team on Documenso.
</Trans>
</Text>
<div className="mx-auto mt-6 w-fit rounded-lg bg-gray-50 px-4 py-2 text-base font-medium text-slate-600">
@ -75,25 +84,29 @@ export const ConfirmTeamEmailTemplate = ({
<Section className="mt-6">
<Text className="my-0 text-sm">
By accepting this request, you will be granting <strong>{teamName}</strong> access
to:
<Trans>
By accepting this request, you will be granting <strong>{teamName}</strong>{' '}
access to:
</Trans>
</Text>
<ul className="mb-0 mt-2">
<li className="text-sm">
View all documents sent to and from this email address
<Trans>View all documents sent to and from this email address</Trans>
</li>
<li className="mt-1 text-sm">
Allow document recipients to reply directly to this email address
<Trans>Allow document recipients to reply directly to this email address</Trans>
</li>
<li className="mt-1 text-sm">
Send documents on behalf of the team using the email address
<Trans>Send documents on behalf of the team using the email address</Trans>
</li>
</ul>
<Text className="mt-2 text-sm">
You can revoke access at any time in your team settings on Documenso{' '}
<Link href={`${baseUrl}/settings/teams`}>here.</Link>
<Trans>
You can revoke access at any time in your team settings on Documenso{' '}
<Link href={`${baseUrl}/settings/teams`}>here.</Link>
</Trans>
</Text>
</Section>
@ -102,12 +115,14 @@ export const ConfirmTeamEmailTemplate = ({
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={`${baseUrl}/team/verify/email/${token}`}
>
Accept
<Trans>Accept</Trans>
</Button>
</Section>
</Section>
<Text className="text-center text-xs text-slate-500">Link expires in 1 hour.</Text>
<Text className="text-center text-xs text-slate-500">
<Trans>Link expires in 1 hour.</Trans>
</Text>
</Container>
<Hr className="mx-auto mt-12 max-w-xl" />

16
packages/email/templates/document-cancel.tsx
View File

@ -2,6 +2,7 @@ import { msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { Body, Container, Head, Hr, Html, Img, Preview, Section } from '../components';
import { useBranding } from '../providers/branding';
import type { TemplateDocumentCancelProps } from '../template-components/template-document-cancel';
import { TemplateDocumentCancel } from '../template-components/template-document-cancel';
import { TemplateFooter } from '../template-components/template-footer';
@ -15,6 +16,7 @@ export const DocumentCancelTemplate = ({
assetBaseUrl = 'http://localhost:3002',
}: DocumentCancelEmailTemplateProps) => {
const { _ } = useLingui();
const branding = useBranding();
const previewText = msg`${inviterName} has cancelled the document ${documentName}, you don't need to sign it anymore.`;
@ -31,11 +33,15 @@ export const DocumentCancelTemplate = ({
<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>
<Img
src={getAssetUrl('/static/logo.png')}
alt="Documenso Logo"
className="mb-4 h-6"
/>
{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"
/>
)}
<TemplateDocumentCancel
inviterName={inviterName}

16
packages/email/templates/document-completed.tsx
View File

@ -2,6 +2,7 @@ import { msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { Body, Container, Head, Html, Img, Preview, Section } from '../components';
import { useBranding } from '../providers/branding';
import type { TemplateDocumentCompletedProps } from '../template-components/template-document-completed';
import { TemplateDocumentCompleted } from '../template-components/template-document-completed';
import { TemplateFooter } from '../template-components/template-footer';
@ -17,6 +18,7 @@ export const DocumentCompletedEmailTemplate = ({
customBody,
}: DocumentCompletedEmailTemplateProps) => {
const { _ } = useLingui();
const branding = useBranding();
const previewText = msg`Completed Document`;
@ -33,11 +35,15 @@ export const DocumentCompletedEmailTemplate = ({
<Section className="bg-white">
<Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
<Section className="p-2">
<Img
src={getAssetUrl('/static/logo.png')}
alt="Documenso Logo"
className="mb-4 h-6"
/>
{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"
/>
)}
<TemplateDocumentCompleted
downloadLink={downloadLink}

20
packages/email/templates/document-created-from-direct-template.tsx
View File

@ -1,9 +1,10 @@
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '@documenso/lib/constants/recipient-roles';
import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
import { Body, Button, Container, Head, Html, Img, Preview, Section, Text } from '../components';
import { useBranding } from '../providers/branding';
import TemplateDocumentImage from '../template-components/template-document-image';
import { TemplateFooter } from '../template-components/template-footer';
import { RecipientRole } from '.prisma/client';
@ -24,8 +25,9 @@ export const DocumentCreatedFromDirectTemplateEmailTemplate = ({
assetBaseUrl = 'http://localhost:3002',
}: DocumentCompletedEmailTemplateProps) => {
const { _ } = useLingui();
const branding = useBranding();
const action = _(RECIPIENT_ROLES_DESCRIPTION_ENG[recipientRole].actioned).toLowerCase();
const action = _(RECIPIENT_ROLES_DESCRIPTION[recipientRole].actioned).toLowerCase();
const previewText = msg`Document created from direct template`;
@ -42,11 +44,15 @@ export const DocumentCreatedFromDirectTemplateEmailTemplate = ({
<Section className="bg-white">
<Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
<Section className="p-2">
<Img
src={getAssetUrl('/static/logo.png')}
alt="Documenso Logo"
className="mb-4 h-6"
/>
{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"
/>
)}
<TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />

41
packages/email/templates/document-invite.tsx
View File

@ -1,10 +1,11 @@
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '@documenso/lib/constants/recipient-roles';
import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
import type { RecipientRole } from '@documenso/prisma/client';
import { Body, Container, Head, Hr, Html, Img, Link, Preview, Section, Text } from '../components';
import { useBranding } from '../providers/branding';
import type { TemplateDocumentInviteProps } from '../template-components/template-document-invite';
import { TemplateDocumentInvite } from '../template-components/template-document-invite';
import { TemplateFooter } from '../template-components/template-footer';
@ -16,6 +17,7 @@ export type DocumentInviteEmailTemplateProps = Partial<TemplateDocumentInvitePro
isTeamInvite?: boolean;
teamName?: string;
teamEmail?: string;
includeSenderDetails?: boolean;
};
export const DocumentInviteEmailTemplate = ({
@ -29,16 +31,24 @@ export const DocumentInviteEmailTemplate = ({
selfSigner = false,
isTeamInvite = false,
teamName,
includeSenderDetails,
}: DocumentInviteEmailTemplateProps) => {
const { _ } = useLingui();
const branding = useBranding();
const action = _(RECIPIENT_ROLES_DESCRIPTION_ENG[role].actionVerb).toLowerCase();
const action = _(RECIPIENT_ROLES_DESCRIPTION[role].actionVerb).toLowerCase();
const previewText = selfSigner
? msg`Please ${action} your document ${documentName}`
: isTeamInvite
? msg`${inviterName} on behalf of ${teamName} has invited you to ${action} ${documentName}`
: msg`${inviterName} has invited you to ${action} ${documentName}`;
let previewText = msg`${inviterName} has invited you to ${action} ${documentName}`;
if (isTeamInvite) {
previewText = includeSenderDetails
? msg`${inviterName} on behalf of ${teamName} has invited you to ${action} ${documentName}`
: msg`${teamName} has invited you to ${action} ${documentName}`;
}
if (selfSigner) {
previewText = msg`Please ${action} your document ${documentName}`;
}
const getAssetUrl = (path: string) => {
return new URL(path, assetBaseUrl).toString();
@ -53,11 +63,15 @@ export const DocumentInviteEmailTemplate = ({
<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>
<Img
src={getAssetUrl('/static/logo.png')}
alt="Documenso Logo"
className="mb-4 h-6"
/>
{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"
/>
)}
<TemplateDocumentInvite
inviterName={inviterName}
@ -69,6 +83,7 @@ export const DocumentInviteEmailTemplate = ({
selfSigner={selfSigner}
isTeamInvite={isTeamInvite}
teamName={teamName}
includeSenderDetails={includeSenderDetails}
/>
</Section>
</Container>
@ -89,7 +104,7 @@ export const DocumentInviteEmailTemplate = ({
<pre className="font-sans text-base text-slate-400">{customBody}</pre>
) : (
<Trans>
`${inviterName} has invited you to ${action} the document "${documentName}".`
{inviterName} has invited you to {action} the document "{documentName}".
</Trans>
)}
</Text>

16
packages/email/templates/document-pending.tsx
View File

@ -2,6 +2,7 @@ import { msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { Body, Container, Head, Html, Img, Preview, Section } from '../components';
import { useBranding } from '../providers/branding';
import type { TemplateDocumentPendingProps } from '../template-components/template-document-pending';
import { TemplateDocumentPending } from '../template-components/template-document-pending';
import { TemplateFooter } from '../template-components/template-footer';
@ -13,6 +14,7 @@ export const DocumentPendingEmailTemplate = ({
assetBaseUrl = 'http://localhost:3002',
}: DocumentPendingEmailTemplateProps) => {
const { _ } = useLingui();
const branding = useBranding();
const previewText = msg`Pending Document`;
@ -29,11 +31,15 @@ export const DocumentPendingEmailTemplate = ({
<Section className="bg-white">
<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>
<Img
src={getAssetUrl('/static/logo.png')}
alt="Documenso Logo"
className="mb-4 h-6"
/>
{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"
/>
)}
<TemplateDocumentPending documentName={documentName} assetBaseUrl={assetBaseUrl} />
</Section>

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

@ -2,6 +2,7 @@ import { msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { Body, Container, Head, Html, Img, Preview, Section } from '../components';
import { useBranding } from '../providers/branding';
import type { TemplateDocumentSelfSignedProps } from '../template-components/template-document-self-signed';
import { TemplateDocumentSelfSigned } from '../template-components/template-document-self-signed';
import { TemplateFooter } from '../template-components/template-footer';
@ -13,6 +14,7 @@ export const DocumentSelfSignedEmailTemplate = ({
assetBaseUrl = 'http://localhost:3002',
}: DocumentSelfSignedTemplateProps) => {
const { _ } = useLingui();
const branding = useBranding();
const previewText = msg`Completed Document`;
@ -29,11 +31,15 @@ export const DocumentSelfSignedEmailTemplate = ({
<Section className="bg-white">
<Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
<Section className="p-2">
<Img
src={getAssetUrl('/static/logo.png')}
alt="Documenso Logo"
className="mb-4 h-6"
/>
{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"
/>
)}
<TemplateDocumentSelfSigned documentName={documentName} assetBaseUrl={assetBaseUrl} />
</Section>

16
packages/email/templates/document-super-delete.tsx
View File

@ -2,6 +2,7 @@ import { msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { Body, Container, Head, Hr, Html, Img, Preview, Section } from '../components';
import { useBranding } from '../providers/branding';
import {
TemplateDocumentDelete,
type TemplateDocumentDeleteProps,
@ -16,6 +17,7 @@ export const DocumentSuperDeleteEmailTemplate = ({
reason = 'Unknown',
}: DocumentDeleteEmailTemplateProps) => {
const { _ } = useLingui();
const branding = useBranding();
const previewText = msg`An admin has deleted your document "${documentName}".`;
@ -32,11 +34,15 @@ export const DocumentSuperDeleteEmailTemplate = ({
<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>
<Img
src={getAssetUrl('/static/logo.png')}
alt="Documenso Logo"
className="mb-4 h-6"
/>
{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"
/>
)}
<TemplateDocumentDelete
reason={reason}

16
packages/email/templates/forgot-password.tsx
View File

@ -2,6 +2,7 @@ import { msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { Body, Container, Head, Html, Img, Preview, Section } from '../components';
import { useBranding } from '../providers/branding';
import { TemplateFooter } from '../template-components/template-footer';
import type { TemplateForgotPasswordProps } from '../template-components/template-forgot-password';
import { TemplateForgotPassword } from '../template-components/template-forgot-password';
@ -13,6 +14,7 @@ export const ForgotPasswordTemplate = ({
assetBaseUrl = 'http://localhost:3002',
}: ForgotPasswordTemplateProps) => {
const { _ } = useLingui();
const branding = useBranding();
const previewText = msg`Password Reset Requested`;
@ -29,11 +31,15 @@ export const ForgotPasswordTemplate = ({
<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>
<Img
src={getAssetUrl('/static/logo.png')}
alt="Documenso Logo"
className="mb-4 h-6"
/>
{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"
/>
)}
<TemplateForgotPassword
resetPasswordLink={resetPasswordLink}

24
packages/email/templates/recipient-removed-from-document.tsx
View File

@ -1,7 +1,8 @@
import { msg } from '@lingui/macro';
import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { Body, Container, Head, Hr, Html, Img, Preview, Section, Text } from '../components';
import { useBranding } from '../providers/branding';
import type { TemplateDocumentCancelProps } from '../template-components/template-document-cancel';
import TemplateDocumentImage from '../template-components/template-document-image';
import { TemplateFooter } from '../template-components/template-footer';
@ -14,6 +15,7 @@ export const RecipientRemovedFromDocumentTemplate = ({
assetBaseUrl = 'http://localhost:3002',
}: DocumentCancelEmailTemplateProps) => {
const { _ } = useLingui();
const branding = useBranding();
const previewText = msg`${inviterName} has removed you from the document ${documentName}.`;
@ -30,18 +32,24 @@ export const RecipientRemovedFromDocumentTemplate = ({
<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>
<Img
src={getAssetUrl('/static/logo.png')}
alt="Documenso Logo"
className="mb-4 h-6"
/>
{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"
/>
)}
<TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
<Section>
<Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
{inviterName} has removed you from the document
<br />"{documentName}"
<Trans>
{inviterName} has removed you from the document
<br />"{documentName}"
</Trans>
</Text>
</Section>
</Section>

16
packages/email/templates/reset-password.tsx
View File

@ -2,6 +2,7 @@ import { Trans, msg } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { Body, Container, Head, Hr, Html, Img, Link, Preview, Section, Text } from '../components';
import { useBranding } from '../providers/branding';
import { TemplateFooter } from '../template-components/template-footer';
import type { TemplateResetPasswordProps } from '../template-components/template-reset-password';
import { TemplateResetPassword } from '../template-components/template-reset-password';
@ -14,6 +15,7 @@ export const ResetPasswordTemplate = ({
assetBaseUrl = 'http://localhost:3002',
}: ResetPasswordTemplateProps) => {
const { _ } = useLingui();
const branding = useBranding();
const previewText = msg`Password Reset Successful`;
@ -30,11 +32,15 @@ export const ResetPasswordTemplate = ({
<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>
<Img
src={getAssetUrl('/static/logo.png')}
alt="Documenso Logo"
className="mb-4 h-6"
/>
{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"
/>
)}
<TemplateResetPassword
userName={userName}

18
packages/email/templates/team-delete.tsx
View File

@ -3,7 +3,8 @@ import { useLingui } from '@lingui/react';
import { formatTeamUrl } from '@documenso/lib/utils/teams';
import { Body, Container, Head, Hr, Html, Preview, Section, Text } from '../components';
import { Body, Container, Head, Hr, Html, Img, Preview, Section, Text } from '../components';
import { useBranding } from '../providers/branding';
import { TemplateFooter } from '../template-components/template-footer';
import TemplateImage from '../template-components/template-image';
@ -21,6 +22,7 @@ export const TeamDeleteEmailTemplate = ({
isOwner = false,
}: TeamDeleteEmailProps) => {
const { _ } = useLingui();
const branding = useBranding();
const previewText = isOwner
? msg`Your team has been deleted`
@ -42,11 +44,15 @@ export const TeamDeleteEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-white text-slate-500">
<Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
<TemplateImage
assetBaseUrl={assetBaseUrl}
className="mb-4 h-6 p-2"
staticAsset="logo.png"
/>
{branding.brandingEnabled && branding.brandingLogo ? (
<Img src={branding.brandingLogo} alt="Branding Logo" className="mb-4 h-6 p-2" />
) : (
<TemplateImage
assetBaseUrl={assetBaseUrl}
className="mb-4 h-6 p-2"
staticAsset="logo.png"
/>
)}
<Section>
<TemplateImage

18
packages/email/templates/team-email-removed.tsx
View File

@ -3,7 +3,8 @@ import { useLingui } from '@lingui/react';
import { formatTeamUrl } from '@documenso/lib/utils/teams';
import { Body, Container, Head, Hr, Html, Preview, Section, Text } from '../components';
import { Body, Container, Head, Hr, Html, Img, Preview, Section, Text } from '../components';
import { useBranding } from '../providers/branding';
import { TemplateFooter } from '../template-components/template-footer';
import TemplateImage from '../template-components/template-image';
@ -23,6 +24,7 @@ export const TeamEmailRemovedTemplate = ({
teamUrl = 'demo',
}: TeamEmailRemovedTemplateProps) => {
const { _ } = useLingui();
const branding = useBranding();
const previewText = msg`Team email removed for ${teamName} on Documenso`;
@ -34,11 +36,15 @@ export const TeamEmailRemovedTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-white text-slate-500">
<Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 px-2 pt-2 backdrop-blur-sm">
<TemplateImage
assetBaseUrl={assetBaseUrl}
className="mb-4 h-6 p-2"
staticAsset="logo.png"
/>
{branding.brandingEnabled && branding.brandingLogo ? (
<Img src={branding.brandingLogo} alt="Branding Logo" className="mb-4 h-6 p-2" />
) : (
<TemplateImage
assetBaseUrl={assetBaseUrl}
className="mb-4 h-6 p-2"
staticAsset="logo.png"
/>
)}
<Section>
<TemplateImage

29
packages/email/templates/team-invite.tsx
View File

@ -3,7 +3,19 @@ import { useLingui } from '@lingui/react';
import { formatTeamUrl } from '@documenso/lib/utils/teams';
import { Body, Button, Container, Head, Hr, Html, Preview, Section, Text } from '../components';
import {
Body,
Button,
Container,
Head,
Hr,
Html,
Img,
Preview,
Section,
Text,
} from '../components';
import { useBranding } from '../providers/branding';
import { TemplateFooter } from '../template-components/template-footer';
import TemplateImage from '../template-components/template-image';
@ -25,6 +37,7 @@ export const TeamInviteEmailTemplate = ({
token = '',
}: TeamInviteEmailProps) => {
const { _ } = useLingui();
const branding = useBranding();
const previewText = msg`Accept invitation to join a team on Documenso`;
@ -36,11 +49,15 @@ export const TeamInviteEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-white text-slate-500">
<Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
<TemplateImage
assetBaseUrl={assetBaseUrl}
className="mb-4 h-6 p-2"
staticAsset="logo.png"
/>
{branding.brandingEnabled && branding.brandingLogo ? (
<Img src={branding.brandingLogo} alt="Branding Logo" className="mb-4 h-6 p-2" />
) : (
<TemplateImage
assetBaseUrl={assetBaseUrl}
className="mb-4 h-6 p-2"
staticAsset="logo.png"
/>
)}
<Section>
<TemplateImage

18
packages/email/templates/team-join.tsx
View File

@ -3,7 +3,8 @@ import { useLingui } from '@lingui/react';
import { formatTeamUrl } from '@documenso/lib/utils/teams';
import { Body, Container, Head, Hr, Html, Preview, Section, Text } from '../components';
import { Body, Container, Head, Hr, Html, Img, Preview, Section, Text } from '../components';
import { useBranding } from '../providers/branding';
import { TemplateFooter } from '../template-components/template-footer';
import TemplateImage from '../template-components/template-image';
@ -25,6 +26,7 @@ export const TeamJoinEmailTemplate = ({
teamUrl = 'demo',
}: TeamJoinEmailProps) => {
const { _ } = useLingui();
const branding = useBranding();
const previewText = msg`A team member has joined a team on Documenso`;
@ -36,11 +38,15 @@ export const TeamJoinEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-white text-slate-500">
<Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
<TemplateImage
assetBaseUrl={assetBaseUrl}
className="mb-4 h-6 p-2"
staticAsset="logo.png"
/>
{branding.brandingEnabled && branding.brandingLogo ? (
<Img src={branding.brandingLogo} alt="Branding Logo" className="mb-4 h-6 p-2" />
) : (
<TemplateImage
assetBaseUrl={assetBaseUrl}
className="mb-4 h-6 p-2"
staticAsset="logo.png"
/>
)}
<Section>
<TemplateImage

18
packages/email/templates/team-leave.tsx
View File

@ -3,7 +3,8 @@ import { useLingui } from '@lingui/react';
import { formatTeamUrl } from '@documenso/lib/utils/teams';
import { Body, Container, Head, Hr, Html, Preview, Section, Text } from '../components';
import { Body, Container, Head, Hr, Html, Img, Preview, Section, Text } from '../components';
import { useBranding } from '../providers/branding';
import { TemplateFooter } from '../template-components/template-footer';
import TemplateImage from '../template-components/template-image';
@ -25,6 +26,7 @@ export const TeamLeaveEmailTemplate = ({
teamUrl = 'demo',
}: TeamLeaveEmailProps) => {
const { _ } = useLingui();
const branding = useBranding();
const previewText = msg`A team member has left a team on Documenso`;
@ -36,11 +38,15 @@ export const TeamLeaveEmailTemplate = ({
<Body className="mx-auto my-auto font-sans">
<Section className="bg-white text-slate-500">
<Container className="mx-auto mb-2 mt-8 max-w-xl rounded-lg border border-solid border-slate-200 p-2 backdrop-blur-sm">
<TemplateImage
assetBaseUrl={assetBaseUrl}
className="mb-4 h-6 p-2"
staticAsset="logo.png"
/>
{branding.brandingEnabled && branding.brandingLogo ? (
<Img src={branding.brandingLogo} alt="Branding Logo" className="mb-4 h-6 p-2" />
) : (
<TemplateImage
assetBaseUrl={assetBaseUrl}
className="mb-4 h-6 p-2"
staticAsset="logo.png"
/>
)}
<Section>
<TemplateImage