import * as React from 'npm:react@18.3.1'
import { Body, Button, Container, Head, Heading, Html, Preview, Section, Text } from 'npm:@react-email/components@0.0.22'
import type { TemplateEntry } from './registry.ts'
const SITE_NAME = 'Avria Community Management'
interface Props {
recipientName?: string
associationName?: string
link?: string
}
const BillApprovalRequestEmail = ({ recipientName, associationName, link }: Props) => (
Bills awaiting your approval
Hello {recipientName || 'Board Member'},
One or more bills have been uploaded{associationName ? ` for ${associationName}` : ''} that
require your review and approval. You will receive a separate email for each individual bill
with secure approve / deny links, or you can review them together using the dashboard link below.
{link && }
You may also have received individual emails for each bill — those contain one-click approve and
deny buttons tied uniquely to your seat.
If you weren't expecting this email, please contact your association manager. — {SITE_NAME}
)
export const template = {
component: BillApprovalRequestEmail,
subject: (d: Record) =>
`Bills awaiting your approval${d.associationName ? ` — ${d.associationName}` : ''}`,
displayName: 'Bill approval request (summary)',
previewData: {
recipientName: 'Jane Director',
associationName: 'Sunset Hills HOA',
link: 'https://avria.cloud/dashboard/bill-approvals',
},
} satisfies TemplateEntry
const main = { backgroundColor: '#ffffff', fontFamily: 'Inter, Arial, sans-serif' }
const container = { maxWidth: '600px', margin: '0 auto', padding: '28px 24px' }
const brandBar = { height: '5px', backgroundColor: '#2563eb', borderRadius: '6px', marginBottom: '24px' }
const h1 = { color: '#111827', fontSize: '24px', lineHeight: '32px', margin: '0 0 14px', fontWeight: '700' }
const text = { color: '#374151', fontSize: '15px', lineHeight: '24px', margin: '0 0 18px' }
const smallText = { color: '#6b7280', fontSize: '13px', lineHeight: '20px', margin: '14px 0 0' }
const button = { backgroundColor: '#2563eb', color: '#ffffff', borderRadius: '6px', fontSize: '14px', fontWeight: '600', textDecoration: 'none', padding: '12px 18px' }
const footer = { color: '#6b7280', fontSize: '12px', lineHeight: '18px', margin: '28px 0 0' }