5576946829
Some checks failed
Build and Deploy / build (push) Has been cancelled
- Add Resend email integration with @react-email/render - Create email templates: OrderConfirmation, OrderShipped, OrderCancelled, OrderPaid - Implement webhook handler for ORDER_CREATED and other events - Add multi-language support for customer emails - Admin emails in English with order details - Update checkout page with auto-scroll on order completion - Configure DASHBOARD_URL environment variable
99 lines
2.2 KiB
TypeScript
99 lines
2.2 KiB
TypeScript
import {
|
|
Body,
|
|
Button,
|
|
Container,
|
|
Head,
|
|
Hr,
|
|
Html,
|
|
Img,
|
|
Link,
|
|
Preview,
|
|
Section,
|
|
Text,
|
|
} from "@react-email/components";
|
|
|
|
interface BaseLayoutProps {
|
|
children: React.ReactNode;
|
|
previewText: string;
|
|
language: string;
|
|
siteUrl: string;
|
|
}
|
|
|
|
const translations: Record<string, { footer: string; company: string }> = {
|
|
sr: {
|
|
footer: "ManoonOils - Prirodna kozmetika | www.manoonoils.com",
|
|
company: "ManoonOils",
|
|
},
|
|
en: {
|
|
footer: "ManoonOils - Natural Cosmetics | www.manoonoils.com",
|
|
company: "ManoonOils",
|
|
},
|
|
de: {
|
|
footer: "ManoonOils - Natürliche Kosmetik | www.manoonoils.com",
|
|
company: "ManoonOils",
|
|
},
|
|
fr: {
|
|
footer: "ManoonOils - Cosmétiques Naturels | www.manoonoils.com",
|
|
company: "ManoonOils",
|
|
},
|
|
};
|
|
|
|
export function BaseLayout({ children, previewText, language, siteUrl }: BaseLayoutProps) {
|
|
const t = translations[language] || translations.en;
|
|
|
|
return (
|
|
<Html>
|
|
<Head />
|
|
<Preview>{previewText}</Preview>
|
|
<Body style={styles.body}>
|
|
<Container style={styles.container}>
|
|
<Section style={styles.logoSection}>
|
|
<Img
|
|
src="https://minio-api.nodecrew.me/manoon-media/2024/09/cropped-manoon-logo_256x-1-1.png"
|
|
width="150"
|
|
height="auto"
|
|
alt="ManoonOils"
|
|
style={styles.logo}
|
|
/>
|
|
</Section>
|
|
{children}
|
|
<Section style={styles.footer}>
|
|
<Text style={styles.footerText}>{t.footer}</Text>
|
|
</Section>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
);
|
|
}
|
|
|
|
const styles = {
|
|
body: {
|
|
backgroundColor: "#f6f6f6",
|
|
fontFamily:
|
|
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
|
|
},
|
|
container: {
|
|
backgroundColor: "#ffffff",
|
|
margin: "0 auto",
|
|
padding: "40px 20px",
|
|
maxWidth: "600px",
|
|
},
|
|
logoSection: {
|
|
textAlign: "center" as const,
|
|
marginBottom: "30px",
|
|
},
|
|
logo: {
|
|
margin: "0 auto",
|
|
},
|
|
footer: {
|
|
marginTop: "40px",
|
|
paddingTop: "20px",
|
|
borderTop: "1px solid #e0e0e0",
|
|
},
|
|
footerText: {
|
|
color: "#666666",
|
|
fontSize: "12px",
|
|
textAlign: "center" as const,
|
|
},
|
|
};
|