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 TicketSubmittedProps { recipientName?: string homeownerName?: string ticketTitle?: string priority?: string category?: string summary?: string link?: string } const SITE_NAME = 'Avria Community Management' const TicketSubmittedEmail = ({ recipientName, homeownerName, ticketTitle, priority, category, summary, link }: TicketSubmittedProps) => ( New homeowner ticket: {ticketTitle || 'Support request'}
New homeowner ticket {recipientName ? `${recipientName}, ` : ''}a homeowner submitted a ticket that needs staff review.
Ticket {ticketTitle || 'Support request'} {homeownerName || 'Homeowner'}{category ? ` · ${category}` : ''}{priority ? ` · ${priority} priority` : ''}
{summary && {summary}} {link && } This notification was sent by {SITE_NAME}. ) export const template = { component: TicketSubmittedEmail, subject: (data: Record) => `New homeowner ticket: ${data.ticketTitle || 'Support request'}`, displayName: 'Ticket submitted notification', previewData: { recipientName: 'Alex', homeownerName: 'Demo Homeowner', ticketTitle: 'Gate access issue', priority: 'medium', category: 'general', summary: 'Issue Description:\nThe gate code is not working.\n\nProperty: 100 Main Street', link: 'https://avria.cloud/dashboard/form-inbox', }, } 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 panel = { backgroundColor: '#f8fafc', border: '1px solid #e5e7eb', borderRadius: '8px', padding: '16px', margin: '20px 0' } const label = { color: '#6b7280', fontSize: '12px', textTransform: 'uppercase' as const, letterSpacing: '0.04em', margin: '0 0 6px' } const value = { color: '#111827', fontSize: '17px', lineHeight: '24px', fontWeight: '700', margin: '0 0 6px' } const meta = { color: '#6b7280', fontSize: '13px', lineHeight: '20px', margin: '0' } const summaryStyle = { color: '#374151', fontSize: '14px', lineHeight: '22px', whiteSpace: 'pre-wrap' as const, margin: '0 0 22px' } 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' }