120 lines
4.1 KiB
TypeScript
120 lines
4.1 KiB
TypeScript
import { useMemo } from 'react';
|
|
|
|
import { useLingui } from '@lingui/react';
|
|
import { Trans } from '@lingui/react/macro';
|
|
import { RecipientRole } from '@prisma/client';
|
|
import { P, match } from 'ts-pattern';
|
|
|
|
import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
|
|
|
|
import { Button, Section, Text } from '../components';
|
|
import { TemplateDocumentImage } from './template-document-image';
|
|
|
|
export interface TemplateDocumentInviteProps {
|
|
inviterName: string;
|
|
inviterEmail: string;
|
|
documentName: string;
|
|
signDocumentLink: string;
|
|
assetBaseUrl: string;
|
|
role: RecipientRole;
|
|
selfSigner: boolean;
|
|
isTeamInvite: boolean;
|
|
teamName?: string;
|
|
includeSenderDetails?: boolean;
|
|
}
|
|
|
|
export const TemplateDocumentInvite = ({
|
|
inviterName,
|
|
documentName,
|
|
signDocumentLink,
|
|
assetBaseUrl,
|
|
role,
|
|
selfSigner,
|
|
isTeamInvite,
|
|
teamName,
|
|
includeSenderDetails,
|
|
}: TemplateDocumentInviteProps) => {
|
|
const { _ } = useLingui();
|
|
|
|
const { actionVerb } = RECIPIENT_ROLES_DESCRIPTION[role];
|
|
|
|
const rejectDocumentLink = useMemo(() => {
|
|
const url = new URL(signDocumentLink);
|
|
url.searchParams.set('reject', 'true');
|
|
return url.toString();
|
|
}, [signDocumentLink]);
|
|
|
|
return (
|
|
<>
|
|
<TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
|
|
|
|
<Section>
|
|
<Text className="text-primary mx-auto mb-0 max-w-[80%] text-center text-lg font-semibold">
|
|
{match({ selfSigner, isTeamInvite, includeSenderDetails, teamName })
|
|
.with({ selfSigner: true }, () => (
|
|
<Trans>
|
|
Please {_(actionVerb).toLowerCase()} your document
|
|
<br />"{documentName}"
|
|
</Trans>
|
|
))
|
|
.with({ isTeamInvite: true, includeSenderDetails: true, teamName: P.string }, () => (
|
|
<Trans>
|
|
{inviterName} on behalf of "{teamName}" has invited you to{' '}
|
|
{_(actionVerb).toLowerCase()}
|
|
<br />"{documentName}"
|
|
</Trans>
|
|
))
|
|
.with({ isTeamInvite: true, teamName: P.string }, () => (
|
|
<Trans>
|
|
{teamName} has invited you to {_(actionVerb).toLowerCase()}
|
|
<br />"{documentName}"
|
|
</Trans>
|
|
))
|
|
.otherwise(() => (
|
|
<Trans>
|
|
{inviterName} has invited you to {_(actionVerb).toLowerCase()}
|
|
<br />"{documentName}"
|
|
</Trans>
|
|
))}
|
|
</Text>
|
|
|
|
<Text className="my-1 text-center text-base text-slate-400">
|
|
{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, () => '')
|
|
.with(RecipientRole.ASSISTANT, () => (
|
|
<Trans>Continue by assisting with the document.</Trans>
|
|
))
|
|
.exhaustive()}
|
|
</Text>
|
|
|
|
<Section className="mb-6 mt-8 text-center">
|
|
<Button
|
|
className="mr-4 inline-flex items-center justify-center rounded-lg bg-red-500 px-6 py-3 text-center text-sm font-medium text-black no-underline"
|
|
href={rejectDocumentLink}
|
|
>
|
|
<Trans>Reject Document</Trans>
|
|
</Button>
|
|
|
|
<Button
|
|
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}
|
|
>
|
|
{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, () => '')
|
|
.with(RecipientRole.ASSISTANT, () => <Trans>Assist Document</Trans>)
|
|
.exhaustive()}
|
|
</Button>
|
|
</Section>
|
|
</Section>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TemplateDocumentInvite;
|