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>
48 lines
2.1 KiB
TypeScript
48 lines
2.1 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 { 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 PromotionalEmailProps {
|
|
locale?: Locale;
|
|
headline?: string;
|
|
body?: string;
|
|
cta?: string;
|
|
ctaUrl?: string;
|
|
}
|
|
|
|
export const PromotionalEmail = ({
|
|
locale,
|
|
headline = 'Seasonal wellness essentials',
|
|
body = 'Restock vitamins and cold-care products with free delivery on orders over ETB 1,000 this week.',
|
|
cta = 'Shop the promotion',
|
|
ctaUrl = `${theme.brand.website}/shop`,
|
|
}: PromotionalEmailProps) => {
|
|
const l = resolveLocale(locale);
|
|
const t = tTemplate('promotional', l);
|
|
const common = tCommon(l);
|
|
const amHeadline = l === 'am' ? 'የወቅቱ የጤና እቃዎች' : headline;
|
|
const amBody = l === 'am' ? 'በዚህ ሳምንት ከETB 1,000 በላይ ትዕዛዞች ነፃ ማድረስ ጋር ቫይታሚኖችን እና የቅዝቃዜ እንክብካቤ ምርቶችን እንደገና ያስቀምጡ።' : body;
|
|
const amCta = l === 'am' ? 'ማስተዋወቂያውን ይግዙ' : cta;
|
|
return (
|
|
<EmailLayout preview={interpolate(t.preview, { headline: amHeadline })} locale={l}>
|
|
<StatusBanner tone="brand">{t.banner}</StatusBanner>
|
|
<Heading style={styles.heading}>{interpolate(t.heading, { headline: amHeadline })}</Heading>
|
|
<Text style={styles.text}>{interpolate(t.body1, { body: amBody })}</Text>
|
|
<Section style={styles.buttonSection}>
|
|
<Button href={ctaUrl}>{interpolate(t.cta, { cta: amCta })}</Button>
|
|
</Section>
|
|
<Text style={styles.muted}>{common.regards}<br />{common.team}</Text>
|
|
</EmailLayout>
|
|
);
|
|
};
|
|
|
|
PromotionalEmail.PreviewProps = { locale: 'en' } as PromotionalEmailProps;
|
|
export default PromotionalEmail;
|