Kirubel-Kibru-Yaltopia
f9fa3bc83b
Ship 23 transactional templates, shared brand tokens/logo, preview UI, render API, CHANGELOG, and docs for Ecom/Admin/B2B consumers. Co-authored-by: Cursor <cursoragent@cursor.com>
79 lines
1.4 KiB
TypeScript
79 lines
1.4 KiB
TypeScript
import React from 'react';
|
||
import { Column, Row, Section, Text } from '@react-email/components';
|
||
import { theme } from '../theme';
|
||
import { Card } from './Card';
|
||
|
||
export interface OrderLineItem {
|
||
name: string;
|
||
qty: number;
|
||
price: string;
|
||
}
|
||
|
||
interface OrderSummaryProps {
|
||
orderId: string;
|
||
items: OrderLineItem[];
|
||
total: string;
|
||
orderLabel: string;
|
||
totalLabel: string;
|
||
}
|
||
|
||
export const OrderSummary = ({
|
||
orderId,
|
||
items,
|
||
total,
|
||
orderLabel,
|
||
totalLabel,
|
||
}: OrderSummaryProps) => (
|
||
<Card>
|
||
<Text style={label}>
|
||
{orderLabel}: {orderId}
|
||
</Text>
|
||
{items.map((item) => (
|
||
<Row key={`${item.name}-${item.qty}`} style={row}>
|
||
<Column>
|
||
<Text style={itemText}>
|
||
{item.name} × {item.qty}
|
||
</Text>
|
||
</Column>
|
||
<Column align="right">
|
||
<Text style={itemText}>{item.price}</Text>
|
||
</Column>
|
||
</Row>
|
||
))}
|
||
<Section style={totalRow}>
|
||
<Text style={totalText}>
|
||
{totalLabel}: {total}
|
||
</Text>
|
||
</Section>
|
||
</Card>
|
||
);
|
||
|
||
const label = {
|
||
color: theme.colors.muted,
|
||
fontSize: '13px',
|
||
margin: '0 0 12px',
|
||
};
|
||
|
||
const row = {
|
||
marginBottom: '6px',
|
||
};
|
||
|
||
const itemText = {
|
||
color: theme.colors.forest,
|
||
fontSize: '14px',
|
||
margin: 0,
|
||
};
|
||
|
||
const totalRow = {
|
||
borderTop: `1px solid ${theme.colors.line}`,
|
||
marginTop: '12px',
|
||
paddingTop: '12px',
|
||
};
|
||
|
||
const totalText = {
|
||
color: theme.colors.forest,
|
||
fontSize: '16px',
|
||
fontWeight: 700,
|
||
margin: 0,
|
||
};
|