manoon-headless/src/emails/OrderPaid.tsx

import { Button, Hr, Section, Text } from "@react-email/components";
import { BaseLayout } from "./BaseLayout";

interface OrderItem {
  id: string;
  name: string;
  quantity: number;
  price: string;
}

interface OrderPaidProps {
  language: string;
  orderId: string;
  orderNumber: string;
  customerName: string;
  items: OrderItem[];
  total: string;
  siteUrl: string;
}

const translations: Record<
  string,
  {
    title: string;
    preview: string;
    greeting: string;
    orderPaid: string;
    items: string;
    total: string;
    nextSteps: string;
    nextStepsText: string;
    questions: string;
  }
> = {
  sr: {
    title: "Plaćanje je primljeno!",
    preview: "Vaša uplata je zabeležena",
    greeting: "Poštovani {name},",
    orderPaid:
      "Plaćanje za vašu narudžbinu je primljeno. Hvala vam! Narudžbina će uskoro biti spremna za slanje.",
    items: "Artikli",
    total: "Ukupno",
    nextSteps: "Šta dalje?",
    nextStepsText:
      "Primićete još jedan email kada vaša narudžbina bude poslata. Možete očekivati dostavu u roku od 3-5 radnih dana.",
    questions: "Imate pitanja? Pišite nam na support@manoonoils.com",
  },
  en: {
    title: "Payment Received!",
    preview: "Your payment has been recorded",
    greeting: "Dear {name},",
    orderPaid:
      "Payment for your order has been received. Thank you! Your order will be prepared for shipping soon.",
    items: "Items",
    total: "Total",
    nextSteps: "What's next?",
    nextStepsText:
      "You will receive another email when your order ships. You can expect delivery within 3-5 business days.",
    questions: "Questions? Email us at support@manoonoils.com",
  },
  de: {
    title: "Zahlung erhalten!",
    preview: "Ihre Zahlung wurde verbucht",
    greeting: "Sehr geehrte/r {name},",
    orderPaid:
      "Zahlung für Ihre Bestellung ist eingegangen. Vielen Dank! Ihre Bestellung wird bald für den Versand vorbereitet.",
    items: "Artikel",
    total: "Gesamt",
    nextSteps: "Was kommt als nächstes?",
    nextStepsText:
      "Sie erhalten eine weitere E-Mail, wenn Ihre Bestellung versandt wird. Die Lieferung erfolgt innerhalb von 3-5 Werktagen.",
    questions: "Fragen? Schreiben Sie uns an support@manoonoils.com",
  },
  fr: {
    title: "Paiement reçu!",
    preview: "Votre paiement a été enregistré",
    greeting: "Cher(e) {name},",
    orderPaid:
      "Le paiement de votre commande a été reçu. Merci! Votre commande sera bientôt prête à être expédiée.",
    items: "Articles",
    total: "Total",
    nextSteps: "Et ensuite?",
    nextStepsText:
      "Vous recevrez un autre email lorsque votre commande sera expédiée. Vous pouvez vous attendre à une livraison dans 3-5 jours ouvrables.",
    questions: "Questions? Écrivez-nous à support@manoonoils.com",
  },
};

export function OrderPaid({
  language = "en",
  orderId,
  orderNumber,
  customerName,
  items,
  total,
  siteUrl,
}: OrderPaidProps) {
  const t = translations[language] || translations.en;

  return (
    <BaseLayout previewText={t.preview} language={language} siteUrl={siteUrl}>
      <Text style={styles.title}>{t.title}</Text>
      <Text style={styles.greeting}>{t.greeting.replace("{name}", customerName)}</Text>
      <Text style={styles.text}>{t.orderPaid}</Text>

      <Section style={styles.orderInfo}>
        <Text style={styles.orderNumber}>
          <strong>Order Number:</strong> {orderNumber}
        </Text>
      </Section>

      <Section style={styles.itemsSection}>
        <Text style={styles.sectionTitle}>{t.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}>{t.total}:</Text>
          <Text style={styles.totalValue}>{total}</Text>
        </Section>
      </Section>

      <Section style={styles.nextSteps}>
        <Text style={styles.nextStepsTitle}>{t.nextSteps}</Text>
        <Text style={styles.nextStepsText}>{t.nextStepsText}</Text>
      </Section>

      <Section style={styles.buttonSection}>
        <Button href={siteUrl} style={styles.button}>
          {language === "sr" ? "Nastavite kupovinu" : "Continue Shopping"}
        </Button>
      </Section>

      <Text style={styles.questions}>{t.questions}</Text>
    </BaseLayout>
  );
}

const styles = {
  title: {
    fontSize: "24px",
    fontWeight: "bold" as const,
    color: "#16a34a",
    marginBottom: "20px",
  },
  greeting: {
    fontSize: "16px",
    color: "#333333",
    marginBottom: "10px",
  },
  text: {
    fontSize: "14px",
    color: "#666666",
    marginBottom: "20px",
  },
  orderInfo: {
    backgroundColor: "#f0fdf4",
    padding: "15px",
    borderRadius: "8px",
    marginBottom: "20px",
  },
  orderNumber: {
    fontSize: "14px",
    color: "#333333",
    margin: "0",
  },
  itemsSection: {
    marginBottom: "20px",
  },
  sectionTitle: {
    fontSize: "16px",
    fontWeight: "bold" as const,
    color: "#1a1a1a",
    marginBottom: "10px",
  },
  hr: {
    borderColor: "#e0e0e0",
    margin: "10px 0",
  },
  itemRow: {
    display: "flex" as const,
    justifyContent: "space-between" as const,
    padding: "8px 0",
  },
  itemName: {
    fontSize: "14px",
    color: "#333333",
    margin: "0",
  },
  itemPrice: {
    fontSize: "14px",
    color: "#333333",
    margin: "0",
  },
  totalRow: {
    display: "flex" as const,
    justifyContent: "space-between" as const,
    padding: "8px 0",
  },
  totalLabel: {
    fontSize: "16px",
    fontWeight: "bold" as const,
    color: "#1a1a1a",
    margin: "0",
  },
  totalValue: {
    fontSize: "16px",
    fontWeight: "bold" as const,
    color: "#1a1a1a",
    margin: "0",
  },
  nextSteps: {
    backgroundColor: "#f9f9f9",
    padding: "15px",
    borderRadius: "8px",
    marginBottom: "20px",
  },
  nextStepsTitle: {
    fontSize: "14px",
    fontWeight: "bold" as const,
    color: "#1a1a1a",
    marginBottom: "5px",
  },
  nextStepsText: {
    fontSize: "14px",
    color: "#666666",
    margin: "0",
  },
  buttonSection: {
    textAlign: "center" as const,
    marginBottom: "20px",
  },
  button: {
    backgroundColor: "#000000",
    color: "#ffffff",
    padding: "12px 30px",
    borderRadius: "4px",
    fontSize: "14px",
    fontWeight: "bold" as const,
    textDecoration: "none",
  },
  questions: {
    fontSize: "14px",
    color: "#666666",
  },
};