5078 ability to invite team members (#5750)

## Added features
- update team member setting page
- add a section to send invitation by email
- add a new invitation email
- update email font to 'Trebuchet MS' as Google Inter font is not
working, we need to use a web safe font
https://templates.mailchimp.com/design/typography/

## Demo

https://github.com/twentyhq/twenty/assets/29927851/c731d883-1599-4281-87e3-0671f36994ae

## Invitation Email

![image](https://github.com/twentyhq/twenty/assets/29927851/d569fc64-fa0c-4769-a3dd-1193a12b495c)
This commit is contained in:
martmull
2024-06-05 16:35:14 +02:00
committed by GitHub
parent 3c4b497846
commit e9d3ed99ca
28 changed files with 608 additions and 39 deletions

View File

@ -0,0 +1,44 @@
import { Img } from '@react-email/components';
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';
type SendInviteLinkEmailProps = {
link: string;
workspace: { name: string | undefined; logo: string | undefined };
sender: {
email: string;
firstName: string;
};
};
export const SendInviteLinkEmail = ({
link,
workspace,
sender,
}: SendInviteLinkEmailProps) => {
return (
<BaseEmail width={333}>
<Title value="Join your team on Twenty" />
<MainText>
{capitalize(sender.firstName)} (
<Link href={sender.email} value={sender.email} />) has invited you to
join a workspace called <b>{workspace.name}</b>
<br />
</MainText>
<HighlightedContainer>
{workspace.logo && <Img src={workspace.logo} width={40} height={40} />}
{workspace.name && <HighlightedText value={workspace.name} />}
<CallToAction href={link} value="Accept invite" />
</HighlightedContainer>
<WhatIsTwenty />
</BaseEmail>
);
};