feat: complete saleor core extensions app with React email templates

- Order confirmation, shipped, and cancelled email templates - Uses @react-email/components for professional HTML emails - Sends admin and customer notifications - Integrates with Resend for email delivery - Webhook handlers for ORDER_CREATED, ORDER_FULFILLED, ORDER_CANCELLED - Docker image optimized for production - Persistent auth data storage via PVC
2026-03-27 05:21:56 +02:00
commit 33fb9a8452
76 changed files with 209115 additions and 0 deletions
@@ -0,0 +1,98 @@
+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,
+  },
+};