generated from actions/typescript-action
-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathmail.tsx
169 lines (165 loc) · 7.77 KB
/
mail.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
import {
Body,
Button,
Container,
Head,
Heading,
Hr,
Html,
Img,
Link,
Preview,
Section,
Text,
CodeInline,
CodeBlock,
a11yDark
} from '@react-email/components'
import { Tailwind } from '@react-email/tailwind'
import * as React from 'react'
interface ExpenseEmailProps {
username: string
prNumber: number
owner: string
repo: string
prTitle: string
prURL: string
expenseAmount: number
secretKey: string
}
export const ExpenseEmail = ({
username,
prNumber,
prTitle,
prURL,
owner,
repo,
expenseAmount,
secretKey
}: ExpenseEmailProps): React.JSX.Element => {
const previewText = `Thank you for your work on PR #${prNumber}. You are eligible to expense your work.`
const date = new Date()
const formattedDate = `${`${date.getMonth() + 1}`.padStart(
2,
'0'
)}/${`${date.getDate()}`.padStart(2, '0')}/${date.getFullYear()}`
return (
<Html>
<Head />
<Preview>{previewText}</Preview>
<Tailwind>
<React.Fragment>
<Body className="bg-white my-auto mx-auto font-sans px-2">
<Container
style={container}
className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[550px]">
<Section className="mt-[32px]">
<Img
src="https://webdriver.io/assets/images/robot-3677788dd63849c56aa5cb3f332b12d5.svg"
width="120"
alt="WebdriverIO"
className="my-0 mx-auto"
/>
</Section>
<Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
Thank you for <strong>contributing</strong> to{' '}
<strong>WebdriverIO</strong>!
</Heading>
<Text className="text-black text-[14px] leading-[24px]">
Hello <strong>{username}</strong>,
</Text>
<Text className="text-black text-[14px] leading-[24px]">
The WebdriverIO team would like to thank you
deeply for your contribution on pull request{' '}
<Link
href={prURL}
className="text-blue-600 no-underline">
<CodeInline>
{owner}/{repo}#{prNumber}
</CodeInline>
</Link>
. This project thrives on the invaluable
involvement of our community and we would like
to give back to everyone who has taken time to
improve the project.
</Text>
<Text className="text-black text-[14px] leading-[24px]">
The reviewer of your pull request has granted
you an expense of{' '}
<strong>${expenseAmount}</strong> 💸
</Text>
<Text className="text-black text-[14px] leading-[24px]">
Submit your expense via OpenCollective by
clicking the button below. Create an account,
select <strong>Invoice</strong>, enter your
address, select a payment method, and click{' '}
<strong>Next</strong>. Fill in expense details
on the next page, including an{' '}
<strong>Expense title</strong> with{' '}
<CodeInline>
"Project Contribution PR {owner}/{repo}#
{prNumber}"
</CodeInline>{' '}
and the pull request title (
<CodeInline>"{prTitle}"</CodeInline>) with the
current month and year in the{' '}
<strong>Expense description</strong>. Set the
date to <strong>{formattedDate}</strong> and the
amount to <strong>${expenseAmount}</strong>.
Finally, paste the provided key into the notes
section on the last page.
</Text>
<CodeBlock
theme={a11yDark}
code={secretKey}
language="markdown"
style={{ width: 'unset' }}
/>
<Text className="text-black text-[14px] leading-[24px]">
With this key we ensure that the author of the
pull request (you) can authenticate this
expense, so please don't share it with anyone.
Lastly, make sure all your data is correct and
click <strong>Submit expense</strong>. Once your
expense has been approved, you will receive the
money within 1-2 weeks.
</Text>
<Section className="text-center mt-[32px] mb-[32px]">
<Button
className="bg-[#EA5907] rounded text-white text-[12px] font-semibold no-underline text-center px-5 py-3"
href={
'https://opencollective.com/webdriverio/expenses/new'
}>
Submit Expense on OpenCollective
</Button>
</Section>
<Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
<Text className="text-[#666666] text-[12px] leading-[24px]">
Your are eligible to expense your work within
the next <strong>30 days</strong>. If you have
any questions, please reply to this email. You
can find more information about our expense
policy in our{' '}
<Link
href={
'https://github.com/webdriverio/webdriverio/blob/main/GOVERNANCE.md#sponsoring-and-donations'
}
className="text-blue-600 no-underline">
governance documentation
</Link>
.
</Text>
</Container>
</Body>
</React.Fragment>
</Tailwind>
</Html>
)
}
const container = {
border: '1px solid #eee',
borderRadius: '5px',
boxShadow: '0 5px 10px rgba(20,50,70,.2)',
marginTop: '20px'
}
export default ExpenseEmail