import React from "react"; import { Body, Button, Container, Head, Heading, Hr, Html, Img, Section, Text, Tailwind, Row, Column, Preview, } from "@react-email/components"; interface UsageThresholdWarningEmailProps { organizationName: string; currentUsage: number; limit: number; billingUrl: string; receiverEmail: string; resetDate: string; // ISO date string } export const UsageThresholdWarningEmailTemplate = ({ organizationName, currentUsage, limit, billingUrl, receiverEmail, resetDate, }: UsageThresholdWarningEmailProps) => { // Format reset date as "January 15, 2024" const formattedResetDate = new Date(resetDate).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", timeZone: "UTC", }); return ( Your Langfuse organization "{organizationName}" has reached{" "} {currentUsage.toLocaleString()} events

Usage Threshold Reached Your organization "{organizationName}" has reached{" "} {currentUsage.toLocaleString()} events out of your {limit.toLocaleString()} event limit for the free tier.

Current Usage {currentUsage.toLocaleString()} Threshold {limit.toLocaleString()}

What happens next? • Your usage continues to be tracked for a grace period
• Ingestion will soon be suspended and incoming observations, traces, and scores will be dropped unless you upgrade
• Your usage limit resets on{" "} {formattedResetDate}

Upgrade to Core at only $29/month When you upgrade, you can:
• Add unlimited number of users
• Retain data for 90 days
• Access unlimited evaluators
• Get support via Email/Chat Startup Program: Eligible startups get 50% off for their first year.{" "} Learn more →

This email was sent to {receiverEmail} regarding usage alerts for "{organizationName}". Questions? Simply reply to this email and we'll be happy to help.

); }; export default UsageThresholdWarningEmailTemplate;