import React from "react"; import { Body, Head, Html, Preview, Tailwind } from "@react-email/components"; import { themeColors } from "./lib/theme"; import { EmailContainer, EmailFooter, EmailGreeting, EmailHeading, EmailLetterHead, EmailSignature, EmailText } from "./components/Email"; interface Props { email: string; limitName: string; currentUsage: number; usageLimit: number; billingLink: string; // Link to billing page } export const NotifyUsageLimitReached = ({ email, limitName, currentUsage, usageLimit, billingLink }: Props) => { const previewText = `You've reached your ${limitName} usage limit - Action required`; const usagePercentage = Math.round((currentUsage / usageLimit) * 100); return ( {previewText} Usage Limit Reached - Action Required Hi there, You have reached your usage limit for {limitName}. Current Usage: {currentUsage} of {usageLimit} ({usagePercentage}%) Important: Your functionality may now be restricted and your sites may disconnect until you either upgrade your plan or your usage resets. To prevent any service interruption, immediate action is recommended. What you can do:
• Upgrade your plan immediately to restore full functionality
• Monitor your usage to stay within limits in the future If you have any questions or need immediate assistance, please contact our support team right away. ); }; export default NotifyUsageLimitReached;