Skip to content

Commit ec51f73

Browse files
waleedlatif1waleedlatif1
authored
feat(email): abandoned checkout email, 80% free tier warning, credits exhausted email (#3908)
* feat(email): send plain personal email on abandoned checkout * feat(email): lower free tier warning to 80% and add credits exhausted email * feat(email): use wordmark in email header instead of icon-only logo * fix(email): restore accidentally deleted social icons in email footer * fix(email): prevent double email for free users at 80%, fix subject line * improvement(emails): extract shared plain email styles and proFeatures constant, fix double email on 100% usage * fix(email): filter subscription-mode checkout, skip already-subscribed users, fix preview text * fix(email): use notifications type for onboarding followup to respect unsubscribe preferences * fix(email): use limit instead of currentUsage in credits exhausted email body * fix(email): use notifications type for abandoned checkout, clarify crosses80 comment * chore(email): rename _constants.ts to constants.ts * fix(email): use isProPlan to catch org-level subscriptions in abandoned checkout guard * fix(email): align onboarding followup delay to 5 days for email/password users
1 parent 6866da5 commit ec51f73

19 files changed

Lines changed: 305 additions & 42 deletions

File tree

‎apps/sim/background/lifecycle-email.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ async function sendLifecycleEmail({ userId, type }: LifecycleEmailParams): Promi
5050
html,
5151
from,
5252
replyTo,
53-
emailType: 'transactional',
53+
emailType: 'notifications',
5454
})
5555

5656
logger.info('[lifecycle-email] Sent lifecycle email', { userId, type })

‎apps/sim/components/emails/_styles/base.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,3 +267,24 @@ export const baseStyles = {
267267
margin: '8px 0',
268268
},
269269
}
270+
271+
/** Styles for plain personal emails (no branding, no EmailLayout) */
272+
export const plainEmailStyles = {
273+
body: {
274+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
275+
backgroundColor: '#ffffff',
276+
margin: '0',
277+
padding: '0',
278+
},
279+
container: {
280+
maxWidth: '560px',
281+
margin: '40px auto',
282+
padding: '0 24px',
283+
},
284+
p: {
285+
fontSize: '15px',
286+
lineHeight: '1.6',
287+
color: '#1a1a1a',
288+
margin: '0 0 16px',
289+
},
290+
} as const

‎apps/sim/components/emails/_styles/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { baseStyles, colors, spacing, typography } from './base'
1+
export { baseStyles, colors, plainEmailStyles, spacing, typography } from './base'

‎apps/sim/components/emails/auth/onboarding-followup-email.tsx‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,10 @@
11
import { Body, Head, Html, Preview, Text } from '@react-email/components'
2+
import { plainEmailStyles as styles } from '@/components/emails/_styles'
23

34
interface OnboardingFollowupEmailProps {
45
userName?: string
56
}
67

7-
const styles = {
8-
body: {
9-
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
10-
backgroundColor: '#ffffff',
11-
margin: '0',
12-
padding: '0',
13-
},
14-
container: {
15-
maxWidth: '560px',
16-
margin: '40px auto',
17-
padding: '0 24px',
18-
},
19-
p: {
20-
fontSize: '15px',
21-
lineHeight: '1.6',
22-
color: '#1a1a1a',
23-
margin: '0 0 16px',
24-
},
25-
} as const
26-
278
export function OnboardingFollowupEmail({ userName }: OnboardingFollowupEmailProps) {
289
return (
2910
<Html>

‎apps/sim/components/emails/billing/abandoned-checkout-email.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Body, Head, Html, Preview, Text } from '@react-email/components'
2+
import { plainEmailStyles as styles } from '@/components/emails/_styles'
3+
4+
interface AbandonedCheckoutEmailProps {
5+
userName?: string
6+
}
7+
8+
export function AbandonedCheckoutEmail({ userName }: AbandonedCheckoutEmailProps) {
9+
return (
10+
<Html>
11+
<Head />
12+
<Preview>Did you run into an issue with your upgrade?</Preview>
13+
<Body style={styles.body}>
14+
<div style={styles.container}>
15+
<Text style={styles.p}>{userName ? `Hi ${userName},` : 'Hi,'}</Text>
16+
<Text style={styles.p}>
17+
I saw that you tried to upgrade your Sim plan but didn&apos;t end up completing it.
18+
</Text>
19+
<Text style={styles.p}>
20+
Did you run into an issue, or did you have a question? Here to help.
21+
</Text>
22+
<Text style={styles.p}>
23+
— Emir
24+
<br />
25+
Founder, Sim
26+
</Text>
27+
</div>
28+
</Body>
29+
</Html>
30+
)
31+
}
32+
33+
export default AbandonedCheckoutEmail

‎apps/sim/components/emails/billing/constants.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/** Pro plan features shown in billing upgrade emails */
2+
export const proFeatures = [
3+
{ label: '6,000 credits/month', desc: 'included' },
4+
{ label: '+50 daily refresh', desc: 'credits per day' },
5+
{ label: '150 runs/min', desc: 'sync executions' },
6+
{ label: '50GB storage', desc: 'for files & assets' },
7+
] as const

‎apps/sim/components/emails/billing/credits-exhausted-email.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import { Link, Section, Text } from '@react-email/components'
2+
import { baseStyles, colors, typography } from '@/components/emails/_styles'
3+
import { proFeatures } from '@/components/emails/billing/constants'
4+
import { EmailLayout } from '@/components/emails/components'
5+
import { dollarsToCredits } from '@/lib/billing/credits/conversion'
6+
import { getBrandConfig } from '@/ee/whitelabeling'
7+
8+
interface CreditsExhaustedEmailProps {
9+
userName?: string
10+
limit: number
11+
upgradeLink: string
12+
}
13+
14+
export function CreditsExhaustedEmail({
15+
userName,
16+
limit,
17+
upgradeLink,
18+
}: CreditsExhaustedEmailProps) {
19+
const brand = getBrandConfig()
20+
21+
return (
22+
<EmailLayout
23+
preview={`You've used all ${dollarsToCredits(limit).toLocaleString()} of your free ${brand.name} credits`}
24+
showUnsubscribe={true}
25+
>
26+
<Text style={{ ...baseStyles.paragraph, marginTop: 0 }}>
27+
{userName ? `Hi ${userName},` : 'Hi,'}
28+
</Text>
29+
30+
<Text style={baseStyles.paragraph}>
31+
You&apos;ve used all <strong>{dollarsToCredits(limit).toLocaleString()}</strong> of your
32+
free credits on {brand.name}. Your workflows are paused until you upgrade.
33+
</Text>
34+
35+
<Section
36+
style={{
37+
backgroundColor: '#f8faf9',
38+
border: `1px solid ${colors.brandTertiary}20`,
39+
borderRadius: '8px',
40+
padding: '16px 20px',
41+
margin: '16px 0',
42+
}}
43+
>
44+
<Text
45+
style={{
46+
fontSize: '14px',
47+
fontWeight: 600,
48+
color: colors.brandTertiary,
49+
fontFamily: typography.fontFamily,
50+
margin: '0 0 12px 0',
51+
textTransform: 'uppercase' as const,
52+
letterSpacing: '0.5px',
53+
}}
54+
>
55+
Pro includes
56+
</Text>
57+
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
58+
<tbody>
59+
{proFeatures.map((feature, i) => (
60+
<tr key={i}>
61+
<td
62+
style={{
63+
padding: '6px 0',
64+
fontSize: '15px',
65+
fontWeight: 600,
66+
color: colors.textPrimary,
67+
fontFamily: typography.fontFamily,
68+
width: '45%',
69+
}}
70+
>
71+
{feature.label}
72+
</td>
73+
<td
74+
style={{
75+
padding: '6px 0',
76+
fontSize: '14px',
77+
color: colors.textMuted,
78+
fontFamily: typography.fontFamily,
79+
}}
80+
>
81+
{feature.desc}
82+
</td>
83+
</tr>
84+
))}
85+
</tbody>
86+
</table>
87+
</Section>
88+
89+
<Link href={upgradeLink} style={{ textDecoration: 'none' }}>
90+
<Text style={baseStyles.button}>Upgrade to Pro</Text>
91+
</Link>
92+
93+
<div style={baseStyles.divider} />
94+
95+
<Text style={{ ...baseStyles.footerText, textAlign: 'left' }}>
96+
One-time notification when free credits are exhausted.
97+
</Text>
98+
</EmailLayout>
99+
)
100+
}
101+
102+
export default CreditsExhaustedEmail

‎apps/sim/components/emails/billing/free-tier-upgrade-email.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Link, Section, Text } from '@react-email/components'
22
import { baseStyles, colors, typography } from '@/components/emails/_styles'
3+
import { proFeatures } from '@/components/emails/billing/constants'
34
import { EmailLayout } from '@/components/emails/components'
45
import { dollarsToCredits } from '@/lib/billing/credits/conversion'
56
import { getBrandConfig } from '@/ee/whitelabeling'
@@ -12,13 +13,6 @@ interface FreeTierUpgradeEmailProps {
1213
upgradeLink: string
1314
}
1415

15-
const proFeatures = [
16-
{ label: '6,000 credits/month', desc: 'included' },
17-
{ label: '+50 daily refresh', desc: 'credits per day' },
18-
{ label: '150 runs/min', desc: 'sync executions' },
19-
{ label: '50GB storage', desc: 'for files & assets' },
20-
]
21-
2216
export function FreeTierUpgradeEmail({
2317
userName,
2418
percentUsed,
@@ -105,7 +99,7 @@ export function FreeTierUpgradeEmail({
10599
<div style={baseStyles.divider} />
106100

107101
<Text style={{ ...baseStyles.footerText, textAlign: 'left' }}>
108-
One-time notification at 90% usage.
102+
One-time notification at 80% usage.
109103
</Text>
110104
</EmailLayout>
111105
)

‎apps/sim/components/emails/billing/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
export { AbandonedCheckoutEmail } from './abandoned-checkout-email'
12
export { CreditPurchaseEmail } from './credit-purchase-email'
3+
export { CreditsExhaustedEmail } from './credits-exhausted-email'
24
export { EnterpriseSubscriptionEmail } from './enterprise-subscription-email'
35
export { FreeTierUpgradeEmail } from './free-tier-upgrade-email'
46
export { PaymentFailedEmail } from './payment-failed-email'

‎apps/sim/components/emails/components/email-layout.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,9 @@ export function EmailLayout({
4141
{/* Header with logo */}
4242
<Section style={baseStyles.header}>
4343
<Img
44-
src={brand.logoUrl || `${baseUrl}/brand/color/email/type.png`}
45-
width='70'
44+
src={brand.logoUrl || `${baseUrl}/brand/color/email/wordmark.png`}
45+
width='107'
46+
height='33'
4647
alt={brand.name}
4748
style={{ display: 'block' }}
4849
/>

0 commit comments

Comments
 (0)