feat: Add Saleor webhook handler with Resend email integration

- Add Resend SDK for transactional emails - Create React Email templates for order events: - OrderConfirmation - OrderShipped - OrderCancelled - OrderPaid - Multi-language support (SR, EN, DE, FR) - Customer emails in their language - Admin emails in English to me@hytham.me and tamara@hytham.me - Webhook handler at /api/webhooks/saleor - Supports: ORDER_CONFIRMED, ORDER_FULLY_PAID, ORDER_CANCELLED, ORDER_FULFILLED - Add GraphQL mutation to create webhooks in Saleor - Add Resend API key to .env.local
2026-03-25 10:10:57 +02:00
parent 00f63c32f8
commit b8b3a57e6f
11 changed files with 2249 additions and 0 deletions
--- a/src/emails/BaseLayout.tsx
+++ b/src/emails/BaseLayout.tsx
@@ -0,0 +1,97 @@
+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;
+}
+
+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 }: 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://manoonoils.com/logo.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,
+  },
+};