import React from "react"; import { Body, Button, Container, Head, Heading, Hr, Html, Img, Preview, Section, Text, Tailwind, Row, Column, } from "@react-email/components"; interface CloudSpendAlertEmailProps { organizationName: string; alertTitle: string; currentSpend: number; threshold: number; billingUrl: string; detectedAtUtc?: string; receiverEmail: string; } export const CloudSpendAlertEmailTemplate = ({ organizationName, alertTitle, currentSpend, threshold, billingUrl, detectedAtUtc, receiverEmail, }: CloudSpendAlertEmailProps) => { return ( {`Spend alert · ${organizationName} reached $${threshold.toFixed(2)}`}
Langfuse
Spend alert: {alertTitle} This is a notification you configured for " {organizationName}". It indicates your current billing cycle spend has reached the limit you set. There are no service interruptions or immediate billing actions.
Current Spend (USD) {`$${currentSpend.toFixed(2)}`} Alert Threshold (USD) {`$${threshold.toFixed(2)}`} {detectedAtUtc ? ( Detected at (UTC) {detectedAtUtc} ) : null}
No immediate action required • Ingestions and billing continue as normal
• This email is informational; it reflects a threshold you configured
• Manage thresholds or review usage in your billing settings
• This alert won’t trigger again until the next billing cycle
This email was sent to {receiverEmail} regarding spend alerts for "{organizationName}".
); }; export default CloudSpendAlertEmailTemplate;