import { Body, Container, Head, Heading, Hr, Html, Img, Link, Section, Tailwind, Text, } from "@react-email/components"; type DigestItem = { from: string; subject: string; content: string; }; const colorClasses = { blue: { bg: "bg-blue-50", text: "text-blue-800", leftBorder: "border-l-blue-400", bgAccent: "bg-blue-100", }, green: { bg: "bg-green-50", text: "text-green-800", leftBorder: "border-l-green-400", bgAccent: "bg-green-100", }, purple: { bg: "bg-purple-50", text: "text-purple-800", leftBorder: "border-l-purple-400", bgAccent: "bg-purple-100", }, amber: { bg: "bg-amber-50", text: "text-amber-800", leftBorder: "border-l-amber-400", bgAccent: "bg-amber-100", }, gray: { bg: "bg-gray-50", text: "text-gray-800", leftBorder: "border-l-gray-400", bgAccent: "bg-gray-100", }, pink: { bg: "bg-pink-50", text: "text-pink-800", leftBorder: "border-l-pink-400", bgAccent: "bg-pink-100", }, red: { bg: "bg-red-50", text: "text-red-800", leftBorder: "border-l-red-400", bgAccent: "bg-red-100", }, } as const; type NormalizedCategoryData = { count: number; senders: string[]; items: DigestItem[]; }; export type DigestEmailProps = { baseUrl: string; unsubscribeToken: string; date?: Date; ruleNames?: Record; emailAccountId: string; [key: string]: | NormalizedCategoryData | DigestItem[] | undefined | string | Date | Record | undefined; }; export default function DigestEmail(props: DigestEmailProps) { const { baseUrl = "https://www.getinboxzero.com", unsubscribeToken, ruleNames, emailAccountId, ...digestData } = props; const categoryColors: Record = { newsletter: "blue", receipt: "green", marketing: "purple", calendar: "amber", coldEmail: "gray", notification: "pink", toReply: "red", }; // Check if there are any items to display const hasItems = Object.keys(digestData).some((key) => { const categoryData = normalizeCategoryData(key, digestData[key]); return categoryData && categoryData.count > 0; }); const renderEmailContent = (item: DigestItem) => { if (!item.content) return null; const contentText = item.content; // Split content by newlines and render each line separately const lines = contentText.split("\n").filter((line: string) => line.trim()); // If there are multiple lines, render as bullet points if (lines.length > 1) { return (
    {lines.map((line: string, index: number) => { // Remove leading bullet point characters (•, -, *, etc.) if present const cleanedLine = line.trim().replace(/^[•\-*]\s+/, ""); return (
  • {cleanedLine}
    • ); })}
); } else { // Single line content return ( {contentText} ); } }; const CategorySection = ({ categoryKey, categoryData, }: { categoryKey: string; categoryData: NormalizedCategoryData; }) => { const colors = colorClasses[categoryColors[categoryKey] || "gray"]; if (categoryData.items.length > 0) { return (
{categoryData.count}{" "} {ruleNames?.[categoryKey] || categoryKey} {" from "} {categoryData.senders.map((sender, index) => { if (index === 0) { return sender; } else { return `, ${sender}`; } })} {categoryData.count > 5 && " and more"}
{categoryData.items.map((item, index) => (
{/* Email Header */}
{item.subject} From:{" "} {item.from}
{/* Email Content */} {renderEmailContent(item)}
{/* Separator line - don't show after the last item */} {index < categoryData.items.length - 1 && (
)}
))}
); } else { // Categories with no highlights - much more compact return (
{categoryData.count}{" "} {ruleNames?.[categoryKey] || categoryKey} {" from "} {categoryData.senders.map((sender, index) => { if (index === 0) { return sender; } else { return `, ${sender}`; } })} {categoryData.count > 5 && " and more"}
); } }; return (
Inbox Zero Inbox Zero Your Digest Here's a summary of what's happened in your inbox.
{hasItems ? ( Object.keys(digestData).map((categoryKey) => { const categoryData = normalizeCategoryData( categoryKey, digestData[categoryKey], ); if (!categoryData) return null; return ( ); }) ) : (
No emails to summarize in this digest. We'll send you a summary when there are emails to report.
)}