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>
71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import { Heading, Section, Text } from '@react-email/components';
|
||
import { EmailLayout } from './components/EmailLayout';
|
||
import { Button } from './components/Button';
|
||
import { MetricGrid } from './components/MetricGrid';
|
||
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 type ShopSummaryPeriod = 'daily' | 'weekly' | 'monthly' | 'quarterly' | 'yearly';
|
||
|
||
const periodLabels: Record<ShopSummaryPeriod, { en: string; am: string }> = {
|
||
daily: { en: 'Daily', am: 'ዕለታዊ' },
|
||
weekly: { en: 'Weekly', am: 'ሳምንታዊ' },
|
||
monthly: { en: 'Monthly', am: 'ወርሃዊ' },
|
||
quarterly: { en: 'Quarterly', am: 'ሩብ ዓመታዊ' },
|
||
yearly: { en: 'Yearly', am: 'ዓመታዊ' },
|
||
};
|
||
|
||
export interface ShopSummaryEmailProps {
|
||
locale?: Locale;
|
||
period?: ShopSummaryPeriod;
|
||
userName?: string;
|
||
dateRange?: string;
|
||
ordersCount?: string;
|
||
revenue?: string;
|
||
averageOrderValue?: string;
|
||
topSku?: string;
|
||
ctaUrl?: string;
|
||
}
|
||
|
||
export const ShopSummaryEmail = ({
|
||
locale,
|
||
period = 'weekly',
|
||
userName = 'Marketing Lead',
|
||
dateRange = '28 Jul – 3 Aug 2026',
|
||
ordersCount = '486',
|
||
revenue = 'ETB 1.24M',
|
||
averageOrderValue = 'ETB 2,551',
|
||
topSku = 'Paracetamol 500mg',
|
||
ctaUrl = `${theme.brand.website}/admin/analytics`,
|
||
}: ShopSummaryEmailProps) => {
|
||
const l = resolveLocale(locale);
|
||
const t = tTemplate('shop-summary', l);
|
||
const common = tCommon(l);
|
||
const periodLabel = periodLabels[period][l];
|
||
return (
|
||
<EmailLayout preview={interpolate(t.preview, { periodLabel })} locale={l}>
|
||
<Heading style={styles.heading}>{interpolate(t.heading, { periodLabel })}</Heading>
|
||
<Text style={styles.text}>{interpolate(t.body1, { userName, periodLabel, dateRange })}</Text>
|
||
<MetricGrid
|
||
metrics={[
|
||
{ label: t.orders, value: ordersCount },
|
||
{ label: t.revenue, value: revenue },
|
||
{ label: t.aov, value: averageOrderValue },
|
||
{ label: t.topSku, value: topSku },
|
||
]}
|
||
/>
|
||
<Section style={styles.buttonSection}>
|
||
<Button href={ctaUrl}>{t.cta}</Button>
|
||
</Section>
|
||
<Text style={styles.muted}>{common.regards}<br />{common.team}</Text>
|
||
</EmailLayout>
|
||
);
|
||
};
|
||
|
||
ShopSummaryEmail.PreviewProps = { locale: 'en', period: 'weekly' } as ShopSummaryEmailProps;
|
||
export default ShopSummaryEmail;
|