/** * Receipt.tsx - FDS §9.1 Purchase Receipt Email * * Sent immediately after a successful purchase. * Hebrew by default; English if locale='en'. */ import React from 'react'; import { Html, Head, Body, Container, Section, Text, Hr, 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'; import { formatEmailDateTime, formatPaymentMethodLabel } from '@/lib/format'; export interface ReceiptProps { transactionId: string; dealTitle: string; businessName: string; amountPaid: string; paymentMethod: { last4: string; brand: string }; dateIso: string; locale?: Locale; } const copy = { he: { preview: (title: string) => `קבלה עבור: ${title}`, heading: 'קבלת רכישה', transactionId: 'מספר עסקה', deal: 'עסקה', business: 'עסק', amount: 'סכום ששולם', paymentMethod: 'אמצעי תשלום', date: 'תאריך', footer: 'זוהי הקבלה שלך. שמור/י אותה לתיעוד.', currency: '₪', }, en: { preview: (title: string) => `Receipt for: ${title}`, heading: 'Purchase Receipt', transactionId: 'Transaction ID', deal: 'Deal', business: 'Business', amount: 'Amount Paid', paymentMethod: 'Payment Method', date: 'Date', footer: 'This is your receipt. Keep it for your records.', currency: '₪', }, } as const; export default function Receipt({ transactionId, dealTitle, businessName, amountPaid, paymentMethod, dateIso, locale = 'he', }: ReceiptProps) { const t = copy[locale]; const dir = dirForLocale(locale); const fontFamily = locale === 'he' ? fonts.he : fonts.en; const containerStyle: React.CSSProperties = { maxWidth: spacing.cardMaxMedium, margin: '0 auto', backgroundColor: tokens.surfaceBase, borderRadius: '8px', border: `1px solid ${tokens.borderDefault}`, overflow: 'hidden', }; const headerStyle: React.CSSProperties = { backgroundColor: tokens.brandPrimary700, padding: spacing.padSectionLg, textAlign: locale === 'he' ? 'right' : 'left', }; const bodyStyle: React.CSSProperties = { padding: spacing.padSectionLg, direction: dir, textAlign: locale === 'he' ? 'right' : 'left', }; const labelStyle: React.CSSProperties = { fontSize: spacing.px12, color: tokens.textMuted, fontFamily, marginBottom: '2px', marginTop: spacing.px16, }; const valueStyle: React.CSSProperties = { fontSize: spacing.px16, color: tokens.textPrimary, fontFamily, fontWeight: 500, marginBottom: '0', marginTop: '0', }; const footerStyle: React.CSSProperties = { padding: spacing.padHero, backgroundColor: tokens.surfaceRaised, borderTop: `1px solid ${tokens.borderDefault}`, textAlign: 'center', }; return ( {t.preview(dealTitle)}

{/* Header */}

{t.heading}

{/* Body */}

{t.transactionId} {transactionId}

{t.deal} {dealTitle} {t.business} {businessName}

{t.amount} {t.currency} {amountPaid} {t.paymentMethod} {formatPaymentMethodLabel(paymentMethod.brand, paymentMethod.last4)} {t.date} {formatEmailDateTime(dateIso, locale)}

{/* Footer */}

{t.footer}

); }