62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
import { Trans } from '@lingui/react/macro';
|
|
import { Img } from '@react-email/components';
|
|
import { emailTheme } from 'src/common-style';
|
|
|
|
import { BaseEmail } from 'src/components/BaseEmail';
|
|
import { CallToAction } from 'src/components/CallToAction';
|
|
import { HighlightedContainer } from 'src/components/HighlightedContainer';
|
|
import { HighlightedText } from 'src/components/HighlightedText';
|
|
import { Link } from 'src/components/Link';
|
|
import { MainText } from 'src/components/MainText';
|
|
import { Title } from 'src/components/Title';
|
|
import { WhatIsTwenty } from 'src/components/WhatIsTwenty';
|
|
import { capitalize } from 'src/utils/capitalize';
|
|
import { APP_LOCALES, getImageAbsoluteURI } from 'twenty-shared';
|
|
|
|
type SendInviteLinkEmailProps = {
|
|
link: string;
|
|
workspace: { name: string | undefined; logo: string | undefined };
|
|
sender: {
|
|
email: string;
|
|
firstName: string;
|
|
lastName: string;
|
|
};
|
|
serverUrl: string;
|
|
locale: keyof typeof APP_LOCALES;
|
|
};
|
|
|
|
export const SendInviteLinkEmail = ({
|
|
link,
|
|
workspace,
|
|
sender,
|
|
serverUrl,
|
|
locale,
|
|
}: SendInviteLinkEmailProps) => {
|
|
const workspaceLogo = workspace.logo
|
|
? getImageAbsoluteURI({ imageUrl: workspace.logo, baseUrl: serverUrl })
|
|
: null;
|
|
|
|
return (
|
|
<BaseEmail width={333} locale={locale}>
|
|
<Title value={<Trans>Join your team on Twenty</Trans>} />
|
|
<MainText>
|
|
{capitalize(sender.firstName)} (
|
|
<Link
|
|
href={`mailto:${sender.email}`}
|
|
value={sender.email}
|
|
color={emailTheme.font.colors.blue}
|
|
/>
|
|
) <Trans>has invited you to join a workspace called </Trans>
|
|
<b>{workspace.name}</b>
|
|
<br />
|
|
</MainText>
|
|
<HighlightedContainer>
|
|
{workspaceLogo && <Img src={workspaceLogo} width={40} height={40} />}
|
|
{workspace.name && <HighlightedText value={workspace.name} />}
|
|
<CallToAction href={link} value={<Trans>Accept invite</Trans>} />
|
|
</HighlightedContainer>
|
|
<WhatIsTwenty />
|
|
</BaseEmail>
|
|
);
|
|
};
|