Unchained
7b52ab585a
- Remove hardcoded api.manoonoils.com fetch patch - Make allowedSaleorUrls configurable via ALLOWED_SALEOR_URLS env var - Make email logo/company configurable via EMAIL_LOGO_URL, EMAIL_COMPANY_NAME - Add comprehensive README with deployment docs - Keep internal networking preference via SALEOR_API_URL env var
111 lines
2.3 KiB
TypeScript
111 lines
2.3 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: "",
|
|
company: "",
|
|
},
|
|
en: {
|
|
footer: "",
|
|
company: "",
|
|
},
|
|
de: {
|
|
footer: "",
|
|
company: "",
|
|
},
|
|
fr: {
|
|
footer: "",
|
|
company: "",
|
|
},
|
|
};
|
|
|
|
const COMPANY_NAME = process.env.EMAIL_COMPANY_NAME || "Store";
|
|
const LOGO_URL = process.env.EMAIL_LOGO_URL || "";
|
|
const DEFAULT_FOOTER = process.env.EMAIL_FOOTER || `${COMPANY_NAME} | ${process.env.SITE_URL || ""}`;
|
|
|
|
function getFooter(language: string): string {
|
|
const t = translations[language] || translations.en;
|
|
const footer = t.footer || DEFAULT_FOOTER;
|
|
return footer.replace("{company}", COMPANY_NAME).replace("{siteUrl}", process.env.SITE_URL || "");
|
|
}
|
|
|
|
export function BaseLayout({ children, previewText, language, siteUrl }: BaseLayoutProps) {
|
|
const footer = getFooter(language);
|
|
|
|
return (
|
|
<Html>
|
|
<Head />
|
|
<Preview>{previewText}</Preview>
|
|
<Body style={styles.body}>
|
|
<Container style={styles.container}>
|
|
{LOGO_URL && (
|
|
<Section style={styles.logoSection}>
|
|
<Img
|
|
src={LOGO_URL}
|
|
width="150"
|
|
height="auto"
|
|
alt={COMPANY_NAME}
|
|
style={styles.logo}
|
|
/>
|
|
</Section>
|
|
)}
|
|
{children}
|
|
<Section style={styles.footer}>
|
|
<Text style={styles.footerText}>{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,
|
|
},
|
|
};
|