Skip to content

Commit 41535a6

Browse files
MartinBraquetMartinBraquet
committed
Improve email UI
1 parent d62447a commit 41535a6

File tree

8 files changed

+197
-257
lines changed

8 files changed

+197
-257
lines changed

‎backend/email/emails/functions/helpers.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export const sendNewMatchEmail = async (
2929
react: (
3030
<NewMatchEmail
3131
onUser={lover.user}
32+
email={privateUser.email}
3233
matchedWithUser={matchedWithUser}
3334
matchedLover={lover}
3435
unsubscribeUrl={unsubscribeUrl}
@@ -67,6 +68,7 @@ export const sendNewMessageEmail = async (
6768
toUser={toUser}
6869
channelId={channelId}
6970
unsubscribeUrl={unsubscribeUrl}
71+
email={privateUser.email}
7072
/>
7173
),
7274
})
@@ -82,6 +84,7 @@ export const sendNewMessageEmail = async (
8284
toUser={toUser}
8385
channelId={channelId}
8486
unsubscribeUrl={unsubscribeUrl}
87+
email={privateUser.email}
8588
/>
8689
),
8790
})
@@ -109,6 +112,7 @@ export const sendNewEndorsementEmail = async (
109112
onUser={onUser}
110113
endorsementText={text}
111114
unsubscribeUrl={unsubscribeUrl}
115+
email={privateUser.email}
112116
/>
113117
),
114118
})

‎backend/email/emails/functions/send-email.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const getResend = () => {
3737
if (resend) return resend
3838

3939
const apiKey = process.env.RESEND_KEY as string
40-
console.log(`RESEND_KEY: ${apiKey}`)
40+
// console.log(`RESEND_KEY: ${apiKey}`)
4141
resend = new Resend(apiKey)
4242
return resend
4343
}

‎backend/email/emails/new-endorsement.tsx‎

Lines changed: 24 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,31 @@
1-
import {
2-
Body,
3-
Button,
4-
Container,
5-
Column,
6-
Head,
7-
Html,
8-
Img,
9-
Link,
10-
Preview,
11-
Row,
12-
Section,
13-
Text,
14-
} from '@react-email/components'
15-
import { type User } from 'common/user'
16-
import { DOMAIN } from 'common/envs/constants'
17-
import { jamesUser, sinclairUser } from './functions/mock'
1+
import {Body, Button, Column, Container, Head, Html, Preview, Row, Section, Text,} from '@react-email/components'
2+
import {type User} from 'common/user'
3+
import {DOMAIN} from 'common/envs/constants'
4+
import {jamesUser, sinclairUser} from './functions/mock'
5+
import {button, container, content, Footer, main, paragraph} from "email/utils";
186

197
interface NewEndorsementEmailProps {
208
fromUser: User
219
onUser: User
2210
endorsementText: string
2311
unsubscribeUrl: string
12+
email?: string
2413
}
2514

2615
export const NewEndorsementEmail = ({
27-
fromUser,
28-
onUser,
29-
endorsementText,
30-
unsubscribeUrl,
31-
}: NewEndorsementEmailProps) => {
16+
fromUser,
17+
onUser,
18+
endorsementText,
19+
unsubscribeUrl,
20+
email,
21+
}: NewEndorsementEmailProps) => {
3222
const name = onUser.name.split(' ')[0]
3323

3424
const endorsementUrl = `https://${DOMAIN}/${onUser.username}`
3525

3626
return (
3727
<Html>
38-
<Head />
28+
<Head/>
3929
<Preview>New endorsement from {fromUser.name}</Preview>
4030
<Body style={main}>
4131
<Container style={container}>
@@ -55,15 +45,15 @@ export const NewEndorsementEmail = ({
5545

5646
<Section style={endorsementContainer}>
5747
<Row>
58-
<Column>
59-
<Img
60-
src={fromUser.avatarUrl}
61-
width="50"
62-
height="50"
63-
alt=""
64-
style={avatarImage}
65-
/>
66-
</Column>
48+
{/*<Column>*/}
49+
{/* <Img*/}
50+
{/* src={fromUser.avatarUrl}*/}
51+
{/* width="50"*/}
52+
{/* height="50"*/}
53+
{/* alt=""*/}
54+
{/* style={avatarImage}*/}
55+
{/* />*/}
56+
{/*</Column>*/}
6757
<Column>
6858
<Text style={endorsementTextStyle}>"{endorsementText}"</Text>
6959
</Column>
@@ -75,15 +65,7 @@ export const NewEndorsementEmail = ({
7565
</Section>
7666
</Section>
7767

78-
<Section style={footer}>
79-
<Text style={footerText}>
80-
This e-mail has been sent to {name},{' '}
81-
{/* <Link href={unsubscribeUrl} style={footerLink}>
82-
click here to unsubscribe from this type of notification
83-
</Link>
84-
. */}
85-
</Text>
86-
</Section>
68+
<Footer unsubscribeUrl={unsubscribeUrl} email={email ?? name}/>
8769
</Container>
8870
</Body>
8971
</Html>
@@ -96,37 +78,9 @@ NewEndorsementEmail.PreviewProps = {
9678
endorsementText:
9779
"Sinclair is someone you want to have around because she injects creativity and humor into every conversation, and her laugh is infectious! Not to mention that she's a great employee, treats everyone with respect, and is even-tempered.",
9880
unsubscribeUrl: 'https://compassmeet.com/unsubscribe',
81+
email: '[email protected]',
9982
} as NewEndorsementEmailProps
10083

101-
const main = {
102-
backgroundColor: '#f4f4f4',
103-
fontFamily: 'Arial, sans-serif',
104-
wordSpacing: 'normal',
105-
}
106-
107-
const container = {
108-
margin: '0 auto',
109-
maxWidth: '600px',
110-
}
111-
112-
const logoContainer = {
113-
padding: '20px 0px 5px 0px',
114-
textAlign: 'center' as const,
115-
backgroundColor: '#ffffff',
116-
}
117-
118-
const content = {
119-
backgroundColor: '#ffffff',
120-
padding: '20px 25px',
121-
}
122-
123-
const paragraph = {
124-
fontSize: '18px',
125-
lineHeight: '24px',
126-
margin: '10px 0',
127-
color: '#000000',
128-
fontFamily: 'Arial, Helvetica, sans-serif',
129-
}
13084

13185
const endorsementContainer = {
13286
margin: '20px 0',
@@ -135,46 +89,11 @@ const endorsementContainer = {
13589
borderRadius: '8px',
13690
}
13791

138-
const avatarImage = {
139-
borderRadius: '50%',
140-
}
141-
14292
const endorsementTextStyle = {
14393
fontSize: '16px',
14494
lineHeight: '22px',
14595
fontStyle: 'italic',
14696
color: '#333333',
14797
}
14898

149-
const button = {
150-
backgroundColor: '#4887ec',
151-
borderRadius: '12px',
152-
color: '#ffffff',
153-
fontFamily: 'Helvetica, Arial, sans-serif',
154-
fontSize: '16px',
155-
fontWeight: 'semibold',
156-
textDecoration: 'none',
157-
textAlign: 'center' as const,
158-
display: 'inline-block',
159-
padding: '6px 10px',
160-
margin: '10px 0',
161-
}
162-
163-
const footer = {
164-
margin: '20px 0',
165-
textAlign: 'center' as const,
166-
}
167-
168-
const footerText = {
169-
fontSize: '11px',
170-
lineHeight: '22px',
171-
color: '#000000',
172-
fontFamily: 'Ubuntu, Helvetica, Arial, sans-serif',
173-
}
174-
175-
const footerLink = {
176-
color: 'inherit',
177-
textDecoration: 'none',
178-
}
179-
18099
export default NewEndorsementEmail

‎backend/email/emails/new-match.tsx‎

Lines changed: 34 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,43 @@
1-
import {
2-
Body,
3-
Button,
4-
Container,
5-
Head,
6-
Html,
7-
Img,
8-
Link,
9-
Preview,
10-
Section,
11-
Text,
12-
} from '@react-email/components'
13-
import { DOMAIN } from 'common/envs/constants'
14-
import { type LoverRow } from 'common/love/lover'
15-
import { getLoveOgImageUrl } from 'common/love/og-image'
16-
import { type User } from 'common/user'
17-
import { jamesLover, jamesUser, sinclairUser } from './functions/mock'
1+
import {Body, Button, Container, Head, Html, Preview, Section, Text,} from '@react-email/components'
2+
import {DOMAIN} from 'common/envs/constants'
3+
import {type LoverRow} from 'common/love/lover'
4+
import {type User} from 'common/user'
5+
import {jamesLover, jamesUser, sinclairUser} from './functions/mock'
6+
import {Footer} from "email/utils";
187

198
interface NewMatchEmailProps {
209
onUser: User
2110
matchedWithUser: User
2211
matchedLover: LoverRow
2312
unsubscribeUrl: string
13+
email?: string
2414
}
2515

2616
export const NewMatchEmail = ({
27-
onUser,
28-
matchedWithUser,
29-
matchedLover,
30-
unsubscribeUrl,
31-
}: NewMatchEmailProps) => {
17+
onUser,
18+
matchedWithUser,
19+
matchedLover,
20+
unsubscribeUrl,
21+
email
22+
}: NewMatchEmailProps) => {
3223
const name = onUser.name.split(' ')[0]
33-
const userImgSrc = getLoveOgImageUrl(matchedWithUser, matchedLover)
24+
// const userImgSrc = getLoveOgImageUrl(matchedWithUser, matchedLover)
3425
const userUrl = `https://${DOMAIN}/${matchedWithUser.username}`
3526

3627
return (
3728
<Html>
38-
<Head />
29+
<Head/>
3930
<Preview>You have a new match!</Preview>
4031
<Body style={main}>
4132
<Container style={container}>
33+
4234
{/*<Section style={logoContainer}>*/}
43-
{/* <Img*/}
44-
{/* src="..."*/}
45-
{/* width="550"*/}
46-
{/* height="auto"*/}
47-
{/* alt="compassmeet.com"*/}
48-
{/* />*/}
35+
{/*<Img*/}
36+
{/* src="..."*/}
37+
{/* width="550"*/}
38+
{/* height="auto"*/}
39+
{/* alt="compassmeet.com"*/}
40+
{/*/>*/}
4941
{/*</Section>*/}
5042

5143
<Section style={content}>
@@ -56,31 +48,21 @@ export const NewMatchEmail = ({
5648
</Text>
5749

5850
<Section style={imageContainer}>
59-
<Link href={userUrl}>
60-
<Img
61-
src={userImgSrc}
62-
width="375"
63-
height="200"
64-
alt=""
65-
style={profileImage}
66-
/>
67-
</Link>
68-
51+
{/*<Link href={userUrl}>*/}
52+
{/* <Img*/}
53+
{/* src={userImgSrc}*/}
54+
{/* width="375"*/}
55+
{/* height="200"*/}
56+
{/* alt=""*/}
57+
{/* style={profileImage}*/}
58+
{/* />*/}
59+
{/*</Link>*/}
6960
<Button href={userUrl} style={button}>
7061
View profile
7162
</Button>
7263
</Section>
7364
</Section>
74-
75-
<Section style={footer}>
76-
<Text style={footerText}>
77-
This e-mail has been sent to {name},{' '}
78-
{/* <Link href={unsubscribeUrl} style={footerLink}>
79-
click here to unsubscribe from this type of notification
80-
</Link>
81-
. */}
82-
</Text>
83-
</Section>
65+
<Footer unsubscribeUrl={unsubscribeUrl} email={email ?? name}/>
8466
</Container>
8567
</Body>
8668
</Html>
@@ -91,11 +73,12 @@ NewMatchEmail.PreviewProps = {
9173
onUser: sinclairUser,
9274
matchedWithUser: jamesUser,
9375
matchedLover: jamesLover,
76+
email: '[email protected]',
9477
unsubscribeUrl: 'https://compassmeet.com/unsubscribe',
9578
} as NewMatchEmailProps
9679

9780
const main = {
98-
backgroundColor: '#f4f4f4',
81+
// backgroundColor: '#f4f4f4',
9982
fontFamily: 'Arial, sans-serif',
10083
wordSpacing: 'normal',
10184
}
@@ -147,21 +130,4 @@ const button = {
147130
margin: '10px 0',
148131
}
149132

150-
const footer = {
151-
margin: '20px 0',
152-
textAlign: 'center' as const,
153-
}
154-
155-
const footerText = {
156-
fontSize: '11px',
157-
lineHeight: '22px',
158-
color: '#000000',
159-
fontFamily: 'Ubuntu, Helvetica, Arial, sans-serif',
160-
}
161-
162-
const footerLink = {
163-
color: 'inherit',
164-
textDecoration: 'none',
165-
}
166-
167133
export default NewMatchEmail

0 commit comments

Comments
 (0)