feat(emails): implement transactional email system with Resend

- 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

src/emails/BaseLayout.tsx

@@ -49,7 +49,7 @@ export function BaseLayout({ children, previewText, language, siteUrl }: BaseLay
         <Container style={styles.container}>
           <Section style={styles.logoSection}>
             <Img
-              src={`${siteUrl}/logo.png`}
+              src="https://minio-api.nodecrew.me/manoon-media/2024/09/cropped-manoon-logo_256x-1-1.png"
               width="150"
               height="auto"
               alt="ManoonOils"

src/emails/OrderConfirmation.tsx

@@ -17,7 +17,11 @@ interface OrderConfirmationProps {
   items: OrderItem[];
   total: string;
   shippingAddress?: string;
+  billingAddress?: string;
+  phone?: string;
   siteUrl: string;
+  dashboardUrl?: string;
+  isAdmin?: boolean;
 }
 
 const translations: Record<
@@ -34,6 +38,15 @@ const translations: Record<
     shippingTo: string;
     questions: string;
     thankYou: string;
+    adminTitle: string;
+    adminPreview: string;
+    adminGreeting: string;
+    adminMessage: string;
+    customerLabel: string;
+    customerEmailLabel: string;
+    billingAddressLabel: string;
+    phoneLabel: string;
+    viewDashboard: string;
   }
 > = {
   sr: {
@@ -48,6 +61,15 @@ const translations: Record<
     shippingTo: "Adresa za dostavu",
     questions: "Imate pitanja? Pišite nam na support@manoonoils.com",
     thankYou: "Hvala Vam što kupujete kod nas!",
+    adminTitle: "Nova narudžbina!",
+    adminPreview: "Nova narudžbina je primljena",
+    adminGreeting: "Čestitamo na prodaji!",
+    adminMessage: "Nova narudžbina je upravo primljena. Detalji su ispod:",
+    customerLabel: "Kupac",
+    customerEmailLabel: "Email kupca",
+    billingAddressLabel: "Adresa za naplatu",
+    phoneLabel: "Telefon",
+    viewDashboard: "Pogledaj u Dashboardu",
   },
   en: {
     title: "Order Confirmation",
@@ -62,6 +84,15 @@ const translations: Record<
     shippingTo: "Shipping address",
     questions: "Questions? Email us at support@manoonoils.com",
     thankYou: "Thank you for shopping with us!",
+    adminTitle: "New Order! 🎉",
+    adminPreview: "A new order has been received",
+    adminGreeting: "Congratulations on the sale!",
+    adminMessage: "A new order has just been placed. Details below:",
+    customerLabel: "Customer",
+    customerEmailLabel: "Customer Email",
+    billingAddressLabel: "Billing Address",
+    phoneLabel: "Phone",
+    viewDashboard: "View in Dashboard",
   },
   de: {
     title: "Bestellungsbestätigung",
@@ -76,6 +107,15 @@ const translations: Record<
     shippingTo: "Lieferadresse",
     questions: "Fragen? Schreiben Sie uns an support@manoonoils.com",
     thankYou: "Vielen Dank für Ihren Einkauf!",
+    adminTitle: "Neue Bestellung! 🎉",
+    adminPreview: "Eine neue Bestellung wurde erhalten",
+    adminGreeting: "Glückwunsch zum Verkauf!",
+    adminMessage: "Eine neue Bestellung wurde soeben aufgegeben. Details unten:",
+    customerLabel: "Kunde",
+    customerEmailLabel: "Kunden-E-Mail",
+    billingAddressLabel: "Rechnungsadresse",
+    phoneLabel: "Telefon",
+    viewDashboard: "Im Dashboard anzeigen",
   },
   fr: {
     title: "Confirmation de commande",
@@ -90,6 +130,15 @@ const translations: Record<
     shippingTo: "Adresse de livraison",
     questions: "Questions? Écrivez-nous à support@manoonoils.com",
     thankYou: "Merci d'avoir Magasiné avec nous!",
+    adminTitle: "Nouvelle commande! 🎉",
+    adminPreview: "Une nouvelle commande a été reçue",
+    adminGreeting: "Félicitations pour la vente!",
+    adminMessage: "Une nouvelle commande vient d'être passée. Détails ci-dessous:",
+    customerLabel: "Client",
+    customerEmailLabel: "Email du client",
+    billingAddressLabel: "Adresse de facturation",
+    phoneLabel: "Téléphone",
+    viewDashboard: "Voir dans le Dashboard",
   },
 };
 
@@ -102,10 +151,82 @@ export function OrderConfirmation({
   items,
   total,
   shippingAddress,
+  billingAddress,
+  phone,
   siteUrl,
+  dashboardUrl,
+  isAdmin = false,
 }: OrderConfirmationProps) {
   const t = translations[language] || translations.en;
 
+  // For admin emails, always use English
+  const adminT = translations["en"];
+
+  if (isAdmin) {
+    return (
+      <BaseLayout previewText={adminT.adminPreview} language="en" siteUrl={siteUrl}>
+        <Text style={styles.title}>{adminT.adminTitle}</Text>
+        <Text style={styles.greeting}>{adminT.adminGreeting}</Text>
+        <Text style={styles.text}>{adminT.adminMessage}</Text>
+
+        <Section style={styles.orderInfo}>
+          <Text style={styles.orderNumber}>
+            <strong>{adminT.orderNumber}:</strong> {orderNumber}
+          </Text>
+          <Text style={styles.customerInfo}>
+            <strong>{adminT.customerLabel}:</strong> {customerName}
+          </Text>
+          <Text style={styles.customerInfo}>
+            <strong>{adminT.customerEmailLabel}:</strong> {customerEmail}
+          </Text>
+          {phone && (
+            <Text style={styles.customerInfo}>
+              <strong>{adminT.phoneLabel}:</strong> {phone}
+            </Text>
+          )}
+        </Section>
+
+        <Section style={styles.itemsSection}>
+          <Text style={styles.sectionTitle}>{adminT.items}</Text>
+          <Hr style={styles.hr} />
+          {items.map((item) => (
+            <Section key={item.id} style={styles.itemRow}>
+              <Text style={styles.itemName}>
+                {item.quantity}x {item.name}
+              </Text>
+              <Text style={styles.itemPrice}>{item.price}</Text>
+            </Section>
+          ))}
+          <Hr style={styles.hr} />
+          <Section style={styles.totalRow}>
+            <Text style={styles.totalLabel}>{adminT.total}:</Text>
+            <Text style={styles.totalValue}>{total}</Text>
+          </Section>
+        </Section>
+
+        {shippingAddress && (
+          <Section style={styles.shippingSection}>
+            <Text style={styles.sectionTitle}>{adminT.shippingTo}</Text>
+            <Text style={styles.shippingAddress}>{shippingAddress}</Text>
+          </Section>
+        )}
+
+        {billingAddress && (
+          <Section style={styles.shippingSection}>
+            <Text style={styles.sectionTitle}>{adminT.billingAddressLabel}</Text>
+            <Text style={styles.shippingAddress}>{billingAddress}</Text>
+          </Section>
+        )}
+
+        <Section style={styles.buttonSection}>
+          <Button href={`${dashboardUrl}/orders/${orderId}`} style={styles.button}>
+            {adminT.viewDashboard}
+          </Button>
+        </Section>
+      </BaseLayout>
+    );
+  }
+
   return (
     <BaseLayout previewText={t.preview} language={language} siteUrl={siteUrl}>
       <Text style={styles.title}>{t.title}</Text>
@@ -187,7 +308,12 @@ const styles = {
   orderNumber: {
     fontSize: "14px",
     color: "#333333",
-    margin: "0",
+    margin: "0 0 8px 0",
+  },
+  customerInfo: {
+    fontSize: "14px",
+    color: "#333333",
+    margin: "0 0 4px 0",
   },
   itemsSection: {
     marginBottom: "20px",