Skip to content

Commit 31e17a0

Browse files
florianbgtflorianbgt
authored
Merge pull request #8 from nanoapi-io/feature/remove-react-email-components
remove react email components
2 parents 0992910 + 94a1bda commit 31e17a0

File tree

9 files changed

+830
-384
lines changed

9 files changed

+830
-384
lines changed

‎packages/core/deno.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
"imports": {
1111
"@google-cloud/storage": "npm:@google-cloud/storage@^7.16.0",
1212
"@oak/oak": "jsr:@oak/oak@^17.1.4",
13-
"@react-email/components": "npm:@react-email/components@^0.1.0",
1413
"@sentry/deno": "npm:@sentry/deno@^9.28.1",
1514
"@std/assert": "jsr:@std/assert@1",
1615
"@std/expect": "jsr:@std/expect@^1.0.16",

‎packages/core/src/email/templates/DowngradeEmail.tsx‎

Lines changed: 120 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { Heading, Section, Text } from "@react-email/components";
21
import { baseTemplate } from "./base.tsx";
3-
import { headingStyle } from "./styles.tsx";
2+
import { sharedStyles } from "./sharedStyles.ts";
43
import type {
54
StripeBillingCycle,
65
StripeProduct,
@@ -20,47 +19,130 @@ const DowngradeEmail = (props: {
2019
newSubscriptionDate: string;
2120
}) => {
2221
const previewText = "Confirmation of your subscription downgrade | NanoAPI";
22+
2323
return baseTemplate(
2424
previewText,
2525
<>
26-
<Section>
27-
<Heading as="h2" style={headingStyle}>
28-
We are sorry to see you go
29-
</Heading>
30-
<Text>
31-
Your subscription for workspace {props.workspaceName}{" "}
32-
has been scheduled for downgrade.
33-
</Text>
34-
</Section>
35-
<Section>
36-
<Text
37-
style={{ textAlign: "center", fontSize: "20px", fontWeight: "bold" }}
38-
>
39-
Previous subscription: {props.oldSubscription.product}{" "}
40-
({props.oldSubscription.billingCycle ?? "Custom billing cycle"})
41-
</Text>
42-
<Text
43-
style={{ textAlign: "center", fontSize: "20px", fontWeight: "bold" }}
26+
{/* Header */}
27+
<div style={{ ...sharedStyles.centerText, ...sharedStyles.section }}>
28+
<div style={{ ...sharedStyles.iconCircle, backgroundColor: "#6b7280" }}>
29+
📋
30+
</div>
31+
<h1 style={sharedStyles.heading}>Subscription Change Confirmed</h1>
32+
<p style={sharedStyles.body}>
33+
Your subscription for <strong>"{props.workspaceName}"</strong>{" "}
34+
has been updated
35+
</p>
36+
</div>
37+
38+
{/* Plan Comparison */}
39+
<div style={{ ...sharedStyles.section, ...sharedStyles.contentSpacing }}>
40+
<h3 style={{ ...sharedStyles.subheading, ...sharedStyles.centerText }}>
41+
Your Plan Changes
42+
</h3>
43+
44+
<div style={sharedStyles.card}>
45+
<div style={{ marginBottom: "16px" }}>
46+
<div
47+
style={{
48+
...sharedStyles.small,
49+
textTransform: "uppercase",
50+
letterSpacing: "1px",
51+
}}
52+
>
53+
Current Plan
54+
</div>
55+
<div
56+
style={{ fontSize: "20px", fontWeight: "700", color: "#166534" }}
57+
>
58+
{props.oldSubscription.product}
59+
</div>
60+
<div style={sharedStyles.small}>
61+
{props.oldSubscription.billingCycle ?? "Custom billing cycle"}
62+
</div>
63+
</div>
64+
65+
<div
66+
style={{
67+
textAlign: "center",
68+
margin: "16px 0",
69+
fontSize: "20px",
70+
color: "#6b7280",
71+
}}
72+
>
73+
⬇️
74+
</div>
75+
76+
<div>
77+
<div
78+
style={{
79+
...sharedStyles.small,
80+
textTransform: "uppercase",
81+
letterSpacing: "1px",
82+
}}
83+
>
84+
New Plan
85+
</div>
86+
<div
87+
style={{ fontSize: "20px", fontWeight: "700", color: "#991b1b" }}
88+
>
89+
{props.newSubscription.product}
90+
</div>
91+
<div style={sharedStyles.small}>
92+
{props.newSubscription.billingCycle ?? "Custom billing cycle"}
93+
</div>
94+
</div>
95+
</div>
96+
</div>
97+
98+
{/* Effective Date */}
99+
<div
100+
style={{ ...sharedStyles.warningBox, ...sharedStyles.contentSpacing }}
101+
>
102+
<h3
103+
style={{
104+
...sharedStyles.subheading,
105+
fontSize: "16px",
106+
margin: "0 0 8px 0",
107+
color: "#92400e",
108+
}}
44109
>
45-
New subscription: {props.newSubscription.product}{" "}
46-
({props.newSubscription.billingCycle ?? "Custom billing cycle"})
47-
</Text>
48-
<Text style={{ textAlign: "center", fontWeight: "bold" }}>
49-
Effective date: {props.newSubscriptionDate}
50-
</Text>
51-
</Section>
52-
<Section>
53-
<Text>
110+
Effective Date
111+
</h3>
112+
<p style={{ ...sharedStyles.small, color: "#92400e", margin: 0 }}>
54113
Your current subscription will remain active until the end of your
55-
billing period, and the new subscription will take effect on{" "}
56-
{props.newSubscriptionDate}.
57-
</Text>
58-
<Text>
59-
If you have any questions, please don't hesitate to contact our
60-
support team.
61-
</Text>
62-
<Text>Best regards - Team Nano</Text>
63-
</Section>
114+
billing period. The new subscription will take effect on{" "}
115+
<strong>{props.newSubscriptionDate}</strong>.
116+
</p>
117+
</div>
118+
119+
{/* Support */}
120+
<div
121+
style={{
122+
...sharedStyles.card,
123+
...sharedStyles.centerText,
124+
...sharedStyles.contentSpacing,
125+
}}
126+
>
127+
<p style={{ ...sharedStyles.small, margin: 0 }}>
128+
Have questions about your subscription change? Our{" "}
129+
<a href="mailto:support@nanoapi.io" style={sharedStyles.link}>
130+
support team
131+
</a>{" "}
132+
is here to help you.
133+
</p>
134+
</div>
135+
136+
{/* Footer */}
137+
<div style={{ ...sharedStyles.divider, ...sharedStyles.centerText }}>
138+
<p style={{ ...sharedStyles.body, margin: "0 0 8px 0" }}>
139+
Thank you for being part of our community! 🙏
140+
</p>
141+
<p style={sharedStyles.small}>
142+
Best regards,<br />
143+
The NanoAPI Team
144+
</p>
145+
</div>
64146
</>,
65147
);
66148
};

‎packages/core/src/email/templates/InvitationEmail.tsx‎

Lines changed: 80 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,98 @@
1-
import { Button, Heading, Section, Text } from "@react-email/components";
21
import { baseTemplate } from "./base.tsx";
3-
import { headingStyle } from "./styles.tsx";
2+
import { sharedStyles } from "./sharedStyles.ts";
43

54
const InvitationEmail = (props: {
65
workspaceName: string;
76
invitationLink: string;
87
}) => {
98
const previewText = `Invitation to join "${props.workspaceName}" on NanoAPI`;
9+
1010
return baseTemplate(
1111
previewText,
1212
<>
13-
<Section>
14-
<Heading as="h2" style={headingStyle}>
15-
You have been invited to join "{props.workspaceName}"
16-
</Heading>
17-
<Text>
18-
We're excited to have you as part of our team. To get started, simply
19-
click the link below to accept your invitation and set up your
20-
account:
21-
</Text>
22-
</Section>
23-
<Section
24-
style={{ display: "flex", justifyContent: "center", padding: 20 }}
13+
{/* Header */}
14+
<div style={{ ...sharedStyles.centerText, ...sharedStyles.section }}>
15+
<div style={{ ...sharedStyles.iconCircle, backgroundColor: "#4f46e5" }}>
16+
👥
17+
</div>
18+
<h1 style={sharedStyles.heading}>You're Invited!</h1>
19+
<p style={sharedStyles.body}>
20+
Join <strong>"{props.workspaceName}"</strong> on NanoAPI
21+
</p>
22+
</div>
23+
24+
{/* Invitation Details */}
25+
<div
26+
style={{
27+
...sharedStyles.card,
28+
...sharedStyles.centerText,
29+
...sharedStyles.contentSpacing,
30+
}}
31+
>
32+
<p style={sharedStyles.body}>
33+
We're excited to have you as part of our team! To get started, simply
34+
click the button below to accept your invitation and set up your
35+
account.
36+
</p>
37+
<a href={props.invitationLink} style={sharedStyles.primaryButton}>
38+
Accept Invitation
39+
</a>
40+
</div>
41+
42+
{/* What you'll get */}
43+
<div style={{ ...sharedStyles.section, ...sharedStyles.contentSpacing }}>
44+
<h3 style={{ ...sharedStyles.subheading, ...sharedStyles.centerText }}>
45+
What you'll get access to:
46+
</h3>
47+
<div style={sharedStyles.card}>
48+
<ul style={{ margin: 0, paddingLeft: "20px" }}>
49+
<li style={sharedStyles.body}>
50+
Collaborate on software architecture projects
51+
</li>
52+
<li style={sharedStyles.body}>
53+
Access to shared workspaces and resources
54+
</li>
55+
<li style={sharedStyles.body}>
56+
Use powerful development tools and CLI
57+
</li>
58+
<li style={sharedStyles.body}>
59+
Team documentation and knowledge sharing
60+
</li>
61+
</ul>
62+
</div>
63+
</div>
64+
65+
{/* Security Notice */}
66+
<div
67+
style={{ ...sharedStyles.warningBox, ...sharedStyles.contentSpacing }}
2568
>
26-
<Button
27-
href={props.invitationLink}
69+
<h3
2870
style={{
29-
boxSizing: "border-box",
30-
padding: 12,
31-
fontWeight: 600,
32-
borderRadius: 8,
33-
textAlign: "center",
34-
backgroundColor: "rgb(79,70,229)",
35-
color: "rgb(255,255,255)",
71+
...sharedStyles.subheading,
72+
fontSize: "16px",
73+
margin: "0 0 8px 0",
74+
color: "#92400e",
3675
}}
3776
>
38-
Accept Invitation
39-
</Button>
40-
</Section>
41-
<Section>
42-
<Text>
77+
Secure Invitation
78+
</h3>
79+
<p style={{ ...sharedStyles.small, color: "#92400e", margin: 0 }}>
4380
This invitation link is unique to you and will expire after a period
44-
for security reasons. If you have any questions or need assistance,
45-
please don't hesitate to reach out to your team administrator.
46-
</Text>
47-
<Text>We look forward to collaborating with you!</Text>
48-
<Text>Best regards - Team Nano</Text>
49-
</Section>
81+
for security reasons. If you have any questions, please contact your
82+
team administrator.
83+
</p>
84+
</div>
85+
86+
{/* Footer */}
87+
<div style={{ ...sharedStyles.divider, ...sharedStyles.centerText }}>
88+
<p style={{ ...sharedStyles.body, margin: "0 0 8px 0" }}>
89+
We look forward to collaborating with you! 🚀
90+
</p>
91+
<p style={sharedStyles.small}>
92+
Best regards,<br />
93+
The NanoAPI Team
94+
</p>
95+
</div>
5096
</>,
5197
);
5298
};

0 commit comments

Comments
 (0)