/** * MonthlySettlement.tsx - FDS §9.7 Monthly Settlement Email (to vendor) * * MONOSPACE RECEIPT-PRINTER AESTHETIC. * ASCII art logo at top: //MULTIDEAL// * Cold, factual, with a small ❤ at the end. */ import React from 'react'; import { Html, Head, Body, Container, Section, Text, Preview } from '@/server/email/primitives.js'; import { dirForLocale, type Locale } from '@/lib/i18n/index.js'; import { fonts, spacing, tokens } from '@/server/email/tokens/index.js'; export interface MonthlySettlementProps { periodLabel: string; revenue: string; customers: number; returnedCount: number; commission: string; payout: string; insights: string[]; vendorName: string; locale?: Locale; } const copy = { he: { preview: (period: string) => `דוח חיובים חודשי - ${period}`, revenue: 'הכנסות מעסקאות', customers: 'לקוחות שרכשו', returned: 'חזרו לקנות', commission: 'עמלת Multideal', payout: 'תשלום אליך', insightsTitle: 'תובנות', currency: '₪', mission: 'Multideal תומכת בכלכלה המקומית - כל עסקה מחברת שכן לעסק.', }, en: { preview: (period: string) => `Monthly Settlement Report - ${period}`, revenue: 'Deal Revenue', customers: 'Customers', returned: 'Returned to Buy', commission: 'Multideal Commission', payout: 'Your Payout', insightsTitle: 'Insights', currency: '₪', mission: 'Multideal supports the local economy - every deal connects a neighbour to a business.', }, } as const; const ASCII_LOGO = '//MULTIDEAL//'; const DIVIDER = '--------------------------------'; export default function MonthlySettlement({ periodLabel, revenue, customers, returnedCount, commission, payout, insights, vendorName: _vendorName, locale = 'he', }: MonthlySettlementProps) { const t = copy[locale]; const dir = dirForLocale(locale); // Monospace receipt - always LTR layout so columns align, regardless of locale. // The content language is still set via lang attribute for screen readers. const monoStyle: React.CSSProperties = { fontFamily: fonts.mono, fontSize: spacing.px14, lineHeight: '1.8', color: tokens.textPrimary, backgroundColor: tokens.neutral50, whiteSpace: 'pre', }; const dimStyle: React.CSSProperties = { ...monoStyle, color: tokens.textMuted, }; const boldStyle: React.CSSProperties = { ...monoStyle, fontWeight: 700, }; const bigPayoutStyle: React.CSSProperties = { ...boldStyle, fontSize: spacing.px20, color: tokens.brandPrimary700, }; // Pad a label to fixed width so values align (30 chars) function row(label: string, value: string): string { const maxLabel = 22; const padded = label.length >= maxLabel ? label : label + '.'.repeat(maxLabel - label.length); return `${padded} ${value}`; } return ( {t.preview(periodLabel)}

{/* ASCII logo */} {ASCII_LOGO} {/* Period header */} {DIVIDER} {periodLabel} {DIVIDER} {/* Revenue metrics */} {row(t.revenue, `${t.currency}${revenue}`)} {row(t.customers, String(customers))} {row(t.returned, String(returnedCount))} {DIVIDER} {/* Commission & payout */} {row(t.commission, `${t.currency}${commission}`)} {DIVIDER} {/* Payout - larger */} {row(t.payout, `${t.currency}${payout}`)} {/* Insights */} {insights.length > 0 ? ( <> {DIVIDER} {t.insightsTitle} {insights.map((insight) => ( {'> '} {insight} ))} {DIVIDER} ) : ( {DIVIDER} )} {/* Mission closing line */} {t.mission} {/* Small heart */} ❤

); }