simstudioai--sim/apps/sim/components/emails/billing/credit-purchase-email.tsx

import { Link, Section, Text } from '@react-email/components'
import { baseStyles, colors } from '@/components/emails/_styles'
import { EmailLayout } from '@/components/emails/components'
import { dollarsToCredits } from '@/lib/billing/credits/conversion'
import { getBaseUrl } from '@/lib/core/utils/urls'
import { getBrandConfig } from '@/ee/whitelabeling'

interface CreditPurchaseEmailProps {
  userName?: string
  amount: number
  newBalance: number
  purchaseDate?: Date
}

export function CreditPurchaseEmail({
  userName,
  amount,
  newBalance,
  purchaseDate = new Date(),
}: CreditPurchaseEmailProps) {
  const brand = getBrandConfig()
  const baseUrl = getBaseUrl()

  const previewText = `${brand.name}: ${dollarsToCredits(amount).toLocaleString()} credits added to your account`

  return (
    <EmailLayout preview={previewText} showUnsubscribe={false}>
      <Text style={{ ...baseStyles.paragraph, marginTop: 0 }}>
        {userName ? `Hi ${userName},` : 'Hi,'}
      </Text>
      <Text style={baseStyles.paragraph}>
        Your credit purchase of <strong>{dollarsToCredits(amount).toLocaleString()} credits</strong>{' '}
        has been confirmed.
      </Text>

      <Section style={baseStyles.infoBox}>
        <Text
          style={{
            margin: 0,
            fontSize: '14px',
            color: colors.textMuted,
            fontFamily: baseStyles.fontFamily,
          }}
        >
          Amount Added
        </Text>
        <Text
          style={{
            margin: '4px 0 16px',
            fontSize: '24px',
            fontWeight: 'bold',
            color: colors.textPrimary,
            fontFamily: baseStyles.fontFamily,
          }}
        >
          {dollarsToCredits(amount).toLocaleString()} credits
        </Text>
        <Text
          style={{
            margin: 0,
            fontSize: '14px',
            color: colors.textMuted,
            fontFamily: baseStyles.fontFamily,
          }}
        >
          New Balance
        </Text>
        <Text
          style={{
            margin: '4px 0 0',
            fontSize: '24px',
            fontWeight: 'bold',
            color: colors.textPrimary,
            fontFamily: baseStyles.fontFamily,
          }}
        >
          {dollarsToCredits(newBalance).toLocaleString()} credits
        </Text>
      </Section>

      <Text style={baseStyles.paragraph}>
        Credits are applied automatically to your workflow executions.
      </Text>

      <Link href={`${baseUrl}/workspace`} style={{ textDecoration: 'none' }}>
        <Text style={baseStyles.button}>View Dashboard</Text>
      </Link>

      {/* Divider */}
      <div style={baseStyles.divider} />

      <Text style={{ ...baseStyles.footerText, textAlign: 'left' }}>
        Purchased on {purchaseDate.toLocaleDateString()}. View balance in Settings → Subscription.
      </Text>
    </EmailLayout>
  )
}

export default CreditPurchaseEmail