Files
acmcc/supabase/functions/_shared/transactional-email-templates/vendor-profile-request.tsx
T
2026-06-01 20:19:26 -04:00

59 lines
2.8 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 VendorProfileRequestProps {
vendorName?: string
requesterName?: string
link?: string
expiresAt?: string
}
const SITE_NAME = 'Avria Community Management'
const VendorProfileRequestEmail = ({ vendorName, requesterName, link, expiresAt }: VendorProfileRequestProps) => (
<Html lang="en" dir="ltr">
<Head />
<Preview>Vendor profile information requested for {vendorName || 'your account'}</Preview>
<Body style={main}>
<Container style={container}>
<Section style={brandBar} />
<Heading style={h1}>Vendor profile update requested</Heading>
<Text style={text}>Hello {vendorName || 'Vendor'},</Text>
<Text style={text}>
{requesterName || SITE_NAME} is requesting that you submit or update your vendor profile.
Please use the secure link below to provide your remittance address, Tax ID (W-9 / 1099 status),
insurance documentation, and direct deposit (ACH) details.
</Text>
{link && <Button href={link} style={button}>Submit vendor profile</Button>}
{expiresAt && <Text style={meta}>This secure link expires on {expiresAt}.</Text>}
<Text style={footer}>
This request was sent by {SITE_NAME}. If you weren't expecting it, you can ignore this email.
</Text>
</Container>
</Body>
</Html>
)
export const template = {
component: VendorProfileRequestEmail,
subject: (data: Record<string, any>) =>
`Action needed: Submit vendor profile for ${data.vendorName || 'your account'}`,
displayName: 'Vendor profile request',
previewData: {
vendorName: 'Acme Plumbing',
requesterName: 'Avria Community Management',
link: 'https://avria.cloud/vendor-profile/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 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' }