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' interface TenantInfoRequestProps { ownerName?: string propertyAddress?: string associationName?: string requesterName?: string customMessage?: string link?: string expiresAt?: string } const SITE_NAME = 'Avria Community Management' const TenantInfoRequestEmail = ({ ownerName, propertyAddress, associationName, requesterName, customMessage, link, expiresAt }: TenantInfoRequestProps) => ( Tenant information requested for {propertyAddress || 'your property'}
Tenant information requested Hello {ownerName || 'Owner'}, {requesterName || SITE_NAME} is requesting current tenant information {propertyAddress ? ` for the property at ${propertyAddress}` : ''} {associationName ? ` (${associationName})` : ''}. Please use the secure link below to submit or update this information. {customMessage && (
{customMessage}
)} {link && } {expiresAt && This link expires on {expiresAt}.} This request was sent by {SITE_NAME}. If you weren't expecting it, you can ignore this email. ) export const template = { component: TenantInfoRequestEmail, subject: (data: Record) => `Action needed: Submit tenant information${data.propertyAddress ? ` for ${data.propertyAddress}` : ''}`, displayName: 'Tenant info request', previewData: { ownerName: 'Jane Owner', propertyAddress: '123 Main Street', associationName: 'Sunset Hills HOA', requesterName: 'Avria Community Management', customMessage: 'Please update your tenant details before the end of the month.', link: 'https://avria.cloud/tenant-info/sample-token', expiresAt: 'June 1, 2026', }, } 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 messageBox = { backgroundColor: '#f0f9ff', border: '1px solid #bae6fd', borderRadius: '8px', padding: '14px 16px', margin: '0 0 20px' } const messageText = { color: '#0369a1', fontSize: '14px', lineHeight: '22px', margin: '0', whiteSpace: 'pre-wrap' as const } const meta = { 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' }