blsmedia/bot
2
0
Fork 0
Code Activity

🚸 Improve magic link sign in experience

Browse Source 
New email and sign in feedback
This commit is contained in:
Baptiste Arnaud
2023-03-13 11:20:28 +01:00
parent 4ae9ea32e4
commit 48db171c1b
7 changed files with 129 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/emails/src/components/Button.tsx
View File

@ -1,14 +1,14 @@
import React from 'react'
import { MjmlButton } from '@faire/mjml-react'
import { IMjmlButtonProps, MjmlButton } from '@faire/mjml-react'
import { blue, grayLight } from '../theme'
import { leadingTight, textBase, borderBase } from '../theme'
type ButtonProps = {
link: string
children: React.ReactNode
}
} & IMjmlButtonProps
export const Button = ({ link, children }: ButtonProps) => (
export const Button = ({ link, children, ...props }: ButtonProps) => (
<MjmlButton
lineHeight={leadingTight}
fontSize={textBase}
@ -20,6 +20,7 @@ export const Button = ({ link, children }: ButtonProps) => (
backgroundColor={blue}
color={grayLight}
borderRadius={borderBase}
{...props}
>
{children}
</MjmlButton>

55
packages/emails/src/emails/MagicLinkEmail.tsx Normal file
View File

@ -0,0 +1,55 @@
import React, { ComponentProps } from 'react'
import {
Mjml,
MjmlBody,
MjmlSection,
MjmlColumn,
MjmlSpacer,
} from '@faire/mjml-react'
import { render } from '@faire/mjml-react/utils/render'
import { HeroImage, Text, Button, Head } from '../components'
import { SendMailOptions } from 'nodemailer'
import { sendEmail } from '../sendEmail'
type Props = {
url: string
}
export const MagicLinkEmail = ({ url }: Props) => (
<Mjml>
<Head />
<MjmlBody width={600}>
<MjmlSection padding="0">
<MjmlColumn>
<HeroImage src="https://s3.fr-par.scw.cloud/typebot/public/typebots/rxp84mn10va5iqek63enrg99/blocks/yfazs53p6coxe4u3tbbvkl0m" />
</MjmlColumn>
</MjmlSection>
<MjmlSection padding="0 24px" cssClass="smooth">
<MjmlColumn>
<Text>Here is your magic link 👇</Text>
<MjmlSpacer />
<Button link={url} align="center">
Click here to sign in
</Button>
<Text>
If you didn&apos;t request this, please ignore this email.
</Text>
<Text>
Best,
<br />- Typebot Team.
</Text>
</MjmlColumn>
</MjmlSection>
</MjmlBody>
</Mjml>
)
export const sendMagicLinkEmail = ({
to,
...props
}: Pick<SendMailOptions, 'to'> & ComponentProps<typeof MagicLinkEmail>) =>
sendEmail({
to,
subject: 'Sign in to Typebot',
html: render(<MagicLinkEmail {...props} />).html,
})

1
packages/emails/src/emails/index.ts
View File

@ -5,3 +5,4 @@ export * from './GuestInvitationEmail'
export * from './ReachedChatsLimitEmail'
export * from './ReachedStorageLimitEmail'
export * from './WorkspaceMemberInvitationEmail'
export * from './MagicLinkEmail'

5
packages/emails/src/preview.tsx
View File

@ -10,6 +10,7 @@ import {
ReachedStorageLimitEmail,
WorkspaceMemberInvitation,
} from './emails'
import { MagicLinkEmail } from './emails/MagicLinkEmail'
const createDistFolder = () => {
const dist = path.resolve(__dirname, 'dist')
@ -91,6 +92,10 @@ const createHtmlFile = () => {
/>
).html
)
fs.writeFileSync(
path.resolve(__dirname, 'dist', 'magicLink.html'),
render(<MagicLinkEmail url={'https://app.typebot.io'} />).html
)
}
createDistFolder()