mirror of
https://github.com/renee-png/acmcc.git
synced 2026-06-21 09:50:01 +00:00
66 lines
3.4 KiB
TypeScript
66 lines
3.4 KiB
TypeScript
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) => (
|
|
<Html lang="en" dir="ltr">
|
|
<Head />
|
|
<Preview>New homeowner ticket: {ticketTitle || 'Support request'}</Preview>
|
|
<Body style={main}>
|
|
<Container style={container}>
|
|
<Section style={brandBar} />
|
|
<Heading style={h1}>New homeowner ticket</Heading>
|
|
<Text style={text}>{recipientName ? `${recipientName}, ` : ''}a homeowner submitted a ticket that needs staff review.</Text>
|
|
<Section style={panel}>
|
|
<Text style={label}>Ticket</Text>
|
|
<Text style={value}>{ticketTitle || 'Support request'}</Text>
|
|
<Text style={meta}>{homeownerName || 'Homeowner'}{category ? ` · ${category}` : ''}{priority ? ` · ${priority} priority` : ''}</Text>
|
|
</Section>
|
|
{summary && <Text style={summaryStyle}>{summary}</Text>}
|
|
{link && <Button href={link} style={button}>Open ticket inbox</Button>}
|
|
<Text style={footer}>This notification was sent by {SITE_NAME}.</Text>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
)
|
|
|
|
export const template = {
|
|
component: TicketSubmittedEmail,
|
|
subject: (data: Record<string, any>) => `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' }
|