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>
64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import { Heading, Section, Text } from '@react-email/components';
|
|
import { EmailLayout } from './components/EmailLayout';
|
|
import { Button } from './components/Button';
|
|
import { StatusBanner } from './components/StatusBanner';
|
|
import { OrderSummary, type OrderLineItem } from './components/OrderSummary';
|
|
import { styles } from './components/styles';
|
|
import { tCommon } from './i18n/common';
|
|
import { tTemplate } from './i18n/templates';
|
|
import { resolveLocale, type Locale } from './i18n/types';
|
|
import { interpolate } from './utils/interpolate';
|
|
import { theme } from './theme';
|
|
|
|
export interface OrderOutForDeliveryEmailProps {
|
|
locale?: Locale;
|
|
userName?: string;
|
|
orderId?: string;
|
|
items?: OrderLineItem[];
|
|
total?: string;
|
|
ctaUrl?: string;
|
|
branchName?: string;
|
|
riderName?: string;
|
|
eta?: string;
|
|
}
|
|
|
|
export const OrderOutForDeliveryEmail = ({
|
|
locale,
|
|
userName = 'Abebe Kebede',
|
|
orderId = 'GS-10482',
|
|
items = [
|
|
{ name: 'Amoxicillin 500mg', qty: 2, price: 'ETB 240' },
|
|
{ name: 'ORS sachets', qty: 5, price: 'ETB 125' },
|
|
],
|
|
total = 'ETB 365',
|
|
ctaUrl = `${theme.brand.website}/orders/${orderId}`,
|
|
branchName = 'Bole Branch',
|
|
riderName = 'Dawit Lemma',
|
|
eta = '45 min',
|
|
}: OrderOutForDeliveryEmailProps) => {
|
|
const l = resolveLocale(locale);
|
|
const t = tTemplate('order-out-for-delivery', l);
|
|
const common = tCommon(l);
|
|
return (
|
|
<EmailLayout preview={interpolate(t.preview, { orderId })} locale={l}>
|
|
<StatusBanner tone="brand">{interpolate(t.banner, { eta })}</StatusBanner>
|
|
<Heading style={styles.heading}>{t.heading}</Heading>
|
|
<Text style={styles.text}>{interpolate(t.body1, { userName, branchName, riderName, orderId })}</Text>
|
|
<OrderSummary
|
|
orderId={orderId}
|
|
items={items}
|
|
total={total}
|
|
orderLabel={t.orderLabel}
|
|
totalLabel={t.totalLabel}
|
|
/>
|
|
<Section style={styles.buttonSection}>
|
|
<Button href={ctaUrl}>{t.cta}</Button>
|
|
</Section>
|
|
<Text style={styles.muted}>{common.regards}<br />{common.team}</Text>
|
|
</EmailLayout>
|
|
);
|
|
};
|
|
|
|
OrderOutForDeliveryEmail.PreviewProps = { locale: 'en' } as OrderOutForDeliveryEmailProps;
|
|
export default OrderOutForDeliveryEmail;
|