80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import * as React from 'react';
|
||
import {
|
||
Body,
|
||
Container,
|
||
Head,
|
||
Heading,
|
||
Html,
|
||
Preview,
|
||
Section,
|
||
Text,
|
||
} from '@react-email/components';
|
||
|
||
interface ReservationCancelledTemplateProps {
|
||
customerName: string;
|
||
weddingDate: string;
|
||
hallName: string;
|
||
}
|
||
|
||
export const ReservationCancelledTemplate = ({
|
||
customerName,
|
||
weddingDate,
|
||
hallName,
|
||
}: ReservationCancelledTemplateProps) => (
|
||
<Html>
|
||
<Head />
|
||
<Preview>Rezervasyon İptal Bilgilendirmesi</Preview>
|
||
<Body style={main}>
|
||
<Container style={container}>
|
||
<Heading style={h1}>Rezervasyon İptali</Heading>
|
||
<Text style={text}>Sayın {customerName},</Text>
|
||
<Text style={text}>
|
||
{new Date(weddingDate).toLocaleDateString('tr-TR')} tarihindeki {hallName} rezervasyonunuz iptal edilmiştir.
|
||
</Text>
|
||
<Section style={section}>
|
||
<Text style={text}>
|
||
Ödeme iadesi süreçleri hakkında bilgi almak için lütfen bizimle iletişime geçiniz.
|
||
</Text>
|
||
</Section>
|
||
<Text style={text}>
|
||
İyi günler dileriz.
|
||
</Text>
|
||
</Container>
|
||
</Body>
|
||
</Html>
|
||
);
|
||
|
||
const main = {
|
||
backgroundColor: '#ffffff',
|
||
fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
|
||
};
|
||
|
||
const container = {
|
||
margin: '0 auto',
|
||
padding: '20px 0 48px',
|
||
width: '580px',
|
||
};
|
||
|
||
const h1 = {
|
||
color: '#d32f2f', // Red for cancellation
|
||
fontSize: '24px',
|
||
fontWeight: 'bold',
|
||
paddingBottom: '16px',
|
||
};
|
||
|
||
const text = {
|
||
color: '#333',
|
||
fontSize: '16px',
|
||
lineHeight: '24px',
|
||
};
|
||
|
||
const section = {
|
||
padding: '24px',
|
||
border: '1px solid #e6e6e6',
|
||
borderRadius: '4px',
|
||
margin: '20px 0',
|
||
backgroundColor: '#f9f9f9',
|
||
};
|
||
|
||
export default ReservationCancelledTemplate;
|